.rotate-180{
    transform: rotate(180deg);
}
.calendar{
    top: 100%;
}
.calendar td{
    width: calc(100%/7);
    transition: 0.1s;
}
.date-hover:hover{
    background-color:  var(--bs-light);
    color: var(--bs-white);
    cursor: pointer;
}
.calendar-arrow{
    max-width: 8px;
}
#calendar-previous-month, #calendar-next-month{
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: 0.1s;
}
#calendar-previous-month:hover, #calendar-next-month:hover{
    background-color: var(--bs-secondary-bg-subtle);
}
.calendar-holder > .cursor-pointer > .input-field-padding {
    border-top: 2px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 2px solid transparent;
}
@media (max-width: 400px){
    .calendar-header{
        font-size: 14px !important;
    }
}
@media all and (max-width: 520px){
    .calendar{
        padding: 1rem !important;
    }
}