/* Adit web form styling.
   Loaded ONLY when online booking is active (see book-an-appointment.html).
   Source: Adit "Web Form Integration Document" v1.0.0, step 6 ("Add Style").
   The Adit form markup relies on jQuery UI datepicker + heapbox; this file
   styles those widgets to the Braces Bar theme colour (#07375b). Kept in its
   own file so it is only requested when the booking form is switched on. */

:root { --aditwebform-theme-color: #07375b; }

*, ::after, ::before { box-sizing: border-box; }

.custom-form-cls .microapptfieldbox .microfielrediobox .microfielrediocol label { height: 40px; border-radius: 24px !important; }
.custom-form-cls .heapBox { width: 100%; }
.custom-form-cls .microapptfieldiconbox > .heapBox .holder { width: 100%; padding-top: 3px; height: 40px; }
.custom-form-cls .heapBox .handler { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #07375b transparent transparent transparent; background: transparent; }
.custom-form-cls .heapBox .heap { width: 100%; }
.custom-form-cls .ui-datepicker-trigger { font-size: 0; }
.custom-form-cls .microapptfieldbox .microfielrediobox .microfielrediocol label,
.custom-form-cls .microapptfieldiconbox > .heapBox .holder,
.custom-form-cls .microfieldmainbox .microapptfieldiconbox input { font-family: "Roboto", sans-serif; font-size: 14px; }
.custom-form-cls .microfieldmainbox .microapptfieldiconbox input { padding-left: 20px !important; }
.custom-form-cls .microfieldmainbox .microapptfieldiconbox.microapptfielddate input { padding-right: 35px !important; }
.custom-form-cls .microapptfieldbox > textarea { font-family: "Roboto", sans-serif; font-size: 14px; min-height: auto; padding-top: 11px !important; padding-bottom: 6px !important; line-height: normal; }

/* ---- Date Picker ---- */
body .ui-datepicker { z-index: 10 !important; }
body .ui-datepicker, body .eventCalOut, body .calendarIcon { background-color: #17212a; }
body .ui-datepicker th, body .ui-state-highlight { background-color: #f4891f; }
body .ui-state-active, body .ui-datepicker tbody a:hover { background-color: #f4891f; }
body .ui-datepicker { color: #fff; font-size: 13px; }
body .ui-datepicker { width: 20em; padding: 0; display: none; }
body .ui-datepicker .ui-datepicker-header { position: relative; padding: 0; margin: 5px 0; background-color: transparent; border: none; color: #fff; }
body .ui-datepicker .ui-datepicker-prev, body .ui-datepicker .ui-datepicker-next { position: absolute; top: 0; width: 30px; height: 30px; text-align: left; text-indent: -999em; overflow: hidden; background: none; padding: 0; margin: 0; }
body .ui-datepicker .ui-datepicker-prev:hover, body .ui-datepicker .ui-datepicker-next:hover { top: 0; background: none; padding: 0; margin: 0; border: none; }
body .ui-datepicker .ui-datepicker-prev, body .ui-datepicker .ui-datepicker-prev:hover { left: 0; }
body .ui-datepicker .ui-datepicker-next, body .ui-datepicker .ui-datepicker-next:hover { right: 0; }
body .ui-datepicker .ui-datepicker-prev:after { content: ''; position: absolute; top: 5px; width: 0; height: 0; left: 8px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #fff transparent transparent; }
body .ui-datepicker .ui-datepicker-next:after { content: ''; position: absolute; top: 5px; width: 0; height: 0; right: 8px; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #fff; }
body .ui-datepicker .ui-datepicker-prev span, body .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -7px; top: 50%; margin-top: -8px; font-size: 12px; background: inherit; }
body .ui-datepicker .ui-datepicker-title { line-height: 30px; margin: 0 35px; overflow: hidden; text-align: center; color: #fff; }
body .ui-datepicker .ui-datepicker-title select { background-color: #fff; border: 1px solid #fff; color: #000; font-size: 14px; height: 30px; margin: 0; padding: 0; }
body .ui-datepicker select.ui-datepicker-month-year { width: 100%; }
body .ui-datepicker select.ui-datepicker-month, body .ui-datepicker select.ui-datepicker-year { width: 48%; }
body .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; border: 0 none; }
body .ui-datepicker th { padding: .5em .3em; text-align: center; font-weight: bold; border: 0; }
body .ui-datepicker td { border: 0; padding: 1px; background-color: transparent; }
body .ui-state-disabled { opacity: 0.5; }
body .ui-datepicker tr:nth-child(2n+1) td, .ui-datepicker-calendar .tableRowOdd { background-color: transparent; }
body .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; background-color: transparent !important; border: none !important; color: #fff !important; }
body .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; overflow: hidden; }
body .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; }
body .eventcal-out { position: absolute; width: 222px; right: -222px; float: right; top: 70px; z-index: 22; }
body .calendar-icon { width: 50px; height: 52px; position: absolute; left: -50px; }
body .calendar-icon span { background-position: -113px -27px; width: 29px; height: 29px; margin: 10px; }
body .calendar-out { padding: 5px; }
body .calendar-out .ui-datepicker { width: 100%; }
body .calendar-out .button { background-color: #2979ca; color: #fff; display: block; text-align: center; border-radius: 3px; }
body .calendar-out .button:hover { background-color: #173C84; }
body .ui-datepicker tbody a { color: #fff; }
body .ui-datepicker-title { font-size: 18px; font-weight: normal; color: #fff; }
body .ui-datepicker th { text-transform: uppercase; font-weight: normal; color: #fff; }
body .ui-datepicker-prev, .ui-datepicker-next { width: 25px; font-size: 16px; height: 25px; display: inline-block; margin: 0; cursor: pointer; color: #fff; }
body .ui-datepicker-prev span { background-position: -147px -27px; overflow: hidden; width: 25px; height: 25px; position: static; margin: 5px 0 0; }
body .ui-datepicker-next span { background-position: -175px -27px; overflow: hidden; width: 25px; height: 25px; position: static; margin: 5px 0 0; }
body .ui-datepicker td span, body .ui-datepicker td a { text-align: center; width: 32px; height: 32px; line-height: 30px; border-radius: 50%; }
body .cal-icon { background-position: -205px -107px; width: 30px; height: 30px; display: block; vertical-align: top; }
body .birth_dateinput, body .pdateinput, body .aawfldselectbox { position: relative; }
body .ui-datepicker-trigger { width: 20px; height: 24px; display: block; overflow: hidden; background: transparent; padding: 0; margin: 0; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); border: none; }
body .ui-datepicker-trigger:before { content: '\f073'; font-family: "Font Awesome 6 Free"; font-size: 18px; font-weight: 900; color: var(--aditwebform-theme-color); position: absolute; right: 0; top: 50%; left: 0; transform: translateY(-50%); margin: 0 auto; }
body .aawformblock .aawfieldcol .pdateinput input { padding-right: 40px; }
body .ui-datepicker th, body .ui-state-highlight, body .ui-datepicker tbody a:hover, body .ui-state-active,
body .ui-state-default.ui-state-highlight, body .ui-datepicker tbody a.ui-state-active,
body .ui-datepicker .ui-datepicker-today a { background-color: var(--aditwebform-theme-color) !important; color: #fff !important; }
body .microapptfieldlistblock .microapptfieldcol .microapptfieldbox.birth_dateinput .ui-datepicker-trigger { top: 20px; }

@media only screen and (max-width: 991.98px) {
  body #lp-pom-root { min-width: inherit; background-color: transparent; padding: 30px 0; height: auto; }
  body #lp-pom-root .lp-positioned-content { width: 100%; position: relative; top: auto; left: auto; margin: 0 auto; max-width: 720px; height: auto; padding: 0 15px; }
  body #lp-pom-root .custom-form-cls { position: relative; top: auto; left: auto; height: auto; margin: 0 auto; width: 100%; }
}