/* One range calendar for the booking box's two dates (assets/build/range-picker.js). */
.sl-range-wrap { position: relative; }
/* Covers the two fields but not the 10px under them, so the calendar opens flush against the fields. */
.sl-range-wrap input.sl-range-input { position: absolute; top: 0; left: 0; right: 0; bottom: 10px; z-index: 3; width: 100%; height: auto; margin: 0 !important; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.sl-range-input:focus-visible { opacity: 1; background: transparent; outline: 1px solid #1f2f4d; outline-offset: 0; border-radius: 7px; color: transparent; }

/* The field to fill next gets a red line along the inside of its bottom edge. */
.sl-range-wrap.sl-range-start-next > div:first-child input,
.sl-range-wrap.sl-range-end-next > div:nth-child(2) input { box-shadow: inset 0 -3px 0 #df1233; }

/* The search box (#booking_search_form) and the boat page box (.booking-widget) share the note and Clear link. */
#booking_search_form .booking-form-wrapper .dates .note.sl-range-note-live,
.booking-widget .dates .note.sl-range-note-live { color: #1f2f4d; font-weight: 500; opacity: 1; }
#booking_search_form .booking-form-wrapper .dates .note .sl-range-clear,
#booking_search_form .booking-form-wrapper .dates .note .sl-range-clear:hover,
#booking_search_form .booking-form-wrapper .dates .note .sl-range-clear:focus,
.booking-widget .dates .note .sl-range-clear,
.booking-widget .dates .note .sl-range-clear:hover,
.booking-widget .dates .note .sl-range-clear:focus { display: inline; width: auto; height: auto; min-height: 0; margin: 0 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #1f2f4d !important; font: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: underline; line-height: inherit; cursor: pointer; }
#booking_search_form .booking-form-wrapper .dates .note .sl-range-clear:hover,
.booking-widget .dates .note .sl-range-clear:hover { color: #df1233 !important; }
#booking_search_form .booking-form-wrapper .dates .note .sl-range-clear[hidden],
.booking-widget .dates .note .sl-range-clear[hidden] { display: none; }

html body.sl-range-open #datepick-div.datepick-inline { width: var(--sl-range-width, 530px) !important; margin-top: 0; }
html body.sl-range-open #datepick-div .datepick-one-month { width: 50%; box-sizing: border-box; padding: 20px 14px 14px; }
html body.sl-range-open #datepick-div .datepick-one-month:nth-child(2) { display: block; }
html body.sl-range-open #datepick-div .calendar-links { right: 14px; }
/* One month when the fields are narrow (phones, and the boat page sidebar). */
html body.sl-range-open #datepick-div.datepick-inline:not(.datepick-multi) .datepick-one-month { width: 100%; }

/* A range (the minimum stay as soon as a start is picked, the hovered end, or the chosen dates): red ends, pink between,
   the same look as a selected range on the boat page calendar. */
body.sl-range-open #datepick-div td.sl-hover a,
body.sl-range-open #datepick-div td.sl-hover span { display: inline-block; width: 100%; height: 24px; line-height: 24px; background: #f37287 !important; color: #fff !important; font-weight: 700; border-radius: 0; outline: 0 !important; box-shadow: none !important; }
body.sl-range-open #datepick-div td.sl-hover-first a,
body.sl-range-open #datepick-div td.sl-hover-first span { background: #df1233 !important; border-radius: 7px 0 0 7px; }
body.sl-range-open #datepick-div td.sl-hover-last a,
body.sl-range-open #datepick-div td.sl-hover-last span { background: #df1233 !important; border-radius: 0 7px 7px 0; }
body.sl-range-open #datepick-div td.sl-hover { opacity: 1; }

/* datepick marks the day it opens on (the first bookable day) with the hover class; only a day under the mouse is pink. */
body.sl-range-open #datepick-div td.datepick-days-cell-over.date_available:not(:hover):not(.sl-hover) a { background: transparent !important; box-shadow: none; color: #121c2c !important; font-weight: 400; }