:root :host, body, .cdk-overlay-container
{
    /*fonts*/
    --helvetica: "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    --helvetica-light: "HelveticaNeue-Light",
        "Helvetica Neue Light",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    --font-type: "BMWTypeNext";
    --important-text-font-type: "BMWTypeNext";
    --font-light: "BMWTypeNext-Light";
    --font-bold: "BMWTypeNext-Bold";
    --font-thin: "BMWTypeNext-Thin";
    --font-regular: "BMWTypeNext-Regular";
    --font-latin-bold: "BMWTypeNextLatinTT-Bold";
    --font-latin-regular: "BMWTypeNextLatinTT-Regular";
    --font-latin-light: "bmw-light";
    --font-latin-thin: "bmw-thin";
    --font-icon-lib: "BMWIconLibrary";
    --font-awesome: "FontAwesome";
    --font-awesome-sans-serif: "FontAwesome", sans-serif;
    --mini-sans-serif-bold: "mini-sans-serif-bold",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    --mini-sans-serif-regular: "mini-sans-serif-regular",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    --mini-serif-bold: "mini-serif-bold", Times, "Times New Roman", Georgia, serif;
    --mini-serif-regular: "mini-serif-regular", Times, "Times New Roman", Georgia, serif;
    --bmwRegular: "BMWTypeNextLatinTT-Regular";
    --font-toolTip: "Roboto", "Helvetica Neue", sans-serif;
    --font-latin-sans-serif-regular: 'BMWTypeNextLatinTT-Regular', sans-serif;
    --font-latin-sans-serif-bold: 'BMWTypeNextLatinTT-Bold', sans-serif;
    --font-bmwtypeglobalpro-bold: "BMWTypeGlobalPro-Bold";
    --font-bmwtypeglobalpro-light: "BMWTypeGlobalPro-light";
    --font-bmwtypeglobalpro-regular: "BMWTypeGlobalPro-regular";
    --radio-button-font: "BMWTypeNext";
    --cb: cubic-bezier(0.505, 0.015, 0.46, 0.985);
    --main-heading-font: var(--font-type);
    --mfe-title: "BMWTypeNext";

    /*Icons*/
    --paused-icon: url(/cdn/static/us/bmw/icons/pause-icon-light.png);
    --cancelled-icon: url(/cdn/static/us/bmw/icons/cancelled-icon-light.png);
    --active-icon: url(/cdn/static/us/bmw/icons/active-icon-light.png);
    --success-icon: url(/cdn/static/us/bmw/icons/success.png);
    --error-icon: url(/cdn/static/us/bmw/icons/error.png);
    --caution-icon: url(/cdn/static/us/bmw/icons/caution.png);
    --warning-icon: url(/cdn/static/us/bmw/icons/warning.png);
    --inactive-icon: url(/cdn/static/us/bmw/icons/tick-icon-inactive.png);
    --closed-accordion-icon: url(/cdn/static/us/bmw/images/close-accordion.svg);
    --open-accordion-icon: url(/cdn/static/us/bmw/images/open-accordion.svg);
    --active-icon-dark: url(/cdn/static/us/bmw/icons/active-icon-dark.png);
    --tick-icon-inactive: url(/cdn/static/us/bmw/icons/tick-icon-inactive.png);
    --calendar-icon: url(/cdn/static/us/bmw/icons/calendar-icon.svg);
    --calculator-icon: url(/cdn/static/us/bmw/icons/calculator-icon.svg);
    --calendar-arrow: url(/cdn/static/us/bmw/icons/calendar-arrow.svg);
    --pause-icon-dark: url(/cdn/static/us/bmw/icons/pause-icon-dark.png);
    --cancelled-icon-dark: url(/cdn/static/us/bmw/icons/cancelled-icon-dark.png);
    --icon-tooltip: url(/cdn/static/us/bmw/icons/icon-tooltip.svg);
    --icon-edit-small-mini: url(/cdn/static/us/bmw/images/icon-edit-small-mini.svg);
    --icon-logout-mini: url(/cdn/static/us/bmw/images/icon-logout-mini.svg);
    --logo-mini: url(/cdn/static/us/bmw/images/logo-mini.svg);
    --icon-my-mini: url(/cdn/static/us/bmw/images/icon-my-mini.svg);
    --icon-my-garage-small: url(/cdn/static/us/bmw/images/icon-my-garage-small.svg);
    --icon-my-account-small: url(/cdn/static/us/bmw/images/icon-my-account-small.svg);
    --icon-my-garage-bmw: url(/cdn/static/us/bmw/images/icon-my-garage-bmw.svg);
    --icon-my-account-bmw: url(/cdn/static/us/bmw/images/icon-my-account-bmw.svg);
    --icon-my-card-bmw: url(/cdn/static/us/bmw/images/icon-my-card-bmw.svg);
    --icon-back: url(/cdn/static/us/bmw/images/icon-back.svg);
    --icon-arrow: url(/cdn/static/us/bmw/icons/icon-arrow.svg);
    --trash-icon: url(/cdn/static/us/bmw/icons/trash-icon.svg);
    --previous-arrow: url(/cdn/static/us/bmw/icons/icon-arrow.svg);
    --icon-print-black: url(/cdn/static/us/bmw/images/icon-print-black.svg);
    --document-media: url(/cdn/static/us/bmw/icons/document-media.png);
    --icon-help: url(/cdn/static/us/bmw/images/icon-help.svg);
    --icon-active: url(/cdn/static/us/bmw/icons/icon-active.png);
    --icon-inactive: url(/cdn/static/us/bmw/images/icon-inactive.png);
    --icon-header-back: url(/cdn/static/us/bmw/icons/icon-header-back.png);
    --close: url(/cdn/static/us/bmw/images/close.svg);
    --expand-arrow: url(/cdn/static/us/bmw/icons/expand-arrow.svg);
    --external-link-arrow: url(/cdn/static/us/bmw/icons/external-link-arrow.svg);
    --icon-actives: url(/cdn/static/us/bmw/icons/icon-actives.png);
    --outbound-arrow-white: url(/cdn/static/us/bmw/icons/outbound-arrow-white.png);
    --alert-close: url(/cdn/static/us/bmw/icons/alert-close.png);
    --icon-settings: url(/cdn/static/us/bmw/icons/icon-settings.png);
    --progress-ellipse: url(/cdn/static/us/bmw/icons/progress-ellipse.png);
    --active-ellipse: url(/cdn/static/us/bmw/icons/active-ellipse.svg);
    --success-ellipse: url(/cdn/static/us/bmw/icons/success-ellipse.png);
    --warning-ellipse: url(/cdn/static/us/bmw/icons/warning-ellipse.png);
    --inactive-ellipse: url(/cdn/static/us/bmw/icons/inactive-ellipse.png);
    --outbound-arrow: url(/cdn/static/us/bmw/icons/outbound-arrow.png);
    --alert-arrow-down: url(/cdn/static/us/bmw/icons/alert-arrow-down.png);
    --add-new-icon: url(/cdn/static/us/bmw/icons/add-new-icon.png);
    --icon-attachment: url(/cdn/static/us/bmw/icons/icon-attachment.svg);
    --lock: url(/cdn/static/us/bmw/icons/lock.png);
    --dialog-close: url(/cdn/static/us/bmw/icons/close.png);
    --icon-filter: url(/cdn/static/us/bmw/icons/icon-filter.svg);
    --link-arrow-white:url(/cdn/static/us/bmw/icons/link-arrow-white.png);
    --icon-check: url(/cdn/static/us/bmw/icons/check-icon.svg);
    --icon-inbox: url(/cdn/static/us/bmw/icons/inbox.png);
    --dark-ellipse: url(/cdn/static/us/bmw/icons/dark-ellipse.png);
    --attachment: url(/cdn/static/us/bmw/icons/attachment.png);
    --credit-card: url(/cdn/static/us/bmw/icons/icon-credit-card.svg);
    --union: url(/cdn/static/us/bmw/icons/icon-union.svg);
    --tilted-inbox: url(/cdn/static/us/bmw/icons/icon-tilted-inbox.svg);
    --vector-4: url(/cdn/static/us/bmw/icons/icon-vector-4.svg);
    --vector-5: url(/cdn/static/us/bmw/icons/icon-vector-5.svg);
    --vector-6: url(/cdn/static/us/bmw/icons/icon-vector-6.svg);
    --edit-light:url(/cdn/static/us/bmw/icons/edit.svg);
    --disclaimer-light:url(/cdn/static/us/bmw/icons/disclaimer.png);
    --bmw-Micon:url(/cdn/static/us/bmw/icons/bmw-icon.png);
    --bmw-Iicon:url(/cdn/static/us/bmw/icons/bmw-i-icon.png);

    /*Images*/
    --legitimization-backgroud-image-large: url(/cdn/static/us/bmw/images/link-account-desktop-large.jpg);
    --legitimization-backgroud-image-desktop: url(/cdn/static/us/bmw/images/link-account-desktop.jpg);
    --legitimization-backgroud-image-tablet: url(/cdn/static/us/bmw/images/link-account-tablet.jpg);
    --easypay-background-image-large: url(/cdn/static/us/bmw/images/background-desktop.png);
    --easypay-background-image-desktop: url(/cdn/static/us/bmw/images/background-large.png);
    --easypay-background-image-tablet: url(/cdn/static/us/bmw/images/background-tab.png);
    --easypay-background-image-medium: url(/cdn/static/us/bmw/images/background-medium.png);
    --easypay-background-image-mobile: url(/cdn/static/us/bmw/images/background-mobile.png);
    --error-page-image-desktop: url(/cdn/static/us/bmw/images/bmw-errorpage-1280.png);
    --error-page-image-tablet: url(/cdn/static/us/bmw/images/bmw-errorpage-768.png);
    --error-page-image-mobile: url(/cdn/static/us/bmw/images/bmw-errorpage-375.png);
    --image-card-background-desktop: url(/cdn/static/us/bmw/images/image-card-background-desktop.png);
    --image-card-background-large: url(/cdn/static/us/bmw/images/image-card-background-large.png);
    --image-card-background-tablet: url(/cdn/static/us/bmw/images/image-card-background-tablet.png);
    --image-card-background-mobile: url(/cdn/static/us/bmw/images/image-card-background-mobile.png);
    --promo-card-image: url(/cdn/static/us/bmw/images/bmw-nextsteps-tablet-cropped-image.jpg);
    --banner-strip-image: url(/cdn/static/us/bmw/images/banner-strip-high-resolution-image.png);
    --selected-card-background-image: url(/cdn/static/us/bmw/images/selected-card-background.png);
    --content-card-background-image:url(/cdn/static/us/bmw/images/content-card-background-image.png);
    --no-image: url(/cdn/static/us/bmw/images/no-image.png);
    --fpo-header-image: url(/cdn/static/us/bmw/mobile/images/fpo-header-bg.jpg);
    --gradient-spinner-dark: url(/cdn/static/us/bmw/images/gradient-spinner-dark.png);
    --login-bg: url(/cdn/static/us/bmw/mobile/images/login-bg.jpg);
    --image-header-background-smaller: linear-gradient(to bottom, #000, #000 35%, transparent 60%), url("/cdn/static/us/bmw/images/image-header.png") 50% 120px / auto 100% no-repeat;
    --image-header-background-tablet: linear-gradient(to right, #000, #000 15%, transparent 50%), url("/cdn/static/us/bmw/images/image-header.png") 100px -90px / auto 540px no-repeat;
    --image-header-background-desktop: linear-gradient(to right, #000, #000 5%, transparent 50%), url("/cdn/static/us/bmw/images/image-header.png") 30px -250px / auto 1000px no-repeat;
    --image-header-background-large: linear-gradient(to right, #000, #000 5%, transparent 50%), url("/cdn/static/us/bmw/images/image-header.png") 90px -370px / auto 1500px no-repeat;

    /*colors*/
    --checkbox-list-selected-item: #F6F6F680;
    --btn-color: #1C69D3;
    --white: #ffffff;
    --bgColor-grey: #eee;
    --profile-gray: #f6f6f6;
    --profile-border: #E6E7E8;
    --blue-hover-state: #1d55a2;
    --blue-disabled-state: #5895e9;
    --lighter-gray: #f5f5f5;
    --dark-grayish-lime-green: #666766;
    --table-dark: #eaeaea;
    --breadcrumb-border: #d5d5d5;
    --charge-green: #7ED321;
    --status-yellow: #F2E21B;
    --dashboard-tile-gray: #7D7E80;
    --separatorLine: #EBEBEB;
    --accent: #1864d0;
    --accentDark: #1d55a2;
    --accentLight: #5895e9;
    --primary: 0, 0, 0;
    --primaryDark: #1b1c1d;
    --primaryLight: #dfdfdf;
    --primaryLowEmphasis: 0, 0, 0;
    --error: 235, 22, 22;
    --gold: #daa446;
    --good: #058a00;
    --error-red: rgb(235, 22, 22);

    --primaryInverse: #ffffff;
    --warning: #c45500;
    --fusion-green: #1b7b3a;
    --background: #ffffff;
    --surface-elevation: #ffffff;
    --surface-flat: #e8e8e8;
    --surface-flat-rgba: 232, 232, 232, 0.4;
    --car-color: #136c91;
    --black: #000000;
    --darkSurface: #1d1d1d;
    --accent-btn: #1c69d3;
    --accent-btn-text: #f1f1f1;
    --blackWithOpacityOfTen: rgba(27, 28, 29, 0.10);
    --dialogLightBcg: 255, 255, 255;
    --opacity0: 0;
    --opacity002: 0.02;
    --opacity01: 0.1;
    --opacity012: 0.12;
    --opacity02: 0.2;
    --opacity04: 0.4;
    --opacity032: 0.32;
    --opacity06: 0.6;
    --mini-red: #ac2430;
    --mini-light-red-bg: rgba(#f05c22, 0.06);
    --mini-dark-red: #690505;
    --BlackPearl: rgb(27, 28, 29);
    --black-Opacity: rgb(0, 0, 0, 0.6);
    --error-red-dark: #ed0404;
    --Snow: #fbfbfb;
    --progress-bar-text: #929aa1;
    --progress-bar-bg: #f0f1f2;
    --progress-bar-load: #72747f;
    --secondary-btn-border: #979797;
    --mini-menu-bg: #f2f4f4;
    --mini-menu-border: #e2e2e2;
    --menu-border-color: #d8d8d8;
    --select-selected-color: #EEEEEE;
    --mini-light-grey: rgba(0, 0, 0, 0.07);
    --light-gray: #ededee;
    --dark-gray: #414141;
    --error-red: #FF1744;
    --medium-gray: #77787b;
    --primary-blue: #0067db;
    --primary-blue-lightened: #0066FF;
    --input-border-gray: #cacaca;
    --header-dropdown-border: #dadada;
    --border-gray: #dedede;
    --dark: #221f1f;
    --light-black: #333;
    --grey-tone-6: #4c4c4c;
    --progress-disable-link: #808080;
    --gradient-light-gray: linear-gradient(90deg, rgba(246, 246, 246, 0.0001) -87.22%, #F6F6F6 115.48%, #F6F6F6 167.92%);
    --gray-shadow: rgba(114, 113, 113, 0.7);
    --blue-hover-state: #1d55a2;
    --blue-disabled-state: #5895e9;
    --success: #43a047;
    --pill-success: var(--alert-green);
    --pill-alert: var(--alert-yellow);
    --radio-ripple: #ffd740;
    --input-border-gray-darker: darken(var(--input-border-light-gray),10%);
    --mini-banner: #14ABA8;
    --mini-banner-border: #942356;
    --color-dark-opacity-02: rgba(var(--primary), var(--opacity002));
    --color-dark-opacity-6: rgba(var(--primary), var(--opacity06));
    --black-shade: #0000008a;
    --light-blue: #a6cbff;
    --black-tone-1: #000000de;
    --black-tone-2: rgba(0,0,0,.04);
    --grey-tone-1:  #0000006b;
    --hover-focus: #212121;
    --alert-yellow: #FBEDC9;
    --alert-green: #E8F2EB;
    --alert-red: #F7E7E9;
    --dark-black: rgba(34, 31, 31, 1);
    --seperatorLine: #ddd;
    --blue-tone-2: #1971eb;
    --critical: #ff6969;
    --error-red: rgb(255, 105, 105);
    --warning: #e81a33;
    --deactive: #727171;
    --sub-nav-title: #727171;
    --mob-deactive: #a9a9a9;
    --grey-tone-4: #6F6F6F;
    --wheat: rgb(245, 222, 179);
    --status-yellow: #FFAD1F;
    --shadow-grey: #0000001a;
    --grey-tone-7: rgba(212,211,211,0.32);
    --grey-tone-5:#5A5A5A;
    --grey-tone-8:#414140;
    --black-tone-2: #262626;
    --black-tone-3: #616161e6;
    --black-tone-4: #4c4c4c;
    --input-text: #727171;
    --white-opacity-0: #ffffff00;
    --banner-grey-tone: "#4c4c4c";
    --banner-bg: "#ffffff";
    --banner-font: "#221f1f";
    --banner-anchor-color: #4c4c4c;
    --btn-txt-hover: #f6f6f6;
    --outline-color:#9E6A96;
    --radio-button-border:#cacaca;
    --options-text-color: #4c4c4c;
    --btn-hover-state: #1d55a2;
    --profile-bg-color: #f6f6f6;
    --grey-tone-1: #f1f1f1;
    --navbar-gray: #404040;
    --text-grey: #8E8E8E;
    --text-grey-2: #727171;
    --button-color-disabled: #f6f6f6;
    --button-text-transform: none;
    --button-link-text-color: var(--grey-tone-6);
    --black-opacity-1: rgba(11, 5, 5, 0.1);
    --black-opacity-2: rgba(0, 0, 0, 0.2);
    --black-opacity-3: rgba(0, 0, 0, 0.3);
    --black-opacity-4: rgba(0, 0, 0, 0.04);
    --black-opacity-8: rgba(0, 0, 0, 0.8);
    --black-opacity-54: rgba(0, 0, 0, 0.54);
    --black-opacity-38: rgba(0, 0, 0, 0.38);
    --label-gray: #767676;
    --light-blue-bg: #F3F7FD;
    --box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.10);
    --popup-box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f;
    --box-shadow-mat-dropdown: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
        0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    --black-box-shadow: 0px 1px 5px rgb(0 0 0 / 50%);
    --close-button-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
    /*overlay*/
    --gradient-black: linear-gradient(0deg, #000000 35.19%, rgba(0, 0, 0, 0) 96.37%);
    --gradient-white: linear-gradient(180deg, rgba(246, 246, 246, 0) 0%, #f6f6f6 100%);
    --gradient-light-gray: linear-gradient(90deg, rgba(246, 246, 246, 0.0001) -87.22%, #F6F6F6 115.48%, #F6F6F6 167.92%);
    --gradient-mix-white: linear-gradient(360deg, #FFFFFF 13.11%, #FFFFFF 55.58%, rgba(255, 255, 255, 0.0001) 100%);
    --gradient-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%),
        0 1px 2px 0 rgb(0 0 0 / 10%);
    --gradient-mix-gray: linear-gradient(180deg, rgba(246, 246, 246, 0) 0%, #F6F6F6 83.33%);
    --overlay-white-bottom: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%);
    --overlay-white-top: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%);
    --overlay-white-top-and-bottom: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--white) 30%, var(--white) 70%, rgba(255, 255, 255, 0) 100%);
    --banner-background-light: #ffffff;
    --banner-text-light: #221f1f;
    --banner-background-dark: #221f1f;
    --banner-text-dark: #f6f6f6;
    --radio-button-outer-border:#cacaca;
    --header-border-gray: #cacaca;
    --grey-tone-2: hsl(0, 0%, 44%);
    --promo-bg-color:#ffffff;
    --legitimization-form-background: var(--white);
    --grey-tone-10: #4c4c4c;
    --error-page-header-font-family: var(--font-type);
    --error-page-header-color: var(--white);
    --error-page-label-color: var(--profile-gray);
    --error-page-button-letter-spacing-mobile: 0.5px;
    --error-page-button-letter-spacing-desktop: 0.5px;
    --button-secondary-2: #221F1F;
    --banner-rewards-background: linear-gradient(to right, #2E2E2E, #434343);
    --banner-text-background : transparent;
    /*content*/
    --icon-arrow-down: '\e9ab';
    /*Button Heights*/
    --height-25: 25px;
    --height-45: 45px;
    --height-50: 50px;
    --height-55: 55px;
    --height-100: 100%;
    /* Font weight */
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-700: 700;
    --font-weight-900: 900;
    --font-weight-500: 500;
    --font-weight-100: 100;
    --font-weight-bold: bold;
    --font-weight-title: 700;
    /*font Size */
    --font-size-09rem: 0.9rem;
    --font-size-10: 10px;
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-19: 19px;
    --font-size-20: 20px;
    --font-size-21: 21px;
    --font-size-22: 22px;
    --font-size-23: 23px;
    --font-size-24: 24px;
    --font-size-25: 25px;
    --font-size-26: 26px;
    --font-size-27: 27px;
    --font-size-28: 28px;
    --font-size-29: 29px;
    --font-size-30: 30px;
    --font-size-31: 31px;
    --font-size-32: 32px;
    --font-size-33: 33px;
    --font-size-34: 34px;
    --font-size-35: 35px;
    --font-size-36: 36px;
    --font-size-37: 37px;
    --font-size-38: 38px;
    --font-size-39: 39px;
    --font-size-48: 48px;
    --font-size-54: 54px;
    --large-font: larger;
    --large: 1024px;
    --medium: 760px;
    --small: 600px;
    --vlarge: 900px;
    --screen-mobile: 767px;
    --tablet: 768px;
    --mobile: 425px;
    --mobileXL: 428px;
    --laptop: 1366px;
    --desktop-large: 2000px;
    --screen-smaller: 375px;
    --screen-medium: 1024px;
       
    /* Spacing: */
    --large-form-container-spacing: 30px;
    --medium-form-container-spacing: 25px;
    --small-form-container-spacing: 20px;
    
    --large-form-container-with-background-spacing: 30px;
    --medium-form-container-with-background-spacing: 25px;
    --small-form-container-with-background-spacing: 20px;

    /* calendar: */
    --calendar-box-shadow: 0px 0px 10px var(--black-opacity-1);  
    --calendar-border-radius: 3px;
    --calendar-selected-date-color: var(--dark);
    --calendar-selected-date-background: var(--white);
    --calendar-selected-date-border-color: var(--dark);

    /* edit icon */ 
    --edit-icon-size: 24px;
    --edit-icon-size-small: 16.75px;
}

/*dark mode colors and icons*/
.bmwDarkMode {
    --btn-secondary: #000000;
    --primary: 255, 255, 255;
    --primaryDark: #efefef;
    --primaryLight: #dfdfdf;
    --primaryInverse: #000000;
    --primaryLowEmphasis: 255, 255, 255;
    --accent: #329eff;
    --error: 255, 105, 105;
    --gold: #daa446;
    --good: #06b300;
    --warning: #ff9300;
    --background: #1a1c1d;
    --surface-elevation: #242526;
    --surface-flat: #313334;
    --surface-flat-rgba: 49, 51, 52, 1;
    --car-color: #136c91;
    --black: #000000;
    --darkSurface: #1d1d1d;
    --white: #ffffff;
    --white-back: #fff;
    --back-shadow-black: rgba(0, 0, 0, 0.1);
    /*Icons*/
    --paused-icon: url(/cdn/static/us/bmw/icons/pause-icon-dark.png);
    --cancelled-icon: url(/cdn/static/us/bmw/icons/cancelled-icon-dark.png);
    --active-icon: url(/cdn/static/us/bmw/icons/active-icon-dark.png);
    --inactive-icon: url(/cdn/static/us/bmw/icons/tick-icon-inactive.png);
    --success-icon: url(/cdn/static/us/bmw/icons/success.png);
    --error-icon: url(/cdn/static/us/bmw/icons/error.png);
    --caution-icon: url(/cdn/static/us/bmw/icons/caution.png);
    --closed-accordion-icon: url(/cdn/static/us/bmw/images/close-accordion.svg);
    --open-accordion-icon: url(/cdn/static/us/bmw/images/open-accordion.svg);
}

/*Font Face */
@font-face {
    font-family: "BMWTypeNext-Light";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNext-Light.otf");
}

@font-face {
    font-family: "BMWTypeNext-Bold";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNext-Bold.otf");
}

@font-face {
    font-family: "BMWTypeNext-Thin";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNext-Thin.otf");
}

@font-face {
    font-family: "BMWTypeNext-Regular";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNext-Regular.otf");
}

@font-face {
    font-family: "BMWTypeNextLatinTT-Bold";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNextLatinTT-Bold.ttf");
}

@font-face {
    font-family: "BMWTypeNextLatinTT-Regular";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNextLatinTT-Regular.ttf");
}

@font-face {
    font-family: "bmw-light";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNextLatinTT-Light.ttf");
}

@font-face {
    font-family: "bmw-thin";
    src: url("/cdn/static/us/bmw/fonts/BMWTypeNextLatinTT-Thin.ttf");
}

@font-face {
    font-family: "BMWIconLibrary";
    src: url("/cdn/static/us/bmw/fonts/BMWIconLibrary.ttf");
}

@font-face {
    font-family: "mini-sans-serif-bold";
    src: url("/cdn/static/us/mini/fonts/mini_sans_serif-bold-webfont.woff2");
}

@font-face {
    font-family: "mini-sans-serif-regular";
    src: url("/cdn/static/us/mini/fonts/mini_sans_serif-regular-webfont.woff2");
}

@font-face {
    font-family: "mini-serif-bold";
    src: url("/cdn/static/us/mini/fonts/mini_serif-bold-webfont.woff2");
}

@font-face {
    font-family: "mini-serif-regular";
    src: url("/cdn/static/us/mini/fonts/mini_serif-regular-webfont.woff2");
}

@font-face {
    font-family: "BMWTypeNext";
    font-weight: 200;
    src: url("/cdn/static/ca/bmw/fonts/BMWTypeNextLatin-Thin.woff2");
}

@font-face {
    font-family: "BMWTypeNext";
    font-weight: 400;
    src: url("/cdn/static/ca/bmw/fonts/BMWTypeNextLatin-Light.woff2");
}

@font-face {
    font-family: "BMWTypeNext";
    font-weight: 700;
    src: url("/cdn/static/ca/bmw/fonts/BMWTypeNextLatin-Bold.woff2");
}