:root :host,
body,
.cdk-overlay-container {
    /*Icons*/
    --success-icon: url(/cdn/static/ca/mini/icons/success.png);
    --error-icon: url(/cdn/static/ca/mini/icons/error.png);
    --caution-icon: url(/cdn/static/ca/mini/icons/caution.png);
    --warning-icon: url(/cdn/static/ca/mini/icons/warning.svg);
    --active-icon-dark: url(/cdn/static/ca/mini/icons/active-icon-dark.png);
    --tick-icon-inactive: url(/cdn/static/ca/mini/icons/tick-icon-inactive.png);
    --calendar-icon: url(/cdn/static/ca/mini/icons/calendar.png);
    --calculator-icon: url(/cdn/static/ca/mini/icons/calculator-icon.svg);
    --calendar-arrow: url(/cdn/static/ca/mini/icons/calendar-arrow.png);
    --icon-tooltip: url(/cdn/static/ca/mini/icons/tooltip.png);
    --icon-arrow: url(/cdn/static/ca/mini/icons/icon-arrow.svg);
    --trash-icon: url(/cdn/static/ca/mini/icons/trash-icon.png);
    --icon-print-black: url(/cdn/static/ca/mini/icons/icon-print-black.png);
    --document-media: url(/cdn/static/ca/mini/icons/document-media.png);
    --icon-help: url(/cdn/static/ca/mini/icons/icon-help.png);
    --icon-download: url(/cdn/static/ca/mini/icons/download.svg);
    --icon-active: url(/cdn/static/ca/mini/icons/icon-active.png);
    --icon-inactive: url(/cdn/static/ca/mini/icons/icon-inactive.png);
    --icon-header-back: url(/cdn/static/ca/mini/icons/header-arrow.png);
    --close: url(/cdn/static/ca/mini/icons/close.png);
    --icon-actives: url(/cdn/static/ca/mini/icons/icon-actives.png);
    --alert-close: url(/cdn/static/ca/mini/icons/alert-close.png);
    --icon-settings: url(/cdn/static/ca/mini/icons/settings.png);
    --progress-ellipse: url(/cdn/static/ca/mini/icons/progress-ellipse.png);
    --active-ellipse: url(/cdn/static/ca/mini/icons/active-ellipse.png);
    --success-ellipse: url(/cdn/static/ca/mini/icons/success-ellipse.png);
    --warning-ellipse: url(/cdn/static/ca/mini/icons/warning-ellipse.png);
    --alert-arrow-down: url(/cdn/static/ca/mini/icons/alert-arrow-down.png);
    --add-new-icon: url(/cdn/static/ca/mini/icons/add-new-black-icon.png);
    --icon-attachment: url(/cdn/static/ca/mini/icons/icon-attachment.png);
    --lock: url(/cdn/static/ca/mini/icons/lock-slim.png);
    --dialog-close: url(/cdn/static/ca/mini/icons/close.png);
    --icon-filter: url(/cdn/static/ca/mini/icons/filter.png);
    --expand-arrow: url(/cdn/static/ca/mini/icons/expand-arrow.svg);
    --external-link-arrow: url(/cdn/static/ca/mini/icons/external-link-arrow.png);
    --icon-edit-small-mini: url(/cdn/static/ca/mini/icons/icon-edit-small-mini.svg);
    --icon-logout-mini: url(/cdn/static/ca/mini/icons/icon-logout-mini.svg);
    --logo-mini: url(/cdn/static/ca/mini/icons/logo-mini.svg);
    --icon-my-mini: url(/cdn/static/ca/mini/icons/icon-my-mini.svg);
    --previous-arrow: url(/cdn/static/ca/mini/icons/previous-arrow.svg);
    --icon-my-garage-small: url(/cdn/static/ca/mini/icons/icon-my-garage-small.svg);
    --icon-my-account-small: url(/cdn/static/ca/mini/icons/icon-my-account-small.svg);
    --icon-my-garage-bmw: url(/cdn/static/ca/mini/icons/icon-my-garage-bmw.svg);
    --icon-my-account-bmw: url(/cdn/static/ca/mini/icons/icon-my-account-bmw.svg);
    --icon-my-card-bmw: url(/cdn/static/ca/mini/icons/icon-my-card-bmw.svg);
    --previous-arrow: url(/cdn/static/ca/mini/icons/icon-arrow.svg);
    --link-arrow-white: url(/cdn/static/ca/mini/icons/link-arrow-white.png);
    --icon-check: url(/cdn/static/ca/mini/icons/check-icon.svg);
    --attachment: url(/cdn/static/ca/mini/icons/attachment.png);
    --credit-card: url(/cdn/static/ca/mini/icons/icon-credit-card.svg);
    --union: url(/cdn/static/ca/mini/icons/icon-union.svg);
    --icon-inbox: url(/cdn/static/ca/mini/icons/inbox.png);
    --tilted-inbox: url(/cdn/static/ca/mini/icons/icon-tilted-inbox.svg);
    --vector-4: url(/cdn/static/ca/mini/icons/icon-vector-4.svg);
    --vector-5: url(/cdn/static/ca/mini/icons/icon-vector-5.svg);
    --vector-6: url(/cdn/static/ca/mini/icons/icon-vector-6.svg);
    --bmw-Micon: url(/cdn/static/ca/mini/icons/bmw-icon.png);
    --bmw-Iicon: url(/cdn/static/ca/mini/icons/bmw-i-icon.png);
    --edit-light: url(/cdn/static/ca/mini/icons/edit.png);
    --disclaimer-light: url(/cdn/static/ca/mini/icons/tooltip.svg);
    --inactive-ellipse: url(/cdn/static/ca/mini/icons/inactive-ellipse.png);
    --external-link-arrow: url(/cdn/static/ca/mini/icons/external-link-arrow.svg);
    --datepicker-icon: url(/cdn/static/ca/mini/icons/datepicker-icon.svg);

    /*Images*/
    --legitimization-backgroud-image-large: url(/cdn/static/ca/mini/images/link-account-desktop-large.png);
    --legitimization-backgroud-image-desktop: url(/cdn/static/ca/mini/images/link-account-desktop.png);
    --legitimization-backgroud-image-tablet: url(/cdn/static/ca/mini/images/link-account-tablet.png);
    --error-page-image-desktop: url(/cdn/static/ca/mini/images/error-page-mini-desktop.jpg);
    --error-page-image-tablet: url(/cdn/static/ca/mini/images/error-page-mini-tablet.jpg);
    --error-page-image-mobile: url(/cdn/static/ca/mini/images/error-page-mini-mobile.jpg);
    --selected-card-background-image: url(/cdn/static/ca/mini/images/selected-card-background.jpg);
    --promo-card-image: url(/cdn/static/ca/mini/images/promo-card-image.jpg);
    --banner-strip-image: url(/cdn/static/ca/mini/images/banner-strip-image.png);
    --content-card-background-image: url(/cdn/static/ca/mini/images/content-card-background.jpg);
    --no-image: url(/cdn/static/ca/mini/images/no-image.png);
    --image-card-background-desktop: url(/cdn/static/ca/mini/images/image-card-background-desktop.png);
    --image-card-background-large: url(/cdn/static/ca/mini/images/image-card-background-large.png);
    --image-card-background-tablet: url(/cdn/static/ca/mini/images/image-card-background-tablet.png);
    --image-card-background-mobile: url(/cdn/static/ca/mini/images/image-card-background-mobile.png);
    --image-card-background-dashboard-desktop: url(/cdn/static/ca/mini/images/image-card-background-dashboard-desktop.png);
    --image-card-background-dashboard-large: url(/cdn/static/ca/mini/images/image-card-background-dashboard-large.png);
    --image-card-background-dashboard-tablet: url(/cdn/static/ca/mini/images/image-card-background-dashboard-tablet.png);
    --image-card-background-dashboard-mobile: url(/cdn/static/ca/mini/images/image-card-background-dashboard-mobile.png);
    --image-header-background-smaller: linear-gradient(to bottom, #000, #000 35%, transparent 60%), url("/cdn/static/ca/mini/images/image-header.png") -5px 120px / auto 277px no-repeat;
    --image-header-background-mobile-sm: linear-gradient(to bottom, #000, #000 35%, transparent 60%), url("/cdn/static/ca/mini/images/image-header.png") -25px 112px / auto 308px no-repeat;
    --image-header-background-mobile-xl: linear-gradient(to bottom, #000, #000 35%, transparent 60%), url("/cdn/static/ca/mini/images/image-header.png") -5px 106px / auto 301px no-repeat;
    --image-header-background-tablet-xl: linear-gradient(to right, #000, #000 5%, transparent 20%), url("/cdn/static/ca/mini/images/image-header.png") 60px -148px / auto 643px no-repeat;
    --image-header-background-tablet: linear-gradient(to right, #000, #000 7%, transparent 24%), url("/cdn/static/ca/mini/images/image-header.png") 59px -72px / auto 488px no-repeat;
    --image-header-background-desktop: linear-gradient(to right, #000, #000 7%, transparent 20%), url("/cdn/static/ca/mini/images/image-header.png") 99px -189px / auto 818px no-repeat;
    --image-header-background-large: linear-gradient(to right, #000, #000 5%, transparent 50%), url("/cdn/static/ca/mini/images/image-header.png") 90px -370px / auto 1500px no-repeat;
    --image-header-background-desktop-md: linear-gradient(to right, #000, #000 7%, transparent 18%), url("/cdn/static/ca/mini/images/image-header.png") 101px -210px / auto 938px no-repeat;
    --image-header-background-desktop-xxl: linear-gradient(to right, #000, #000 6%, transparent 22%), url("/cdn/static/ca/mini/images/image-header.png") 142px -269px / auto 1614px no-repeat;
    --image-header-background-desktop-fullhd: linear-gradient(to right, #000, #000 8%, transparent 20%), url("/cdn/static/ca/mini/images/image-header.png") 155px -187px / auto 1177px no-repeat;
    --image-header-background-desktop-plus: linear-gradient(to right, #000, #000 8%, transparent 17%), url("/cdn/static/ca/mini/images/image-header.png") 119px -222px / auto 998px no-repeat;
    --image-roadAhead-smaller: url(/cdn/static/ca/mini/images/roadAhead.jpg) 0% -81px / 105% 193% no-repeat;
    --image-roadAhead-tablet: url(/cdn/static/ca/mini/images/roadAhead.jpg) 0% -90px / 112% 216% no-repeat;
    --image-roadAhead-tablet-xl: url(/cdn/static/ca/mini/images/roadAhead.jpg) 0% -125px / 110% 277% no-repeat;
    --image-roadAhead-desktop: url(/cdn/static/ca/mini/images/roadAhead.jpg) 0% -18px / 110% 110% no-repeat;
    --image-roadAhead-desktop-large: url(/cdn/static/ca/mini/images/roadAhead.jpg) 0% -16px / 104% 109% no-repeat;
    --dashboard-banner-strip: url(/cdn/static/ca/mini/images/banner-strip-image.png);

    --banner-couple-couch: url(/cdn/static/ca/bmw/images/banner-couple-couch.jpg);
    --banner-woman-laptop: url(/cdn/static/ca/bmw/images/banner-woman-laptop.jpg);
    --banner-woman-phone: url(/cdn/static/ca/mini/images/banner-woman-phone.jpg);
    --banner-man-phone: url(/cdn/static/ca/mini/images/banner-man-phone.jpg);

    /*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;
    --breadcrumb-font-size: 17px;
    /* 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-normal: normal;
    --font-weight-title: 400;
    /*fonts*/
    --font-icon-lib: "BMWIconLibrary";
    --font-type: "Mini-SansSerif-Regular";
    --important-text-font-type: "Mini-Serif-Regular";
    --font-bold: "Mini-SansSerif-Bold";
    --radio-button-font: "Mini-SansSerif-Regular";
    --font-light: "Mini-SansSerif-Regular";
    --font-thin: "Mini-SansSerif-Regular";
    --font-regular: "Mini-SansSerif-Regular";
    --footer-font-type: "mini-sans-serif-bold",
        "Helvetica Neue",
        Helvetica,
        Arial,
        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;
    --font-bmwtypeglobalpro-light: "Mini-Serif-Bold";
    --font-bmwtypeglobalpro-bold: "BMWTypeGlobalPro-Bold";
    --font-bmwtypeglobalpro-regular: "BMWTypeGlobalPro-regular";
    --mfe-title: "Mini-Serif-Regular";
    --helvetica: "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    --font-latin-regular: "BMWTypeNextLatinTT-Regular";
    --font-latin-bold: "Mini-SansSerif-Regular";
    --main-heading-font: var(--mini-serif-regular);
    /*colors*/
    --checkbox-list-selected-item: #F6F6F680;
    --medium-gray: #77787b;
    --deactive: #727171;
    --sub-nav-title: #7C7C7C;
    --input-text: #7C7C7C;
    --mini-menu-bg: #f2f4f4;
    --black: #000000;
    --white: #ffffff;
    --btn-color: #00779C;
    --profile-gray: #f6f6f6;
    --dark: #221F1F;
    --accent: #1864d0;
    --accent-btn: #00779C;
    --accent-btn-text: #ffffff;
    --blue-hover-state: #31a1c4;
    --blue-disabled-state: #E5E5E5;
    --secondary-btn-disable-background: rgba(74, 74, 74, 0.80);
    --secondary-btn-disable-text: #E5E5E5;
    --btn-txt-hover: #f6f6f6;
    --grey-tone-6: #4c4c4c;
    --shadow-grey: rgba(0, 0, 0, 0.10);
    --dark-black: rgba(34, 31, 31, 1);
    --banner-anchor-color: #000000;
    --input-border-gray: #cacaca;
    --banner-background-dark: #221f1f;
    --banner-text-dark: #f6f6f6;
    --banner-background-light: #ffffff;
    --banner-text-light: #221f1f;
    --radio-button-border: #7C7C7C;
    --separatorLine: #EBEBEB;
    --radio-button-outer-border: #00779C;
    --options-text-color: #4c4c4c;
    --grey-tone-10: #4c4c4c;
    --btn-hover-state: #00779C;
    --profile-bg-color: #f6f6f6;
    --header-border-gray: #f1f1f1;
    --grey-tone-1: #f1f1f1;
    --sub-nav-title: #727171;
    --mini-light-grey: rgba(0, 0, 0, 0.07);
    --black-tone-4: #333;
    --blue-tone-2: #00779C;
    --promo-bg-color: #f6f6f6;
    --legitimization-form-background: transparent;
    --dark-grey: #363636;
    --darker-grey: #2f2f2f;
    --light-grey: #77787b;
    --denim-blue: #1c69d4;
    --iron-grey: #cdced0;
    --alto-grey: #d0d0d0;
    --wildsand-solid: #f4f4f4;
    --nevada-grey: #6d6e71;
    --mariner-blue: #316bcd;
    --tundora-black: #4d4d4d;
    --warning: #cc0000;
    --fusion-green: #1B7B3A;
    --status-yellow: #ED9300;
    --success: #96A126;
    --pill-success: var(--alert-green);
    --pill-alert: var(--alert-yellow);
    --pill-info: var(--tundora-black);
    --alert-yellow: #F9DEB2;
    --alert-green: #DFE2BD;
    --alert-red: #F7E7E9;
    --gradient-white: linear-gradient(180deg, rgba(246, 246, 246, 0) 0%, #f6f6f6 100%);
    --gradient-black: linear-gradient(0deg, #000000 35.19%, rgba(0, 0, 0, 0) 96.37%);
    --error: 235, 22, 22;
    --card-background: #ffffff 0% 0% no-repeat padding-box;
    --tooltip-background: #ffffff;
    --button-color-disabled: #4A4A4A;
    --button-text-transform: uppercase;
    --card-shadow: 2px 2px 3px #0000001a;
    --card-corner-radius: 5px;
    --tooltip-shadow: 2px 2px 4px 3px #0000001a;
    --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);
    --button-link-text-color: #000;
    --error-page-header-font-family: var(--mini-serif-regular);
    --error-page-header-color: var(--white);
    --error-page-label-color: var(--white);
    --error-page-button-letter-spacing-mobile: 0.84px;
    --error-page-button-letter-spacing-desktop: 1.05px;
    --button-link-text-decoration: underline;
    --menu-border-color: #d8d8d8;
    --primary: 0, 0, 0;
    --primaryDark: #1b1c1d;
    --primaryLight: #dfdfdf;
    --primaryLowEmphasis: 0, 0, 0;
    --primaryInverse: #ffffff;
    --surface-elevation: #ffffff;
    --banner-rewards-background: #06aba7;
    --banner-text-background: #952456;
    --opacity0: 0;
    --opacity002: 0.02;
    --opacity01: 0.1;
    --opacity012: 0.12;
    --opacity02: 0.2;
    --opacity04: 0.4;
    --opacity032: 0.32;
    --opacity06: 0.6;
    --button-secondary-2: #000;
    --alert-red: #EFB2B2;
    --text-grey-2: #727171;
    --opacity01: 0.1;

    /*Button Heights*/
    --height-25: 25px;
    --height-45: 45px;
    --height-50: 50px;
    --height-55: 55px;
    --height-100: 100%;

    /* Spacing: */
    --gutter: 20px;
    --large-form-container-spacing: 0px;
    --medium-form-container-spacing: 0px;
    --small-form-container-spacing: 0px;

    --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 4px 4px 0px #00000040;
    --calendar-border-radius: 0 0 11px 11px;
    --calendar-selected-date-color: var(--primaryInverse);
    --calendar-selected-date-background: rgb(var(--primary));
    --calendar-selected-date-border-color: rgb(var(--primary));

    --secondary-btn-text-decoration: underline;

    /* edit icon */
    --edit-icon-size: 21px;
    --edit-icon-size-small: 21px;

    --logo-header-position: static;

    /* header size */
    --header-height: 60px;

    /* topnav breakpoints */
    /* 375px */
    --topnav-height-smaller: 62px;

    /* 768 */
    --topnav-height-tablet: 48px;

    /* 2000*/
    --topnav-height-large: 65px;

    /* footer on display breakpoints */
    /* 375 */
    --footer-on-display-smaller: 80px;
    /* 768 */
    --footer-on-display-tablet: 60px;
    /* 1024 and up*/
    --footer-on-display-medium: 50px;

    /* main min height */
    /* 375px */
    --main-min-height-smaller: calc(100vh - var(--topnav-height-smaller) - var(--header-height) - var(--footer-on-display-smaller));
    /* 768 */
    --main-min-height-mobile: calc(100vh - var(--topnav-height-tablet) - var(--header-height) - var(--footer-on-display-tablet));
    /* 2000*/
    --main-min-height-large: calc(100vh - var(--topnav-height-large) - var(--header-height) - var(--footer-on-display-medium));
}

/*font-face*/
@font-face {
    font-family: "Mini-Serif-Regular";
    src: url("/cdn/static/ca/mini/fonts/mini_serif-regular-webfont.woff2");
}

@font-face {
    font-family: "Mini-SansSerif-Bold";
    src: url("/cdn/static/ca/mini/fonts/mini_sans_serif-bold-webfont.woff2");
}

@font-face {
    font-family: "Mini-SansSerif-Regular";
    src: url("/cdn/static/ca/mini/fonts/mini_sans_serif-regular-webfont.woff2");
}

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

@font-face {
    font-family: "BMWTypeGlobalPro-Bold";
    src: url("/cdn/static/ca/mini/fonts/BMWTypeGlobalPro-Bold.ttf");
}

@font-face {
    font-family: "BMWTypeGlobalPro-regular";
    src: url("/cdn/static/ca/mini/fonts/BMWTypeGlobalPro-Regular.ttf");
}

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

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