/* Scoped fixes for the jQuery UI calendar used by frontend form date fields. */
.ui-datepicker {
    width: 18rem;
    max-width: calc(100vw - 24px);
    padding: 0.5rem;
    border: 1px solid #d8e0e4;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(38, 50, 56, 0.18);
    z-index: 10000 !important;
}

.ui-datepicker .ui-datepicker-header {
    border: 0;
    border-radius: 4px;
    background: #49cdd0;
    color: #fff;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 3px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 3px;
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.2);
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 2px;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 46%;
    height: 28px;
    margin: 0 2%;
    padding: 2px 4px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 3px;
    background: #fff;
    color: #36474f;
    font-size: 13px;
}

.ui-datepicker table {
    margin: 0.35rem 0 0;
    font-size: 13px;
}

.ui-datepicker th {
    padding: 0.45rem 0.2rem;
    color: #53656d;
}

.ui-datepicker td span,
.ui-datepicker td a {
    padding: 0.45rem;
    border: 0 !important;
    border-radius: 3px;
    background: transparent !important;
    text-align: center;
}

.ui-datepicker td a:hover,
.ui-datepicker td .ui-state-active {
    background: #49cdd0 !important;
    color: #fff !important;
}

.ui-datepicker td .ui-state-highlight:not(.ui-state-active) {
    background: #e8fafa !important;
    color: #287f91 !important;
}

@media (max-width: 480px) {
    .ui-datepicker {
        width: calc(100vw - 24px);
        left: 12px !important;
    }
}