:root {  --white: 0,0%,100%;  --white-bg-text: 0,0%,0%;  --black: 0,0%,0%;  --default-font-family: "Open Sans",sans-serif;  --header-font-family: "Open Sans",sans-serif;  --logo-max-width: ${css.getChild("logoMaxWidth").textValue};  --primary: 204, 85%, 16%;  --primary-rgb: 204, 85%, 16%;  --primary-bg-hover-focus: 204, 85%, 11%;  --primary-bg-active: 204, 85%, 9%;  --primary-bg-text: 0, 0%, 100%;  --primary-bg-title: 0, 0%, 100%;  --primary-dark: 204, 85%, 2%;  --primary-light: 204, 85%, 36%;  --secondary: 221, 45%, 63%;  --secondary-rgb: 221, 45%, 63%;  --secondary-bg-hover-focus: 221, 45%, 58%;  --secondary-bg-active: 221, 45%, 53%;  --secondary-bg-text: 0, 0%, 0%;  --secondary-bg-title: 0, 0%, 0%;  --secondary-dark: 221, 45%, 43%;  --secondary-light: 221, 45%, 83%;  --accent: 354, 73%, 43%;  --accent-rgb: 354, 73%, 43%;  --accent-bg-hover-focus: 354, 73%, 38%;  --accent-bg-text: 0, 0%, 100%;  --accent-bg-title: 0, 0%, 100%;  --shade: 0, 0%, 93%;  --shade-rgb: 0, 0%, 93%;  --shade-bg-hover-focus: 0, 0%, 88%;  --shade-bg-text: 0, 0%, 0%;  --shade-bg-title: 0, 0%, 0%;  --dark: 204, 85%, 16%;  --dark-bg-text: 0, 0%, 100%;  --dark-bg-title: 0, 0%, 100%;  --dark-bg-hover-focus: 204, 85%, 11%;  --accentbar-height:0px;  --accentbar-color:hsl(var(--accent));  --default-font-color: hsl(var(--black));  --white-bg-title:0,0%,0%;  }  /* ============================================= Clockwise Booking Widget - Scoped Styles Wrap your widget in: <div class="clockwise-booking-widget"> ============================================= */ .clockwise-booking-widget #main-column { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; padding-top: 0; margin: 0 0 20px; margin-right: 20px;  } .clockwise-booking-widget #main-column #form-wrapper { max-width: 100%;  } .clockwise-booking-widget #main-column #form-wrapper .row { display: flex; flex-wrap: wrap; grid-gap: inherit; margin-top: 0;  } .clockwise-booking-widget #main-column #form-wrapper .row h3 { margin-top: 20px; margin-bottom: 8px;  } .clockwise-booking-widget #main-column #form-wrapper #form-row .col-md-6,  .clockwise-booking-widget #main-column #form-wrapper .row .col-6 { max-width: 100%; flex: 0 0 100%; width: 100%; padding: 0 16px;  } .clockwise-booking-widget #main-column #form-wrapper .row .col-6 p { display: flex; flex-wrap: wrap;  } .clockwise-booking-widget #main-column #form-wrapper .col-md-6 br { display: none;  } .clockwise-booking-widget #main-column #form-wrapper #appointment-form #form-fields .row .col-md-6 input,  .clockwise-booking-widget #main-column #form-wrapper #appointment-form #form-fields .row .col-md-6 select { margin: 0; margin-top: 12px;  } /* Form Fields */ .clockwise-booking-widget #appointment-form #form-fields input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),  .clockwise-booking-widget #appointment-form #form-fields textarea,  .clockwise-booking-widget #appointment-form #form-fields select { width: 100%; padding: 4px 4px !important; color: black !important; border: 1px solid #adadad !important; margin: 10px 0; border-radius: 4px; height: 50px; font-size: 20px;  } .clockwise-booking-widget #appointment-form #form-fields select { width: 100%; padding: 4px 4px !important; color: gray !important; border: 1px solid #adadad !important; margin: 10px 0; border-radius: 4px; height: 60px; font-size: 20px;  } .clockwise-booking-widget #appointment-form #form-fields select:focus { color: black !important;  } .clockwise-booking-widget #appointment-form #form-fields select option { color: black;  } .clockwise-booking-widget #appointment-form #form-fields select:valid { color: black !important;  } .clockwise-booking-widget #appointment-form #form-fields .appointment-form-element { margin-top: 12px; margin-bottom: 0;  } /* Submit Button */ .clockwise-booking-widget #appointment-form #form-fields #btn-submit-appointment,  .clockwise-booking-widget #form-wrapper #appointment-form #btn-submit-appointment { padding: 0 30px; font-size: 20px; height: 50px; border-radius: 25px; color: #fff; background-color: #BE1E2D; border: 1px solid #BE1E2D; margin-top: 20px;  } .clockwise-booking-widget #appointment-form #btn-submit-appointment:hover { color: #BE1E2D; background-color: #fff;  } /* Slot Picker Buttons */ .clockwise-booking-widget .cw-slots { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em; justify-content: center;  } .clockwise-booking-widget .cw-slot-btn { display: inline-block; background-color: #e41f26; color: #fff; padding: 10px 20px; min-width: 140px; border-radius: 9999px; border: none; font-size: 1rem; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;  } .clockwise-booking-widget .cw-slot-btn:hover { background-color: #c01a20; color: #fff; text-decoration: none;  } .clockwise-booking-widget .cw-no-slots { text-align: center; color: #666; font-style: italic;  } /* Icon */ .clockwise-booking-widget #icon-form { display: inline-block; margin-right: 10px; width: 30px;  } /* Mobile */ @media (max-width: 991px) { .clockwise-booking-widget #main-column { margin-right: 0; } .clockwise-booking-widget #main-column #form-wrapper { width: 100%; } .clockwise-booking-widget #main-column #form-wrapper .row { margin: 0; } .clockwise-booking-widget #main-column #form-wrapper .row .col-6 { padding: 0; }  } @media (max-width: 480px) { .clockwise-booking-widget #appointment-form #form-fields select { height: 50px !important; font-size: 14px !important; } .clockwise-booking-widget #form-fields .row { grid-template-columns: 1fr; } .clockwise-booking-widget #icon-form { width: 30px !important; } .clockwise-booking-widget #appointment-form #btn-submit-appointment { margin-top: 40px; } .clockwise-booking-widget .cw-slot-btn { min-width: unset; width: 100%; }  }