.cleo-date-field { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 100%; }
.cleo-date-field .cleo-date-input { width: 100%; min-width: 0; box-sizing: border-box; padding-right: 2.4rem; }
.cleo-date-trigger { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 2.2rem; border: 0; border-left: 1px solid #ccc; background: #f3f3f3; color: #444; cursor: pointer; font-size: 1.2rem; }
.cleo-date-trigger:focus-visible, .cleo-date-input:focus-visible { outline: 2px solid #497b81; outline-offset: 1px; }
.cleo-date-input[aria-invalid=true] { border: 2px solid #a32626; }
.cleo-date-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cleo-date-calendar.flatpickr-calendar { z-index: 100100; font-family: inherit; line-height: 1.5; max-width: calc(100vw - 8px); }
.cleo-date-calendar::before, .cleo-date-calendar::after { display: none; }
.cleo-date-calendar .flatpickr-day.selected { background: #497b81; border-color: #497b81; }
.cleo-date-calendar .flatpickr-monthDropdown-months { display: inline-block; width: auto; height: auto; padding: 0; }
.cleo-date-calendar .numInput { width: 100%; height: auto; padding: 0 0 0 .5ch; }
@media (max-width: 340px) {
    .cleo-date-calendar.flatpickr-calendar { width: calc(100vw - 8px); }
    .cleo-date-calendar .flatpickr-days, .cleo-date-calendar .dayContainer { width: 100%; min-width: 0; max-width: 100%; }
    .cleo-date-calendar .flatpickr-day { max-width: 14.285714%; }
}