body {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    /* padding: 20px; */
    /* background-color: #484747 !important; */
    -webkit-text-size-adjust: unset !important;
    /* color: #ffffff; */
}

.calendar-containerXX {
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* gap: 20px; */
    /* height: 25vh; */
    overflow: scroll;
    padding: 5px;
    margin: 10px 0;
    border: 2px solid rgb(63, 63, 63);
    border-radius: 5px;
}

.month-calendar {
    /* background-color: white; */
    border-radius: 8px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); */
    padding: 2px;
    text-align: center;
    margin-top: 0px;
}

.month-title {
    font-weight: 500;
    /* margin: 10px 0px; */
    /* color: #333; */
    font-size: .8em;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 1px;
    color: #dc3545;
    /* padding: 5px 0px; */
    font-weight: bold;
    font-size: .6em;
}

.days {
    display: inline-grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 1px;
    align-items: baseline;
}

.calendar-dates li {
    border-radius: 3px;
    margin: 1px;
}

.day {
    /* padding: 1px; */
    /* border: 1px solid #eee; */
    font-size: .5em;
    border-radius: 3px;
}

.day.today {
    background-color: #007bff;
    color: white;
    /* border-radius: 20%; */
}

.day.data {
    background-color: #f30707;
    color: white;
    /* border-radius: 5%; */
}

.day.special {
    background-color: #02e811;
    color: white;
    /* border-radius: 5%; */
    font-weight: bold;
}

.day.neutral {
    background-color: #d7d7d7;
    color: white;
    /* border-radius: 5%; */
    /* font-weight: bold; */
}



/* @media (max-width: 768px) {
    .calendar-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .calendar-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .calendar-container {
        grid-template-columns: repeat(3, 1fr);
    }
} */

/* If the screen size is between 1500px and 2000px wide, do something */
@media only screen and (min-width: 769px) and (max-width: 1000px) {
    .calendar-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 480px) and (max-width: 768.99px) {
    .calendar-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 180px) and (max-width: 479.99px) {
    .calendar-container {
        grid-template-columns: repeat(1, 1fr);
    }
}


@media (min-width: 868px) {
    .weekdays {
        font-size: 1em;
    }

    .days {
        font-size: .5em;
    }

    .day {
        font-size: 1.2em;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}