.container.picker.date input.readonly {
    width: 150px;
    padding: 14px 16px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* flatpickr's own popup is appended to document.body (see tagCalendar in
linked_dates.js and the comment in toolbar.js/manage_dates.js on why appendTo
isn't used), so it's tagged with .guest-datepicker rather than scoped by DOM
nesting - this keeps these overrides off staff's own unstyled default
flatpickr (staff/static/staff/vendor/flatpickr/). */

.guest-datepicker .flatpickr-day.selected,
.guest-datepicker .flatpickr-day.selected:hover {
    background: var(--primary-color, #2c79b9);
    border-color: var(--primary-color, #2c79b9);
}

.guest-datepicker .flatpickr-day.today {
    border-color: var(--primary-color, #2c79b9);
}

.guest-datepicker .flatpickr-day.today:hover {
    background: var(--secondary-color-soft, #f9e7b0);
    border-color: var(--secondary-color-soft, #f9e7b0);
}

.guest-datepicker .flatpickr-day:hover {
    background: var(--secondary-color-soft, #f9e7b0);
}