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

 body {
     /* display: flex; */
     /* background: #edecec; */
     min-height: 100vh;
     padding: 0 3px;
     align-items: center;
     justify-content: center;
 }

 .calendar-container-single {
     /* background: #484747; */
     /* width: 320px; */
     border-radius: 10px;
     /* box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); */
     /* color: rgb(46, 45, 45) !important; */
     top: 6%;
     /* max-height: 340px !important;
     min-height: 340px !important; */
 }

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

 /* 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;
 }

 /* header .calendar-navigation span {
     height: 40px;
     width: 40px;
     margin: 0 2px;
     cursor: pointer;
     text-align: center;
     line-height: 45px;
     border-radius: 50%;
     user-select: none;
     font-size: 1.4rem;
 } */

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

 .calendar-body ul {
     list-style: none;
     flex-wrap: wrap;
     display: flex;
     text-align: center;
     justify-content: space-between;
     align-items: center;
     align-content: flex-start;
 }

 .calendar-body .calendar-dates {
     margin-bottom: 20px;
     width: 100%;
     min-height: 200px !important;
     max-height: 200px !important;
 }

 .calendar-body li {
     /* width: calc(100% / 7); */
     /* height: 30px; */
     line-height: 35px;
     font-size: 0.9rem;
     /* color: #414141; */
     /* margin-top: 10px; */
     position: relative;
     z-index: 1;
     cursor: pointer;
     text-align: center;
     box-sizing: border-box;
     width: 13%;
     /* color: white; */
 }

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

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

 .calendar-dates li.active {
     color: #fff;
     background-color: #0dcaf0;
     border-radius: 5px;
 }

 .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 {
     margin: 1px;
 }

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

 .calendar-dates li.highlight {
     background: #628cff96 !important;
     border: 1px solid #047db4 !important;
     border-radius: 5px;
     position: relative;
     z-index: 10;
     /* height: 30px; */
     line-height: 35px;
     text-align: center;
     width: calc(100% / 7);
     width: 13%;
 }

 .special {
     background-color: rgb(0, 233, 0);
     /* border-radius: 5px; */
     color: black !important;
     font-weight: 800;
 }

 .goodDay {
     background-color: rgb(184, 243, 141);
     /* border-radius: 5px; */
     color: rgb(0, 0, 0) !important;
     font-weight: 600;
     border: 1px solid green;
 }

 .badDays {
     background-color: rgb(255, 124, 124);
     /* border-radius: 5px; */
     color: rgb(255, 255, 255) !important;
     font-weight: 600;
     border: 1px solid rgb(243, 0, 0);
 }

 .neutral {
     background-color: rgb(168 168 168 / 60%);
     /* border-radius: 5px !important; */
     color: rgb(0, 0, 0) !important;
     font-weight: 600;
     border: 1px solid rgb(0, 0, 0);
 }


 #chart {
     width: 100% !important;
     height: 300px;
 }

 #chart>div {
     width: 100% !important;
     height: 300px;
 }