.fi-dp-fancy .fi-fo-date-time-picker-panel{--dp-brand: oklch(.419 .149 var(--oh-hue, 310.71));--dp-soft: color-mix(in oklch, var(--dp-brand) 9%, transparent);--dp-line: color-mix(in oklch, var(--dp-brand) 14%, transparent);width:max-content;max-width:calc(100vw - 2rem);padding:1rem;border-radius:1.1rem;border:1px solid var(--dp-line);background-color:#fff;background-image:radial-gradient(120% 70% at 0% 0%,color-mix(in oklch,var(--dp-brand) 7%,transparent),transparent 62%),linear-gradient(165deg,#fff,oklch(.985 .014 var(--oh-hue, 310.71)));box-shadow:0 18px 40px -18px color-mix(in oklch,var(--dp-brand) 38%,transparent),0 2px 6px #0000000d}.dark .fi-dp-fancy .fi-fo-date-time-picker-panel{--dp-soft: color-mix(in oklch, var(--dp-brand) 22%, transparent);--dp-line: rgb(255 255 255 / .1);background-color:oklch(.225 .02 var(--oh-hue, 310.71));background-image:linear-gradient(165deg,oklch(.25 .025 var(--oh-hue, 310.71)),oklch(.19 .03 var(--oh-hue, 310.71)))}.fi-dp-fancy .fi-dp-body{display:flex;align-items:stretch;gap:1rem}.fi-dp-fancy .fi-dp-cal{width:17.5rem;flex:none}.fi-dp-fancy .fi-fo-date-time-picker-panel-header{display:flex;gap:.5rem;margin-bottom:.75rem}.fi-dp-fancy .fi-fo-date-time-picker-month-select,.fi-dp-fancy .fi-fo-date-time-picker-year-input{border-radius:.5rem;border:1px solid var(--dp-line);background-color:var(--dp-soft);font-weight:600;padding-block:.3rem;padding-inline:.8rem}.fi-dp-fancy .fi-fo-date-time-picker-calendar-header-day{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dp-brand);opacity:.75}.dark .fi-dp-fancy .fi-fo-date-time-picker-calendar-header-day{color:oklch(.8 .1 var(--oh-hue, 310.71))}.fi-dp-fancy .fi-fo-date-time-picker-calendar{gap:.2rem}.fi-dp-fancy .fi-fo-date-time-picker-calendar-day{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:999px;font-size:.85rem;font-weight:500;transition:background-color .12s ease,color .12s ease}.fi-dp-fancy .fi-fo-date-time-picker-calendar-day.fi-focused:not(.fi-selected):not(.fi-disabled){background-color:var(--dp-soft)}.fi-dp-fancy .fi-fo-date-time-picker-calendar-day-today:not(.fi-selected){box-shadow:inset 0 0 0 1.5px var(--dp-brand);color:var(--dp-brand);font-weight:700}.fi-dp-fancy .fi-fo-date-time-picker-calendar-day.fi-selected{background-color:var(--dp-brand);color:#fff;font-weight:700;box-shadow:0 6px 14px -6px var(--dp-brand)}.fi-dp-fancy .fi-fo-date-time-picker-calendar-day.fi-disabled{opacity:.35}.fi-dp-fancy .fi-fo-date-time-picker-time-inputs{position:relative;flex:none;width:6.2rem;border-radius:.9rem;border:1px solid var(--dp-line);background-color:var(--dp-soft);overflow:hidden}.fi-dp-fancy .fi-fo-date-time-picker-time-inputs:before{content:":";position:absolute;left:0;right:0;top:50%;height:2.25rem;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;border-block:2px solid var(--dp-brand);background-color:color-mix(in oklch,var(--dp-brand) 8%,transparent);font-weight:800;color:var(--dp-brand);pointer-events:none;z-index:1}.fi-dp-fancy .fi-dp-slide{position:absolute;top:0;bottom:0;width:50%;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;scroll-snap-type:y mandatory;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)}.fi-dp-fancy .fi-dp-slide:first-child{left:0}.fi-dp-fancy .fi-dp-slide:last-child{right:0}.fi-dp-fancy .fi-dp-slide::-webkit-scrollbar{display:none}.fi-dp-fancy .fi-dp-slide button{flex:none;height:2.25rem;width:100%;font-size:.9rem;font-weight:500;font-variant-numeric:tabular-nums;text-align:center;scroll-snap-align:center;opacity:.55;transition:opacity .12s ease,color .12s ease}.fi-dp-fancy .fi-dp-slide button:hover{opacity:.9}.fi-dp-fancy .fi-dp-slide button.fi-active{opacity:1;font-size:1.1rem;font-weight:800;color:var(--dp-brand)}.dark .fi-dp-fancy .fi-dp-slide button.fi-active{color:#fff}.fi-dp-fancy .fi-fo-date-time-picker-calendar-day.fi-holiday:not(.fi-selected){color:#dc2626;font-weight:700}.dark .fi-dp-fancy .fi-fo-date-time-picker-calendar-day.fi-holiday:not(.fi-selected){color:#f87171}.fi-dp-fancy .fi-fo-date-time-picker-year-input{width:6rem;flex:none;padding-inline:.7rem .4rem;text-align:left}.fi-dp-fancy .fi-fo-date-time-picker-month-select{min-width:0}.fi-modal-window:has(.fi-dp-fancy .fi-fo-date-time-picker-panel:not([x-cloak]):not([style*="display: none"])) .fi-modal-content{padding-bottom:21.5rem;transition:padding-bottom .15s ease}
