/*
these properties do not need to be edited */
:root {
  // Additional UI colors
  --white: #ffffff;
  --black: #000000;
  --info: #6ec3ff;
  --success: #3dd992;
  --warning: #ffb74d;
  --error: #e6546e;
  //  Gray  Colors
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
}

// ==========================================================================
// MYBOOKING THEME CUSTOMIZATION VARIABLES
// ==========================================================================

:root {
  // Theme colors
  --brand-primary: #2194f3;
  --brand-primary-light: #6ec4ff;
  --brand-primary-dark: #0067c0;
  // Secondary colors
  --brand-secondary: #424242;
  --brand-secondary-light: #6d6d6d;
  --brand-secondary-dark: #1b1b1b;
  // Base
  --font-family: "Inter var", sans-serif;
  --font-body: var(--font-family);
  --font-heading: var(--font-family);
  --font-heading-color: #424242;
  --body-bg: var(--white);
  --body-color: var(--gray-900);
  --border-radius: 3px;
  // Process pages
  --process-container-bg: var(--gray-200);
  --process-message-bg: var(--brand-primary);
  --process-message-color: var(--white);
  // Links
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-primary-light);
  --color-link-active: var(--brand-primary-dark);
  --color-link-visited: var(--brand-primary-dark);
  // Topbar message
  --topbar-message-bg: var(--warning);
  --topbar-message-text: var(--body-color);
  --topbar-message-link: var(--white);
  --topbar-message-link-hover: var(--gray-50);
  // Topbar
  --home-topbar-bg: var(--brand-primary);
  --topbar-bg: var(--brand-primary);
  --topbar-color: var(--white);
  --topbar-link-color: var(--white);
  --topbar-link-color-hover: var(--brand-primary-dark);
  --topbar-icon-color: var(--white);
  // Navbar
  --navbar-bg: var(--white);
  --navbar-box-shadow: none;
  --navbar-link-color: var(--black);
  --navbar-link-color-hover: var(--brand-primary);
  --navbar-link-active: var(--brand-primary);
  --navbar-dropdown-item-color: var(--gray-900);
  --navbar-dropdown-item-active-bg: var(--brand-secondary);
  --navbar-link-collapse: var(--white);
  --navbar-branding: #424242;
  // Logo
  --custom-logo-height: 40px;
  // Toggler
  --toggler-icon-font-size: 1.3rem;
  --toggler-icon-color: var(--gray-900);
  --toggler-icon-mt: 6px;
  // Page headers
  --hero-bg-color: #fff;
  --hero-img-brightness: inherit;
  // Home header
  --home-header-color: var(--white);
  --home-header-bg-height-sm: 300px;
  --home-header-bg-height-lg: 700px;
  --home-header-widget-title: #fff;
  --home-header-widget-title-align: left;
  --home-header-widget-text: #fff;
  --home-header-widget-text-align: left;
  --home-header-widget-link: #fff;
  // Footer
  --footer-bg: var(--gray-100);
  --footer-color: var(--black);
  --footer-color-link: var(--black);
  --footer-color-link-hover: var(--brand-primary);
  --footer-logo-width: auto;
  --footer-logo-height: 40px;
  // Credits
  --credits-bg: var(--gray-900);
  --credits-color: var(--gray-300);
  --credits-color-link: var(--white);
  --credits-color-link-hover: var(--gray-400);
  // Cookies
  --cookies-bg-color: var(--brand-primary);
  --cookies-text-color: var(--body-color);
  // Home Selector bg
  --home-selector-bg: rgba(255, 255, 255, 0.6);
  --home-selector-mobile-bg: var(--gray-100);
  // Selector bg outside home-page
  --selector-bg: var(--gray-100);
  // Selector search btn
  --selector-btn-bg-color: var(--brand-primary);
  --selector-btn-border-color: var(--brand-primary);
  --selector-btn-color: var(--white);
  --selector-btn-hover-bg-color: var(--brand-primary-dark);
  --selector-btn-hover-border-color: var(--brand-primary-dark);
  --selector-btn-hover-color: var(--white);
  // Selector search btn when is sticky
  --selector-btn-sticky-bg-color: var(--brand-primary);
  // Selector labels
  --selector-label-color: var(--body-color);
  // Selector sticky
  --selector-sticky-bg: var(--brand-primary);
  --selector-sticky-labels-color: var(--white);
  // Selector sticky search btn
  --selector-btn-sticky-bg-color: transparent;
  --selector-btn-sticky-border-color: var(--white);
  --selector-btn-sticky-color: var(--white);
  --selector-btn-sticky-hover-bg-color: var(--brand-primary-dark);
  --selector-btn-sticky-hover-border-color: var(--brand-primary-dark);
  --selector-btn-sticky-hover-color: var(--white);
  // Selector labels
  --selector-label-color: var(--body-color);
  // Selector sticky
  --selector-sticky-bg: var(--brand-primary);
  --selector-sticky-labels-color: var(--white);
  // Selector inside modal
  --modal-selector-label-color: var(--body-color);
  --modal-selector-bg: var(--gray-200);
  // Buttons
  --btn-padding: .4rem 1.5rem;
  --btn-bg-color: var(--brand-primary);
  --btn-bg-color-hover: var(--brand-primary-dark);
  --btn-border-color: var(--brand-primary);
  --btn-border-color-hover: var(--brand-primary-dark);
  --btn-border-radius: 50px;
  --btn-color: var(--white);
  --btn-color-hover: var(--white);
  --btn-font-w: 700;
  --btn-text-transform: uppercase;
  --btn-text-spacing: 1px;
  // Steps
  --steps-wrapper-bg-color: var(--gray-100);
  --step-title-color: var(--brand-primary-dark);
  --step-circle-text-color: var(--gray-700);
  --step-circle-bg-color: var(--white);
  --step-done-color: var(--brand-primary-light);
  --step-active-color: var(--brand-primary-dark);
  --step-active-text-color: var(--brand-primary-dark);
  --step-line-color: var(--white);
  --step-text-color: var(--brand-primary-light);
  --step-done-ckeck-icon-color: var(--white);
  // Wizard
  --wizard-bg-color: var(--gray-200);
  --wizard-input-border-color: var(--gray-700);
  // Forms
  --form-control-bg-color: var(--white);
  --form-control-color: var(--gray-700);
  --form-control-border-color: var(--gray-400);
  --form-control-height: 38px;
  --form-control-font-size: 0.8rem;
  --flex-form-control-border-radius: var(--border-radius);
  --bootstrap-form-control-border-radius: var(--border-radius);
  --text-area-bg: var(--gray-50);
  --textarea-bg: var(--gray-50);
  --form-control-disabled: var(--gray-200);
  // Sticky bars in choose product and complete
  --sticky-bar-bg: var(--brand-primary);
  --sticky-bar-icons-color: var(--white);
  --sticky-bar-icons-color-hover: var(--brand-primary-light);
  --sticky-bar-color: var(--white);
  --sticky-bar-arrow-icon-color: var(--gray-400);
  --sticky-bar-price-color: var(--white);
  --sticky-bar-link-color: var(--white);
  --sticky-bar-link-color-hover: var(--gray-300);
  // Card static
  --card-image-bg-color: var(--white);
  --card-body-bg-color: var(--white);
  --card-info-icon-color: var(--gray-300);
  --card-info-icon-color-hover: var(--gray-400);
  --card-product-name-color: var(--gray-900);
  --card-short-description-color: var(--gray-500);
  --card-image-container-height: 300px; // Card image container height 
  --card-custom-message-top: 260px; // Custom message top
  --card-image-object-fit: contain; // For background transparent images use contain otherwise use cover
  --card-key-characteristics-text-color: var(--gray-900);
  --card-image-object-fit: contain;
  --card-image-padding: 0px;
  --card-list-key-show: flex;
  --card-footer-height: 77px;
  // Product detail
  --product-detail-bg-color: var(--white);
  --product-detail-dates-titles: var(--gray-900);
  --product-detail-dates-text: var(--gray-500);
  --product-detail-group-name: var(--gray-900);
  --product-detail-duration-text: var(--gray-900);
  // Comments
  --comments-bg-color: var(--gray-50);
  // Gutenberg
  --alignwide-width: 1480px;
  --alignwide-centering: calc(50% - 740px);
  --alignfull-width: 100vw;
  --alignfull-centering: calc(50% - 50vw);
  // Content width
  --page-width: 100%;
  --post-width: 70%;
}
