* {
     padding: 0;
     margin: 0;
 }

 body {
     font-family: "Roboto", sans-serif;
     font-weight: 400;
     font-style: normal;
     --pico-form-element-background-color: green;
 }

 p {
     margin: 0;
 }

 nav{
    position: sticky;
    top:0;
    background: #fff;
    z-index: 1000;
 }

 nav li a.active{
    text-decoration: underline;
 }

 table {
     border: 1px solid aliceblue;
     border-collapse: collapse;
     width: 100%;
 }

 td {
     border: 1px solid aliceblue;
     font-size: 13px;
     padding: 1px;
     height: 18px;
 }

 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%;
 }

 @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;
     }
 }