@qite/tide-components 1.0.13 → 1.0.15

package/styles/booking-qsm-variables.scss

@@ -1,501 +1,501 @@
-:root {
-  // COLOR ASSIGNMENTS
-  --tide-booking-color-primary: #333399;
-  --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #333399 1.64%, #282878 84.55%);
-  --tide-booking-color-primary-fade: #ebebf8;
-  --tide-booking-color-primary-extra-fade: #f8f8fd;
-  --tide-booking-color-primary-light: #cdcdee;
-  --tide-booking-color-primary-light-text: #3333997d;
-  --tide-booking-color-primary-dark: #282878;
-  --tide-booking-color-secondary: #1f9470;
-  --tide-booking-color-secondary-light: #11b684;
-
-  --tide-booking-color-star: #ecb911;
-  // --tide-booking-invalid: #e74c3c;
-  --tide-booking-invalid: #871d11;
-  --tide-booking-invalid-light: #fce8e6;
-  --tide-booking-invalid-dark: #871d11;
-  --tide-booking-price-increase: #e81212;
-  --tide-booking-price-decrease: #19a364;
-
-  --tide-booking-white: #ffffff;
-  --tide-booking-gray-light: #f5f5f5;
-  --tide-booking-gray-xlight: #fbfbfb;
-  --tide-booking-gray--medium-light: #efefef;
-  --tide-booking-gray-background-light: #e2e2e2;
-  --tide-booking-gray-border-light: #f3f3f3;
-  --tide-booking-gray-checkbox-bg: #bdbdbd;
-  --tide-booking-gray-medium: #cbcbcb;
-  --tide-booking-gray-dark: #666666;
-  --tide-booking-black: #0a0a0a;
-  --tide-booking-transparent: transparent;
-
-  // BACKGROUNDS
-  --tide-booking-bg: #fafafa;
-
-  // TYPOGRAPHY
-  --tide-booking-font-heading: 'Outfit', serif;
-  --tide-booking-font-body: 'Outfit', serif;
-  --tide-booking-font-handwritten: 'Outfit', serif;
-
-  --tide-booking-font-size-body: 14px;
-  --tide-booking-font-size-body-lg: 16px;
-  --tide-booking-line-height-body: 1;
-
-  // GRID
-  --tide-booking-container-wide: 1690px;
-  --tide-booking-container-medium: 1200px;
-  --tide-booking-container-small: 900px;
-  --tide-booking-container-article: 650px;
-  --tide-booking-gutter: 15px;
-
-  // MEDIA QUERIES
-  --tide-booking-screen-xs: 576px;
-  --tide-booking-screen-sm: 768px;
-  --tide-booking-screen-md: 992px;
-  --tide-booking-screen-lg: 1200px;
-  --tide-booking-screen-xl: 1650px;
-  --tide-booking-screen-xxl: 1920px;
-
-  //HEADINGS
-  --tide-booking-heading-color: var(--tide-booking-black);
-
-  //h1
-  --tide-booking-h1: 22px;
-  --tide-booking-h1-sm: 25px;
-  --tide-booking-h1-xl: 25px;
-
-  //h2
-  --tide-booking-h2: 18px;
-  --tide-booking-h2-sm: 23px;
-  --tide-booking-h2-xl: 23px;
-
-  //h3
-  --tide-booking-h3: 20px;
-  --tide-booking-h3-sm: 23px;
-  --tide-booking-h3-xl: 23px;
-
-  //h4
-  --tide-booking-h4: 18px;
-  --tide-booking-h4-sm: 20px;
-  --tide-booking-h4-xl: 20px;
-
-  //h5
-  --tide-booking-h5: 18px;
-  --tide-booking-h5-xl: 20px;
-
-  //h6
-  --tide-booking-h6: 16px;
-  --tide-booking-h6-md: 18px;
-
-  //a
-  --tide-booking-a-color: var(--tide-booking-color-primary);
-  --tide-booking-a-text-decoration: underline;
-  --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
-  --tide-booking-a-text-decoration-hover: underline;
-  --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
-  --tide-booking-a-text-decoration-focus: underline;
-
-  //small fontsize
-  --tide-booking-small-font-size--mobile: 13px;
-  --tide-booking-small-font-size--desktop: 15px;
-
-  //INPUT
-  --tide-booking-input-background: var(--tide-booking-white);
-  --tide-booking-input-border: 1.5px solid var(--tide-booking-gray--medium-light);
-  --tide-booking-input-border-radius: 5px;
-  --tide-booking-input-color: var(--tide-booking-black);
-  --tide-booking-input-height: 45px;
-  --tide-booking-input-icon-color: var(--tide-booking-gray-dark);
-
-  //INPUT--lg
-  --tide-booking-input-height-lg: 45px;
-
-  //INPUT--FOCUS/ACTIVE
-  --tide-booking-input-border-focus: 1.5px solid var(--tide-booking-color-primary);
-  --tide-booking-input-icon-color-focus: var(--tide-booking-color-primary);
-
-  //INPUT--PLACEHOLDER
-  --tide-booking-input-placeholder-color: var(--tide-booking-gray-dark);
-  --tide-booking-input-placeholder-font-style: normal;
-
-  //INPUT--LABEL
-  --tide-booking-input-label-color: var(--tide-booking-black);
-  --tide-booking-input-label-font-size: 14px;
-  --tide-booking-input-label-font-weight: 400;
-  --tide-booking-input-label-font-style: normal;
-
-  //INPUT--reverse-btn
-  --tide-booking-input-reverse-btn-background: var(--tide-booking-white);
-  --tide-booking-input-reverse-btn-border: none;
-  --tide-booking-input-reverse-btn-border-radius: 50%;
-  --tide-booking-input-reverse-btn-box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);
-  --tide-booking-input-reverse-btn-fill: var(--tide-booking-gray-dark);
-
-  --tide-booking-input-reverse-btn-fill-hover: var(--tide-booking-color-primary);
-  --tide-booking-input-reverse-btn-box-shadow-hover: 0 0px 6px rgba(0, 0, 0, 0.2);
-  --tide-booking-input-reverse-btn-border-hover: none;
-  --tide-booking-input-reverse-btn-background-hover: var(--tide-booking-white);
-
-  //RADIOBUTTON
-  --tide-booking-radiobutton-border: 1.5px solid var(--tide-booking-gray-checkbox-bg);
-  --tide-booking-radiobutton-background: var(--tide-booking-white);
-  --tide-booking-radiobutton-color-text: var(--tide-booking-gray-dark);
-  --tide-booking-radiobutton-font-family: var(--tide-booking-font-body);
-  --tide-booking-radiobutton-font-size: 16px;
-  --tide-booking-radiobutton-font-weight: 400;
-
-  //RADIOBUTTON--INPUT--CHECKED
-  --tide-booking-radiobutton-input-checked-color-text: var(--tide-booking-color-primary);
-  --tide-booking-radiobutton-input-checked-background: var(--tide-booking-white);
-  --tide-booking-radiobutton-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
-
-  //CHECKBOX--INPUT--CHECKED--AFTER
-  --tide-booking-radiobutton-input-checked-after-color: var(--tide-booking-color-primary);
-
-  //CHECKBOX
-  --tide-booking-checkbox-border: 1.5px solid var(--tide-booking-gray-checkbox-bg);
-  --tide-booking-checkbox-border-radius: 0px;
-  --tide-booking-checkbox-background: var(--tide-booking-white);
-  --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
-  --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
-  --tide-booking-checkbox-font-size: 16px;
-  --tide-booking-checkbox-font-weight: 400;
-
-  //CHECKBOX--INPUT--CHECKED
-  --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
-  --tide-booking-checkbox-input-checked-color-text: var(--tide-booking-color-primary);
-  --tide-booking-checkbox-input-checked-background: var(--tide-booking-color-primary);
-  --tide-booking-checkbox-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
-
-  //CTA
-  --tide-booking-cta-height: 45px;
-  --tide-booking-cta-height-xs: 45px;
-  --tide-booking-cta-width: 100%;
-  --tide-booking-cta-width-xs: 100%;
-  --tide-booking-cta-padding: 10px 20px;
-  --tide-booking-cta-color: var(--tide-booking-white);
-  --tide-booking-cta-background: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
-  --tide-booking-cta-font-family: var(--tide-booking-font-body);
-  --tide-booking-cta-font-size: 16px;
-  --tide-booking-cta-font-size-xs: 18px;
-  --tide-booking-cta-font-weight: 400;
-  --tide-booking-cta-text-decoration: none;
-  --tide-booking-cta-border: none;
-  --tide-booking-cta-border-radius: 5px;
-
-  //CTA__ICON
-  --tide-booking-cta-icon-color: var(--tide-booking-white);
-  --tide-booking-cta-icon-size: 16px;
-
-  //CTA__HOVER
-  --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
-  --tide-booking-cta-color-hover: var(--tide-booking-white);
-  --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
-  --tide-booking-cta-border-hover: none;
-  --tide-booking-cta-text-decoration-hover: none;
-
-  //CTA__FOCUS
-  --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
-  --tide-booking-cta-color-focus: var(--tide-booking-white);
-  --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
-  --tide-booking-cta-border-focus: none;
-  --tide-booking-cta-text-decoration-focus: none;
-
-  //CTA--SECONDARY
-  --tide-booking-cta-height-secondary: 25px;
-  --tide-booking-cta-height-xs-secondary: 30px;
-  --tide-booking-cta-width-secondary: auto;
-  --tide-booking-cta-padding-secondary: 0px;
-  --tide-booking-cta-margin-secondary: 0px 0 0 0;
-  --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
-  --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
-  --tide-booking-cta-border-secondary: none;
-  --tide-booking-cta-border-radius-secondary: 5px;
-  --tide-booking-cta-text-decoration-secondary: underline;
-  --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
-  --tide-booking-cta-font-size-secondary: 16px;
-  --tide-booking-cta-font-size-xs-secondary: 18px;
-  --tide-booking-cta-font-weight-secondary: 400;
-
-  //CTA--SECONDARY__ICON
-  --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
-  --tide-booking-cta-icon-size-secondary: 16px;
-
-  //CTA--SECONDARY__HOVER
-  --tide-booking-cta-background-secondary-hover: var(--tide-booking-transparent);
-  --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
-  --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
-  --tide-booking-cta-border-secondary-hover: none;
-  --tide-booking-cta-text-decoration-secondary-hover: underline;
-
-  //CTA--SECONDARY__FOCUS
-  --tide-booking-cta-background-secondary-focus: var(--tide-booking-transparent);
-  --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
-  --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
-  --tide-booking-cta-border-secondary-focus: none;
-  --tide-booking-cta-text-decoration-secondary-focus: underline;
-
-  //CTA--remove
-  --tide-booking-cta-height-remove: auto;
-  --tide-booking-cta-width-remove: auto;
-  --tide-booking-cta-padding-remove: 0px;
-  --tide-booking-cta-background-remove: var(--tide-booking-transparent);
-  --tide-booking-cta-color-remove: var(--tide-booking-gray-medium);
-  --tide-booking-cta-border-remove: none;
-  --tide-booking-cta-border-radius-remove: 5px;
-  --tide-booking-cta-text-decoration-remove: underline;
-  //CTA--remove__ICON
-  --tide-booking-cta-icon-color-remove: var(--tide-booking-invalid);
-  --tide-booking-cta-icon-size-remove: 16px;
-  //CTA--remove__HOVER, __focus
-  --tide-booking-cta-background-remove-hover: var(--tide-booking-transparent);
-  --tide-booking-cta-color-remove-hover: var(--tide-booking-gray-dark);
-  --tide-booking-cta-icon-color-remove-hover: var(--tide-booking-gray-dark);
-  --tide-booking-cta-border-remove-hover: none;
-  --tide-booking-cta-text-decoration-remove-hover: underline;
-
-  //INCREMENT__DECREMENT
-  //INCREMENT__DECREMENT--btns
-  --tide-booking-decrement-increment-width: 30px;
-  --tide-booking-decrement-increment-height: 30px;
-  --tide-booking-decrement-increment-border-radius: 5px;
-  --tide-booking-decrement-increment-border: 0px solid var(--tide-booking-color-primary-fade);
-  --tide-booking-decrement-increment-background: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
-  --tide-booking-decrement-increment-color: var(--tide-booking-color-primary);
-
-  //INCREMENT__DECREMENT--btns--icon
-  --tide-booking-decrement-increment-icon-width: 15px;
-  --tide-booking-decrement-increment-icon-height: 15px;
-  --tide-booking-decrement-increment-icon-color: var(--tide-booking-color-primary);
-
-  //INCREMENT__DECREMENT--btns--hover
-  --tide-booking-decrement-increment-background-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
-  --tide-booking-decrement-increment-color-hover: var(--tide-booking-color-primary-dark);
-  --tide-booking-decrement-increment-border-hover: 0px solid var(--tide-booking-color-primary-fade);
-
-  //INCREMENT__DECREMENT--btns--icon--hover
-  --tide-booking-decrement-increment-icon-color-hover: var(--tide-booking-color-primary-dark);
-
-  //INCREMENT__DECREMENT--btns--focus
-  --tide-booking-decrement-increment-background-focus: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
-  --tide-booking-decrement-increment-color-focus: var(--tide-booking-color-primary);
-  --tide-booking-decrement-increment-border-focus: 0px solid var(--tide-booking-color-primary-fade);
-
-  //INCREMENT__DECREMENT--btns--icon--focus
-  --tide-booking-decrement-increment-icon-color-focus: var(--tide-booking-color-primary-dark);
-
-  //INCREMENT__DECREMENT--LABEL
-  --tide-booking-decrement-increment-label-font: var(--tide-booking-font-size-body);
-  --tide-booking-decrement-increment-label-font-weight: 400;
-  --tide-booking-decrement-increment-label-color: var(--tide-booking-black);
-
-  //INCREMENT__DECREMENT--NUMBER
-  --tide-booking-decrement-increment-number-font: var(--tide-booking-font-size-body);
-  --tide-booking-decrement-increment-number-font-weight: 400;
-  --tide-booking-decrement-increment-number-color: var(--tide-booking-color-primary);
-
-  //DROPDOWN
-  --tide-booking-dropdown-background: var(--tide-booking-white);
-  --tide-booking-dropdown-color: var(--tide-booking-gray-dark);
-  --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-light);
-  --tide-booking-dropdown-border-radius: 5px;
-  --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
-
-  //DROPDOWN--HOVER
-  --tide-booking-dropdown-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
-  --tide-booking-dropdown-color-hover: var(--tide-booking-color-primary);
-  --tide-booking-dropdown-background-hover: var(--tide-booking-white);
-
-  //DROPDOWN--focus
-  --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary);
-  --tide-booking-dropdown-color-focus: var(--tide-booking-color-primary);
-  --tide-booking-dropdown-background-focus: var(--tide-booking-white);
-
-  --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
-  --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
-
-  --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
-
-  //DROPDOWN--menu
-  --tide-booking-dropdown-menu-background: var(--tide-booking-white);
-  --tide-booking-dropdown-menu-border: 1.5px solid var(--tide-booking-gray-border-light);
-  --tide-booking-dropdown-menu-border-radius: 5px;
-  --tide-booking-dropdown-menu-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-  --tide-booking-dropdown-menu-option-color: var(--tide-booking-gray-dark);
-  --tide-booking-dropdown-menu-option-background-hover: var(--tide-booking-gray-light);
-  --tide-booking-dropdown-menu-option-color-hover: var(--tide-booking-color-primary);
-  --tide-booking-dropdown-menu-option-background-selected: var(--tide-booking-color-primary);
-  --tide-booking-dropdown-menu-option-color-selected: var(--tide-booking-white);
-
-  //DATEPICKER
-  --tide-booking-datepicker-container-background: rgba(255, 255, 255, 0.97);
-  --tide-booking-datepicker-container-border: 1.5px solid var(--tide-booking-gray-border-light);
-  --tide-booking-datepicker-close-color: var(--tide-booking-color-primary);
-
-  --tide-booking-datepicker-prev-next-color: var(--tide-booking-color-primary);
-  --tide-booking-datepicker-prev-next-background: var(--tide-booking-transparent);
-
-  --tide-booking-datepicker-day-labels-color: var(--tide-booking-black);
-
-  --tide-booking-datepicker-month-color: var(--tide-booking-black);
-  --tide-booking-datepicker-month-font: var(--tide-booking-font-heading);
-
-  //DATEPICKER--DAY
-  --tide-booking-datepicker-day-color: var(--tide-booking-gray-dark);
-  --tide-booking-datepicker-day-background: var(--tide-booking-white);
-  --tide-booking-datepicker-day-border: 1.5px solid var(--tide-booking-gray-border-light);
-  --tide-booking-datepicker-day-border-radius: 5px;
-
-  //DATEPICKER--DAY--HOVER
-  --tide-booking-datepicker-day-border-hover: 1.5px solid var(--tide-booking-color-primary);
-  --tide-booking-datepicker-day-background-hover: var(--tide-booking-gray-xlight);
-  --tide-booking-datepicker-day-color-hover: var(--tide-booking-color-primary);
-
-  //DATEPICKER--DAY--SELECTED
-  --tide-booking-datepicker-day-border-selected: 1.5px solid var(--tide-booking-color-primary);
-  --tide-booking-datepicker-day-background-selected: var(--tide-booking-color-primary);
-  --tide-booking-datepicker-day-color-selected: var(--tide-booking-white);
-
-  //DATEPICKER--DAY--SELECTED--HOVER
-  --tide-booking-datepicker-day-border-selected-hover: 1.5px solid var(--tide-booking-color-primary-light);
-  --tide-booking-datepicker-day-background-selected-hover: var(--tide-booking-color-primary-light);
-  --tide-booking-datepicker-day-color-selected-hover: var(--tide-booking-white);
-
-  //DATEPICKER--DAY--DISABLED
-  --tide-booking-datepicker-day-color-disabled: var(--tide-booking-gray-medium);
-  --tide-booking-datepicker-day-background-disabled: var(--tide-booking-gray-xlight);
-  --tide-booking-datepicker-day-border-disabled: 1.5px solid var(--tide-booking-gray-border-light);
-
-  //DATEPICKER--DAY--OUTSIDE-MONTH
-  --tide-booking-datepicker-day-color-outside-month: var(--tide-booking-gray-medium);
-  --tide-booking-datepicker-day-background-outside-month: var(--tide-booking-gray-xlight);
-  --tide-booking-datepicker-day-border-outside-month: 1.5px solid var(--tide-booking-gray-border-light);
-  --tide-booking-datepicker-day-opacity-outside-month: 0.6;
-
-  //DATEPICKER--INPUT
-  --tide-booking-datepicker-input-height: 45px;
-  --tide-booking-datepicker-input-height-lg: 55px;
-  --tide-booking-datepicker-input-background: var(--tide-booking-white);
-  --tide-booking-datepicker-input-border: 1.5px solid var(--tide-booking-gray-border-light);
-  --tide-booking-datepicker-input-border-radius: 5px;
-  --tide-booking-datepicker-input-color: var(--tide-booking-black);
-
-  --tide-booking-datepicker-input-label-color: var(--tide-booking-color-primary-dark);
-
-  //SPINNER
-  --tide-booking-spinner-border: 5px solid rgba(255, 255, 255, 0.2);
-  --tide-booking-spinner-border-top-color: #dce1ff;
-
-  //ANIMATION
-  --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
-
-  //QSM container
-  --tide-booking-qsm-container-max-width: 1400px;
-  --tide-booking-qsm-container-background: var(--tide-booking-white);
-  --tide-booking-qsm-container-border: 1.5px solid var(--tide-booking-gray-border-light);
-  --tide-booking-qsm-container-border-radius: 5px;
-  --tide-booking-qsm-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-  --tide-booking-qsm-container-padding: 20px;
-
-  //QSM tabs
-  --tide-booking-qsm-tabs-background: var(--tide-booking-gray-xlight);
-  --tide-booking-qsm-tabs-border-bottom: 1.5px solid var(--tide-booking-gray-border-light);
-
-  --tide-booking-qsm-tab-font-size: 16px;
-  --tide-booking-qsm-tab-font-weight: 300;
-  --tide-booking-qsm-tab-color: var(--tide-booking-gray-medium);
-  --tide-booking-qsm-tab-background: var(--tide-booking-transparent);
-  --tide-booking-qsm-tab-border-bottom-radius: 5px;
-  --tide-booking-qsm-tab-border-bottom-color: var(--tide-booking-color-primary-light-text);
-
-  --tide-booking-qsm-tab-color-hover: var(--tide-booking-color-primary-light-text);
-  --tide-booking-qsm-tab-background-hover: var(--tide-booking-transparent);
-  --tide-booking-qsm-tab-border-bottom-hover: var(--tide-booking-color-primary-light-text);
-
-  --tide-booking-qsm-tab-color-active: var(--tide-booking-color-primary);
-  --tide-booking-qsm-tab-background-active: var(--tide-booking-transparent);
-  --tide-booking-qsm-tab-border-bottom-color-active: var(--tide-booking-color-primary);
-  --tide-booking-qsm-tab-font-weight-active: 300;
-
-  //QSM input options
-  --tide-booking-qsm-input-options-background: var(--tide-booking-white);
-  --tide-booking-qsm-input-options-border: 1.5px solid var(--tide-booking-gray--medium-light);
-  --tide-booking-qsm-input-options-border-radius: 5px;
-  --tide-booking-qsm-input-options-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-  --tide-booking-qsm-input-options-title-font-size: 16px;
-  --tide-booking-qsm-input-options-title-font-weight: 600;
-  --tide-booking-qsm-input-options-title-color: var(--tide-booking-color-primary);
-
-  --tide-booking-qsm-input-option-child-border: 1.5px solid var(--tide-booking-color-primary-extra-fade);
-  --tide-booking-qsm-input-option-child-border-radius: 5px;
-  --tide-booking-qsm-input-option-child-background: var(--tide-booking-color-primary-extra-fade);
-  --tide-booking-qsm-input-option-child-background-hover: var(--tide-booking-color-primary-fade);
-  --tide-booking-qsm-input-option-child-font-size: 14px;
-  --tide-booking-qsm-input-option-child-icon: var(--tide-booking-color-primary);
-
-  --tide-booking-qsm-input-option-child-country-color: var(--tide-booking-black);
-
-  --tide-booking-qsm-input-option-child-airport-label-font-size: 12px;
-  --tide-booking-qsm-input-option-child-airport-label-color: var(--tide-booking-gray-dark);
-
-  --tide-booking-qsm-input-option-child-text: 12px;
-
-  --tide-booking-qsm-input-option-child-airport-color: var(--tide-booking-color-primary);
-
-  //QSM filter mobile
-  --tide-booking-qsm-filter-mobile-background: var(--tide-booking-white);
-
-  --tide-booking-qsm-filter-mobile-header-border: 1.5px solid var(--tide-booking-white);
-  --tide-booking-qsm-filter-mobile-header-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
-  --tide-booking-qsm-filter-mobile-header-font-size: 18px;
-  --tide-booking-qsm-filter-mobile-header-font-weight: 600;
-  --tide-booking-qsm-filter-mobile-header-color: var(--tide-booking-color-primary);
-  --tide-booking-qsm-filter-mobile-header-background: var(--tide-booking-white);
-  --tide-booking-qsm-filter-mobile-header-close-color: var(--tide-booking-color-primary);
-
-  --tide-booking-qsm-filter-mobile-footer-background: var(--tide-booking-white);
-  --tide-booking-qsm-filter-mobile-footer-border: none;
-  --tide-booking-qsm-filter-mobile-footer-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
-
-  //passenger picker
-  --tide-booking-passenger-picker-background: var(--tide-booking-white);
-  --tide-booking-passenger-picker-border: 1.5px solid var(--tide-booking-gray-border-light);
-  --tide-booking-passenger-picker-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-  //passenger picker header
-  --tide-booking-passenger-picker-header-font-weight: 400;
-  --tide-booking-passenger-picker-header-color: var(--tide-booking-black);
-  --tide-booking-passenger-picker-header-border: 1.5px solid var(--tide-booking-gray-border-light);
-
-  --tide-booking-passenger-picker-header-count-color: var(--tide-booking-color-primary);
-
-  //passenger picker room
-  --tide-booking-passenger-picker-room-title-font-size: 16px;
-  --tide-booking-passenger-picker-room-title-font-weight: 600;
-  --tide-booking-passenger-picker-room-title-color: var(--tide-booking-color-primary);
-
-  --tide-booking-passenger-picker-room-item-font-size: 16px;
-  --tide-booking-passenger-picker-room-item-font-weight: 400;
-  --tide-booking-passenger-picker-room-item-color: var(--tide-booking-gray-dark);
-
-  --tide-booking-passenger-picker-room-item-age-font-size: 14px;
-  --tide-booking-passenger-picker-room-item-age-font-weight: 400;
-  --tide-booking-passenger-picker-room-item-age-color: var(--tide-booking-gray-medium);
-
-  //passenger picker room info message
-  --tide-booking-passenger-picker-room-info-message-font-size: 14px;
-  --tide-booking-passenger-picker-room-info-message-font-weight: 400;
-  --tide-booking-passenger-picker-room-info-message-font-style: normal;
-  --tide-booking-passenger-picker-room-info-message-color: var(--tide-booking-invalid);
-  --tide-booking-passenger-picker-room-info-message-background: var(--tide-booking-invalid-light);
-  --tide-booking-passenger-picker-room-info-message-border: none;
-  --tide-booking-passenger-picker-room-info-message-border-radius: 5px;
-  --tide-booking-passenger-picker-room-info-message-padding: 10px;
-
-  --tide-booking-passenger-picker-room-info-message-color-icon: var(--tide-booking-invalid);
-  --tide-booking-passenger-picker-room-info-message-icon-size: 16px;
-}
+:root {
+  // COLOR ASSIGNMENTS
+  --tide-booking-color-primary: #333399;
+  --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #333399 1.64%, #282878 84.55%);
+  --tide-booking-color-primary-fade: #ebebf8;
+  --tide-booking-color-primary-extra-fade: #f8f8fd;
+  --tide-booking-color-primary-light: #cdcdee;
+  --tide-booking-color-primary-light-text: #3333997d;
+  --tide-booking-color-primary-dark: #282878;
+  --tide-booking-color-secondary: #1f9470;
+  --tide-booking-color-secondary-light: #11b684;
+
+  --tide-booking-color-star: #ecb911;
+  // --tide-booking-invalid: #e74c3c;
+  --tide-booking-invalid: #871d11;
+  --tide-booking-invalid-light: #fce8e6;
+  --tide-booking-invalid-dark: #871d11;
+  --tide-booking-price-increase: #e81212;
+  --tide-booking-price-decrease: #19a364;
+
+  --tide-booking-white: #ffffff;
+  --tide-booking-gray-light: #f5f5f5;
+  --tide-booking-gray-xlight: #fbfbfb;
+  --tide-booking-gray--medium-light: #efefef;
+  --tide-booking-gray-background-light: #e2e2e2;
+  --tide-booking-gray-border-light: #f3f3f3;
+  --tide-booking-gray-checkbox-bg: #bdbdbd;
+  --tide-booking-gray-medium: #cbcbcb;
+  --tide-booking-gray-dark: #666666;
+  --tide-booking-black: #0a0a0a;
+  --tide-booking-transparent: transparent;
+
+  // BACKGROUNDS
+  --tide-booking-bg: #fafafa;
+
+  // TYPOGRAPHY
+  --tide-booking-font-heading: 'Outfit', serif;
+  --tide-booking-font-body: 'Outfit', serif;
+  --tide-booking-font-handwritten: 'Outfit', serif;
+
+  --tide-booking-font-size-body: 14px;
+  --tide-booking-font-size-body-lg: 16px;
+  --tide-booking-line-height-body: 1;
+
+  // GRID
+  --tide-booking-container-wide: 1690px;
+  --tide-booking-container-medium: 1200px;
+  --tide-booking-container-small: 900px;
+  --tide-booking-container-article: 650px;
+  --tide-booking-gutter: 15px;
+
+  // MEDIA QUERIES
+  --tide-booking-screen-xs: 576px;
+  --tide-booking-screen-sm: 768px;
+  --tide-booking-screen-md: 992px;
+  --tide-booking-screen-lg: 1200px;
+  --tide-booking-screen-xl: 1650px;
+  --tide-booking-screen-xxl: 1920px;
+
+  //HEADINGS
+  --tide-booking-heading-color: var(--tide-booking-black);
+
+  //h1
+  --tide-booking-h1: 22px;
+  --tide-booking-h1-sm: 25px;
+  --tide-booking-h1-xl: 25px;
+
+  //h2
+  --tide-booking-h2: 18px;
+  --tide-booking-h2-sm: 23px;
+  --tide-booking-h2-xl: 23px;
+
+  //h3
+  --tide-booking-h3: 20px;
+  --tide-booking-h3-sm: 23px;
+  --tide-booking-h3-xl: 23px;
+
+  //h4
+  --tide-booking-h4: 18px;
+  --tide-booking-h4-sm: 20px;
+  --tide-booking-h4-xl: 20px;
+
+  //h5
+  --tide-booking-h5: 18px;
+  --tide-booking-h5-xl: 20px;
+
+  //h6
+  --tide-booking-h6: 16px;
+  --tide-booking-h6-md: 18px;
+
+  //a
+  --tide-booking-a-color: var(--tide-booking-color-primary);
+  --tide-booking-a-text-decoration: underline;
+  --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-a-text-decoration-hover: underline;
+  --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-a-text-decoration-focus: underline;
+
+  //small fontsize
+  --tide-booking-small-font-size--mobile: 13px;
+  --tide-booking-small-font-size--desktop: 15px;
+
+  //INPUT
+  --tide-booking-input-background: var(--tide-booking-white);
+  --tide-booking-input-border: 1.5px solid var(--tide-booking-gray--medium-light);
+  --tide-booking-input-border-radius: 5px;
+  --tide-booking-input-color: var(--tide-booking-black);
+  --tide-booking-input-height: 45px;
+  --tide-booking-input-icon-color: var(--tide-booking-gray-dark);
+
+  //INPUT--lg
+  --tide-booking-input-height-lg: 45px;
+
+  //INPUT--FOCUS/ACTIVE
+  --tide-booking-input-border-focus: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-input-icon-color-focus: var(--tide-booking-color-primary);
+
+  //INPUT--PLACEHOLDER
+  --tide-booking-input-placeholder-color: var(--tide-booking-gray-dark);
+  --tide-booking-input-placeholder-font-style: normal;
+
+  //INPUT--LABEL
+  --tide-booking-input-label-color: var(--tide-booking-black);
+  --tide-booking-input-label-font-size: 14px;
+  --tide-booking-input-label-font-weight: 400;
+  --tide-booking-input-label-font-style: normal;
+
+  //INPUT--reverse-btn
+  --tide-booking-input-reverse-btn-background: var(--tide-booking-white);
+  --tide-booking-input-reverse-btn-border: none;
+  --tide-booking-input-reverse-btn-border-radius: 50%;
+  --tide-booking-input-reverse-btn-box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);
+  --tide-booking-input-reverse-btn-fill: var(--tide-booking-gray-dark);
+
+  --tide-booking-input-reverse-btn-fill-hover: var(--tide-booking-color-primary);
+  --tide-booking-input-reverse-btn-box-shadow-hover: 0 0px 6px rgba(0, 0, 0, 0.2);
+  --tide-booking-input-reverse-btn-border-hover: none;
+  --tide-booking-input-reverse-btn-background-hover: var(--tide-booking-white);
+
+  //RADIOBUTTON
+  --tide-booking-radiobutton-border: 1.5px solid var(--tide-booking-gray-checkbox-bg);
+  --tide-booking-radiobutton-background: var(--tide-booking-white);
+  --tide-booking-radiobutton-color-text: var(--tide-booking-gray-dark);
+  --tide-booking-radiobutton-font-family: var(--tide-booking-font-body);
+  --tide-booking-radiobutton-font-size: 16px;
+  --tide-booking-radiobutton-font-weight: 400;
+
+  //RADIOBUTTON--INPUT--CHECKED
+  --tide-booking-radiobutton-input-checked-color-text: var(--tide-booking-color-primary);
+  --tide-booking-radiobutton-input-checked-background: var(--tide-booking-white);
+  --tide-booking-radiobutton-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
+
+  //CHECKBOX--INPUT--CHECKED--AFTER
+  --tide-booking-radiobutton-input-checked-after-color: var(--tide-booking-color-primary);
+
+  //CHECKBOX
+  --tide-booking-checkbox-border: 1.5px solid var(--tide-booking-gray-checkbox-bg);
+  --tide-booking-checkbox-border-radius: 0px;
+  --tide-booking-checkbox-background: var(--tide-booking-white);
+  --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
+  --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
+  --tide-booking-checkbox-font-size: 16px;
+  --tide-booking-checkbox-font-weight: 400;
+
+  //CHECKBOX--INPUT--CHECKED
+  --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
+  --tide-booking-checkbox-input-checked-color-text: var(--tide-booking-color-primary);
+  --tide-booking-checkbox-input-checked-background: var(--tide-booking-color-primary);
+  --tide-booking-checkbox-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
+
+  //CTA
+  --tide-booking-cta-height: 45px;
+  --tide-booking-cta-height-xs: 45px;
+  --tide-booking-cta-width: 100%;
+  --tide-booking-cta-width-xs: 100%;
+  --tide-booking-cta-padding: 10px 20px;
+  --tide-booking-cta-color: var(--tide-booking-white);
+  --tide-booking-cta-background: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-font-family: var(--tide-booking-font-body);
+  --tide-booking-cta-font-size: 16px;
+  --tide-booking-cta-font-size-xs: 18px;
+  --tide-booking-cta-font-weight: 400;
+  --tide-booking-cta-text-decoration: none;
+  --tide-booking-cta-border: none;
+  --tide-booking-cta-border-radius: 5px;
+
+  //CTA__ICON
+  --tide-booking-cta-icon-color: var(--tide-booking-white);
+  --tide-booking-cta-icon-size: 16px;
+
+  //CTA__HOVER
+  --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-color-hover: var(--tide-booking-white);
+  --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
+  --tide-booking-cta-border-hover: none;
+  --tide-booking-cta-text-decoration-hover: none;
+
+  //CTA__FOCUS
+  --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-color-focus: var(--tide-booking-white);
+  --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
+  --tide-booking-cta-border-focus: none;
+  --tide-booking-cta-text-decoration-focus: none;
+
+  //CTA--SECONDARY
+  --tide-booking-cta-height-secondary: 25px;
+  --tide-booking-cta-height-xs-secondary: 30px;
+  --tide-booking-cta-width-secondary: auto;
+  --tide-booking-cta-padding-secondary: 0px;
+  --tide-booking-cta-margin-secondary: 0px 0 0 0;
+  --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
+  --tide-booking-cta-border-secondary: none;
+  --tide-booking-cta-border-radius-secondary: 5px;
+  --tide-booking-cta-text-decoration-secondary: underline;
+  --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
+  --tide-booking-cta-font-size-secondary: 16px;
+  --tide-booking-cta-font-size-xs-secondary: 18px;
+  --tide-booking-cta-font-weight-secondary: 400;
+
+  //CTA--SECONDARY__ICON
+  --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
+  --tide-booking-cta-icon-size-secondary: 16px;
+
+  //CTA--SECONDARY__HOVER
+  --tide-booking-cta-background-secondary-hover: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-border-secondary-hover: none;
+  --tide-booking-cta-text-decoration-secondary-hover: underline;
+
+  //CTA--SECONDARY__FOCUS
+  --tide-booking-cta-background-secondary-focus: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-border-secondary-focus: none;
+  --tide-booking-cta-text-decoration-secondary-focus: underline;
+
+  //CTA--remove
+  --tide-booking-cta-height-remove: auto;
+  --tide-booking-cta-width-remove: auto;
+  --tide-booking-cta-padding-remove: 0px;
+  --tide-booking-cta-background-remove: var(--tide-booking-transparent);
+  --tide-booking-cta-color-remove: var(--tide-booking-gray-medium);
+  --tide-booking-cta-border-remove: none;
+  --tide-booking-cta-border-radius-remove: 5px;
+  --tide-booking-cta-text-decoration-remove: underline;
+  //CTA--remove__ICON
+  --tide-booking-cta-icon-color-remove: var(--tide-booking-invalid);
+  --tide-booking-cta-icon-size-remove: 16px;
+  //CTA--remove__HOVER, __focus
+  --tide-booking-cta-background-remove-hover: var(--tide-booking-transparent);
+  --tide-booking-cta-color-remove-hover: var(--tide-booking-gray-dark);
+  --tide-booking-cta-icon-color-remove-hover: var(--tide-booking-gray-dark);
+  --tide-booking-cta-border-remove-hover: none;
+  --tide-booking-cta-text-decoration-remove-hover: underline;
+
+  //INCREMENT__DECREMENT
+  //INCREMENT__DECREMENT--btns
+  --tide-booking-decrement-increment-width: 30px;
+  --tide-booking-decrement-increment-height: 30px;
+  --tide-booking-decrement-increment-border-radius: 5px;
+  --tide-booking-decrement-increment-border: 0px solid var(--tide-booking-color-primary-fade);
+  --tide-booking-decrement-increment-background: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
+  --tide-booking-decrement-increment-color: var(--tide-booking-color-primary);
+
+  //INCREMENT__DECREMENT--btns--icon
+  --tide-booking-decrement-increment-icon-width: 15px;
+  --tide-booking-decrement-increment-icon-height: 15px;
+  --tide-booking-decrement-increment-icon-color: var(--tide-booking-color-primary);
+
+  //INCREMENT__DECREMENT--btns--hover
+  --tide-booking-decrement-increment-background-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+  --tide-booking-decrement-increment-color-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-decrement-increment-border-hover: 0px solid var(--tide-booking-color-primary-fade);
+
+  //INCREMENT__DECREMENT--btns--icon--hover
+  --tide-booking-decrement-increment-icon-color-hover: var(--tide-booking-color-primary-dark);
+
+  //INCREMENT__DECREMENT--btns--focus
+  --tide-booking-decrement-increment-background-focus: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+  --tide-booking-decrement-increment-color-focus: var(--tide-booking-color-primary);
+  --tide-booking-decrement-increment-border-focus: 0px solid var(--tide-booking-color-primary-fade);
+
+  //INCREMENT__DECREMENT--btns--icon--focus
+  --tide-booking-decrement-increment-icon-color-focus: var(--tide-booking-color-primary-dark);
+
+  //INCREMENT__DECREMENT--LABEL
+  --tide-booking-decrement-increment-label-font: var(--tide-booking-font-size-body);
+  --tide-booking-decrement-increment-label-font-weight: 400;
+  --tide-booking-decrement-increment-label-color: var(--tide-booking-black);
+
+  //INCREMENT__DECREMENT--NUMBER
+  --tide-booking-decrement-increment-number-font: var(--tide-booking-font-size-body);
+  --tide-booking-decrement-increment-number-font-weight: 400;
+  --tide-booking-decrement-increment-number-color: var(--tide-booking-color-primary);
+
+  //DROPDOWN
+  --tide-booking-dropdown-background: var(--tide-booking-white);
+  --tide-booking-dropdown-color: var(--tide-booking-gray-dark);
+  --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-light);
+  --tide-booking-dropdown-border-radius: 5px;
+  --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
+
+  //DROPDOWN--HOVER
+  --tide-booking-dropdown-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
+  --tide-booking-dropdown-color-hover: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-background-hover: var(--tide-booking-white);
+
+  //DROPDOWN--focus
+  --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-dropdown-color-focus: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-background-focus: var(--tide-booking-white);
+
+  --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
+  --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
+
+  --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
+
+  //DROPDOWN--menu
+  --tide-booking-dropdown-menu-background: var(--tide-booking-white);
+  --tide-booking-dropdown-menu-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-dropdown-menu-border-radius: 5px;
+  --tide-booking-dropdown-menu-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-dropdown-menu-option-color: var(--tide-booking-gray-dark);
+  --tide-booking-dropdown-menu-option-background-hover: var(--tide-booking-gray-light);
+  --tide-booking-dropdown-menu-option-color-hover: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-menu-option-background-selected: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-menu-option-color-selected: var(--tide-booking-white);
+
+  //DATEPICKER
+  --tide-booking-datepicker-container-background: rgba(255, 255, 255, 0.97);
+  --tide-booking-datepicker-container-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-datepicker-close-color: var(--tide-booking-color-primary);
+
+  --tide-booking-datepicker-prev-next-color: var(--tide-booking-color-primary);
+  --tide-booking-datepicker-prev-next-background: var(--tide-booking-transparent);
+
+  --tide-booking-datepicker-day-labels-color: var(--tide-booking-black);
+
+  --tide-booking-datepicker-month-color: var(--tide-booking-black);
+  --tide-booking-datepicker-month-font: var(--tide-booking-font-heading);
+
+  //DATEPICKER--DAY
+  --tide-booking-datepicker-day-color: var(--tide-booking-gray-dark);
+  --tide-booking-datepicker-day-background: var(--tide-booking-white);
+  --tide-booking-datepicker-day-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-datepicker-day-border-radius: 5px;
+
+  //DATEPICKER--DAY--HOVER
+  --tide-booking-datepicker-day-border-hover: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-datepicker-day-background-hover: var(--tide-booking-gray-xlight);
+  --tide-booking-datepicker-day-color-hover: var(--tide-booking-color-primary);
+
+  //DATEPICKER--DAY--SELECTED
+  --tide-booking-datepicker-day-border-selected: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-datepicker-day-background-selected: var(--tide-booking-color-primary);
+  --tide-booking-datepicker-day-color-selected: var(--tide-booking-white);
+
+  //DATEPICKER--DAY--SELECTED--HOVER
+  --tide-booking-datepicker-day-border-selected-hover: 1.5px solid var(--tide-booking-color-primary-light);
+  --tide-booking-datepicker-day-background-selected-hover: var(--tide-booking-color-primary-light);
+  --tide-booking-datepicker-day-color-selected-hover: var(--tide-booking-white);
+
+  //DATEPICKER--DAY--DISABLED
+  --tide-booking-datepicker-day-color-disabled: var(--tide-booking-gray-medium);
+  --tide-booking-datepicker-day-background-disabled: var(--tide-booking-gray-xlight);
+  --tide-booking-datepicker-day-border-disabled: 1.5px solid var(--tide-booking-gray-border-light);
+
+  //DATEPICKER--DAY--OUTSIDE-MONTH
+  --tide-booking-datepicker-day-color-outside-month: var(--tide-booking-gray-medium);
+  --tide-booking-datepicker-day-background-outside-month: var(--tide-booking-gray-xlight);
+  --tide-booking-datepicker-day-border-outside-month: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-datepicker-day-opacity-outside-month: 0.6;
+
+  //DATEPICKER--INPUT
+  --tide-booking-datepicker-input-height: 45px;
+  --tide-booking-datepicker-input-height-lg: 55px;
+  --tide-booking-datepicker-input-background: var(--tide-booking-white);
+  --tide-booking-datepicker-input-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-datepicker-input-border-radius: 5px;
+  --tide-booking-datepicker-input-color: var(--tide-booking-black);
+
+  --tide-booking-datepicker-input-label-color: var(--tide-booking-color-primary-dark);
+
+  //SPINNER
+  --tide-booking-spinner-border: 5px solid rgba(255, 255, 255, 0.2);
+  --tide-booking-spinner-border-top-color: #dce1ff;
+
+  //ANIMATION
+  --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
+
+  //QSM container
+  --tide-booking-qsm-container-max-width: 1400px;
+  --tide-booking-qsm-container-background: var(--tide-booking-white);
+  --tide-booking-qsm-container-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-qsm-container-border-radius: 5px;
+  --tide-booking-qsm-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-qsm-container-padding: 20px;
+
+  //QSM tabs
+  --tide-booking-qsm-tabs-background: var(--tide-booking-gray-xlight);
+  --tide-booking-qsm-tabs-border-bottom: 1.5px solid var(--tide-booking-gray-border-light);
+
+  --tide-booking-qsm-tab-font-size: 16px;
+  --tide-booking-qsm-tab-font-weight: 300;
+  --tide-booking-qsm-tab-color: var(--tide-booking-gray-medium);
+  --tide-booking-qsm-tab-background: var(--tide-booking-transparent);
+  --tide-booking-qsm-tab-border-bottom-radius: 5px;
+  --tide-booking-qsm-tab-border-bottom-color: var(--tide-booking-color-primary-light-text);
+
+  --tide-booking-qsm-tab-color-hover: var(--tide-booking-color-primary-light-text);
+  --tide-booking-qsm-tab-background-hover: var(--tide-booking-transparent);
+  --tide-booking-qsm-tab-border-bottom-hover: var(--tide-booking-color-primary-light-text);
+
+  --tide-booking-qsm-tab-color-active: var(--tide-booking-color-primary);
+  --tide-booking-qsm-tab-background-active: var(--tide-booking-transparent);
+  --tide-booking-qsm-tab-border-bottom-color-active: var(--tide-booking-color-primary);
+  --tide-booking-qsm-tab-font-weight-active: 300;
+
+  //QSM input options
+  --tide-booking-qsm-input-options-background: var(--tide-booking-white);
+  --tide-booking-qsm-input-options-border: 1.5px solid var(--tide-booking-gray--medium-light);
+  --tide-booking-qsm-input-options-border-radius: 5px;
+  --tide-booking-qsm-input-options-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-qsm-input-options-title-font-size: 16px;
+  --tide-booking-qsm-input-options-title-font-weight: 600;
+  --tide-booking-qsm-input-options-title-color: var(--tide-booking-color-primary);
+
+  --tide-booking-qsm-input-option-child-border: 1.5px solid var(--tide-booking-color-primary-extra-fade);
+  --tide-booking-qsm-input-option-child-border-radius: 5px;
+  --tide-booking-qsm-input-option-child-background: var(--tide-booking-color-primary-extra-fade);
+  --tide-booking-qsm-input-option-child-background-hover: var(--tide-booking-color-primary-fade);
+  --tide-booking-qsm-input-option-child-font-size: 14px;
+  --tide-booking-qsm-input-option-child-icon: var(--tide-booking-color-primary);
+
+  --tide-booking-qsm-input-option-child-country-color: var(--tide-booking-black);
+
+  --tide-booking-qsm-input-option-child-airport-label-font-size: 12px;
+  --tide-booking-qsm-input-option-child-airport-label-color: var(--tide-booking-gray-dark);
+
+  --tide-booking-qsm-input-option-child-text: 12px;
+
+  --tide-booking-qsm-input-option-child-airport-color: var(--tide-booking-color-primary);
+
+  //QSM filter mobile
+  --tide-booking-qsm-filter-mobile-background: var(--tide-booking-white);
+
+  --tide-booking-qsm-filter-mobile-header-border: 1.5px solid var(--tide-booking-white);
+  --tide-booking-qsm-filter-mobile-header-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+  --tide-booking-qsm-filter-mobile-header-font-size: 18px;
+  --tide-booking-qsm-filter-mobile-header-font-weight: 600;
+  --tide-booking-qsm-filter-mobile-header-color: var(--tide-booking-color-primary);
+  --tide-booking-qsm-filter-mobile-header-background: var(--tide-booking-white);
+  --tide-booking-qsm-filter-mobile-header-close-color: var(--tide-booking-color-primary);
+
+  --tide-booking-qsm-filter-mobile-footer-background: var(--tide-booking-white);
+  --tide-booking-qsm-filter-mobile-footer-border: none;
+  --tide-booking-qsm-filter-mobile-footer-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
+
+  //passenger picker
+  --tide-booking-passenger-picker-background: var(--tide-booking-white);
+  --tide-booking-passenger-picker-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-passenger-picker-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  //passenger picker header
+  --tide-booking-passenger-picker-header-font-weight: 400;
+  --tide-booking-passenger-picker-header-color: var(--tide-booking-black);
+  --tide-booking-passenger-picker-header-border: 1.5px solid var(--tide-booking-gray-border-light);
+
+  --tide-booking-passenger-picker-header-count-color: var(--tide-booking-color-primary);
+
+  //passenger picker room
+  --tide-booking-passenger-picker-room-title-font-size: 16px;
+  --tide-booking-passenger-picker-room-title-font-weight: 600;
+  --tide-booking-passenger-picker-room-title-color: var(--tide-booking-color-primary);
+
+  --tide-booking-passenger-picker-room-item-font-size: 16px;
+  --tide-booking-passenger-picker-room-item-font-weight: 400;
+  --tide-booking-passenger-picker-room-item-color: var(--tide-booking-gray-dark);
+
+  --tide-booking-passenger-picker-room-item-age-font-size: 14px;
+  --tide-booking-passenger-picker-room-item-age-font-weight: 400;
+  --tide-booking-passenger-picker-room-item-age-color: var(--tide-booking-gray-medium);
+
+  //passenger picker room info message
+  --tide-booking-passenger-picker-room-info-message-font-size: 14px;
+  --tide-booking-passenger-picker-room-info-message-font-weight: 400;
+  --tide-booking-passenger-picker-room-info-message-font-style: normal;
+  --tide-booking-passenger-picker-room-info-message-color: var(--tide-booking-invalid);
+  --tide-booking-passenger-picker-room-info-message-background: var(--tide-booking-invalid-light);
+  --tide-booking-passenger-picker-room-info-message-border: none;
+  --tide-booking-passenger-picker-room-info-message-border-radius: 5px;
+  --tide-booking-passenger-picker-room-info-message-padding: 10px;
+
+  --tide-booking-passenger-picker-room-info-message-color-icon: var(--tide-booking-invalid);
+  --tide-booking-passenger-picker-room-info-message-icon-size: 16px;
+}