* {
     padding: 0;
     margin: 0;
 }

 html {
     height: 100%;
 }

 body {
     font-family: "Roboto", sans-serif;
     font-weight: 400;
     font-style: normal;
     background: #f6f6f6;
     --brinkmann-blue: #009ee0;
     --brinkmann-pink: #db0099;
     font-size: 14px;
     color: #777;
     height: 100%;
 }

 #app {
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .login-wrap {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
 }

 .login-wrap2 {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
 }

 .login-wrap .messages {
     align-self: center;
     max-width: 250px;
     margin-bottom: 25px;
     background: var(--brinkmann-pink);
     color: #fff;
     box-sizing: border-box;
     padding: 8px 12px;
 }

 ul.typo3-messages {
     text-align: center;
     margin-top: 50px;
     position: absolute;
     width: 100%;
 }

 ul.typo3-messages li {
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
     background: var(--brinkmann-blue);
     color: #fff;
     padding: 8px 12px;
 }

 .login-wrap .messages.welcome {
     display: none;
 }

 .login-wrap.recovery ul {
     font-size: 12px;
     list-style: none;
 }

 .login-wrap.recovery ul.errors {
     background: var(--brinkmann-pink);
     color: #fff;
     padding: 8px 12px;
     margin-top: 12px;
     margin-bottom: 12px;
 }

 .login-wrap.recovery ul.requirements {
     margin-top: 12px;
     margin-bottom: 12px;
 }

 .login-wrap a.back,
 .login-wrap a.forgot {
     display: block;
     margin-top: 12px;
     text-decoration: none;
     color: var(--brinkmann-blue);
     text-align: center;
 }


 .login-inner {
     align-self: center;
     background: #fff;
     border: 1px solid #e4e4e4;
     border-radius: 5px;
     padding: 2rem;
 }

 .login-inner .logo-wrap {
     text-align: center;
     margin-bottom: 12px;
 }

 .login-inner .logo-wrap img {
     width: 120px;
     height: auto;
 }

 .form-field {
     margin-bottom: 25px;
 }

 .form-field.nomarg {
     margin-bottom: 0;
 }

 .form-field label {
     display: block;
     font-size: 12px;
     margin-bottom: 3px;
 }

 .form-field input {
     padding: 7px 8px;
     min-width: 250px;
     width: 100%;
     border: 1px solid #cccc;
     border-radius: 3px;
     outline: none;
     box-sizing: border-box;
     color:#777;
 }

 input[type="submit"] {
     width: 100%;
     padding: 10px 8px;
     background: var(--brinkmann-blue);
     color: #fff;
     border: none;
     cursor: pointer;
 }

 input[type="submit"]:hover {
     opacity: 0.7;
 }

 p {
     margin: 0;
 }

 header {
     position: sticky;
     top: 0;
 }

 .topbar {
     display: flex;
     justify-content: space-between;
     color: #fff;
     background: var(--brinkmann-blue);
 }

 .topbar.loading {
     background: var(--brinkmann-pink);
 }

 .topbar p.info {
     text-align: center;
     align-self: center;
 }

 .topbar img {
     height: 40px;
     width: auto;
     margin-left: 15px;
 }

 .logout-wrap {
     align-self: center;
     display: flex;
     margin-right: 15px;
 }

 .logout-wrap p.logout {
     margin-left: 5px;
     cursor: pointer;
 }

 .logout-wrap p.logout:hover {
     opacity: 0.7;
 }

 .navbar {
     background: #f2f1ef;
     display: flex;
     justify-content: space-between;
 }

 .navbar ul {
     display: flex;
     list-style: none;
 }

 .navbar ul li a {
     display: block;
     padding: 6px 15px;
     text-decoration: none;
     color: #333;
 }

 .navbar ul li a.active,
 .navbar ul li a:hover {
     background: var(--brinkmann-blue);
     color: #fff
 }

 #subheader {
     padding: 0px 15px;
     height: 50px;
     border-top: 1px solid #e3e3e3;
     border-bottom: 1px solid #e3e3e3;
     position: sticky;
     top: 68px;
     font-size: 12px;
     display: flex;   
 }

 #subheader .usergroup-select {
     margin-right: 30px;
     cursor: pointer;
     align-self: center;
 }

 #subheader .usergroup-select.selected {
     color: var(--brinkmann-blue);
 }

 #subheader .usergroup-select i {
     margin-right: 4px;
 }

 #subheader button {
     align-self: center;
 }

 .spacer {
     flex-grow: 1;
 }

 .icon-control {
     display: flex;
     cursor: pointer;
     background: #fff;
     padding: 6px 12px 6px 3px;    
     border: 1px solid #ccc;
     border-radius: 3px;
 }


 .icon-control p,
 .icon-control i {
     align-self: center;
 }

 .icon-control i {
     font-size: 14px;
     color: #fff;
     margin-right: 5px;
     color: var(--brinkmann-blue);
 }

  .icon-control.important i {   
     color: var(--brinkmann-pink);
 }

 .icon-control:hover p{
     color: var(--brinkmann-blue);
 }
 .icon-control.important:hover p{
     color: var(--brinkmann-pink);
 }

 .icon-control.file-input {
     position: relative;
 }

 .icon-control input[type="file"] {
     display: none;
 }

 #container {
     width: 100%;
     position: relative;
 }

 .view {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     height: 100%;
 }

 #content-top {
     padding: 16px 15px;
     display: none;
 }

 #content-bottom {
     top: 50%;
     left: 0;
     width: 100%;
     height: 50%;
     box-sizing: border-box;
     position: absolute;
     overflow: hidden;
 }

 .side-panel {
     width: 290px;
     height: 100%;
     right: 0;
     top: 0;
     box-sizing: border-box;
     background: #f2f1ef;     
 }

 .side-panel-body {
     padding: 20px;
 }

 .side-panel-body .form-field {
     margin-bottom: 15px;
 }

 .side-panel-body button {
     background: #fff;   
     color:#333; 
 }
 .side-panel-body button i{      
     color:var(--brinkmann-blue); 
 }
 .side-panel-body .button-wrap {
     margin-top: 35px;
     display: flex;
     justify-content: space-between;
 }

 fieldset {
     border: 1px solid #ccc;
     padding: 16px 15px;
 }

 .form.employee .flex {}

 .form.employee .right fieldset {
     display: block;
 }

 .form.employee .form-field {
     width: 25%;
 }

 .form.employee .form-field input {
     max-width: 90%;
 }

 .password-toggle {    
     cursor: pointer;
     display: flex;    
     margin-top: 25px; 
 }

 .password-toggle i {     
     margin-right: 5px;
     font-size: 20px;
 }

 .password-toggle span {
     align-self: center;
 }
 .content {
     flex-grow: 1;
 }

 .content.col2 {
     display: flex;
 }

 #table-wrap {
     flex-grow: 1;
     overflow-y: auto;
     scrollbar-width: 20px;
     overflow-x: hidden;
     position: relative;
 }

 table {
     position: absolute;
     left: 0;
     width: 100%;
     border-collapse: collapse;
     width: 100%;
     font-size: 12px;
 }

 tr:first-child th {
     position: sticky;
     top: 0;
 }

 tr.selected td{
     color: var(--brinkmann-blue) !important;
    
 }

 tr:hover td {
     background: #f6f6f6;
 }

 tr.disabled {
     background: #e3e3e3 !important;
     color: #333 !important;
 }

 th {
     background: #f2f1ef;
     font-weight: normal;
     padding: 4px 10px;
     text-align: left;
     border-right: 1px solid #f6f6f6;
 }

 th:first-child {
     border-bottom: 1px solid #f6f6f6;
 }

 td {
     border: 1px solid #e3e3e3;
     padding: 4px 10px;
     height: 18px;
     cursor: pointer;
     background: #fff;
 }

 /*
 td:first-child {
     text-align: center;
     background: #e3e3e3;
     width: 25px;
     padding-left: 0;
     padding-right: 0;
     border-bottom: 1px solid #f6f6f6;
     color: #333 !important;
 }
     */

 td i {
     font-size: 20px;
     color: #fff;
 }

 tr.employee td:first-child {
     user-select: none;
     cursor: pointer;
     padding: 3px;
 }

 tr.employee td.inactive {
     background: #eee
 }

 tr.date td {
     text-align: center;
     background-color: #009ee0;
     color: #fff;
 }

 tr.date td:first-child {
     border-bottom-color: #009ee0;
 }

 tr.employee td:first-child {
     background-color: #009ee0;
     color: #fff;
     width: 150px;
 }

 tr.project td {
     position: relative;
     height: 25px;
     background-color: aliceblue;
 }

 tr.project td:first-child {}

 div.project {
     position: absolute;
     height: 100%;
     top: 0;
     left: 0;
     z-index: 1;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
     cursor: pointer;
 }

 div.project.selected {
     border: 3px solid red;
 }

 div.project p {}

 .projectrow-0 {
     background-color: pink !important;
 }

 .projectrow-1 {
     background-color: cadetblue !important
 }

 .projectrow-2 {
     background-color: chocolate !important;
 }

 .projectrow-3 {
     background-color: beige !important;
 }

 .month-select {
     display: flex;
 }

 .month-select label,
 .month-select i {
     align-self: center;
 }

 .month-select i {
     font-size: 15px;
     margin-right: 5px;
     margin-left: 5px;
     cursor: pointer;
 }

 label {
     margin: 0;
 }

 .tools {
     align-self: center;
 }

 .private-schedule-view .dates-wrap {
     display: flex;
     flex-wrap: wrap;
 }

 .private-schedule-view .date-cell {
     width: calc((100% / 7) - 10px);
     border: 1px solid aliceblue;
     margin: 5px;
     position: relative;
 }

 .private-schedule-view .date-cell img {
     width: 100%;
     height: auto;
 }

 .private-schedule-view .date-cell-inner {
     display: flex;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
 }

 .private-schedule-view .date-cell-inner-day {
     position: absolute;
     left: 5px;
     top: 5px;
 }

 .private-schedule-view .date-cell-inner-info {
     align-self: center;
     text-align: center;
     width: 100%;
 }

 progress {
     visibility: hidden;
 }

 progress.active {
     visibility: visible;
 }

 .api-link {
     display: none;
 }


 @media (max-width: 768px) {
     .private-schedule-view .dates-wrap {
         display: block;
     }

     .private-schedule-view .date-cell {
         width: 100%;
         margin: 0;
         margin-bottom: 5px;
         position: static;
     }

     .private-schedule-view .date-cell img {
         display: none;
     }

     .private-schedule-view .date-cell-inner {
         display: flex;
         position: static;
     }

     .private-schedule-view .date-cell-inner-day {
         position: static;
         margin: 5px;
     }
 }