:root {
    --color-white-rgb: 255,255,255;
    --color-black-rgb: 0,0,0;
    --color-white: rgb(var(--color-white-rgb));
    --color-black: rgb(var(--color-black-rgb));
    --color-neutral-900-rgb: 16,17,20;
    --color-neutral-800-rgb: 25,26,31;
    --color-neutral-700-rgb: 30,31,36;
    --color-neutral-600-rgb: 53,55,61;
    --color-neutral-500-rgb: 90,94,102;
    --color-neutral-400-rgb: 131,136,143;
    --color-neutral-300-rgb: 181,185,191;
    --color-neutral-200-rgb: 220,221,224;
    --color-neutral-100-rgb: 237,238,240;
    --color-neutral-050-rgb: 247,247,247;
    --color-neutral-900: rgb(var(--color-neutral-900-rgb));
    --color-neutral-800: rgb(var(--color-neutral-800-rgb));
    --color-neutral-700: rgb(var(--color-neutral-700-rgb));
    --color-neutral-600: rgb(var(--color-neutral-600-rgb));
    --color-neutral-500: rgb(var(--color-neutral-500-rgb));
    --color-neutral-400: rgb(var(--color-neutral-400-rgb));
    --color-neutral-300: rgb(var(--color-neutral-300-rgb));
    --color-neutral-200: rgb(var(--color-neutral-200-rgb));
    --color-neutral-100: rgb(var(--color-neutral-100-rgb));
    --color-neutral-050: rgb(var(--color-neutral-050-rgb));
    --color-orange-900-rgb: 61,22,12;
    --color-orange-800-rgb: 117,38,12;
    --color-orange-700-rgb: 168,50,0;
    --color-orange-600-rgb: 224,75,0;
    --color-orange-500-rgb: 255,102,0;
    --color-orange-400-rgb: 255,145,71;
    --color-orange-300-rgb: 255,189,138;
    --color-orange-200-rgb: 255,220,189;
    --color-orange-100-rgb: 255,236,219;
    --color-orange-050-rgb: 255,245,235;
    --color-orange-900: rgb(var(--color-orange-900-rgb));
    --color-orange-800: rgb(var(--color-orange-800-rgb));
    --color-orange-700: rgb(var(--color-orange-700-rgb));
    --color-orange-600: rgb(var(--color-orange-600-rgb));
    --color-orange-500: rgb(var(--color-orange-500-rgb));
    --color-orange-400: rgb(var(--color-orange-400-rgb));
    --color-orange-300: rgb(var(--color-orange-300-rgb));
    --color-orange-200: rgb(var(--color-orange-200-rgb));
    --color-orange-100: rgb(var(--color-orange-100-rgb));
    --color-orange-050: rgb(var(--color-orange-050-rgb));
    --color-petrol-900-rgb: 13,47,64;
    --color-petrol-800-rgb: 9,69,89;
    --color-petrol-700-rgb: 6,101,120;
    --color-petrol-600-rgb: 8,130,154;
    --color-petrol-500-rgb: 9,150,179;
    --color-petrol-400-rgb: 96,190,209;
    --color-petrol-300-rgb: 165,219,230;
    --color-petrol-200-rgb: 206,234,240;
    --color-petrol-100-rgb: 232,247,250;
    --color-petrol-050-rgb: 243,249,250;
    --color-petrol-900: rgb(var(--color-petrol-900-rgb));
    --color-petrol-800: rgb(var(--color-petrol-800-rgb));
    --color-petrol-700: rgb(var(--color-petrol-700-rgb));
    --color-petrol-600: rgb(var(--color-petrol-600-rgb));
    --color-petrol-500: rgb(var(--color-petrol-500-rgb));
    --color-petrol-400: rgb(var(--color-petrol-400-rgb));
    --color-petrol-300: rgb(var(--color-petrol-300-rgb));
    --color-petrol-200: rgb(var(--color-petrol-200-rgb));
    --color-petrol-100: rgb(var(--color-petrol-100-rgb));
    --color-petrol-050: rgb(var(--color-petrol-050-rgb));
    --color-green-900-rgb: 25,51,20;
    --color-green-800-rgb: 47,92,33;
    --color-green-700-rgb: 63,122,39;
    --color-green-600-rgb: 80,153,43;
    --color-green-500-rgb: 91,179,36;
    --color-green-400-rgb: 131,209,79;
    --color-green-300-rgb: 171,230,129;
    --color-green-200-rgb: 205,235,183;
    --color-green-100-rgb: 228,247,213;
    --color-green-050-rgb: 239,250,230;
    --color-green-900: rgb(var(--color-green-900-rgb));
    --color-green-800: rgb(var(--color-green-800-rgb));
    --color-green-700: rgb(var(--color-green-700-rgb));
    --color-green-600: rgb(var(--color-green-600-rgb));
    --color-green-500: rgb(var(--color-green-500-rgb));
    --color-green-400: rgb(var(--color-green-400-rgb));
    --color-green-300: rgb(var(--color-green-300-rgb));
    --color-green-200: rgb(var(--color-green-200-rgb));
    --color-green-100: rgb(var(--color-green-100-rgb));
    --color-green-050: rgb(var(--color-green-050-rgb));
    --color-yellow-900-rgb: 61,33,0;
    --color-yellow-800-rgb: 128,77,0;
    --color-yellow-700-rgb: 173,121,0;
    --color-yellow-600-rgb: 214,157,0;
    --color-yellow-500-rgb: 235,188,0;
    --color-yellow-400-rgb: 255,213,0;
    --color-yellow-300-rgb: 255,230,102;
    --color-yellow-200-rgb: 255,238,153;
    --color-yellow-100-rgb: 255,247,204;
    --color-yellow-050-rgb: 255,251,230;
    --color-yellow-900: rgb(var(--color-yellow-900-rgb));
    --color-yellow-800: rgb(var(--color-yellow-800-rgb));
    --color-yellow-700: rgb(var(--color-yellow-700-rgb));
    --color-yellow-600: rgb(var(--color-yellow-600-rgb));
    --color-yellow-500: rgb(var(--color-yellow-500-rgb));
    --color-yellow-400: rgb(var(--color-yellow-400-rgb));
    --color-yellow-300: rgb(var(--color-yellow-300-rgb));
    --color-yellow-200: rgb(var(--color-yellow-200-rgb));
    --color-yellow-100: rgb(var(--color-yellow-100-rgb));
    --color-yellow-050: rgb(var(--color-yellow-050-rgb));
    --color-red-900-rgb: 66,19,26;
    --color-red-800-rgb: 92,18,31;
    --color-red-700-rgb: 133,21,40;
    --color-red-600-rgb: 179,21,48;
    --color-red-500-rgb: 242,25,61;
    --color-red-400-rgb: 255,71,96;
    --color-red-300-rgb: 255,122,136;
    --color-red-200-rgb: 255,168,174;
    --color-red-100-rgb: 255,219,220;
    --color-red-050-rgb: 255,240,240;
    --color-red-900: rgb(var(--color-red-900-rgb));
    --color-red-800: rgb(var(--color-red-800-rgb));
    --color-red-700: rgb(var(--color-red-700-rgb));
    --color-red-600: rgb(var(--color-red-600-rgb));
    --color-red-500: rgb(var(--color-red-500-rgb));
    --color-red-400: rgb(var(--color-red-400-rgb));
    --color-red-300: rgb(var(--color-red-300-rgb));
    --color-red-200: rgb(var(--color-red-200-rgb));
    --color-red-100: rgb(var(--color-red-100-rgb));
    --color-red-050: rgb(var(--color-red-050-rgb));
    --color-shade-900: rgba(4,6,10,.94);
    --color-shade-800: rgba(4,6,10,.9);
    --color-shade-700: rgba(8,10,15,.86);
    --color-shade-600: rgba(8,10,15,.76);
    --color-shade-500: rgba(10,13,20,.64);
    --color-shade-400: rgba(10,13,20,.48);
    --color-shade-300: rgba(10,14,26,.28);
    --color-shade-200: rgba(10,14,26,.14);
    --color-shade-100: rgba(6,12,31,.07);
    --color-shade-050: rgba(6,12,31,.03);
    --color-status-success: rgb(var(--color-status-success-rgb));
    --color-background-primary: rgb(var(--color-background-primary-rgb));
    --color-background-highlight: rgb(var(--color-background-highlight-rgb));
    --color-background-secondary: rgb(var(--color-background-secondary-rgb));
    --color-background-contrast: rgb(var(--color-background-contrast-rgb));
    --color-content-lead: rgb(var(--color-content-lead-rgb));
    --color-content-lead-hover: rgb(var(--color-content-lead-hover-rgb));
    --color-content-lead-active: rgb(var(--color-content-lead-active-rgb));
    --color-content-secondary: rgb(var(--color-content-secondary-rgb));
    --color-content-secondary-hover: rgb(var(--color-content-secondary-hover-rgb));
    --color-content-secondary-active: rgb(var(--color-content-secondary-hover-rgb));
    --color-content-silent: rgb(var(--color-content-silent-rgb));
    --color-action: rgb(var(--color-action-rgb));
    --color-background-action: rgb(var(--color-background-action-rgb));
    --color-content-action: rgb(var(--color-content-action-rgb));
    --color-content-action-hover: rgb(var(--color-content-action-hover-rgb));
    --color-content-action-active: rgb(var(--color-content-action-active-rgb));
    --color-accent: rgb(var(--color-accent-rgb));
    --color-background-accent: rgb(var(--color-background-accent-rgb));
    --color-content-accent: rgb(var(--color-content-accent-rgb));
    --color-content-accent-hover: rgb(var(--color-content-accent-hover-rgb));
    --color-content-accent-active: rgb(var(--color-content-accent-active-rgb));
    --color-success: rgb(var(--color-success-rgb));
    --color-background-success: rgb(var(--color-background-success-rgb));
    --color-content-success: rgb(var(--color-content-success-rgb));
    --color-content-success-hover: rgb(var(--color-content-success-hover-rgb));
    --color-content-success-active: rgb(var(--color-content-success-active-rgb));
    --color-warning: rgb(var(--color-warning-rgb));
    --color-background-warning: rgb(var(--color-background-warning-rgb));
    --color-content-warning: rgb(var(--color-content-warning-rgb));
    --color-content-warning-hover: rgb(var(--color-content-warning-hover-rgb));
    --color-content-warning-active: rgb(var(--color-content-warning-active-rgb));
    --color-error: rgb(var(--color-error-rgb));
    --color-background-error: rgb(var(--color-background-error-rgb));
    --color-content-error: rgb(var(--color-content-error-rgb));
    --color-content-error-hover: rgb(var(--color-content-error-hover-rgb));
    --color-content-error-active: rgb(var(--color-content-error-active-rgb));
    --color-focus-border: rgb(var(--color-focus-border-rgb));
    --color-focus-fill: rgb(var(--color-focus-fill-rgb));
    --color-orange: #f60;
    --color-orange-hover: #e65c00;
    --color-green: #7abf1d;
    --color-red: #f2193a;
    --color-red-hover: #d91634;
    --color-red-dark: #cc1531;
    --color-yellow: #fff71a;
    --color-yellow-dark: #ffd500;
    --color-petrol: #0996b3;
    --color-petrol-light: #e8f7fa;
    --color-petrol-dark: #066578;
    --color-blue-light: #a0c5e8;
    --color-grey-80: #333;
    --color-grey-60: #666;
    --color-grey-45: #8c8c8c;
    --color-grey-30: #b2b2b2;
    --color-grey-15: #d9d9d9;
    --color-grey-7: #ededed;
    --color-grey-3: #f7f7f7;
    --color-transparent-grey-80: rgba(0,0,0,.8);
    --color-transparent-grey-60: rgba(0,0,0,.6);
    --color-transparent-grey-30: rgba(0,0,0,.3);
    --color-transparent-grey-15: rgba(0,0,0,.15);
    --color-transparent-grey-10: rgba(0,0,0,.1);
    --color-transparent-grey-7: rgba(0,0,0,.07);
    --color-transparent-grey-3: rgba(0,0,0,.03);
    color-scheme: light
}

:root,:root[data-theme=light] {
    --color-status-success-rgb: var(--color-green-500-rgb);
    --color-background-primary-rgb: var(--color-white-rgb);
    --color-background-highlight-rgb: var(--color-neutral-050-rgb);
    --color-background-secondary-rgb: var(--color-neutral-100-rgb);
    --color-background-contrast-rgb: var(--color-neutral-200-rgb);
    --color-background-translucent: hsla(220,9%,94%,.7);
    --color-overlay: var(--color-shade-300);
    --color-picture-overlay: var(--color-shade-800);
    --color-picture-interface: var(--color-shade-400);
    --color-picture-dimm: var(--color-shade-050);
    --color-content-lead-rgb: var(--color-neutral-700-rgb);
    --color-content-lead-hover-rgb: var(--color-black-rgb);
    --color-content-lead-active-rgb: var(--color-black-rgb);
    --color-content-secondary-rgb: var(--color-neutral-500-rgb);
    --color-content-secondary-hover-rgb: var(--color-neutral-600-rgb);
    --color-content-secondary-active-rgb: var(--color-neutral-600-rgb);
    --color-content-silent-rgb: var(--color-neutral-300-rgb);
    --color-action-rgb: var(--color-orange-500-rgb);
    --color-background-action-rgb: var(--color-orange-100-rgb);
    --color-content-action-rgb: var(--color-orange-600-rgb);
    --color-content-action-hover-rgb: var(--color-orange-700-rgb);
    --color-content-action-active-rgb: var(--color-orange-800-rgb);
    --color-accent-rgb: var(--color-petrol-500-rgb);
    --color-background-accent-rgb: var(--color-petrol-100-rgb);
    --color-content-accent-rgb: var(--color-petrol-700-rgb);
    --color-content-accent-hover-rgb: var(--color-petrol-800-rgb);
    --color-content-accent-active-rgb: var(--color-petrol-900-rgb);
    --color-success-rgb: var(--color-green-500-rgb);
    --color-background-success-rgb: var(--color-green-100-rgb);
    --color-content-success-rgb: var(--color-green-700-rgb);
    --color-content-success-hover-rgb: var(--color-green-800-rgb);
    --color-content-success-active-rgb: var(--color-green-900-rgb);
    --color-warning-rgb: var(--color-yellow-400-rgb);
    --color-background-warning-rgb: var(--color-yellow-100-rgb);
    --color-content-warning-rgb: var(--color-yellow-800-rgb);
    --color-content-warning-hover-rgb: var(--color-yellow-900-rgb);
    --color-content-warning-active-rgb: var(--color-yellow-900-rgb);
    --color-error-rgb: var(--color-red-500-rgb);
    --color-background-error-rgb: var(--color-red-100-rgb);
    --color-content-error-rgb: var(--color-red-600-rgb);
    --color-content-error-hover-rgb: var(--color-red-700-rgb);
    --color-content-error-active-rgb: var(--color-red-800-rgb);
    --color-focus-border-rgb: var(--color-petrol-700-rgb);
    --color-focus-fill-rgb: var(--color-petrol-300-rgb);
    color-scheme: light
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --color-status-success-rgb:var(--color-green-700-rgb);
        --color-background-primary-rgb: var(--color-neutral-700-rgb);
        --color-background-highlight-rgb: var(--color-neutral-800-rgb);
        --color-background-secondary-rgb: var(--color-neutral-900-rgb);
        --color-background-contrast-rgb: var(--color-neutral-600-rgb);
        --color-background-translucent: rgba(16,17,20,.7);
        --color-overlay: var(--color-shade-500);
        --color-picture-overlay: var(--color-shade-800);
        --color-picture-interface: var(--color-shade-400);
        --color-picture-dimm: transparent;
        --color-content-lead-rgb: var(--color-neutral-100-rgb);
        --color-content-lead-hover-rgb: var(--color-white-rgb);
        --color-content-lead-active-rgb: var(--color-white-rgb);
        --color-content-secondary-rgb: var(--color-neutral-400-rgb);
        --color-content-secondary-hover-rgb: var(--color-neutral-300-rgb);
        --color-content-secondary-active-rgb: var(--color-neutral-300-rgb);
        --color-content-silent-rgb: var(--color-neutral-500-rgb);
        --color-action-rgb: var(--color-orange-600-rgb);
        --color-background-action-rgb: var(--color-orange-900-rgb);
        --color-content-action-rgb: var(--color-orange-500-rgb);
        --color-content-action-hover-rgb: var(--color-orange-400-rgb);
        --color-content-action-active-rgb: var(--color-orange-300-rgb);
        --color-accent-rgb: var(--color-petrol-600-rgb);
        --color-background-accent-rgb: var(--color-petrol-900-rgb);
        --color-content-accent-rgb: var(--color-petrol-300-rgb);
        --color-content-accent-hover-rgb: var(--color-petrol-200-rgb);
        --color-content-accent-active-rgb: var(--color-petrol-100-rgb);
        --color-success-rgb: var(--color-green-700-rgb);
        --color-background-success-rgb: var(--color-green-900-rgb);
        --color-content-success-rgb: var(--color-green-600-rgb);
        --color-content-success-hover-rgb: var(--color-green-500-rgb);
        --color-content-success-active-rgb: var(--color-green-400-rgb);
        --color-warning-rgb: var(--color-yellow-500-rgb);
        --color-background-warning-rgb: var(--color-yellow-900-rgb);
        --color-content-warning-rgb: var(--color-yellow-600-rgb);
        --color-content-warning-hover-rgb: var(--color-yellow-500-rgb);
        --color-content-warning-active-rgb: var(--color-yellow-400-rgb);
        --color-error-rgb: var(--color-red-600-rgb);
        --color-background-error-rgb: var(--color-red-900-rgb);
        --color-content-error-rgb: var(--color-red-400-rgb);
        --color-content-error-hover-rgb: var(--color-red-300-rgb);
        --color-content-error-active-rgb: var(--color-red-200-rgb);
        --color-focus-border-rgb: var(--color-petrol-300-rgb);
        --color-focus-fill-rgb: var(--color-petrol-700-rgb);
        color-scheme: dark
    }
}

:root[data-theme=dark] {
    --color-status-success-rgb: var(--color-green-700-rgb);
    --color-background-primary-rgb: var(--color-neutral-700-rgb);
    --color-background-highlight-rgb: var(--color-neutral-800-rgb);
    --color-background-secondary-rgb: var(--color-neutral-900-rgb);
    --color-background-contrast-rgb: var(--color-neutral-600-rgb);
    --color-background-translucent: rgba(16,17,20,.7);
    --color-overlay: var(--color-shade-500);
    --color-picture-overlay: var(--color-shade-800);
    --color-picture-interface: var(--color-shade-400);
    --color-picture-dimm: transparent;
    --color-content-lead-rgb: var(--color-neutral-100-rgb);
    --color-content-lead-hover-rgb: var(--color-white-rgb);
    --color-content-lead-active-rgb: var(--color-white-rgb);
    --color-content-secondary-rgb: var(--color-neutral-400-rgb);
    --color-content-secondary-hover-rgb: var(--color-neutral-300-rgb);
    --color-content-secondary-active-rgb: var(--color-neutral-300-rgb);
    --color-content-silent-rgb: var(--color-neutral-500-rgb);
    --color-action-rgb: var(--color-orange-600-rgb);
    --color-background-action-rgb: var(--color-orange-900-rgb);
    --color-content-action-rgb: var(--color-orange-500-rgb);
    --color-content-action-hover-rgb: var(--color-orange-400-rgb);
    --color-content-action-active-rgb: var(--color-orange-300-rgb);
    --color-accent-rgb: var(--color-petrol-600-rgb);
    --color-background-accent-rgb: var(--color-petrol-900-rgb);
    --color-content-accent-rgb: var(--color-petrol-300-rgb);
    --color-content-accent-hover-rgb: var(--color-petrol-200-rgb);
    --color-content-accent-active-rgb: var(--color-petrol-100-rgb);
    --color-success-rgb: var(--color-green-700-rgb);
    --color-background-success-rgb: var(--color-green-900-rgb);
    --color-content-success-rgb: var(--color-green-600-rgb);
    --color-content-success-hover-rgb: var(--color-green-500-rgb);
    --color-content-success-active-rgb: var(--color-green-400-rgb);
    --color-warning-rgb: var(--color-yellow-500-rgb);
    --color-background-warning-rgb: var(--color-yellow-900-rgb);
    --color-content-warning-rgb: var(--color-yellow-600-rgb);
    --color-content-warning-hover-rgb: var(--color-yellow-500-rgb);
    --color-content-warning-active-rgb: var(--color-yellow-400-rgb);
    --color-error-rgb: var(--color-red-600-rgb);
    --color-background-error-rgb: var(--color-red-900-rgb);
    --color-content-error-rgb: var(--color-red-400-rgb);
    --color-content-error-hover-rgb: var(--color-red-300-rgb);
    --color-content-error-active-rgb: var(--color-red-200-rgb);
    --color-focus-border-rgb: var(--color-petrol-300-rgb);
    --color-focus-fill-rgb: var(--color-petrol-700-rgb);
    color-scheme: dark
}

:root {
    --base-space: 18px;
    --space-XXS: calc(var(--base-space)/6);
    --space-XS: calc(var(--base-space)/3);
    --space-S: calc(var(--base-space)/2);
    --space-M: var(--base-space);
    --space-L: calc(var(--base-space)*1.5);
    --space-XL: calc(var(--base-space)*2);
    --space-XXL: calc(var(--base-space)*3);
    --space-XXXL: calc(var(--base-space)*4);
    --space-small-element-part: calc(var(--base-space)/6);
    --space-element-part: calc(var(--base-space)/3);
    --space-connected-elements: calc(var(--base-space)/2);
    --space-elements: var(--base-space);
    --space-small-groups: calc(var(--base-space)*1.5);
    --space-groups: calc(var(--base-space)*2);
    --space-groups-big: calc(var(--base-space)*3);
    --space-different-content: calc(var(--base-space)*4);
    --z-index-level-1: 1;
    --z-index-level-2: 5001000;
    --z-index-level-3: 6000000;
    --z-index-level-4: 6000500;
    --shadow-level-1: 0px 1px 2px rgba(0,0,0,.5);
    --shadow-level-2: 0px 3px 6px rgba(0,0,0,.5);
    --shadow-level-2-rotated: 0px -3px 6px rgba(0,0,0,.5);
    --shadow-level-3: 0px 3px 13px rgba(0,0,0,.6);
    --z-index-main-content: var(--z-index-level-1);
    --z-index-backdrop-level-2: calc(var(--z-index-level-2) - 1);
    --z-index-backdrop-level-3: calc(var(--z-index-level-3) - 1);
    --z-index-backdrop-level-4: calc(var(--z-index-level-4) - 1);
    --z-index-combo-box-input: calc(var(--z-index-main-content) + 1);
    --z-index-select-dropdown-icon: calc(var(--z-index-main-content) + 2);
    --z-index-autosuggest-suggestion-list: calc(var(--z-index-main-content) + 3);
    --z-index-header-menu-dropdown: calc(var(--z-index-main-content) + 10);
    --z-index-header-menu-dropdown-gap: calc(var(--z-index-main-content) + 11);
    --ButtonSmall-height: 30px;
    --ButtonSmall-border-radius: 5px;
    --ButtonSmall-padding: 5px 9px;
    --ButtonMedium-height: 36px;
    --ButtonMedium-border-radius: 5px;
    --ButtonMedium-padding: 8px 12px;
    --ButtonLarge-height: 44px;
    --ButtonLarge-border-radius: 5px;
    --ButtonLarge-padding: 12px 16px;
    --ButtonX-Large-height: 56px;
    --ButtonX-Large-border-radius: 6px;
    --ButtonX-Large-padding: 18px 24px
}

:root,:root[data-theme=light] {
    --ButtonPrimary-background-color: var(--color-orange-500);
    --ButtonPrimary-color: var(--color-white);
    --ButtonPrimary-border-color: var(--color-orange-600);
    --ButtonPrimary-hover-background-color: #ff751a;
    --ButtonPrimary-hover-border-color: #f50;
    --ButtonPrimary-active-background-color: #e55c00;
    --ButtonPrimary-active-border-color: #c40;
    --ButtonHighlight-background-color: var(--color-petrol-800);
    --ButtonHighlight-color: var(--color-white);
    --ButtonHighlight-border-color: var(--color-petrol-900);
    --ButtonHighlight-hover-background-color: #125e77;
    --ButtonHighlight-hover-border-color: #153e51;
    --ButtonHighlight-active-background-color: #0c3b4b;
    --ButtonHighlight-active-border-color: #0b1f28;
    --ButtonSecondary-background-color: hsla(0,0%,100%,.33);
    --ButtonSecondary-color: var(--color-petrol-800);
    --ButtonSecondary-border-color: var(--color-neutral-300);
    --ButtonSecondary-hover-border-color: #c3c6cb;
    --ButtonSecondary-active-border-color: #a8acb3;
    --ButtonSuccess-background-color: var(--color-green-500);
    --ButtonSuccess-color: var(--color-white);
    --ButtonSuccess-border-color: var(--color-green-600);
    --ButtonSuccess-hover-background-color: #66c828;
    --ButtonSuccess-hover-border-color: #5aad31;
    --ButtonSuccess-active-background-color: #509e20;
    --ButtonSuccess-active-border-color: #468525;
    --ButtonAlert-background-color: var(--color-red-500);
    --ButtonAlert-color: var(--color-white);
    --ButtonAlert-border-color: var(--color-red-600);
    --ButtonAlert-hover-background-color: #f33151;
    --ButtonAlert-hover-border-color: #ca1836;
    --ButtonAlert-active-background-color: #e50d31;
    --ButtonAlert-active-border-color: #9c122a;
    --ButtonDisabled-border-color: var(--color-neutral-300);
    --ButtonDisabled-background-color: var(--color-neutral-100);
    --ButtonDisabled-color: var(--color-petrol-800)
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --ButtonPrimary-background-color:var(--color-orange-600);
        --ButtonPrimary-color: var(--color-white);
        --ButtonPrimary-border-color: var(--color-orange-700);
        --ButtonPrimary-hover-background-color: #ed580d;
        --ButtonPrimary-hover-border-color: #b53f0d;
        --ButtonPrimary-active-background-color: #c73200;
        --ButtonPrimary-active-border-color: #8f1900;
        --ButtonHighlight-background-color: var(--color-petrol-600);
        --ButtonHighlight-color: var(--color-white);
        --ButtonHighlight-border-color: var(--color-petrol-700);
        --ButtonHighlight-hover-background-color: #158fa7;
        --ButtonHighlight-hover-border-color: #137285;
        --ButtonHighlight-active-background-color: #006981;
        --ButtonHighlight-active-border-color: #004c5f;
        --ButtonSecondary-background-color: rgba(30,31,36,.33);
        --ButtonSecondary-color: var(--color-petrol-300);
        --ButtonSecondary-border-color: var(--color-neutral-500);
        --ButtonSecondary-hover-border-color: #676b73;
        --ButtonSecondary-active-border-color: #41454d;
        --ButtonSuccess-background-color: var(--color-green-700);
        --ButtonSuccess-color: var(--color-white);
        --ButtonSuccess-border-color: var(--color-green-800);
        --ButtonSuccess-hover-background-color: #4c8734;
        --ButtonSuccess-hover-border-color: #3c692e;
        --ButtonSuccess-active-background-color: #26610e;
        --ButtonSuccess-active-border-color: #164308;
        --ButtonAlert-background-color: var(--color-red-600);
        --ButtonAlert-color: var(--color-white);
        --ButtonAlert-border-color: var(--color-red-700);
        --ButtonAlert-hover-background-color: #c0223d;
        --ButtonAlert-hover-border-color: #922235;
        --ButtonAlert-active-background-color: #9a0017;
        --ButtonAlert-active-border-color: #6c000f;
        --ButtonDisabled-border-color: var(--color-neutral-500);
        --ButtonDisabled-background-color: var(--color-neutral-600);
        --ButtonDisabled-color: var(--color-petrol-300)
    }
}

:root[data-theme=dark] {
    --ButtonPrimary-background-color: var(--color-orange-600);
    --ButtonPrimary-color: var(--color-white);
    --ButtonPrimary-border-color: var(--color-orange-700);
    --ButtonPrimary-hover-background-color: #ed580d;
    --ButtonPrimary-hover-border-color: #b53f0d;
    --ButtonPrimary-active-background-color: #c73200;
    --ButtonPrimary-active-border-color: #8f1900;
    --ButtonHighlight-background-color: var(--color-petrol-600);
    --ButtonHighlight-color: var(--color-white);
    --ButtonHighlight-border-color: var(--color-petrol-700);
    --ButtonHighlight-hover-background-color: #158fa7;
    --ButtonHighlight-hover-border-color: #137285;
    --ButtonHighlight-active-background-color: #006981;
    --ButtonHighlight-active-border-color: #004c5f;
    --ButtonSecondary-background-color: rgba(30,31,36,.33);
    --ButtonSecondary-color: var(--color-petrol-300);
    --ButtonSecondary-border-color: var(--color-neutral-500);
    --ButtonSecondary-hover-border-color: #676b73;
    --ButtonSecondary-active-border-color: #41454d;
    --ButtonSuccess-background-color: var(--color-green-700);
    --ButtonSuccess-color: var(--color-white);
    --ButtonSuccess-border-color: var(--color-green-800);
    --ButtonSuccess-hover-background-color: #4c8734;
    --ButtonSuccess-hover-border-color: #3c692e;
    --ButtonSuccess-active-background-color: #26610e;
    --ButtonSuccess-active-border-color: #164308;
    --ButtonAlert-background-color: var(--color-red-600);
    --ButtonAlert-color: var(--color-white);
    --ButtonAlert-border-color: var(--color-red-700);
    --ButtonAlert-hover-background-color: #c0223d;
    --ButtonAlert-hover-border-color: #922235;
    --ButtonAlert-active-background-color: #9a0017;
    --ButtonAlert-active-border-color: #6c000f;
    --ButtonDisabled-border-color: var(--color-neutral-500);
    --ButtonDisabled-background-color: var(--color-neutral-600);
    --ButtonDisabled-color: var(--color-petrol-300)
}

:root {
    --text-size-100: 12px;
    --text-size-200: 14px;
    --text-size-300: 16px;
    --text-size-400: 18px;
    --text-size-500: 20px;
    --text-size-600: 24px;
    --text-size-700: 32px;
    --text-size-800: 40px;
    --text-size-900: 48px;
    --text-height-050: 16px;
    --text-height-100: 20px;
    --text-height-200: 24px;
    --text-height-300: 28px;
    --text-height-400: 32px;
    --text-height-500: 40px;
    --text-height-600: 48px;
    --text-height-700: 56px;
    --text-height-800: 64px;
    --text-height-900: 72px;
    --text-height-auto: auto;
    --text-weight-100: 100;
    --text-weight-200: 200;
    --text-weight-300: 300;
    --text-weight-400: 400;
    --text-weight-500: 500;
    --text-weight-600: 600;
    --text-weight-700: 700;
    --text-weight-800: 800;
    --text-weight-900: 900
}

:root,:root[data-theme=light] {
    --UIEffects-HoverShadow: 0px 1px 4px rgba(0,0,0,.33);
    --UIEffects-FocusGlow: 0px 0px 1px 4px var(--color-petrol-300)
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --UIEffects-HoverShadow:0px 1px 4px hsla(0,0%,100%,.33);
        --UIEffects-FocusGlow: 0px 0px 1px 4px var(--color-petrol-700)
    }
}

:root[data-theme=dark] {
    --UIEffects-HoverShadow: 0px 1px 4px hsla(0,0%,100%,.33);
    --UIEffects-FocusGlow: 0px 0px 1px 4px var(--color-petrol-700)
}

:root {
    --BaseInputSmall-height: 30px;
    --BaseInputSmall-padding: 0 9px;
    --BaseInputSmall-border-radius: 5px;
    --BaseInputMedium-height: 36px;
    --BaseInputMedium-padding: 0 11px;
    --BaseInputMedium-border-radius: 5px;
    --BaseInputLarge-height: 44px;
    --BaseInputLarge-padding: 0 14px;
    --BaseInputLarge-border-radius: 5px;
    --BaseInputX-Large-height: 56px;
    --BaseInputX-Large-padding: 0 18px;
    --BaseInputX-Large-border-radius: 5px;
    --SelectIcon-small-width: 28px;
    --SelectIcon-medium-width: 34px;
    --SelectIcon-large-width: 42px;
    --SelectIcon-x-large-width: 54px
}

:root,:root[data-theme=light] {
    --FormInput-border: var(--color-neutral-300);
    --FormInput-background: var(--color-white);
    --FormInput-hover-border: #c3c6cb;
    --FormInputDisabled-border: var(--color-neutral-300);
    --FormInputDisabled-background: var(--color-neutral-100);
    --FormInputError-border: var(--color-red-500);
    --FormInputError-background: var(--color-red-050);
    --FormInputError-hover-border: #f33151;
    --FormInputError-hover-background: #fff5f5;
    --FormCheck-border: var(--color-neutral-300);
    --FormCheck-background: var(--color-white);
    --FormCheck-hover-border: #c3c6cb;
    --FormCheckDisabled-border: var(--color-neutral-300);
    --FormCheckDisabled-background: var(--color-neutral-100);
    --FormCheckError-border: var(--color-red-500);
    --FormCheckError-hover-border: #f33151;
    --FormCheckError-background: var(--color-white);
    --FormCheckActive-border: var(--color-orange-500);
    --FormCheckActive-background: var(--color-orange-500);
    --FormCheckActive-hover-background: #ff751a;
    --FormCheckActiveDisabled-border: var(--color-neutral-300);
    --FormCheckActiveDisabled-background: var(--color-neutral-300);
    --FormCheckActiveError-border: var(--color-red-500);
    --FormCheckActiveError-background: var(--color-red-500);
    --FormCheckActiveError-hover-border: #f33151;
    --FormCheckActiveError-hover-background: #f33151;
    --FormField-border: var(--color-neutral-200);
    --FormField-hover-border: #e9eaec;
    --FormField-background: var(--color-white);
    --FormFieldDisabled-border: var(--color-neutral-200);
    --FormFieldDisabled-background: var(--color-neutral-050);
    --FormFieldActive-border: var(--color-orange-300);
    --FormFieldActive-background: var(--color-orange-050);
    --FormFieldActive-hover-background: #fffaf5;
    --FormFieldActive-hover-border: #ffcba3;
    --FormFieldError-border: var(--color-red-300);
    --FormFieldError-background: var(--color-red-050);
    --FormFieldError-hover-border: #ff949f;
    --FormFieldError-hover-background: #fff5f5;
    --FormSelect-border: var(--color-neutral-300);
    --FormSelect-background: var(--color-neutral-100);
    --FormSelect-hover-border: #d1d3d7;
    --FormSelect-hover-background: #f7f7f8;
    --FormSelectError-border: var(--color-red-500);
    --FormSelectError-background: var(--color-red-050);
    --FormSelectError-hover-border: #f33151;
    --FormSelectError-hover-background: #fff5f5
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --FormInput-border:var(--color-neutral-500);
        --FormInput-background: var(--color-neutral-700);
        --FormInput-hover-border: #676b73;
        --FormInputDisabled-border: var(--color-neutral-500);
        --FormInputDisabled-background: var(--color-neutral-600);
        --FormInputError-border: var(--color-red-600);
        --FormInputError-background: var(--color-red-900);
        --FormInputError-hover-border: #c0223d;
        --FormInputError-hover-background: #4f2027;
        --FormCheck-border: var(--color-neutral-500);
        --FormCheck-background: var(--color-neutral-700);
        --FormCheck-hover-border: #676b73;
        --FormCheckDisabled-border: var(--color-neutral-500);
        --FormCheckDisabled-background: var(--color-neutral-600);
        --FormCheckError-border: var(--color-red-600);
        --FormCheckError-hover-border: #c0223d;
        --FormCheckError-background: var(--color-neutral-700);
        --FormCheckActive-border: var(--color-orange-600);
        --FormCheckActive-background: var(--color-orange-600);
        --FormCheckActive-hover-background: #d33e00;
        --FormCheckActiveDisabled-border: var(--color-neutral-500);
        --FormCheckActiveDisabled-background: var(--color-neutral-500);
        --FormCheckActiveError-border: var(--color-red-600);
        --FormCheckActiveError-background: var(--color-red-600);
        --FormCheckActiveError-hover-border: #ff264a;
        --FormCheckActiveError-hover-background: #ff264a;
        --FormField-border: var(--color-neutral-500);
        --FormField-hover-border: #4d5159;
        --FormField-background: var(--color-neutral-700);
        --FormFieldDisabled-border: var(--color-neutral-500);
        --FormFieldDisabled-background: var(--color-neutral-600);
        --FormFieldActive-border: var(--color-orange-700);
        --FormFieldActive-background: var(--color-orange-900);
        --FormFieldActive-hover-background: #4a2319;
        --FormFieldActive-hover-border: #b53f0d;
        --FormFieldError-border: var(--color-red-600);
        --FormFieldError-background: var(--color-red-900);
        --FormFieldError-hover-border: #c0223d;
        --FormFieldError-hover-background: #4f2027;
        --FormSelect-border: var(--color-neutral-500);
        --FormSelect-background: var(--color-neutral-600);
        --FormSelect-hover-border: #676b73;
        --FormSelect-hover-background: #42444a;
        --FormSelectError-border: var(--color-red-600);
        --FormSelectError-background: var(--color-red-900);
        --FormSelectError-hover-border: #c0223d;
        --FormSelectError-hover-background: #4f2027
    }
}

:root[data-theme=dark] {
    --FormInput-border: var(--color-neutral-500);
    --FormInput-background: var(--color-neutral-700);
    --FormInput-hover-border: #676b73;
    --FormInputDisabled-border: var(--color-neutral-500);
    --FormInputDisabled-background: var(--color-neutral-600);
    --FormInputError-border: var(--color-red-600);
    --FormInputError-background: var(--color-red-900);
    --FormInputError-hover-border: #c0223d;
    --FormInputError-hover-background: #4f2027;
    --FormCheck-border: var(--color-neutral-500);
    --FormCheck-background: var(--color-neutral-700);
    --FormCheck-hover-border: #676b73;
    --FormCheckDisabled-border: var(--color-neutral-500);
    --FormCheckDisabled-background: var(--color-neutral-600);
    --FormCheckError-border: var(--color-red-600);
    --FormCheckError-hover-border: #c0223d;
    --FormCheckError-background: var(--color-neutral-700);
    --FormCheckActive-border: var(--color-orange-600);
    --FormCheckActive-background: var(--color-orange-600);
    --FormCheckActive-hover-background: #d33e00;
    --FormCheckActiveDisabled-border: var(--color-neutral-500);
    --FormCheckActiveDisabled-background: var(--color-neutral-500);
    --FormCheckActiveError-border: var(--color-red-600);
    --FormCheckActiveError-background: var(--color-red-600);
    --FormCheckActiveError-hover-border: #ff264a;
    --FormCheckActiveError-hover-background: #ff264a;
    --FormField-border: var(--color-neutral-500);
    --FormField-hover-border: #4d5159;
    --FormField-background: var(--color-neutral-700);
    --FormFieldDisabled-border: var(--color-neutral-500);
    --FormFieldDisabled-background: var(--color-neutral-600);
    --FormFieldActive-border: var(--color-orange-700);
    --FormFieldActive-background: var(--color-orange-900);
    --FormFieldActive-hover-background: #4a2319;
    --FormFieldActive-hover-border: #b53f0d;
    --FormFieldError-border: var(--color-red-600);
    --FormFieldError-background: var(--color-red-900);
    --FormFieldError-hover-border: #c0223d;
    --FormFieldError-hover-background: #4f2027;
    --FormSelect-border: var(--color-neutral-500);
    --FormSelect-background: var(--color-neutral-600);
    --FormSelect-hover-border: #676b73;
    --FormSelect-hover-background: #42444a;
    --FormSelectError-border: var(--color-red-600);
    --FormSelectError-background: var(--color-red-900);
    --FormSelectError-hover-border: #c0223d;
    --FormSelectError-hover-background: #4f2027
}

@font-face {
    font-display: swap;
    font-family: Gibson;
    font-weight: 400;
    src: url(../fonts/gibson-regular-v4.eot);
    src: url(../fonts/gibson-regular-v4.eot?#iefix) format("embedded-opentype"),url(../fonts/gibson-regular-v4.woff2) format("woff2"),url(../fonts/gibson-regular-v4.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Gibson;
    font-weight: 500;
    src: url(../fonts/gibson-medium-v4.eot);
    src: url(../fonts/gibson-medium-v4.eot?#iefix) format("embedded-opentype"),url(../fonts/gibson-medium-v4.woff2) format("woff2"),url(../fonts/gibson-medium-v4.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Gibson;
    font-weight: 600;
    src: url(../fonts/gibson-semibold-v4.eot);
    src: url(../fonts/gibson-semibold-v4.eot?#iefix) format("embedded-opentype"),url(../fonts/gibson-semibold-v4.woff2) format("woff2"),url(../fonts/gibson-semibold-v4.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Gibson;
    font-weight: 700;
    src: url(../fonts/gibson-bold-v4.eot);
    src: url(../fonts/gibson-bold-v4.eot?#iefix) format("embedded-opentype"),url(../fonts/gibson-bold-v4.woff2) format("woff2"),url(../fonts/gibson-bold-v4.woff) format("woff")
}

*,:after,:before {
    background: transparent;
    box-sizing: border-box;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline
}

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 62.5%;
    height: 100%;
    overflow-y: scroll
}

body {
    background: var(--color-background-secondary);
    font-size: var(--text-size-200);
    font-weight: var(--text-weight-400)
}

h1,h2,h3,h4,h5,h6,p,pre {
    margin: 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 600
}

b,strong {
    font-weight: 500
}

body,button,input,optgroup,select,textarea {
    font-feature-settings: "liga" 1,"dlig" 0,"hlig" 0,"calt" 1,"rlig" 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Gibson,Tahoma,Arial,sans-serif
}

svg:not(:root) {
    overflow: hidden
}

.SvgIcon {
    fill: currentColor;
    -ms-flex-negative: 0;
    display: inline-block;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body {
    background-color: var(--color-background-secondary);
    color: var(--color-content-lead);
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    height: 100%;
    line-height: var(--text-height-100);
    margin: 0
}

.page-header {
    background: var(--color-background-primary);
    box-shadow: 0 1px 1.5px rgba(0,0,0,.5),inset 0 -2px 0 var(--color-background-highlight);
    width: 100%
}

.page-header header {
    align-items: center;
    display: flex;
    height: var(--space-XXXL);
    line-height: 20px;
    margin: 0 auto;
    max-width: 1014px;
    padding: 0 var(--space-M);
    width: 100%
}

.no-margin {
    margin: 0!important
}

.page-header header .mobile-logo {
    display: block;
    float: left;
    height: 28px;
    margin: 16px var(--space-S) 16px 0;
    width: 114px
}

.page-header header .header-claim {
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga","dlig";
    font-feature-settings: "liga","dlig";
    color: var(--color-content-secondary);
    display: block;
    font-size: var(--text-size-100);
    font-weight: var(--text-weight-400);
    line-height: 14px;
    width: 113px
}

@keyframes stretch {
    50% {
        transform: scale(.9)
    }

    to {
        transform: scale(2.5)
    }
}

.container {
    margin: 0 auto;
    max-width: 1014px;
    min-width: 320px;
    padding: 0 var(--space-M);
    width: 100%
}

.container-inner {
    margin: 54px 0
}

.page-footer {
    border-top: 1px solid #b2b2b2;
    clear: both;
    overflow: visible;
    padding: 2.4rem 0
}

#oo_feedback_footer {
    background: 0 0;
    color: #666;
    cursor: pointer;
    padding: 0
}

.row-container {
    display: flex
}

.col-log {
    min-height: 1px;
    padding-right: 1.2rem;
    position: relative
}

.tab-container {
    border-radius: 4px;
    box-shadow: var(--shadow-level-1);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-right: var(--space-M);
    max-width: 480px;
    width: 100%
}

#loginTabsHeader {
    border-radius: 4px 4px 0 0;
    overflow: hidden
}

.tab {
    border: none;
    border-bottom: 1px solid transparent;
    float: left;
    font-size: 16px;
    font-weight: var(--text-weight-500);
    height: 54px;
    text-align: center;
    width: 50%
}

.activeTab {
    background-color: var(--color-background-primary);
    border-bottom-color: transparent;
    color: var(--color-content-action)
}

.leftTab {
    border-top-left-radius: .6rem
}

.inactiveTab {
    background-color: var(--color-background-highlight);
    border-bottom-color: var(--color-background-contrast);
    color: var(--color-content-secondary)
}

.inactiveTab:hover {
    background-color: var(--color-background-primary);
    cursor: pointer
}

.rightTab {
    border-left: 1px solid var(--color-background-contrast);
    border-top-right-radius: .6rem
}

.panel {
    background: var(--color-background-primary);
    border-radius: 0 0 .6rem .6rem
}

.panel-formbox {
    padding: var(--space-XL)
}

.panel-body {
    color: var(--color-content-lead);
    font-size: var(--text-size-200);
    font-weight: var(--text-height-400)
}

#loginContainer>form {
    margin-bottom: 0
}

.panel-header {
    font-size: var(--text-size-600);
    font-weight: var(--text-weight-600);
    line-height: var(--text-height-400);
    margin-bottom: var(--space-M)
}

form .form-input-label {
    font-size: var(--text-size-200);
    font-weight: var(--text-weight-500);
    line-height: var(--text-height-100)
}

.whole-width-column {
    width: 100%
}

.whole-width-column>.checkbox {
    float: left;
    height: 27px;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 5px
}

.whole-width-column>.btn {
    width: 100%
}

label {
    font-weight: 300
}

.form-control {
    background: #fff;
    border: 1px solid #b2b2b2;
    border-radius: 2px;
    box-shadow: inset 0 2px 1px rgba(0,0,0,.1);
    color: #333;
    font-size: 1em;
    font-weight: 400;
    height: 32px;
    margin-bottom: var(--space-M);
    margin-top: var(--space-XXS);
    padding: 8px 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.form-control,input,label {
    display: block;
    width: 100%
}

input {
    border: 1px solid #b2b2b2;
    border-radius: 2px;
    font-size: 1.4rem;
    font-weight: 700;
    margin: .6rem 0;
    padding: 0 .3rem
}

input#login-username[readonly] {
    background: var(--color-background-highlight)
}

input#login-username {
    margin-bottom: var(--space-M)
}

input#login-password {
    margin-bottom: var(--space-S)
}

.text-input {
    background: var(--FormInput-background);
    border: 1px solid var(--FormInput-border);
    border-radius: var(--BaseInputLarge-border-radius);
    box-shadow: none;
    color: var(--color-content-lead);
    height: var(--BaseInputLarge-height);
    padding: var(--BaseInputLarge-padding);
    width: 100%
}

.text-input:hover {
    border-color: var(--FormInput-hover-border);
    box-shadow: var(--UIEffects-HoverShadow)
}

.text-input:focus-visible {
    border-color: var(--color-focus-border);
    -webkit-box-shadow: var(--UIEffects-FocusGlow);
    box-shadow: var(--UIEffects-FocusGlow);
    outline: none
}

.button-row {
    margin-bottom: 0
}

.submit-form {
    border-radius: 5px
}

.pw-reset-link {
    font-size: var(--text-size-200);
    margin-bottom: var(--space-M)
}

.pw-reset-link a {
    color: var(--color-content-lead)
}

.pw-reset-link a:hover {
    color: var(--color-content-lead-hover)
}

.password-icon {
    bottom: 0;
    color: var(--color-content-secondary);
    cursor: pointer;
    height: 16px;
    margin: auto;
    position: absolute;
    right: 1rem;
    top: 0;
    width: 16px
}

.password-icon svg {
    display: none
}

.password-icon-close svg.invisible,.password-icon-open svg.visible {
    display: inline
}

.btn {
    color: var(--color-content-lead);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-transition: background-color .25s ease-out;
    -o-transition: background-color .25s ease-out;
    transition: background-color .25s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.btn:active,.btn:focus,.btn:hover {
    outline: none;
    text-decoration: none
}

.btn:hover {
    box-shadow: var(--UIEffects-HoverShadow)
}

.btn:active {
    border: 1px solid var(--color-focus-border);
    -webkit-box-shadow: var(--UIEffects-FocusGlow);
    box-shadow: var(--UIEffects-FocusGlow)
}

.btn:focus-visible {
    border: 1px solid var(--color-focus-border);
    -webkit-box-shadow: var(--UIEffects-FocusGlow);
    box-shadow: var(--UIEffects-FocusGlow)
}

.btn-large {
    border-radius: var(--ButtonLarge-border-radius);
    font-size: var(--text-size-200);
    height: var(--ButtonLarge-height);
    line-height: var(--text-height-100);
    padding: var(--ButtonLarge-padding)
}

.btn-primary {
    background-color: var(--ButtonPrimary-background-color);
    border: 1px solid var(--ButtonPrimary-border-color);
    font-weight: var(--text-weight-600)
}

.btn-primary,.btn-primary:hover {
    color: var(--ButtonPrimary-color)
}

.btn-primary:hover {
    background-color: var(--ButtonPrimary-hover-background-color);
    border-color: var(--ButtonPrimary-hover-border-color)
}

.btn-primary:active {
    background-color: var(--ButtonPrimary-active-background-color);
    border-color: var(--ButtonPrimary-active-border-color)
}

.col-log-info {
    padding: var(--space-XL)
}

.panel-small-infobox {
    background: transparent;
    border: none;
    color: var(--color-content-lead)
}

.panel-small-infobox h3 {
    font-size: var(--text-size-600);
    font-weight: var(--text-weight-600);
    line-height: var(--text-height-400);
    margin-bottom: var(--space-M)
}

.panel-small-infobox ul {
    list-style-image: none;
    list-style-type: none
}

.panel-small-infobox li {
    align-items: center;
    background-image: url(../da29af5af2df57064bb9.svg);
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    display: flex;
    font-size: var(--text-size-300);
    line-height: var(--text-height-200);
    margin-bottom: var(--space-S);
    margin-left: 0;
    min-height: 20px
}

.panel-small-infobox li svg {
    color: var(--color-success);
    height: 20px;
    margin-right: var(--space-S);
    width: 20px
}

.dealer-link-container {
    display: none;
    margin-top: var(--space-L);
    max-width: 564px;
    padding-right: 0;
    text-align: center
}

.for-warning {
    margin-bottom: 0
}

.col-warning {
    min-height: 1px;
    position: relative;
    width: 100%
}

.warning-panel {
    background: var(--color-background-primary);
    border-radius: .6rem;
    box-shadow: var(--shadow-level-1);
    color: var(--color-error);
    height: auto;
    margin-bottom: 2.4rem;
    padding: 2.4rem;
    text-align: center
}

.warning-container {
    display: inline-block;
    min-height: 32px;
    padding-left: 50px
}

.with-warning-icon {
    background: url(../528b4533afe3ca46c7e6.svg) no-repeat 0 0;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 32px 32px
}

.warning-message {
    display: block;
    padding-top: 8px;
    text-align: left
}

.form-input {
    position: relative
}

@media (max-width: 768px) {
    .container {
        padding:0
    }

    .container-inner {
        margin: var(--space-L) 0
    }

    .row-container {
        align-items: center;
        flex-direction: column;
        margin: 0
    }

    .tab-container {
        margin-right: 0;
        max-width: none;
        padding-right: 0;
        width: 100%
    }

    .panel-body {
        padding-left: 0;
        padding-right: 0
    }

    .panel-formbox {
        padding: var(--space-L) var(--space-M)
    }

    .col-log-info {
        display: none
    }

    #loginTabsHeader,.panel,.tab-container,.warning-panel {
        border-radius: 0
    }

    .leftTab {
        border-top-left-radius: 0
    }

    .rightTab {
        border-top-right-radius: 0
    }
}

.social-login-container {
    display: flex;
    flex-direction: column
}

.social-login-container .link-social-google2 {
    order: 1
}

.social-login-container .link-social-cisapplepac4j {
    order: 2
}

.social-login-container .link-social-facebook {
    order: 3
}

.social-provider-link {
    text-decoration: none
}

.btn-social {
    align-items: center;
    border: 1px solid var(--FormInput-border);
    display: flex;
    justify-content: center;
    margin-bottom: 9px
}

.btn-social svg {
    margin-right: var(--space-S);
    vertical-align: sub
}

.btn-social span {
    color: var(--ButtonSecondary-color);
    font-weight: 500
}

.social-login-separator {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr auto 1fr;
    margin-bottom: var(--space-M)
}

.social-login-separator .border {
    border-bottom: 1px solid var(--color-content-silent);
    height: 1px
}

#btn-cisapplepac4j svg path {
    fill: var(--color-content-lead)
}

.error-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    padding-bottom: 6rem;
    padding-top: 6rem;
    width: 100%
}

.img-err {
    margin-bottom: 2.4rem;
    width: 96px
}

.heading-err {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 3rem;
    margin-bottom: 1rem;
    text-align: center;
    width: 88%
}

.paragraph-err {
    color: #666;
    font-size: 1.4rem;
    line-height: 2rem;
    margin-bottom: 3rem;
    max-width: 570px;
    text-align: center;
    width: 90%
}

.button-err {
    align-items: center;
    background: linear-gradient(-180deg,#f7f7f7,#f7f7f7);
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 1px .5px 0 rgba(0,0,0,.2);
    color: #333;
    display: flex;
    font-size: 1.6rem;
    font-weight: 600;
    height: 42px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.6rem;
    text-align: center;
    text-decoration: none;
    width: 153px
}

@media (min-width: 768px) {
    .error-container {
        padding-bottom:12rem;
        padding-top: 12rem
    }

    .img-err {
        width: 190px
    }
}

.password-requirements-container {
    grid-row-gap: var(--space-S);
    grid-column-gap: var(--space-M);
    display: grid;
    grid-template-columns: min-content auto;
    list-style-image: none;
    list-style-type: none;
    white-space: nowrap
}

.password-requirements-container li {
    align-items: center;
    color: var(--color-content-secondary);
    display: flex
}

svg.checked {
    color: var(--color-success);
    display: none;
    height: 16px;
    margin-right: 6px;
    width: 16px
}

.password-requirements-bullet-active svg.checked {
    display: inline-block
}

.password-requirements-bullet-inactive .password-bullet {
    border: 1px solid var(--color-neutral-400);
    border-radius: 50%;
    display: block;
    height: 16px;
    margin-right: 6px;
    width: 16px
}

#password-requirement-3 {
    grid-column: 1/3
}

.registration-info {
    line-height: 20px
}

.optin-content {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: var(--base-space)
}

.highlight-text {
    font-weight: var(--text-weight-600)
}

.arrow {
    left: -3px;
    position: relative
}

.arrow svg {
    vertical-align: middle
}

.down-arrow.show,.up-arrow.show {
    fill: var(--color-content-action);
    align-self: center;
    display: inline-flex
}

.down-arrow.hide,.up-arrow.hide {
    display: none
}

.my-md {
    margin-bottom: var(--space-M)
}

.mobile-link {
    color: var(--color-content-action);
    text-decoration: underline
}

.mobile-link:hover {
    color: var(--color-content-action-hover)
}

.mobile-link:active {
    color: var(--color-content-action-active)
}

.api-error-container {
    align-items: center;
    border-radius: 4px;
    display: none;
    margin-top: 6px
}

.api-error-container span {
    background: url(../dbb7b9ce75bc4d668d4b.svg) 0 no-repeat;
    background-size: 16px 16px;
    color: #f2193a;
    font-weight: var(--text-weight-400);
    padding-left: 22px
}

.api-error-image {
    background: url(../dbb7b9ce75bc4d668d4b.svg) no-repeat;
    height: 18px;
    width: 10%
}

.oba-icon {
    fill: #b2b2b2;
    margin-left: 5px
}

.privacypolicy:focus-visible,.termsofservice:focus-visible {
    border-color: var(--color-focus-border);
    box-shadow: var(--UIEffects-FocusGlow)
}

#registration-username {
    margin-bottom: 0
}

input#registration-username[readonly] {
    background: var(--color-background-highlight)
}

#registration-username-wrapper {
    margin-bottom: var(--space-M)
}

#registration-password-wrapper {
    margin-bottom: var(--space-S)
}

#registration-password {
    margin-bottom: 0
}

#register-back-btn {
    align-items: center;
    background: var(--ButtonSecondary-background-color);
    border: 1px solid var(--ButtonSecondary-border-color);
    border-radius: 5px;
    color: var(--ButtonSecondary-color);
    display: flex;
    font-weight: var(--text-weight-500);
    justify-content: center;
    margin-top: 10px
}

#register-back-btn #icon {
    fill: var(--ButtonSecondary-color)
}

#register-btn {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--space-S)*-1)
}

#register-back-btn svg,#register-btn svg {
    fill: var(--ButtonSecondary-color)!important;
    margin-right: var(--space-S)
}

.right-here {
    color: var(--color-content-action)
}

#registration-marketing-optin {
    margin-bottom: var(--space-M)
}

:root {
    --LoadingIndicator-duration: 1.2s;
    --LoadingIndicator-delay: 0.32s;
    --LoadingIndicatorMedium-ball-size: 10px;
    --LoadingIndicatorMedium-gap: 3px;
    --LoadingIndicatorMedium-width: calc(var(--LoadingIndicatorMedium-ball-size)*3 + var(--LoadingIndicatorMedium-gap)*2)
}

.loading-indicator {
    display: inline-block;
    font-size: var(--LoadingIndicatorMedium-ball-size);
    height: var(--LoadingIndicatorMedium-ball-size);
    position: relative;
    width: var(--LoadingIndicatorMedium-width)
}

.loading-indicator:after,.loading-indicator:before,.loading-indicator>span {
    animation-fill-mode: both;
    animation: loading-indicator var(--LoadingIndicator-duration) infinite ease-in-out;
    background: #fff;
    border-radius: 50%;
    height: var(--LoadingIndicatorMedium-ball-size);
    margin-left: 2rem;
    position: absolute;
    transform: translateZ(0);
    width: var(--LoadingIndicatorMedium-ball-size)
}

.loading-indicator:after,.loading-indicator:before {
    content: "";
    top: 0
}

.loading-indicator:before {
    animation-delay: calc(var(--LoadingIndicator-duration)*-1);
    left: 0
}

.loading-indicator:after {
    animation-delay: calc((var(--LoadingIndicator-duration) - var(--LoadingIndicator-delay)*2)*-1);
    right: 0
}

.loading-indicator>span {
    animation-delay: calc((var(--LoadingIndicator-duration) - var(--LoadingIndicator-delay))*-1);
    left: calc(var(--LoadingIndicatorMedium-ball-size) + var(--LoadingIndicatorMedium-gap));
    text-indent: -9999em
}

@keyframes loading-indicator {
    0%,80%,to {
        transform: scale(1)
    }

    40% {
        transform: scale(0)
    }
}

#reduced-footer {
    background: var(--color-neutral-900);
    color: var(--color-neutral-400);
    position: sticky;
    top: 100vh
}

#reduced-footer .wrapper {
    padding: var(--space-L) var(--space-M)
}

#reduced-footer .list {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-M)
}

#reduced-footer .linkList {
    border-bottom: 1px solid var(--color-neutral-600)
}

#reduced-footer .list li:not(:first-child) {
    margin-top: var(--space-S)
}

#reduced-footer .copy {
    font-size: var(--text-size-200)
}

#reduced-footer .copy,#reduced-footer .meta {
    font-weight: var(--text-weight-400);
    line-height: var(--text-height-100)
}

#reduced-footer .meta {
    font-size: var(--text-size-100)
}

#reduced-footer .link {
    background: none;
    border: 0;
    color: var(--color-neutral-400);
    cursor: pointer;
    padding: 0;
    text-decoration: none
}

#reduced-footer .link:focus,#reduced-footer .link:hover,#reduced-footer .link:visited {
    color: inherit;
    text-decoration: none
}

#reduced-footer .link:hover {
    color: var(--color-neutral-300)
}

#reduced-footer .toolbar {
    padding-top: var(--space-M)
}

#reduced-footer .selection {
    margin-top: var(--space-M)
}

#reduced-footer .base-input-container,#reduced-footer .select-wrapper {
    position: relative
}

#reduced-footer .base-input-small {
    border-radius: var(--BaseInputSmall-border-radius);
    height: var(--BaseInputSmall-height);
    padding: var(--BaseInputSmall-padding)
}

#reduced-footer .select {
    appearance: none;
    background: var(--color-neutral-600);
    border-color: var(--color-neutral-500);
    color: var(--color-neutral-100);
    transition: all .1s ease-out;
    width: 100%
}

#reduced-footer .select--small {
    padding-right: calc(var(--SelectIcon-small-width) + 9px)
}

#reduced-footer .svg-icon {
    fill: currentColor;
    display: inline-block;
    flex-shrink: 0;
    user-select: none
}

#reduced-footer .select-dropdown {
    border-left: 1px solid var(--FormSelect-border);
    color: var(--color-content-lead);
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: var(--z-index-select-dropdown-icon)
}

#reduced-footer .select-dropdown--small {
    height: calc(var(--BaseInputSmall-height) - 2px);
    width: var(--SelectIcon-small-width)
}

#reduced-footer .select-dropdown--dark {
    border-left: 1px solid var(--color-neutral-500);
    color: var(--color-neutral-100)
}

@media (min-width: 756px) {
    #reduced-footer .wrapper {
        margin:0 auto;
        max-width: 1014px
    }

    #reduced-footer .list {
        display: flex;
        flex-wrap: wrap
    }

    #reduced-footer .list li:not(:first-child) {
        margin: 0 0 0 var(--space-M)
    }

    #reduced-footer .toolbar {
        align-items: center;
        display: flex;
        justify-content: space-between
    }

    #reduced-footer .selections {
        display: flex;
        flex-direction: row
    }

    #reduced-footer .selection {
        margin-right: var(--space-M);
        margin-top: 0
    }
}

.info-icon {
    fill: currentColor;
    display: inline-block;
    flex-shrink: 0;
    user-select: none
}

.icon-type-info {
    color: var(--color-content-secondary)
}

.notification-box {
    border-radius: 5px;
    display: flex;
    font-size: var(--text-size-200);
    justify-content: space-between;
    padding: var(--space-S)
}

.notification--info,.notification-box {
    background-color: var(--color-background-secondary);
    color: var(--color-content-secondary)
}

.notification-content-wrapper {
    align-items: center;
    display: flex;
    gap: var(--space-S);
    width: 100%
}

.custom-notification-block {
    margin-bottom: var(--space-M)
}

.checkbox-container input {
    border: none;
    margin: 0;
    padding: 0;
    width: 0
}

.checkbox-container .checkbox {
    align-items: center;
    cursor: pointer;
    display: flex
}

.checkbox-container .copy {
    font-size: var(--text-size-200);
    font-weight: var(--text-weight-400);
    line-height: var(--text-height-100)
}

.checkbox-container .input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.checkbox-container .input-icon {
    align-items: center;
    background-color: var(--FormCheck-background);
    border: 1px solid var(--FormCheck-border);
    border-radius: 4px;
    display: flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    margin-right: var(--space-XS);
    transition: all 50ms ease-out;
    width: 20px
}

.checkbox-container .input-icon svg {
    display: none;
    position: relative;
    top: 1px
}

.checkbox-container .input:checked+.input-icon {
    background-color: var(--FormCheckActive-background);
    border-color: var(--FormCheckActive-border)
}

.checkbox-container .input:checked+.input-icon svg {
    display: block
}

.checkbox-container label.checkbox {
    align-items: flex-start;
    cursor: pointer;
    display: flex
}

/*# sourceMappingURL=main.css.map*/