* {
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
     /* color: white !important; */
 }

 body {
     /* display: flex; */
     max-height: 100vh;
     padding: 0 3px;
     align-items: center;
     justify-content: center;
     overflow-x: hidden;
 }

 .calendar-container-single {
     /* background: #484747; */
     /* width: 320px; */
     border-radius: 10px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
     color: rgb(108, 106, 106) !important;
     top: 6%;
     /* min-height: 300px; */
     display: flex;
     align-items: flex-start;
     justify-content: space-evenly;
 }

 .calendar-container-single header {
     display: flex;
     align-items: center;
     padding: 15px 20px 8px;
     justify-content: end;
 }

 /* If the screen size is 1200px wide or more, do something */
 /* @media (min-width: 500px) {
     .calendar-container-single {
         width: 320px;
     }
 } */

 header .calendar-navigation {
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 header .calendar-navigation span {
     /* height: 35px;
     width: 35px;
     margin: 0 2px;
     cursor: pointer;
     text-align: center;
     line-height: 35px;

     user-select: none;
     color: #ffffff;
     font-size: 1.4rem;
     border: 1px solid; */
     border-radius: 50%;
 }

 /* .calendar-navigation span:last-child {
     margin-right: -8px;
 } */

 header .calendar-navigation span:hover {
     background: #ee38f3;
 }

 header .calendar-current-date {
     font-weight: 500;
     font-size: 1.5em;
 }

 .calendar-body {
     padding: 10px;
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
 }

 .calendar-body ul {
     list-style: none;
     flex-wrap: wrap;
     display: flex;
     text-align: center;
     align-content: flex-end;
     align-items: stretch;
 }

 .calendar-body .calendar-dates {
     margin-bottom: 10px;
     width: 100%;
 }

 .calendar-body li {
     width: calc(93% / 7);
     /* height: 30px; */
     line-height: 33px;
     font-size: 0.9rem;
     /* color: #414141; */
     margin-top: 1px;
     position: relative;
     z-index: 1;
     cursor: pointer;
     text-align: center;
     box-sizing: border-box;
     color: rgb(7, 7, 7);
     display: flex;
     justify-content: space-around;
 }

 .calendar-body .calendar-weekdays li {
     cursor: default;
     font-size: 1em;
     color: #ff7878 !important;
     font-weight: bold !important;
 }

 .calendar-dates li.inactive {
     color: #aaa;
     cursor: default;
 }

 .calendar-dates li.active {
     color: #013480;
     border: 2px solid blue;
     border-radius: 5px;
     font-size: 1em;
     font-weight: 600;
     background-color: #86b7fe7a;
 }

 .calendar-dates li::before {
     position: absolute;
     content: "";
     z-index: -1;
     top: 50%;
     left: 50%;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     transform: translate(-50%, -50%);
 }

 /* .calendar-dates li.active::before {
    background: #6964ff;
} */

 /* .calendar-dates li:not(.active):not(.highlight):hover::before {
     background: #858484;
 } */

 .calendar-dates li.highlight {
     background: #00dbff !important;
     border: 1px solid #0612fb !important;
     border-radius: 10%;
     position: relative;
     z-index: 10;
     /* height: 30px; */
     line-height: 33px;
     text-align: center;
     width: calc(93% / 7);
     font-weight: 800;
     color: black;
 }

 .special {
     background-color: rgb(0, 233, 0);
     border-radius: 20%;
     color: black !important;
     font-weight: 800;
 }

 .hasRecs {
     background-color: rgba(187, 255, 138, 0.848);
     border-radius: 10%;
     color: black !important;
     font-weight: 600;
     border: 1px solid green;
 }

 /* .noRecs {
     background-color: rgba(242, 5, 108, 0.85);
     border-radius: 20%;
     color: black !important;
     font-weight: 600;
     border: 1px solid green;
 } */

 .badDays {
     background-color: rgb(255, 118, 118);
     border-radius: 20%;
     color: black !important;
     font-weight: 800;
     border: 2px solid rgb(243, 0, 0);
 }

 .neutral {
     background-color: rgb(217, 215, 215);
     border-radius: 20% !important;
     color: black !important;
     font-weight: 800;
     border: 2px solid rgb(0, 0, 0);
 }

 /* .calendar-navigation span {
     font-size: em;
 } */