.calendar-container {
    height: 238px;
    min-height: fit-content;
    padding: 16px;
    font-size: 12px;
}

.calendar-container.gregorian {
    direction: ltr;
}

.calendar-container.jalali {
    direction: rtl;
}

.calendar-container .divider {
    height: 1px;
    border-radius: 20px;
    background-color: #d1d0d4;
    margin: 6px 0 !important;
}

.calendar-container .days-container {
    padding-top: 4px;
    overflow-y: auto;
    /* min-height: fit-content; */
}

.calendar-container .change-icons {
    cursor: pointer;
}

.calendar-container .change-icons #mode-btn {
    width: 16px;
    height: 16px;
}

.calendar-container .change-icons img {
    width: 14px;
    height: 14px;
}

.calendar-container #selected-date {
    font-size: 13px;
}

.calendar-container .weekday {
    font-size: 11px;
}

.calendar-container #days-box,
.calendar-container .week-box,
.calendar-container .years-box {
    grid-template-columns: repeat(7, 1fr);
    column-gap: 5px;
    row-gap: 10px;
}

.calendar-container .months-box {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
}

.calendar-container .years-box {
    overflow-y: auto;
    padding: 8px;
}

.calendar-container .day-cell,
.calendar-container .empty-day,
.calendar-container .year-cell,
.calendar-container .month-cell {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
}

.calendar-container .month-cell {
    font-size: 13px !important;
}

.calendar-container .selected-day,
.calendar-container .today {
    border: 1px solid #3cbbaa;
    border-radius: 12px;
    padding-top: 3px;
    padding-inline: 1px;
    padding-bottom: 0;
}

.calendar-container .selected-day {
    background-color: #3cbbaa;
    color: #ffffff;
}

#calendar-popover {
    border: 1px solid #f5f5f5;
    border-radius: 8px;
}

.calendar-switch {
    min-height: unset;
}

.calendar-container.gregorian .calendar-time {
    border-left: 1px solid #d1d0d4;
    padding-left: 8px;
}

.calendar-container.jalali .calendar-time {
    border-right: 1px solid #d1d0d4;
    padding-right: 8px;
}

.calendar-container.gregorian #prev-btn {
    transform: rotate(180deg);
}

.calendar-container.jalali #next-btn {
    transform: rotate(180deg);   
}

@media (max-width: 576px) {
    #calendar-popover {
        position: fixed !important;
        width: 100vw !important;
        bottom: 0;
        top: auto !important;
        right: 0;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        max-height: max-content;
    }
    
    .calendar-container {
        height: 240px;
    }
}