.apx-date-picker,
.apx-time-picker{
    position:fixed;
    z-index:3000;
    background:#fff;
    border:1px solid #f0d4bc;
    border-radius:14px;
    box-shadow:0 16px 34px rgba(0,0,0,.14);
    user-select:none;
}

.apx-date-picker.d-none,
.apx-time-picker.d-none{
    display:none !important;
}

/* =========================
   DATE PICKER
========================= */
.apx-date-picker{
    width:300px;
    overflow:hidden;
}

.apx-date-picker__header{
    height:36px;
    background:var(--main-orange, #eb7719);
    color:#fff;
    display:grid;
    grid-template-columns:24px 24px 1fr 24px 24px;
    align-items:center;
    gap:2px;
    padding:0 4px;
}

.apx-date-picker__title{
    text-align:center;
    font-size:11px;
    font-weight:700;
    letter-spacing:.1px;
    white-space:nowrap;
}

.apx-date-picker__nav{
    width:22px;
    height:22px;
    border:none;
    border-radius:999px;
    background:transparent;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    cursor:pointer;
    transition:.15s ease;
}

.apx-date-picker__nav:hover{
    background:rgba(255,255,255,.16);
}

.apx-date-picker__weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:0;
    padding:7px 7px 3px;
    background:#fff;
}

.apx-date-picker__weekday{
    text-align:center;
    font-size:10px;
    font-weight:700;
    color:#6f6f6f;
    line-height:1;
}

.apx-date-picker__days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:1px;
    padding:0 8px 8px;
    background:#fff;
}

.apx-date-picker__day{
    height:30px;
    border:none;
    border-radius:999px;
    background:transparent;
    color:#333;
    font-size:11px;
    cursor:pointer;
    transition:.15s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}

.apx-date-picker__day:hover:not(.is-selected){
    background:#fff3e8;
    color:var(--main-orange, #eb7719);
}

.apx-date-picker__day.is-other-month{
    color:#cfcfcf;
}

.apx-date-picker__day.is-today{
    box-shadow:inset 0 0 0 1px #ffb37c;
    font-weight:700;
}

.apx-date-picker__day.is-selected{
    background:var(--main-orange, #eb7719);
    color:#fff;
    font-weight:700;
    box-shadow:0 4px 12px rgba(235,119,25,.24);
}

.apx-date-picker__footer{
    border-top:1px solid #f3e4d7;
    background:#fff;
    padding:7px 7px 8px;
}

.apx-date-picker__presets{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
}

.apx-date-picker__preset{
    border:none;
    height:24px;
    border-radius:999px;
    background:#fff5ec;
    color:var(--main-orange, #eb7719);
    font-size:10px;
    font-weight:600;
    cursor:pointer;
    transition:.15s ease;
    padding:0 6px;
    white-space:nowrap;
}

.apx-date-picker__preset:hover{
    background:#ffe7d1;
}

/* =========================
   TIME PICKER
========================= */
.apx-time-picker{
    width:160px;
    overflow:hidden;
}

.apx-time-picker__top{
    height:42px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 10px;
    border-bottom:1px solid #eee4d9;
    background:#fff;
}

.apx-time-picker__preview{
    font-size:12px;
    font-weight:700;
    color:#555;
    letter-spacing:.2px;
}

.apx-time-picker__body{
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    background:#fff;
}

.apx-time-picker__col-sep{
    background:#ece1d7;
}

.apx-time-picker__wheel{
    position:relative;
    height:205px;
    overflow-y:auto;
    padding:82px 0;
    scroll-snap-type:y mandatory;
    scrollbar-width:thin;
    scrollbar-color:#d9d0c7 transparent;
    overscroll-behavior:contain;
}

.apx-time-picker__wheel::-webkit-scrollbar{
    width:6px;
}

.apx-time-picker__wheel::-webkit-scrollbar-thumb{
    background:#d8cdc2;
    border-radius:999px;
}

.apx-time-picker__wheel::-webkit-scrollbar-track{
    background:transparent;
}

.apx-time-picker__wheel::after{
    content:"";
    position:absolute;
    left:6px;
    right:6px;
    top:calc(50% - 18px);
    height:36px;
    border-radius:8px;
    background:#fff4ea;
    box-shadow:inset 0 0 0 1px #ffd8b5;
    pointer-events:none;
    z-index:1;
}

.apx-time-picker__list{
    position:relative;
    z-index:2;
}

.apx-time-picker__item{
    width:100%;
    height:44px;
    border:none;
    background:transparent;
    color:#8b8b8b;
    font-size:16px;
    font-weight:500;
    cursor:pointer;
    scroll-snap-align:center;
    transition:.15s ease;
}

.apx-time-picker__item:hover{
    color:var(--main-orange, #eb7719);
}

.apx-time-picker__item.is-selected{
    color:var(--main-orange, #eb7719);
    font-weight:700;
}

.apx-time-input,
.appt-time-input{
    min-width:92px;
    text-align:center;
    letter-spacing:.4px;
}