﻿/* FONTS */
@font-face {
    font-family: 'MazdaType-BoldItalic';
    src: url('../fonts/specific/MazdaType-BoldItalic.eot');
    src: url('../fonts/specific/MazdaType-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/specific/MazdaType-BoldItalic.woff2') format('woff2'), url('../fonts/specific/MazdaType-BoldItalic.woff') format('woff'), url('../fonts/specific/MazdaType-BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MazdaType-Italic';
    src: url('../fonts/specific/MazdaType-Italic.eot');
    src: url('../fonts/specific/MazdaType-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/specific/MazdaType-Italic.woff2') format('woff2'), url('../fonts/specific/MazdaType-Italic.woff') format('woff'), url('../fonts/specific/MazdaType-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MazdaType-Medium';
    src: url('../fonts/specific/MazdaType-Medium.eot');
    src: url('../fonts/specific/MazdaType-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/specific/MazdaType-Medium.woff2') format('woff2'), url('../fonts/specific/MazdaType-Medium.woff') format('woff'), url('../fonts/specific/MazdaType-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MazdaType-MediumItalic';
    src: url('../fonts/specific/MazdaType-MediumItalic.eot');
    src: url('../fonts/specific/MazdaType-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/specific/MazdaType-MediumItalic.woff2') format('woff2'), url('../fonts/specific/MazdaType-MediumItalic.woff') format('woff'), url('../fonts/specific/MazdaType-MediumItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MazdaType-Bold';
    src: url('../fonts/specific/MazdaType-Bold.eot');
    src: url('../fonts/specific/MazdaType-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/specific/MazdaType-Bold.woff2') format('woff2'), url('../fonts/specific/MazdaType-Bold.woff') format('woff'), url('../fonts/specific/MazdaType-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MazdaType-Regular';
    src: url('../fonts/specific/MazdaType-Regular.eot');
    src: url('../fonts/specific/MazdaType-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/specific/MazdaType-Regular.woff2') format('woff2'), url('../fonts/specific/MazdaType-Regular.woff') format('woff'), url('../fonts/specific/MazdaType-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.headerLogo {
    max-width: 80px;
}

html, body, p, span, .text-container {
    font-family: var(--typo-copy-font);
    font-weight: var(--typo-copy-regular-weight) !important;
    font-size: var(--typo-copy-m-size) !important;
    letter-spacing: normal;
    line-height: 1.5;
    text-transform: none !important;
    font-optical-sizing: auto;
}

html {
    font-size: 16px;
}

footer h4, .footer-social a i {
    color: var(--colors-blue-1);
}

@media (min-width: 1800px) {
    .hero-pic {
        min-height: 33vw;
        background-position: center;
    }
}


#cph_Content_pnl_BookingWrapper .day-no-slots {
    color: var(--colors-brand-primary)
}

footer a.btn:hover {
    background-color: transparent;
    border-color: transparent;
    color: red;
}

.footer-social a:hover i {
    color: var(--palette-light-beige);
}


.footer-list li a, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    font-family: var(--typo-copy-font);
    font-weight: var(--typo-copy-regular-weight);
    font-size: var(--typo-copy-m-size);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    font-optical-sizing: auto;
    text-underline-offset: 16%;
    text-decoration: underline;
    color: var(--colors-blue-1);
}

.text-container a, #cph_Content_pnl_Locations a {
    color: var(--colors-text-caption);
}

    .navbar-nav .nav-link:hover, .text-container a:hover, #cph_Content_pnl_Locations a {
        cursor: pointer;
        color: var(--palette-light-beige);
        text-decoration: var(--palette-light-beige) underline 1px;
    }

.footer-list li a:hover {
    color: var(--palette-light-beige);
    text-decoration: var(--palette-light-beige) underline 1px;
}

footer, .navbar {
    background-color: #041428;
}

#cph_Content_pnl_BookingWrapper .car-tags .badge {
    --_border-width: 1px;
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-h6-size);
    letter-spacing: .72px;
    line-height: 1.3!important;
    text-transform: uppercase;
    font-optical-sizing: auto;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--border-radius-s);
    border-style: solid;
    border-width: var(--_border-width);
    color: var(--colors-interaction-interactive);
    background-color: transparent;
    border-color: var(--colors-interaction-interactive);
}


label {
    font-family: var(--typo-copy-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-form-label-size);
    letter-spacing: 2.08px;
    line-height: 1.3;
    text-transform: uppercase;
    font-optical-sizing: auto;
    color: var(--colors-text-caption);
}

span.text-danger[id*="rfv"] {
    font-family: var(--typo-copy-font);
    font-weight: var(--typo-copy-regular-weight);
    font-size: var(--typo-copy-xs-size);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    font-optical-sizing: auto;
    color: var(--colors-forms-error);
}

.btn:not([disabled]) {
    cursor: pointer;
}

.btn {
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-interactive-m-size);
    letter-spacing: 2.08px;
    line-height: 1.3;
    text-transform: uppercase;
    font-optical-sizing: auto;
    --_border-width: 2px;
    padding: 0;
    box-sizing: border-box;
    align-items: center;
    display: inline-flex;
    place-items: center;
    flex-direction: row;
    gap: var(--spacer-4);
    border-radius: var(--border-radius-s);
    outline: none;
    text-decoration: none;
    border-style: solid;
    border-width: var(--_border-width);
    padding: var(--spacer-4) calc(var(--spacer-9) - 3px) var(--spacer-4) calc(var(--spacer-9) - 3px) !important;
    min-height: 45px;
}

    .btn:hover {
        color: var(--colors-interaction-hover-fg);
        background-color: var(--colors-interaction-hover);
        border-color: var(--colors-interaction-hover);
    }

    .btn[disabled] {
        color: var(--colors-interaction-disabled-fg);
        background-color: var(--colors-interaction-disabled);
        border-color: var(--colors-interaction-disabled);
        opacity: unset;
        cursor: unset;
    }

.btn-common {
    color: var(--colors-interaction-interactive-fg);
    background-color: var(--colors-interaction-interactive);
    border-color: var(--colors-interaction-interactive);
}

.btn-secondary {
    color: var(--colors-interaction-interactive);
    background-color: transparent;
    border-color: var(--colors-interaction-interactive);
}

.btn-inverse {
    color: var(--colors-interaction-interactive);
    background-color: var(--colors-interaction-interactive-fg);
    border-color: var(--colors-interaction-interactive-fg);
}

    .btn-inverse:hover {
        color: var(--colors-interaction-interactive);
        background-color: var(--palette-light-beige);
        border-color: var(--palette-light-beige);
    }

/*#cph_Content_pnl_BookingWrapper .slot-wrapper {
    color: var(--colors-interaction-interactive);
    background-color: transparent;
    border-color: var(--colors-interaction-interactive);
}

#cph_Content_pnl_BookingWrapper .slot-wrapper.disabled {
    color: var(--colors-interaction-disabled-fg);
    background-color: var(--colors-interaction-disabled);
    border-color: var(--colors-interaction-disabled);
    opacity: unset;
    cursor: unset;
}*/

#cph_Content_pnl_BookingWrapper .slot-wrapper:hover {
    /*color: var(--colors-interaction-hover);*/
    background-color: var(--colors-interaction-hover);
    /*border-color: var(--colors-interaction-hover);*/
}

#cph_Content_pnl_BookingWrapper .slot-wrapper.selected {
    /*    color: var(--colors-interaction-selected-fg) !important;
    background-color: var(--colors-interaction-selected) !important;
    border-color: var(--colors-interaction-selected) !important;*/
    background-color: var(--colors-interaction-hover);
}

/*#cph_Content_pnl_BookingWrapper .slot-wrapper {
    margin-bottom: 0.1rem;
}*/

.checkbox {
    /*display: flex;*/
    align-items: center;
    gap: var(--spacer-6);
    width: fit-content;
}

.icheck-peterriver > input[type=radio]:first-child:checked + input[type=hidden] + label::before, .icheck-peterriver > input[type=radio]:first-child:checked + label::before, .icheck-peterriver > input[type=checkbox]:first-child:checked + input[type=hidden] + label::before, .icheck-peterriver > input[type=checkbox]:first-child:checked + label::before {
    color: var(--colors-interaction-selected-fg) !important;
    background-color: var(--colors-interaction-selected) !important;
    border-color: var(--colors-interaction-selected) !important;
    box-sizing: border-box;
    min-width: 24px;
    width: 24px;
    min-height: 24px;
    height: 24px;
    border: 1px solid var(--colors-interaction-interactive);
    border-radius: var(--border-radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -37px;
}

.checkbox > input[type=checkbox]:first-child:not(:checked) + input[type=hidden] + label::before, .checkbox > input[type=checkbox]:first-child:not(:checked) + label::before, .radio > input[type=radio]:first-child:not(:checked) + input[type=hidden] + label::before, .radio > input[type=radio]:first-child:not(:checked) + label::before {
    box-sizing: border-box;
    min-width: 24px;
    width: 24px;
    min-height: 24px;
    height: 24px;
    border: 1px solid var(--colors-interaction-interactive);
    border-radius: var(--border-radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -37px;
}

.icheck-peterriver > input[type=radio]:first-child:not(:checked):not(:disabled):hover + input[type=hidden] + label::before,
.icheck-peterriver > input[type=radio]:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-peterriver > input[type=checkbox]:first-child:not(:checked):not(:disabled):hover + input[type=hidden] + label::before,
.icheck-peterriver > input[type=checkbox]:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-peterriver > input[type=radio]:first-child:not(:checked):not(:disabled):focus + input[type=hidden] + label::before,
.icheck-peterriver > input[type=radio]:first-child:not(:checked):not(:disabled):focus + label::before,
.icheck-peterriver > input[type=checkbox]:first-child:not(:checked):not(:disabled):focus + input[type=hidden] + label::before,
.icheck-peterriver > input[type=checkbox]:first-child:not(:checked):not(:disabled):focus + label::before {
    /*border-color:;*/
    border: 2px solid var(--colors-interaction-hover);
    color: var(--colors-interaction-hover-fg);
}


.icheck-peterriver > input[type=checkbox]:checked + label:hover::before {
    background-color: var(--colors-interaction-hover);
}

#cph_Content_pnl_BookingWrapper .car-card, #cph_Content_pnl_BookingWrapper .location-card {
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
}

    #cph_Content_pnl_BookingWrapper .car-card:hover, #cph_Content_pnl_BookingWrapper .location-card:hover {
        border: 1px solid var(--colors-interaction-selected);
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        box-shadow: unset;
    }

    #cph_Content_pnl_BookingWrapper .car-card.active, #cph_Content_pnl_BookingWrapper .location-card.active {
        border: 1px solid var(--colors-interaction-hover);
        -webkit-box-shadow: unset;
        -moz-box-shadow: unset;
        box-shadow: unset;
    }

.bh-sl-container .bh-sl-loc-list .list-focus {
    border: 1px solid var(--colors-interaction-hover);
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

#cph_Content_pnl_BookingWrapper .selected-indicator {
    color: var(--colors-interaction-selected);
}

.checkbox label {
    padding-top: 3px;
    color: var(--colors-text-copy);
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-bold-weight)!important;
    font-size: var(--typo-interactive-m-size);
    letter-spacing: 2.08px;
    line-height: 22px!important;
    text-transform: uppercase;
    font-optical-sizing: auto;
}

.checkbox > label, .radio > label {
    padding-left: 50px;
}

h1 {
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight)!important;
    font-size: var(--typo-h1-size)!important;
    letter-spacing: normal;
    line-height: 1.3!important;
    text-transform: none!important;
    font-optical-sizing: auto;
}

h2 {
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-h2-size);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    font-optical-sizing: auto;
}

h3, .subline {
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight) !important;
    font-size: var(--typo-h3-size) !important;
    letter-spacing: normal;
    line-height: 1.3 !important;
    text-transform: none !important;
    font-optical-sizing: auto;
}

h4 {
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-h4-size);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    font-optical-sizing: auto;
}

h5 {
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-h5-size);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    font-optical-sizing: auto;
}

h6 {
    font-family: var(--typo-headline-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-h6-size);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    font-optical-sizing: auto;
}

h1:not(.mb-0) {
    color: var(--colors-text-headline);
}

.card-register .form-group {
    text-align: start;
    display: grid;
    gap: var(--spacer--2);
    box-sizing: border-box;
    padding-inline-end: var(--spacer-3);
}

.form-group .btn {
    margin-top: -0.25rem;
}

.form-group label {
    font-family: var(--typo-copy-font);
    font-weight: var(--typo-headline-regular-weight);
    font-size: var(--typo-form-label-size);
    letter-spacing: 2.08px;
    line-height: 1.3;
    text-transform: uppercase;
    font-optical-sizing: auto;
    color: var(--colors-text-caption);
    margin-bottom: var(--spacer-4);
    padding-bottom: unset;
}

.form-control {
    border: 1px solid var(--colors-forms-border);
    border-radius: var(--border-radius-s);
    font-family: var(--typo-copy-font);
    font-weight: var(--typo-copy-regular-weight);
    font-size: var(--typo-copy-m-size);
    letter-spacing: normal;
    line-height: 1.5;
    text-transform: none;
    font-optical-sizing: auto;
    appearance: none;
    background-color: transparent;
    height: 100%;
    color: var(--colors-interaction-interactive);
    padding-inline-start: var(--spacer-4);
}

    .form-control:focus {
        box-shadow: unset;
        outline: 1px solid var(--colors-interaction-focus);
        outline-offset: 4px;
        border: 1px solid var(--colors-interaction-focus);
    }

:root {
    --colors-background-default: #FFFFFF;
    --colors-blue-1: #F7F7F7;
    --colors-blue-2: #ECEDEE;
    --colors-blue-3: #D8DADD;
    --colors-blue-4: #949DAA;
    --colors-blue-5: #4A5B6E;
    --colors-blue-6: #1E2C3E;
    --colors-brand-primary: #041428;
    --colors-brand-secondary: #8B693E;
    --colors-brand-light: #FFFFFF;
    --colors-brand-dark: #041428;
    --colors-forms-error: #D22A32;
    --colors-forms-border: #041428;
    --colors-forms-fill: #FFFFFF;
    --colors-forms-error-fg: #FFFFFF;
    --colors-forms-value: #041428;
    --colors-forms-placeholder: #949DAA;
    --colors-interaction-focus: #041428;
    --colors-interaction-interactive: #041428;
    --colors-interaction-hover: #8B693E;
    --colors-interaction-primary: #041428;
    --colors-interaction-primary-hover: #8B693E;
    --colors-interaction-disabled-fg: #949DAA;
    --colors-interaction-disabled: #ECEDEE;
    --colors-interaction-selected: #041428;
    --colors-interaction-selected-hover: #8B693E;
    --colors-interaction-primary-fg: #FFFFFF;
    --colors-interaction-primary-hover-fg: #FFFFFF;
    --colors-interaction-selected-fg: #FFFFFF;
    --colors-interaction-selected-hover-fg: #FFFFFF;
    --colors-interaction-interactive-fg: #FFFFFF;
    --colors-interaction-hover-fg: #FFFFFF;
    --colors-interaction-link-hover: #FFFFFF;
    --colors-skeleton-stop-1: #D8DADD;
    --colors-skeleton-stop-2: #ECEDEE;
    --colors-skeleton-stop-3: #F7F7F7;
    --colors-text-headline: #041428;
    --colors-text-copy: #041428;
    --colors-text-caption: #1E2C3E;
    --palette-dark-blue: #041428;
    --palette-strong-beige: #8B693E;
    --palette-white: #FFFFFF;
    --palette-blue-1: #F7F7F7;
    --palette-blue-2: #ECEDEE;
    --palette-blue-3: #D8DADD;
    --palette-blue-4: #949DAA;
    --palette-blue-5: #4A5B6E;
    --palette-blue-6: #1E2C3E;
    --palette-red: #D22A32;
    --palette-green: #0D8849;
    --palette-white-60: #FFFFFF99;
    --palette-white-30: #FFFFFF4d;
    --palette-light-red: #FF232C;
    --palette-overlay: #041428bf;
    --palette-light-beige: #DCB694;
    --palette-light-green: #0DB15C;
}

:root {
    --base-font-size: 16;
    --typo-headline-font: MazdaType-Regular, sans-serif;
    --typo-copy-font: MazdaType-Regular, sans-serif;
    --typo-headline-bold-weight: 700;
    --typo-copy-regular-weight: 400;
    --spacer-1: 2px;
    --spacer-2: 4px;
    --spacer-3: 6px;
    --spacer-4: 8px;
    --spacer-6: 12px;
    --spacer-7: 16px;
    --spacer-8: 20px;
    --spacer-9: 24px;
    --spacer-11: 32px;
    --spacer-12: 40px;
    --spacer-13: 48px;
    --spacer-14: 56px;
    --spacer-15: 72px;
    --spacer-16: 88px;
    --spacer-10: 28px;
    --spacer-17: 104px;
    --spacer-5: 10px;
    --spacer-18: 120px;
    --palette-dark-blue: rgba(4, 20, 40, 1);
    --palette-strong-beige: rgba(139, 105, 62, 1);
    --palette-white: rgba(255, 255, 255, 1);
    --palette-blue-1: rgba(247, 247, 247, 1);
    --palette-blue-2: rgba(236, 237, 238, 1);
    --palette-blue-3: rgba(216, 218, 221, 1);
    --palette-blue-4: rgba(148, 157, 170, 1);
    --palette-blue-5: rgba(74, 91, 110, 1);
    --palette-blue-6: rgba(30, 44, 62, 1);
    --icon-size-s: 18px;
    --icon-size-m: 28px;
    --icon-size-l: 56px;
    --palette-red: rgba(210, 42, 50, 1);
    --palette-green: rgba(13, 136, 73, 1);
    --palette-white-60: rgba(255, 255, 255, .6);
    --palette-white-30: rgba(255, 255, 255, .3);
    --typo-copy-bold-weight: 700;
    --typo-headline-regular-weight: 500;
    --palette-light-red: rgba(255, 35, 44, 1);
    --palette-overlay: rgba(4, 20, 40, .75);
    --palette-light-beige: rgba(220, 182, 148, 1);
    --palette-light-green: rgba(13, 177, 92, 1);
}

@media (min-width: 320px) {
    :root {
        --typo-h1-size: 1.75rem;
        --typo-h2-size: 1.5625rem;
        --typo-h3-size: 1.25rem;
        --typo-h4-size: 1.125rem;
        --typo-h5-size: .8125rem;
        --typo-h6-size: .75rem;
        --typo-copy-l-size: 1.125rem;
        --typo-copy-m-size: 1rem;
        --typo-copy-xs-size: .75rem;
        --typo-interactive-l-size: 1.125rem;
        --typo-interactive-m-size: .8125rem;
        --typo-interactive-s-size: .75rem;
        --border-radius-s: 3px;
        --border-radius-m: 6px;
        --border-radius-l: 16px;
        --spacing-s: 8px;
        --spacing-m: 20px;
        --spacing-l: 40px;
        --spacing-xl: 88px;
        --viewport-min: 320px;
        --viewport-max: 768px;
        --viewport-name: Mobile;
        --spacing-xs: 4px;
        --grid-narrow-margin: 16px;
        --grid-narrow-gutter: 8px;
        --grid-narrow-content-min: 288px;
        --grid-narrow-content-max: 720px;
        --grid-standard-margin: 16px;
        --grid-standard-gutter: 8px;
        --grid-standard-content-min: 288px;
        --grid-standard-content-max: 736px;
        --grid-wide-gutter: 8px;
        --grid-wide-content-min: 320px;
        --grid-wide-content-max: 768px;
        --border-radius-xs: 1px;
        --border-radius-xxl: 9999px;
        --typo-copy-s-size: .875rem;
        --typo-form-label-size: .8125rem;
    }
}

@media (min-width: 769px) {
    :root {
        --typo-h1-size: 2.8125rem;
        --typo-h2-size: 2.125rem;
        --typo-h3-size: 1.625rem;
        --typo-h4-size: 1.25rem;
        --typo-h5-size: .9375rem;
        --typo-h6-size: .8125rem;
        --typo-copy-l-size: 1.125rem;
        --typo-copy-m-size: 1rem;
        --typo-copy-xs-size: .75rem;
        --typo-interactive-l-size: 1.125rem;
        --typo-interactive-m-size: .8125rem;
        --typo-interactive-s-size: .75rem;
        --border-radius-s: 3px;
        --border-radius-m: 6px;
        --border-radius-l: 16px;
        --spacing-s: 8px;
        --spacing-m: 20px;
        --spacing-l: 40px;
        --spacing-xl: 88px;
        --viewport-min: 769px;
        --viewport-max: 1200px;
        --viewport-name: Tablet;
        --spacing-xs: 4px;
        --grid-narrow-margin: 20px;
        --grid-narrow-gutter: 8px;
        --grid-narrow-content-min: 720px;
        --grid-narrow-content-max: 720px;
        --grid-standard-margin: 16px;
        --grid-standard-gutter: 8px;
        --grid-standard-content-min: 729px;
        --grid-standard-content-max: 1160px;
        --grid-wide-gutter: 8px;
        --grid-wide-content-min: 768px;
        --grid-wide-content-max: 1200px;
        --border-radius-xs: 1px;
        --border-radius-xxl: 9999px;
        --typo-copy-s-size: .875rem;
        --typo-form-label-size: .8125rem;
    }
}
