/* Shared date picker presentation for every authenticated and public form. */
.datepicker.datepicker-dropdown {
    z-index: 99999999 !important;
    min-width: 280px;
    max-width: min(340px, calc(100vw - 20px));
    padding: 14px 16px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 16px 48px rgba(15, 23, 42, .22), 0 4px 16px rgba(15, 23, 42, .12) !important;
    font-family: inherit;
}

.datepicker table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: 8px !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    padding: 6px 8px !important;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.datepicker table tr th.datepicker-switch {
    color: var(--primary-color, #0284c7) !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
}

.datepicker table tr th.datepicker-switch:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover {
    background: #eff6ff !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.month:hover,
.datepicker table tr td.year:hover,
.datepicker table tr td.decade:hover {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    cursor: pointer !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background: var(--primary-color, #0284c7) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, .3) !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: #fef08a !important;
    color: #854d0e !important;
}

[data-theme="dark"] .datepicker.datepicker-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .datepicker table tr th.datepicker-switch {
    color: var(--primary-light-color, #38bdf8) !important;
}

[data-theme="dark"] .datepicker table tr td.day {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .datepicker table tr td.day:hover,
[data-theme="dark"] .datepicker table tr td.month:hover,
[data-theme="dark"] .datepicker table tr td.year:hover {
    background: #334155 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .datepicker.datepicker-dropdown {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 24px);
        max-width: 330px;
        min-width: 275px;
        padding: 12px 10px !important;
        border-radius: 16px !important;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        padding: 6px 2px !important;
    }
}