/* body {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    -webkit-text-size-adjust: unset !important;
} */

.calendar-container {
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* gap: 20px; */
    height: 45vh;
    overflow: scroll;
    /* padding: 10px 5px; */
    border: 2px solid gray;
    border-radius: 3px;
}

.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: .9em;
    font-weight: 700;
}

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

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

.day {
    font-size: .6em;
}

.day:not(:empty) {
    /* padding: 1px;
    border: 1px solid #eee; */
    /* font-size: .6em; */
    border: 1px solid #8080804a;
    border-radius: 3px;
}

.day.today {
    background-color: #0b00da;
    color: white !important;
    border-radius: 10%;
}

.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: #838383;
    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;
    }
}