:root {

    /* Breakpoints */
    --tablet-landscape-breakpoint: 1024px;
    --tablet-portrait-breakpoint: 768px;
    --tablet-mobile-breakpoint: 390px;

    /* Layout mobile */
    --mobile-wrapper-margin-horizontal: 0;
    --mobile-wrapper-margin-vertial: 0;
    --mobile-container-max-width: none;

    /* Layout tablet portrait */
    --tablet-portrait-wrapper-margin-horizontal: 0;
    --tablet-portrait-wrapper-margin-vertial: 0;
    --tablet-portrait-container-max-width: none;

    /* Layout tablet portrait */
    --tablet-landscape-wrapper-margin-horizontal: 0;
    --tablet-landscape-wrapper-margin-vertial: 0;
    --tablet-landscape-container-max-width: none;

    /* Layout laptop */
    --laptop-wrapper-margin-horizontal: 0;
    --laptop-wrapper-margin-vertial: 0;
    --laptop-container-max-width: none;

    /* Layout desktop */
    --desktop-wrapper-margin-horizontal: 0;
    --desktop-wrapper-margin-vertial: 0;
    --desktop-container-max-width: none;

    --spacing-step: 5px;
    /* Spacing units */
    --margin-xs: 5px;
    --margin-sm: 10px;
    --margin-md: 15px;
    --margin-lg: 20px;

    --padding-xs: 5px;
    --padding-sm: 10px;
    --padding-md: 15px;
    --padding-lg: 20px;

    /* colors */
    --main-dark-blue: #003E5C;
    --main-light-blue: #00AAC3;
    --main-green: #91BE1E;
    --main-yellow: #FFD205;
    --main-orange: #EF7D00;

    --white: #fff;
    --black: #000;
    --grey: rgba(0, 0, 0, 0.5);
    --light-grey: #E0DED8;
    --light-grey-50: #EFF3F5;

    --main-dark-blue-80: #33657D;
    --main-dark-blue-70: #4C788D;
    --main-dark-blue-50: #809EAE;
    --main-dark-blue-30: #B2C5CE;
    --main-dark-blue-20: #DEE6EA;
    --main-dark-blue-10: #EFF3F5;
    --main-light-blue-80: #33BBCF;
    --main-light-blue-70: #4CC3D5;
    --main-light-blue-50: #80D4E1;
    --main-light-blue-30: #B2E5ED;
    --main-light-blue-20: #CCEEF3;
    --main-light-blue-10: #E6F7F9;
    --main-green-80: #91BE1E;
    --main-green-70: #B2D161;
    --main-green-50: #C8DE8E;
    --main-green-30: #DEEBBB;
    --main-green-20: #E9F2D2;
    --main-green-10: #F4F8E9;
    --main-yellow-80: #FFD205;
    --main-yellow-70: #FFDF50;
    --main-yellow-50: #FFE882;
    --main-yellow-30: #FFF1B4;
    --main-yellow-20: #FFF6CD;
    --main-yellow-10: #FFFBE6;
    --main-orange-80: #F29733;
    --main-orange-70: #F4A44C;
    --main-orange-50: #F7BE80;
    --main-orange-30: #FAD8B2;
    --main-orange-20: #FCE5CC;
    --main-orange-10: #FDF2E6;

    --info: #017AAD;
    --success: #29823B;
    --warning: #E9A100;
    --danger: #D10028;

    --info-50: #80BCD6;
    --info-20: #CCE4EF;
    --success-50: #94C09D;
    --success-20: #D4E6D8;
    --warning-50: #F4D080;
    --warning-20: #FBECCC;
    --danger-50: #E88093;
    --danger-20: #F6CCD4;

    /* Header Font family */
    --header-font-family: 'Libre Baskerville', serif;
    /* Header fontsize */
    --desktop-h1-font-size: 48px;
    --desktop-h2-font-size: 40px;
    --desktop-h3-font-size: 32px;
    --desktop-h4-font-size: 24px;
    --desktop-h5-font-size: 20px;
    --desktop-h6-font-size: 16px;

    --mobile-h1-font-size: 32px;
    --mobile-h2-font-size: 24px;
    --mobile-h3-font-size: 20px;
    --mobile-h4-font-size: 18px;
    --mobile-h5-font-size: 16px;
    --mobile-h6-font-size: 14px;

    /* Body Font family */
    --body-font-family: 'Poppins', sans-serif;
    /* Body Font size */
    --font-size-extra-large: 18px;
    --font-size-large: 16px;
    --font-size-medium: 14px;
    --font-size-small: 12px;
    --font-size-extra-small: 10px;

    /* Blockquote */
    --blockquote-color: var(--main-dark-blue-80);
    --blockquote-block-start: 40px;
    --blockquote-block-end: 30px;
    --blockquote-inline-start: 110px;

    /* Action font size */
    --action-button-font-size: 18px;
    --action-primary-font-size: 18px;
    --action-secondary-font-size: 16px;
    --action-tertiary-font-size: 14px;

    /* Other font size */
    --action-top-menu-font-size: 14px;
    --action-navigation-font-size: 16px;
    --action-breadcrumb-font-size: 14px;
    --action-tag-font-size: 16px;

    /* Shadow box */
    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-s: 0 2px 16px rgba(0, 0, 0, 0.1);
    --shadow-m: 0 4px 24px rgba(0, 0, 0, 0.1);
    --shadow-l: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.1);

    /* Separator */
    --separator-xs: 0.5em 0 0.5em 0;
    --separator-sm: 1em 0 1em 0;
    --separator-md: 1.5em 0 1.5em 0;
    --separator-lg: 2.5em 0 2.5em 0;
    --separator-width: 100%;
    --separator-height: 1px;
    --separator-color: var(--light-grey);

    /* Breadcrumbs */
    --breadcrumbs-item-padding: 0.25em 1em 0.25em 0;
    --breadcrumb-passive-color: var(--main-dark-blue);
    --breadcrumb-hover-color: var(--main-dark-blue-70);
    --breadcrumb-focus-color:  var(--main-dark-blue);
    --breadcrumb-active-color: var(--main-dark-blue);
    --breadcrumb-disabled-color: var(--grey);

    /* Button */
    --primary-button-color: var(--main-orange);
    --primary-button-color-hover: var(--main-orange-70);
    --primary-button-color-disabled: var(--light-grey);
    --primary-button-text-padding: 15px 27px 15px 27px;
    --primary-button-text-color: var(--white);
    --primary-button-text-hover: var(--white);
    --primary-button-text-disabled: var(--grey);
    --primary-button-border-width: 1px;
    --primary-button-border-style: solid;
    --primary-button-border-color: var(--main-orange-70);
    --primary-button-border-hover: var(--main-orange-70);
    --primary-button-border-disabled: var(--grey);
    --primary-button-border-radius: 90px;

    --secondary-button-color: var(--white);
    --secondary-button-color-hover: var(--white);
    --secondary-button-color-disabled: var(--white);
    --secondary-button-text-padding: 15px 27px 15px 27px;
    --secondary-button-text-color: var(--main-dark-blue);
    --secondary-button-text-hover: var(--main-dark-blue-70);
    --secondary-button-text-disabled: var(--grey);
    --secondary-button-border-width: 1px;
    --secondary-button-border-style: solid;
    --secondary-button-border-color: var(--main-dark-blue);
    --secondary-button-border-hover: var(--main-dark-blue-70);
    --secondary-button-border-disabled: var(--grey);
    --secondary-button-border-radius: 90px;

    --grey-button-color: var(--light-grey);
    --grey-button-color-hover: var(--main-orange-70);
    --grey-button-color-disabled: var(--light-grey);
    --grey-button-text-padding: 15px 27px 15px 27px;
    --grey-button-text-color: var(--white);
    --grey-button-text-hover: var(--white);
    --grey-button-text-disabled: var(--grey);
    --grey-button-border-width: 1px;
    --grey-button-border-style: solid;
    --grey-button-border-color: var(--light-grey);
    --grey-button-border-hover: var(--main-orange-70);
    --grey-button-border-disabled: var(--grey);
    --grey-button-border-radius: 90px;

    --tab-button-focus: var(--white);
    --tab-button-border-focus: var(--main-orange);
    --tab-button-background-focus: var(--main-orange);

    /* Link */
    --link-color: var(--main-orange);
    --link-color-hover: var(--main-orange-70);
    --link-color-disabled: var(--grey);
    --link-button-border-width: 1px;
    --link-button-border-style: solid;
    --link-button-padding: 8px 16px 8px 16px;
    --link-empty-button-border-color: var(--main-orange-30);
    --link-empty-button-border-hover: var(--main-orange-30);
    --link-empty-button-border-disabled: var(--grey);
    --link-button-border-color: var(--main-orange);
    --link-button-border-hover: var(--main-orange-70);
    --link-button-border-disabled: var(--grey);
    --link-button-border-radius: 90px;

    /* Time picker */
    --time-picker-padding: 8px 12px 8px 12px;
    --time-picker-border-width: 2px;
    --time-picker-border-style: solid;
    --time-picker-border-color: var(--main-orange);
    --time-picker-border-hover: var(--main-orange);
    --time-picker-border-focus: var(--main-orange);
    --time-picker-border-active: var(--main-orange);
    --time-picker-border-disabled: var(--white);
    --time-picker-border-radius: 8px;
    --time-picker-background-color: var(--white);
    --time-picker-background-hover: var(--main-orange-10);
    --time-picker-background-focus: var(--main-orange-10);
    --time-picker-background-active: var(--main-orange);
    --time-picker-background-disabled: var(--white);
    --time-picker-color: var(--main-dark-blue);
    --time-picker-hover: var(--main-dark-blue);
    --time-picker-focus: var(--main-dark-blue);
    --time-picker-active: var(--white);
    --time-picker-disabled: var(--grey);

    /* Tag */
    --action-tag-border-radius: 6px;
    --action-tag-padding: 4px 8px 4px 8px;
    --action-tag-dark-blue-color: var(--white);
    --action-tag-dark-blue-background: var(--main-dark-blue);

    --action-tag-light-blue-color: var(--main-dark-blue);
    --action-tag-light-blue-background: var(--light-grey);

    --action-tag-dark-orange-color: var(--white);
    --action-tag-dark-orange-background: var(--main-orange);

    --action-tag-light-orange-color: var(--main-orange);
    --action-tag-light-orange-background: var(--main-orange-10);

    /* Checkboxes */
    --checkbox-width: 20px;
    --checkbox-border-width: 2px;
    --checkbox-border-radius: 4px;

    --checkbox-unchecked-border-color: var(--light-grey);
    --checkbox-unchecked-border-hover: var(--main-dark-blue-70);
    --checkbox-unchecked-border-focus: var(--main-dark-blue-70);
    --checkbox-unchecked-border-active: var(--main-dark-blue);
    --checkbox-unchecked-border-disabled: var(--light-grey);

    --checkbox-unchecked-color: var(--white);
    --checkbox-unchecked-hover: var(--white);
    --checkbox-unchecked-focus: var(--white);
    --checkbox-unchecked-active: var(--white);
    --checkbox-unchecked-disabled: var(--light-grey);

    --checkbox-checked-border-color: var(--main-dark-blue);
    --checkbox-checked-border-hover: var(--main-dark-blue-70);
    --checkbox-checked-border-focus: var(--main-dark-blue-70);
    --checkbox-checked-border-active: var(--main-dark-blue);
    --checkbox-checked-border-disabled: var(--light-grey);

    --checkbox-checked-color: var(--main-dark-blue);
    --checkbox-checked-hover: var(--main-dark-blue-70);
    --checkbox-checked-focus: var(--main-dark-blue-70);
    --checkbox-checked-active: var(--main-dark-blue);
    --checkbox-checked-disabled: var(--light-grey);

    --checkmark-color: var(--white);
    --checkmark-color-disabled: var(--grey);
    --checkmark-all-unchecked-color: var(--light-grey);
    --checkmark-all-checked-color: var(--white);
    --checkmark-all-color-disabled: var(--grey);

    --input-text-border-width: 1px;
    --input-text-font-size: var(--font-size-large);
    --input-text-padding: 12px 13px 12px 13px;
    --input-text-background-color: var(--white);
    --input-text-label-font-size: var(--font-size-small);
    --input-text-label-padding: 0 5px;
    --input-text-label-background-color: var(--white);
    --input-text-label-color: var(--main-dark-blue);
    --input-text-label-hover: var(--main-dark-blue);
    --input-text-label-focus: var(--main-dark-blue);
    --input-text-label-danger: var(--danger);
    --input-text-label-disabled: var(--grey);
    --input-text-border-color: var(--light-grey);
    --input-text-border-hover: var(--grey);
    --input-text-border-focus: var(--main-dark-blue);
    --input-text-border-danger: var(--danger);
    --input-text-border-disabled: var(--grey);

    --input-text-text-color: var(--main-dark-blue);
    --input-text-text-disabled: var(--grey);
    --input-text-radius: 6px;

    --input-search-background-color: var(--main-dark-blue-10);
    --input-search-color: var(--main-dark-blue-70);
    --input-search-border-width: 1px;
    --input-search-border-color: var(--main-dark-blue-50);
    --input-search-font-size: var(--font-size-extra-large);

    --input-search-border-radius: 4px;
    --input-search-rounded-border-radius: 80px;

    --select-background-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='10' height='6' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd' viewBox='0 0 512 298.04'%3E%3Cpath fill='%23003e5c' fill-rule='nonzero' d='%20M12.08%2070.78c-16.17-16.24-16.09-42.54.15-58.7%2016.25-16.17%2042.54-16.09%2058.71.15L256%20197.76%20441.06%2012.23c16.17-16.24%2042.46-16.32%2058.71-.15%2016.24%2016.16%2016.32%2042.46.15%2058.7L285.27%20285.96c-16.24%2016.17-42.54%2016.09-58.7-.15L12.08%2070.78z'/%3E%3C/svg%3E");

    /* Toaster */
    --toaster-actu-radius: 24px 24px 0 0;
    --toaster-actu-background-color: var(--main-dark-blue);
    --toaster-actu-padding: 16px 24px 16px 24px;
    --toaster-actu-height: 85px;
    --toaster-actu-color: var(--white);

    /* Link list */
    --list-link-font-size: var(--font-size-extra-large);
    --list-link-color: var(--main-dark-blue);
    --list-link-min-width: 230px;
    --list-link-font-weight: 600;
    --list-link-amount-font-size: var(--font-size-large);
    --list-link-amount-font-weight: 300;
    --list-link-underline-color: var(--main-orange);
    --list-link-underline-width: 24px;
    --list-link-underline-height: 2px;

    --page-container-max-width: 1200px;
    --page-container-min-width: 250px;
    --page-content-container-max-width: 796px;
    --page-content-container-min-width: 250px;

    --facility-page-content-container-max-width: 825px;
    --facility-page-left-content-container-max-width: calc(var(--facility-page-content-container-max-width) - 130px);

    /* Search */
    --search-radius: 0 32px 32px 32px;

    --content-padding: 45px 0;

    /* Landing Page */
    --lp-form-top: 0px;
}

@media (min-width: 1024px) and (max-width: 1399.9px) {
    :root {
        --action-navigation-font-size: 15px;
    }
}

@media (max-width: 1279px) {
  :root {
    --page-container-max-width: calc(100% - 40px);
  }
}

@media (max-width: 1023px) {
    :root {
        --content-padding: 25px 0;
    }
}