/* Datepicker Widget */
:root {
/* Datepicker Day Styles */
--dpDayRadius: 0.25rem;
--dpDayToday: hsl(57, 100%, 78%); /* Datepicker Default Yellow */
--dpDayOfTheWeekBGColor: hsl(0, 0%, 95%); /* black, 5% */ /* Has to be specific value because of opacity flickering bug */
--dpDayOfTheWeekTextColor: hsl(var(--bodyFontColor));
--dpDayHoverBGColor: hsl(var(--siteColor4));
--dpDayHoverTextColor: hsl(var(--white));
--dpDaySelectedBGColor: hsl(var(--siteColor4));
--dpDaySelectedTextColor: hsl(var(--white));
--dpDayHighlightBGColor: hsla(318, 76%, 42%, 80%); /* siteColor1, 75% */ /* Has to be specific value because of opacity flickering bug */
--dpDayHighlightTextColor: hsl(var(--white));
--dpDayAvailableBGColor: hsla(192, 100%, 35%, 80%); /* siteColor1, 75% */ /* Has to be specific value because of opacity flickering bug */
--dpDayUnavailableBGColor: hsl(0, 0%, 95%); /* Has to be specific value because of opacity flickering bug */
--dpDayUnavailableTextColor: hsla(var(--bodyFontColor), 50%);
--dpDayCheckInBGColor: linear-gradient(to left top, var(--dpDayAvailableBGColor) 49%, var(--dpDayUnavailableBGColor) 50%);
--dpDayCheckOutBGColor: linear-gradient(to left top, var(--dpDayUnavailableBGColor) 49%, var(--dpDayAvailableBGColor) 50%);
}
.datepicker-widget { width: 100%; position: relative; }
body .ui-datepicker.ui-widget-content { padding: 0.25rem 1.25rem 1.25rem; max-width: 100%; min-width: 20rem; width: 20rem; border: none; border-radius: var(--borderRadius); box-shadow: var(--dropShadow); margin: 0 auto; background-color: hsl(var(--white)); }
body .ui-datepicker.ui-widget-content .ui-datepicker-header { padding: 0.75rem; border: none; background-color: transparent; }
body .ui-datepicker.ui-widget-content .ui-datepicker-title { font-weight: var(--wRegular); }
body .ui-datepicker.ui-widget-content .ui-datepicker-prev,
body .ui-datepicker.ui-widget-content .ui-datepicker-next { top: 0.75rem; opacity: 0.65; background-repeat: no-repeat; background-size: 0.55rem; background-position: center center; }
body .ui-datepicker.ui-widget-content .ui-datepicker-prev { left: -0.5rem; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>'); } /* SVG inlined for calendar for jQuery UI datepicker */
body .ui-datepicker.ui-widget-content .ui-datepicker-next { right: -0.5rem; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>'); } /* SVG inlined for calendar for jQuery UI datepicker */
body .ui-datepicker.ui-widget-content .ui-datepicker-prev:hover,
body .ui-datepicker.ui-widget-content .ui-datepicker-next:hover { cursor: pointer; border: none; background-color: transparent; opacity: 1; }
body .ui-datepicker.ui-widget-content .ui-datepicker-prev span,
body .ui-datepicker.ui-widget-content .ui-datepicker-next span { display: none; }
body .ui-datepicker.ui-widget-content .ui-datepicker-prev.ui-state-disabled,
body .ui-datepicker.ui-widget-content .ui-datepicker-next.ui-state-disabled { opacity: 0.25; }
body .ui-datepicker.ui-widget-content table { width: 100%; max-width: 100%; font-size: 0.75rem; margin: 0; }
body .ui-datepicker.ui-widget-content tr th { padding: 1.25rem; color: var(--dpDayOfTheWeekTextColor); background-color: var(--dpDayOfTheWeekBGColor); position: relative; }
body .ui-datepicker.ui-widget-content tr th span { padding: 1rem; font-size: 0.75rem; font-weight: var(--wRegular); color: hsla(var(--black), 50%); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
body .ui-datepicker.ui-widget-content tr th:after { content: ""; display: block; background-color: hsl(var(--white)); height: 100%; width: 0.0625rem; position: absolute; top: 0; right: 0; bottom: 0; }
body .ui-datepicker.ui-widget-content tr th:last-child:after { display: none; }
body .ui-datepicker.ui-widget-content td { border-radius: var(--dpDayRadius); padding: 0; position: relative; border-top: 0.125rem hsl(var(--white)) solid; border-bottom: 0.125rem hsl(var(--white)) solid; transition: none; position: relative; }
body .ui-datepicker.ui-widget-content td a,
body .ui-datepicker.ui-widget-content td span.ui-state-default { line-height: 1; text-align: center; padding: 0.875rem 0.75rem; border-radius: var(--dpDayRadius); border: none; color: hsl(var(--bodyFontColor)); background-color: transparent; transition: none; }
body .ui-datepicker.ui-widget-content td a:focus { outline: none; box-shadow: var(--focusShadow); }
body .ui-datepicker.ui-widget-content td a:hover,
body .ui-datepicker.ui-widget-content td.dp-start-date a,
body .ui-datepicker.ui-widget-content td.dp-end-date a { background-color: var(--dpDaySelectedBGColor); color: var(--dpDaySelectedTextColor); font-weight: var(--wBold); border-radius: var(--dpDayRadius); }
body .ui-datepicker.ui-widget-content td a:hover { background-color: var(--dpDayHoverBGColor) !important; color: var(--dpDayHoverTextColor) !important; }
body .ui-datepicker.ui-widget-content td.dp-highlight,
body .ui-datepicker.ui-widget-content td.dp-start-date,
body .ui-datepicker.ui-widget-content td.dp-end-date { background-color: var(--dpDayHighlightBGColor); }
body .ui-datepicker.ui-widget-content td.dp-highlight { border-radius: 0; position: relative; }
body .ui-datepicker.ui-widget-content td.dp-start-date,
body .ui-datepicker.ui-widget-content td.dp-highlight:first-child,
body .ui-datepicker.ui-widget-content td + .dp-highlight.hover { border-radius: var(--dpDayRadius) 0 0 var(--dpDayRadius); }
body .ui-datepicker.ui-widget-content td.dp-end-date,
body .ui-datepicker.ui-widget-content td.dp-highlight + .dp-start-date,
body .ui-datepicker.ui-widget-content td.dp-highlight:last-child,
body .ui-datepicker.ui-widget-content td.dp-highlight + .dp-highlight.hover { border-radius: 0 var(--dpDayRadius) var(--dpDayRadius) 0; }
body .ui-datepicker.ui-widget-content td.dp-highlight a { color: var(--dpDayHighlightTextColor); font-weight: var(--wBold); position: relative; z-index: 2; }
body .ui-datepicker.ui-widget-content td.dp-start-date a,
body .ui-datepicker.ui-widget-content td.dp-end-date a { position: relative; z-index: 2; }
body .ui-datepicker.ui-widget-content .ui-state-disabled,
body .ui-datepicker.ui-widget-content .ui-widget-content .ui-state-disabled,
body .ui-datepicker.ui-widget-content .ui-state-disabled { padding: 0; opacity: 1; }
body .ui-datepicker.ui-widget-content .ui-state-disabled .ui-state-default,
body .ui-datepicker.ui-widget-content .ui-widget-content .ui-state-disabled .ui-state-default,
body .ui-datepicker.ui-widget-content .ui-state-disabled .ui-state-default { text-align: center; color: var(--dpDayUnavailableTextColor); }
body .ui-datepicker.ui-widget-content .ui-datepicker-today { background-color: var(--dpDayToday); }
body .i-modal-body .ui-datepicker.ui-widget-content { width: 100%; border-radius: 0; }
@media (min-width: 480px) {
body .i-modal-body .ui-datepicker.ui-widget-content { width: 20rem; border-radius: var(--borderRadius); }
}
/* Standalone Datepicker single input display */
body #ui-datepicker-div.ui-datepicker.ui-widget-content .ui-datepicker-current-day { background-color: hsl(var(--siteColor1)); }
body #ui-datepicker-div.ui-datepicker.ui-widget-content .ui-datepicker-current-day .ui-state-default { color: hsl(var(--white)); font-weight: var(--wBold); }
/* Standalone Datepicker via .be-datepicker class */
body input.be-datepicker[readonly] { background-color: hsl(var(--white)); cursor: pointer; }
/* Inline Datepicker's */
.datepicker-wrap { position: absolute; top: calc(100% + 0.5rem); left: 0; background: hsl(var(--white)); border-radius: var(--borderRadius); box-shadow: var(--dropShadow); }
.datepicker-wrap:before { position: absolute; bottom: calc(100% - 0.0625rem); left: 50%; transform: translate(0, -50%); }
.datepicker-wrap #ui-datepicker-div { width: 16.5625rem; position: relative !important; top: 0 !important; right: auto !important; left: 0 !important; }
.datepicker-wrap #ui-datepicker-div:before { content: ""; display: block; position: absolute; left: 50%; z-index: 2; bottom: calc(100% - 0.0625rem); transform: translateX(-50%); border-left: 0.625rem solid transparent; border-right: 0.625rem solid transparent; border-top: 0; border-bottom: 0.625rem solid hsl(var(--white)); }
.datepicker-wrap .datepicker-close { cursor: pointer; animation-name: fadein; animation-duration: 0.5s; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; padding: 0.5rem; position: absolute; top: -0.625rem; right: -0.625rem; background: hsl(var(--white)); box-shadow: var(--dropShadow); border-radius: 50%; color: #ccc; }
.datepicker-wrap .datepicker-close .icon { width: 1.25rem; height: 1.25rem; color: hsl(var(--siteColor1)); }