@import 'variables.css';
@import 'fonts.css';
@import 'css-tooltip.min.css';
@import '../../Theme_General/css/base.css';

body {
    color: var( --lwc-colorTextDefault );
}

/* Tooltip */
.tooltip-top {
    display: flex;
    top: 6px;
}
[data-tooltip]:before {
    font-size: 14px;
    line-height: 22px;
    border-radius: 0;
    white-space: pre-wrap;
    max-width: 300px;
    width: max-content !important;
}
@media screen and (max-width: 767px) {
    [data-tooltip]:before {
        max-width: 270px;
        word-wrap: break-word;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    [data-tooltip]:before {
        max-width: 300px;
    }
}
@media screen and (min-width: 1024px) {
    [data-tooltip]:before {
        max-width: 400px;
    }
}

[data-tooltip].tooltip-multiline:before {
    transform: translate(-25%,-12px);
}

/* to hyphenate word in case of text overflow */
.hyphenate {
    word-wrap: break-word;
    overflow-wrap: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.align-items-center-flex {
    display: flex;
    align-items: center;
}

/* Typography definition for headings */
h1 {
    font-size: 48px;
    line-height: 56px;
}
h2 {
    font-size: 40px;
    line-height: 48px;
}
h3 {
    font-size: 32px;
    line-height: 40px;
}
h4 {
    font-size: 24px;
    line-height: 32px;
}
h5 {
    font-size: 20px;
    line-height: 28px;
}

.font-style-book * {
    font-family: 'CupraBook' !important;
}

.font-style-medium * {
    font-family: 'CupraMedium' !important;
    font-weight: bold;
}

/* Icon classes to be used along with buttons, links and other UI elements */
.icon-black {
    filter: invert(1);
}
.icon-right {
    background-image: url("../images/icons/Right.svg");
    height: 24px;
    width: 24px;
}
.icon-left {
    background-image: url("../images/icons/Left.svg");
    height: 24px;
    width: 24px;
}
.icon-up {
    background-image: url("../images/icons/Up.svg");
    height: 24px;
    width: 24px;
}
.icon-down {
    background-image: url("../images/icons/Down.svg");
    height: 24px;
    width: 24px;
}
.icon-download {
    background-image: url("../images/icons/Download.svg");
    height: 24px;
    width: 24px;
}
.icon-check {
    background-image: url("../images/icons/Check.svg");
    height: 24px;
    width: 24px;
}
.icon-check-brown {
    background-image: url("../images/icons/Check-brown.svg");
    height: 24px;
    width: 24px;
}
.icon-check-cupra {
    transform: rotate(45deg);
    height: 19px;
    width: 11px;
    border-bottom: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
}
.icon-loader {
    background-image: url("../images/icons/Loader.svg");
    height: 24px;
    width: 24px;
}
.icon-share {
    background-image: url("../images/icons/Share.svg");
    height: 24px;
    width: 24px;
}
.icon-close {
    background-image: url("../images/icons/Close.svg");
    height: 24px;
    width: 24px;
}
.icon-plus {
    background-image: url("../images/icons/Plus.svg");
    height: 24px;
    width: 24px;
}
.icon-minus {
    background-image: url("../images/icons/Minus.svg");
    height: 24px;
    width: 24px;
}
.icon-info {
    background-image: url("../images/icons/Info.svg");
    height: 24px;
    width: 24px;
}
/*
 *  Button design
 */
.slds-button,
.registrationWrapperConsentFlow .pbBottomButtons .FlowNextBtn {
    line-height: 24px;
    font-size: 18px !important;
    padding: 0.25rem 1rem !important;
    border: 1px solid var( --primary-color ) !important;
    border-radius: var( --border-radius ) !important;
    font-weight: 600 !important;
    transition: background-color 0.3s linear;
    margin-top: 5px;
    margin-bottom: 5px;
}

.slds-button span {
    line-height: 24px;
    font-size: 16px !important;
    display: block;
    margin: 0.5rem !important;
    font-weight: 500;
}

.slds-button div {
    display: flex;
    align-items: center;
    font-size: 0.9rem !important;
}

.slds-button div img {
    margin-left: auto;
    padding-left: calc( var( --grid-gutter ) / 2 );
    height: 20px;
}

.slds-button.slds-button_secondary,
.slds-button.slds-button_neutral {
    background-color: var( --brand-white ) !important;
    border: 1px solid var( --brand-black ) !important;
    color: var( --font-color ) !important;
}

.slds-button.slds-button_dark span,
.slds-button.slds-button_dark div {
    color: var( --brand-white ) !important;
}

/* Focus/Hover Button Styling */
button.slds-button:focus,
button.slds-button:hover,
button.slds-button:active {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.slds-button.slds-button_secondary:focus,
.slds-button.slds-button_secondary:hover,
.slds-button.slds-button_neutral:focus,
.slds-button.slds-button_neutral:hover {
    background-color: transparent !important;
}

.slds-button.slds-button_secondary:focus span,
.slds-button.slds-button_secondary:hover span {
    color: var( --secondary-color ) !important;
    border-color: var( --secondary-color ) !important;
}

/* SLDS Button Group Styling */
/* NOTE: USED ONLY IN UKI_Case_Creation_Flow */
.slds-button-group {
    margin: 0.25rem 0 !important;
}

.slds-button-group .slds-button {
    color: var( --brand-white ) !important;
    border: 1px solid #ffffff87 !important;
    background: transparent !important;
    font-size: 16px !important;
    line-height: 24px;
    padding: 0.25rem 0.75rem !important;
    margin: 0 !important;
}
.slds-button-group .slds-button:first-child {
    border-radius: 50px 0 0 50px !important;
}
.slds-button-group .slds-button:last-child {
    border-radius: 0 50px 50px 0 !important;
}

.slds-button-group .slds-button:hover {
    border-color: var( --brand-white ) !important;
}

.slds-button-group .slds-button.active {
    background: var( --brand-white ) !important;
    border: 1px solid var( --brand-white ) !important;
    color: var( --brand-black ) !important;
    mix-blend-mode: screen;
}

/* SLDS Button Icon Styling (used in slider) */
.slds-scope .slds-form-element__icon .slds-button_icon:active,
.slds-scope .slds-form-element__icon .slds-button_icon:hover {
    color: var( --brand-black ) !important;
}

/* Link design */
a,
a span,
.slds-scope a {
    font-style: normal;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-decoration-line: underline;
    color: var( --primary-color ) !important;
}

a:hover,
a span:hover,
.slds-scope a:hover,
.slds-scope a span:hover {
    text-decoration: none !important;
}

/* popover design */
.slds-popover__body,
.slds-popover__footer,
.slds-popover__header {
    position: relative;
    padding: .5rem .75rem;
    word-wrap: break-word;
}

.slds-popover {
    position: relative;
    border-radius: .25rem;
    width: 20rem;
    min-height: 2rem;
    z-index: 6000;
    background-color: var( --brand-white );
    display: inline-block;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16);
    border: 1px solid var( --brand-black );
}

.slds-popover--tooltip,
.slds-popover_tooltip {
    width: auto;
    max-width: 20rem;
    background: var( --brand-white );
    border: 0;
}

.slds-popover--tooltip .slds-popover__body,
.slds-popover_tooltip .slds-popover__body {
    font-size: .75rem;
    color: var( --brand-black );
}

.slds-fall-into-ground {
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity .1s linear, visibility .1s linear, transform .1s linear;
    will-change: transform;
}

.slds-nubbin--bottom-left:before,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left:before {
    width: 1rem;
    height: 1rem;
    position: absolute;
    transform: rotate(45deg);
    content: '';
    background-color: inherit;
    bottom: -.5rem;
    margin-left: -.5rem;
}

.slds-nubbin--bottom-left:after,
.slds-nubbin--bottom-left:before,
.slds-nubbin_bottom-left-corner:after,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left:after,
.slds-nubbin_bottom-left:before {
    left: 1.5rem;
    top: 100%;
    margin-top: -.5rem;
}

.slds-nubbin--bottom-left:after,
.slds-nubbin_bottom-left-corner:after,
.slds-nubbin_bottom-left:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .16);
    z-index: -1;
}

.slds-popover :last-child {
    margin-bottom: 0;
}

.slds-listbox__option,
.slds-listbox__option_plain {
    color: var(--brand-black);
    font-size: 16px !important;
    padding: 0.5rem !important;
}

.slds-input__icon.slds-input__icon_right.slds-icon_container {
    top: 25% !important;
}

/* popover design */
.slds-popover__body,
.slds-popover__footer,
.slds-popover__header {
    position: relative;
    padding: .5rem .75rem;
    word-wrap: break-word;
}

.slds-popover {
    position: relative;
    border-radius: .25rem;
    width: 20rem;
    min-height: 2rem;
    z-index: 6000;
    background-color: var( --brand-white );
    display: inline-block;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16);
    border: 1px solid var( --brand-black );
}

.slds-popover--tooltip,
.slds-popover_tooltip {
    width: auto;
    max-width: 20rem;
    background: var( --brand-white );
    border: 0;
}

.slds-popover--tooltip .slds-popover__body,
.slds-popover_tooltip .slds-popover__body {
    font-size: .75rem;
    color: var( --brand-black );
}

.slds-fall-into-ground {
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity .1s linear, visibility .1s linear, transform .1s linear;
    will-change: transform;
}

.slds-nubbin--bottom-left:before,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left:before {
    width: 1rem;
    height: 1rem;
    position: absolute;
    transform: rotate(45deg);
    content: '';
    background-color: inherit;
    bottom: -.5rem;
    margin-left: -.5rem;
}

.slds-nubbin--bottom-left:after,
.slds-nubbin--bottom-left:before,
.slds-nubbin_bottom-left-corner:after,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left:after,
.slds-nubbin_bottom-left:before {
    left: 1.5rem;
    top: 100%;
    margin-top: -.5rem;
}

.slds-nubbin--bottom-left:after,
.slds-nubbin_bottom-left-corner:after,
.slds-nubbin_bottom-left:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .16);
    z-index: -1;
}

.slds-popover :last-child {
    margin-bottom: 0;
}

.slds-listbox__option,
.slds-listbox__option_plain {
    color: var(--brand-black);
    font-size: 16px !important;
    padding: 0.5rem !important;
}

.slds-input__icon.slds-input__icon_right.slds-icon_container {
    top: 25% !important;
}
.content-block,
.slds-card{
    padding:            30px 40px;
}

.bold {
    font-weight: 600;
}

a,
a:visited,
.cc_main_body .prodDetailContainer a,
.forceCommunityRichText a {
    color:              var( --primary-color );
    text-decoration:    none;
    cursor: pointer;
}

a:focus,
a:hover,
.cc_main_body .prodDetailContainer a:focus,
.cc_main_body .prodDetailContainer a:hover {
    color: var( --secondary-color );
    text-decoration: none;
}

/* input elements */
.form-control:focus {
    border-color: var( --brand-black );
}

.form-control-radio-button-wrapper:hover,
.form-control-radio-button-wrapper:focus{
    border-color: var(  --primary-color-light );
}

.slds-form-element label.slds-form-element__label,
.slds-form-element .slds-form-element__label span {
    color: var( --neutral-color-400 ) !important;
    transform-origin: left top;
    transition: transform 0.2s ease;
    position: relative;
    font-size: 15px;
    font-weight: 400;
}

.slds-form-element input.slds-input {
    border: 0 !important;
    border-bottom: 1px solid var( --neutral-color-400 ) !important;
    border-radius: 0 !important;
    transition: border-color 0.2s ease;
    width: 100%;
    background: transparent !important;
}
.flowruntime-input-label.flowruntime-inline .slds-form-element__label,
.flowruntime-input-label.flowruntime-inline .slds-form-element__label span{
    color: var( --lwc-colorTextDefault ) !important;
}


.slds-form-element .slds-input:focus,
.slds-form-element .slds-input:active,
.checkout-container .slds-form-element .slds-combobox__input:focus {
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

.slds-required {
    color: var( --brand-red ) !important;
}

.slds-form-element label.slds-form-element__label,
.slds-form-element .slds-form-element__label span {
    font-size: 18px;
    font-weight: 400;
    display: inline-flex;
    flex-wrap: wrap;
    color: var( --input-label-color ) !important;
}

/* Radio Button designs */
div.checkout-form .slds-form-element__control .slds-radio {
    display: inline-block !important;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

.slds-radio {
    cursor: pointer;
    position: relative;
    font-size: 16px;
    color: var(--font-color);
}

.slds-radio input[type=radio] {
    display: none !important;
}

.slds-radio [type=radio]:checked+.slds-radio__label .slds-radio__label:after {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    left: 3px;
    top: 2px;
    border-radius: 100%;
    background-color: var( --primary-color );
    border: 1px solid var( --primary-color ) !important;
}

.slds-radio_faux {
    -webkit-appearance: none;
    content: '' !important;
    width: 19px !important;
    height: 19px !important;
    border: 1px solid var( --light-grey ) !important;
    border-radius: 100% !important;
    left: 0 !important;
    top: -3px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: var( --primary-color ) !important;
    font-size: 150% !important;
    line-height: 1 !important;
    background: transparent !important;
}

.slds-scope .slds-radio [type=radio]:checked+.slds-radio_faux:after,
.slds-scope .slds-radio [type=radio]:checked+.slds-radio--faux:after,
.slds-scope .slds-radio [type=radio]:checked~.slds-radio_faux:after,
.slds-scope .slds-radio [type=radio]:checked~.slds-radio--faux:after,
.slds-scope .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after,
.slds-scope .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio--faux:after {
    -webkit-appearance: none;
    width: 13px !important;
    height: 13px !important;
    left: 2px !important;
    top: 2px !important;
    transform: none !important;
    border-radius: 100% !important;
    background-color: var( --primary-color ) !important;
}

.rb-label[c-osRadioButtonGroup_osRadioButtonGroup]:before {
    border: 1px solid var( --light-grey ) !important;
    width: 19px !important;
    height: 19px !important;
    top: 2px !important;
}

input:checked[c-osRadioButtonGroup_osRadioButtonGroup]+.custom-radio-container[c-osRadioButtonGroup_osRadioButtonGroup]>.rb-label[c-osRadioButtonGroup_osRadioButtonGroup]:after {
    width: 13px !important;
    height: 13px !important;
    left: 3px !important;
    top: 5px !important;
}

/* Checkbox designs */
input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 0 !important;
    height: 0 !important;
    margin-right: 0.75rem;
}
input[type=checkbox]:active,
input[type=checkbox]:focus {
    outline: none !important;
}

.slds-checkbox_faux {
    border: none !important;
    content: '';
    color: var( --primary-color ) !important;
    background-color: var( --brand-white ) !important;
    box-shadow: none !important;
    outline: none !important;
}
input[type=checkbox]:before,
.slds-checkbox [type=checkbox]+.slds-checkbox__label .slds-checkbox_faux:before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    top: -2px;
    left: 0;
    border: 2px solid var( --neutral-color-300 );
    border-radius: 0;
    background-color: var( --brand-white );
}
input[type=checkbox]:checked:before,
.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux:before {
    background-color: var( --primary-color );
    border-color: var( --primary-color );
}
input[type=checkbox]:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid var( --brand-white ) !important;
    border-width: 0 0 0 0;
    -webkit-transform: rotate(180deg) !important;
    -ms-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
    position: absolute !important;
    top: -1px !important;
    left: 50px !important;
}
input[type=checkbox]:checked:after,
.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux:after {
    background-color: var( --primary-color ) !important;
    color: var( --primary-color ) !important;
    content: "";
    display: block;
    width: 6px !important;
    height: 12px !important;
    border: solid var( --brand-white ) !important;
    border-width: 0 2px 2px 0 !important;
    -webkit-transform: rotate(45deg) !important;
    -ms-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    position: absolute;
    top: -1px !important;
    left: 6px !important;
}

/**
 * FOOTER
 */
.community-channels[c-mijnFooter_mijnFooter] {
    padding-bottom: 0 !important;
    font-size: 0.8889rem !important;
    width: var( --content-width ) !important;
    max-width: 100%;
    margin: 0 auto;
}

.community-channels[c-mijnFooter_mijnFooter] .title[c-mijnFooter_mijnFooter] {
    font-size: var( --h3-size );
    font-weight: 500;
}

.community-channels[c-mijnFooter_mijnFooter] .name[c-mijnFooter_mijnFooter] {
    font-size: 0.8889rem;
}

.channels[c-mijnFooter_mijnFooter] {
    justify-content: space-around !important;
}


.channels[c-mijnFooter_mijnFooter] p[c-mijnFooter_mijnFooter],
.channels[c-mijnFooter_mijnFooter] p[c-mijnFooter_mijnFooter] span {
    margin-bottom: 0 !important;
    font-size: 0.8889rem !important;
    font-weight: 500;
}

.channels[c-mijnFooter_mijnFooter] li[c-mijnFooter_mijnFooter]+li[c-mijnFooter_mijnFooter] {
    border: none !important;
}

.slds-tabs_default__nav, .slds-tabs--default__nav {
    max-width: 100%;
}

.slds-tabs_default__item, .slds-tabs--default__item {
    padding: 0 3rem 0 2rem !important;
}

@media screen and (min-width: 1680px) {
    .content {
        padding: 0;
    }
}

footer .siteCoreFooterWrapper a {
    font-weight: 400 !important;
}

footer a[c-mijnfooter_mijnfooter]:hover {
    background: transparent !important;
}

.comm-navigation .comm-navigation__list a span {
    font-weight: 400 !important;
    font-size: 1rem !important;
}

.comm-navigation .comm-navigation__list a span:hover {
    color: var( --font-color ) !important;
}

.profileMenu .slds-dropdown-trigger.slds-dropdown-trigger_click .slds-button {
    color: var( --primary-color ) !important;
    font-size: 16px!important;
    font-weight: 400 !important;
    background: transparent !important;
    padding: 0.3125rem 0.625rem !important;
    border: 1px solid var( --primary-color ) !important;
    border-radius: 0.25em !important;
    margin-right: 0;
    height: 36px;
}

.profileMenu .slds-dropdown-trigger.slds-dropdown-trigger_click .slds-button:hover {
    text-decoration: none !important;
    background: transparent !important;
}

.profileMenu .slds-dropdown__list a,
.profileMenu .slds-dropdown__list a span {
    text-decoration: none !important;
}

.profileMenu .slds-dropdown-trigger .slds-button__icon {
    display: none;
}

.profileMenu .slds-dropdown__list a[c-mijnProfileMenu_mijnProfileMenu],
.profileMenu .slds-dropdown__list a[c-mijnProfileMenu_mijnProfileMenu] span[c-mijnProfileMenu_mijnProfileMenu] {
    font-weight: 400 !important;
}

.os-spinner_brand {
    background-color: var( --primary-color ) !important;
    position: absolute !important;
    top: 50vh !important;
}

.nba-hero .slds-button.slds-button_secondary:hover,
.nba-hero .slds-button.slds-button_secondary:hover span,
.sidebar-block-content .slds-button.slds-button_secondary:hover,
.sidebar-block-content .slds-button.slds-button_secondary:hover span {
    color: var( --brand-white ) !important;
    border-color: var( --brand-white ) !important;
}

/* Datepicker changes */
.os-datepicker-days[c-osDatepicker_osDatepicker] button[c-osDatepicker_osDatepicker] {
    border-radius: 0 !important;
}

.os-datepicker-days[c-osDatepicker_osDatepicker] button.os-datepicker-selected[c-osDatepicker_osDatepicker] {
    background-color: var( --brand-black ) !important;
    border: 1px solid var( --brand-black ) !important;
    color: var( --brand-white ) !important;
}

.os-datepicker-pagination[c-osDatepicker_osDatepicker] button[c-osDatepicker_osDatepicker] {
    border-radius: 0 !important;
    background-color: var( --brand-black ) !important;
    color: var( --brand-white ) !important;
    width: auto !important;
    height: max-content !important;
    font-size: 0.8889rem !important;
    line-height: 1.833rem !important;
    font-weight: 600 !important;
}

/* cookie screen changes */
.consent-wall-buttons .consent-wall-button-primary {
    background-color: var( --brand-black ) !important;
    border: 1px solid var( --brand-black ) !important;
    color: var( --brand-white ) !important;
}

.consent-wall-buttons .consent-wall-button-primary:hover {
    background-color: var( --secondary-color ) !important;
}

.progress[c-osMyPrivateLeaseOrders_osMyPrivateLeaseOrders]>li[c-osMyPrivateLeaseOrders_osMyPrivateLeaseOrders]:after,
.progress[c-osMyPrivateLeaseOrders_osMyPrivateLeaseOrders]>li[c-osMyPrivateLeaseOrders_osMyPrivateLeaseOrders]:before {
    top: 0 !important;
}

div[c-osmyprivateleaseorders_osmyprivateleaseorders].page .checkout-buttons {
    margin-top: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
}

div[c-osmyprivateleaseorders_osmyprivateleaseorders].page .checkout-buttons small {
    font-size: 0.778rem !important;
    color: var( --primary-color-light ) !important;
}

[c-osMyPrivateLeaseOrders_osMyPrivateLeaseOrders-host] {
    margin-bottom: 0 !important;
}

.white-bg {
    background: var( --brand-white ) !important;
}

.bold-text {
    font-weight: 600;
}

.vertical-align-center {
    display: flex;
    align-items: center !important;
}

/* Accordion design */
/* Note: Styling is applied for sch summary page accordion element styling selector needs to be location specific*/
button.section-control.slds-button.slds-button_reset.slds-accordion__summary-action {
    background-color:   #FFFFFF !important;
    border-color:       #FFFFFF !important;
    color:              #030303 !important;
}

button.section-control.slds-button.slds-button_reset.slds-accordion__summary-action span {
    font-size: var( --h3-size ) !important;
}

.slds-scope .slds-spinner_container {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

.nba-block-item .nba-content {
    background: transparent !important;
    margin-right: 0 !important;
}

.nba-container .nba-block-item .Reverse .nba-content-action .slds-button_primary,
.nba-container > .nba-block.nba-hero.Reverse > .nba-content a.slds-button.slds-button_primary {
    border-color: var( --brand-white ) !important;
}

/**
 * MEDIA QUERIES
 */
@media screen and (min-width: 760px) {
    .form-radio-extended-group {
        grid-template-columns: repeat(auto-fit, minmax(20em, 1fr))
    }
}

/* Scheduler Design */
.month-nav-button .slds-icon {
    width: 20px;
    fill: var( --secondary-color );
}

.month-nav-button[disabled] .slds-icon {
    fill: var( --neutral-color-400 );
}

.postcode-input-field .postcode-input .slds-input {
    padding-left: 45px !important;
    padding-bottom: 10px !important;
    border-color: var(--neutral-color-300) !important;
}

.postcode-input-field .postcode-input .slds-input:hover,
.postcode-input-field .postcode-input .slds-input:focus {
    border-color: var(--neutral-color-400) !important;
}

.postcode-input-field .postcode-input-search-icon .slds-icon {
    fill: var( --secondary-color );
}

.postcode-input-field .postcode-input-cancel-icon .slds-icon {
    fill: var( --neutral-color-400 );
}

.postcode-input-field .postcode-input-cancel-icon .slds-icon:hover {
    fill: var( --neutral-color-500 );
}

.show-more-button .slds-icon_container {
    margin-left: 12px;
}

.show-more-button .slds-icon {
    fill: var( --primary-color );
}

.testdrive-step-header {
    display: flex;
    flex-flow: row nowrap;
}

.testdrive-step-icon {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var( --primary-color );
    border-radius: 50%;
    color: var( --primary-color );
    margin-right: 16px;
}

.testdrive-step-header-content {
    display: flex;
    flex-flow: row nowrap;
    width: calc(100% - 36px);
    justify-content: space-between;
    align-items: flex-start;
}

.testdrive-step-title {
    font-size: 24px;
    line-height: 38px;
    margin-bottom: 12px;
}

.testdrive-step-header-content .testdrive-step-change-button,
.shopping-cart-content .testdrive-step-change-button,
.slds-form-element__label .scheduler-link {
    border: none;
    background: none;
    text-decoration-line: underline;
    line-height: 38px;
    color: var( --primary-color );
}

.testdrive-step-header.completed .testdrive-step-icon {
    background-color: var( --primary-color );
    color: var( --brand-white );
}

.testdrive-step-header.completed .testdrive-step-icon svg,
.work-type-step-header.completed .work-type-step-icon svg {
    fill: var( --brand-white );
}

.testdrive-step-header.disabled .testdrive-step-icon {
    background-color: var( --neutral-color-200 );
    border-color: var( --neutral-color-200 );
    color: var( --neutral-color-400 );
}

.testdrive-step-header.disabled .testdrive-step-title {
    color: var( --neutral-color-400 );
}

.testdrive-step-margin {
    margin-left: 48px;
}

.summary-step-icon {
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var( --primary-color );
    border-radius: 50%;
    margin: 0 auto 2rem;
    background: var( --primary-color );
}
.summary-step-icon svg {
    fill: var( --brand-white ) !important;
}

@keyframes placeholderShimmerAnimation{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.placeholder-shimmer-gradient {
    background: linear-gradient(to right, #FAFAFA 0%, #F5F5F5 15%, #FAFAFA 30%);
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderShimmerAnimation;
    animation-timing-function: linear;
    background-size: 1000px 640px;
}

.testdrive-error-container {
    width: 100%;
    text-align: center;
    padding: 32px;
    color: var(--brand-red);
    border: 3px solid var(--brand-red);
    margin: 6px 0;
}

.testdrive-no-data-container {
    width: 100%;
    text-align: center;
    padding: 32px;
    background-color: var(--neutral-color-300);
    color: var(--secondary-color);
    margin: 6px 0;
}

@media screen and (max-width: 760px) {
    .testdrive-step-margin {
        margin-left: 0;
    }
}

/* Delivery Planner Styles */
.date-time-picker-container.testdrive-step-margin.dark {
    border: 1px solid #DDD;
    background: #1B1B1B;
    margin: 0 1rem auto !important;
    color: #FFF;
}

.date-time-picker-container.testdrive-step-margin.dark .datetime-picker-monthday button {
    color: var( --brand-white );
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
}

.date-time-picker-container.testdrive-step-margin.dark .datetime-picker-weekday {
    color: var( --neutral-color-400, #A4A4A4 );
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.date-time-picker-container.testdrive-step-margin.dark .date-time-picker {
    background: var( --secondary-color, #1B1B1B );
    border: 0;
}
.date-time-picker-container.testdrive-step-margin.dark .calendar-container {
    margin-bottom: 1rem;
}

.date-time-picker-container.testdrive-step-margin.dark .time-selection-container .time-slot {
    color: var( --brand-white );
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.date-time-picker-container.testdrive-step-margin.dark .datetime-picker-monthday current-date selected button {
    background: #95572B;
    color: var( --brand-white );
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
}

.date-time-picker-container.testdrive-step-margin.dark .month-nav-button .slds-icon {
    fill: var( --brand-white );
}
.date-time-picker-container.testdrive-step-margin.dark .month-nav-button[disabled] .slds-icon {
    fill: var( --neutral-color-400, #A4A4A4 );
    cursor: not-allowed;
}
.date-time-picker-container.testdrive-step-margin.dark .datetime-picker-monthday button[disabled] {
    color: var( --neutral-color-400, #A4A4A4 );
}
.date-time-picker-container.testdrive-step-margin.dark .datetime-picker-monthday.current-date button {
    background: var( --primary-color );
    color: var( --brand-white );
    border-radius: 50%;
    font-weight: bold;
}
.date-time-picker-container.testdrive-step-margin.dark .time-selection-container .time-slot:hover {
    border: 1px solid var( --primary-color );
}
.date-time-picker-container.testdrive-step-margin.dark .time-selection-container .time-slot.selected {
    border: 2px solid var( --primary-color );
}

.left-section {
    background: hsla(0, 0%, 11%, 1);
    background: linear-gradient(0deg, hsla(0, 0%, 11%, 1) 0%, hsla(0, 0%, 13%, 1) 100%);
    background: -moz-linear-gradient(0deg, hsla(0, 0%, 11%, 1) 0%, hsla(0, 0%, 13%, 1) 100%);
    background: -webkit-linear-gradient(0deg, hsla(0, 0%, 11%, 1) 0%, hsla(0, 0%, 13%, 1) 100%);
}

.right-section {
    position: relative;
    background: var( --brand-white );
}
.right-section-content {
    height: calc( 100vh - 60px);
    display: flex;
    flex-direction: column;
}
.right-section .steps-container {
    position: sticky;
    top: 0;
    background: var(--brand-white );
    z-index: 10;
    padding: 0 2rem;
}

.list-page-container {
    flex-wrap: wrap;
}

.lease-details-container {
    display: flex;
    align-items: stretch;
    bottom: 0;
    z-index: 1;
    background: var( --brand-white );
    padding: 1rem 2rem;
    box-shadow: 0 0 8px 2px rgb(0 0 0 / 16%);
}

.brandLogo {
    background: var( --secondary-color ) !important;
}

.toggle-image-type {
    right: auto !important;
    bottom: 0 !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lease-details-nba-container {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-wrap: wrap;
}

label.cc-input-label {
    font-weight: 600;
    line-height: 1.5rem !important;
    font-size: 16px !important;
    color: var( --brand-black ) !important;
}

/* Step indicator */
.step span {
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 24px;
}

.step.active span.current {
    font-weight: 800 !important;
}

/* smaller than tablet media styles */
@media screen and (max-width: 768px) {
    .nav-container input[type="checkbox"]:checked ~ .menu-items-container {
        width: 100vw !important;
    }

    .brandContainer .profileMenu[c-osCCHeader_osCCHeader] {
        background: var( --secondary-color );
    }

    .profileMenu[c-osCCHeader_osCCHeader] {
        padding-right: 15px !important;
    }

    .slide-control-dots {
        display: none;
    }
    .slide-prev, .slide-next {
        padding: 0.15rem 0.5rem !important;
    }
}

@media screen and (max-width: 479px) {
    .toggle-button-container.slds-button-group .slds-button {
        padding: 5px 10px !important;
        font-size: 15px !important;
    }
}

/* Message box styles */
.message-box {
    font-style: normal;
    font-weight: 350;
    font-size: 24px;
    line-height: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px;
    gap: 26px;
    background: #E8E8E8;
}

.message-box-heading {
    font-style: normal;
    font-weight: 350;
    font-size: 20px;
    line-height: 28px;
    color: var( --brand-black );
}

.message-box-content, .message-box-content * {
    font-style: normal;
    font-weight: 350;
    font-size: 16px !important;
    line-height: 28px;
    color: var( --brand-black );
}

.message-box-content .bold-text {
    font-size: 16px !important;
    line-height: 28px !important;
    display: inline;
}

.message-box-heading--bold {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
    color: var( --brand-black );
}

.message-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
}

.message-box ul li {
    display: flex;
    gap: 10px;
}

.message-box .slds-button {
    background: transparent !important;
    border-width: 1.5px !important;
}

.message-box-error {
    background: var( --brand-white ) !important;
    border: 1px solid #ff000065 !important;
}

/* Next Step Stylings */
.step-wrapper {
    display: flex;
}

.step-progress {
    position: relative;
    padding-left: 45px;
    list-style: none;
    margin: 0;
}

.step-progress::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    height: 90%;
    border-left: 1px solid var( --secondary-color );
}

.step-progress-item {
    position: relative;
    counter-increment: list;
    padding-left: 0.5rem;
}

.step-progress-item div {
    line-height: 1.75rem;
}

.step-progress-item:not(:last-child) {
    padding-bottom: 28px;
}

.step-progress-item:not(:last-child)::before {
    display: inline-block;
    content: '';
    position: absolute;
    left: -21px;
    height: 100%;
    width: 10px;
}

.step-progress-item:last-child::before {
    display: inline-block;
    content: '';
    position: absolute;
    left: -21px;
    height: 100%;
    width: 10px;
    border-left: 1px solid var( --brand-white );
}

.step-progress-item::after {
    content: counter(list);
    display: inline-block;
    position: absolute;
    top: 0;
    left: -37px;
    width: 32px;
    height: 32px;
    color: var( --brand-black );
    border: 1px solid var( --secondary-color );
    border-radius: 50%;
    background-color: var( --brand-white );
    text-align: center;
    line-height: 28px;
    font-size: 18px;
}

.step-progress-item.is-done::before {
    border-left: 1px solid var( --secondary-color );
}

.step-progress-item.is-done::after {
    content: "✔";
    color: var( --brand-white );
    text-align: center;
    border: 1px solid var( --secondary-color );
    background: var( --secondary-color );
}

.step-progress-item.current::before {
    border-left: 1px solid var( --secondary-color );
}

.step-progress-item.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: var( --brand-white );
    border: 1px solid var( --secondary-color );
    background-color: var( --secondary-color );
}

.profile-menu-icon {
    width: 40px;
    height: 40px;
    float: right;
    background: url( "../images/icons/PersonalAccount.svg" ) no-repeat;
    background-size: cover;
    border: 0;
}

.slide-control-dots {
    position: absolute;
    bottom: 2rem;
    z-index: 11;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Animation CSS */
.animate-right {
    animation: scale-in-hor-right 1s ease-out both 1s
}
.animate-left {
    animation: scale-in-hor-left 1s ease-out both 1s
}

@keyframes scale-in-hor-right {
    0% {
        width: 30%;
    }
    100% {
        width: 50%;
    }
}
@keyframes scale-in-hor-left {
    0% {
        width: 70%;
    }
    100% {
        width: 50%;
    }
}

.error-page-container {
    background: url( "../images/nba_Header_Conditional.png" ) center no-repeat;
    background-size: cover;
}

@media screen and (min-width: 540px) and (max-width: 1180px){
    .date-time-picker-container.testdrive-step-margin.dark {
        margin: 0 auto !important;
    }
    .date-time-picker-container.testdrive-step-margin.dark .date-time-picker {
        padding: 5px !important;
    }
    .planner-flow-container {
        padding: 1rem;
    }
}

/* Cookiebot styles */
#CybotCookiebotDialog input[type=checkbox]:before,
#CybotCookiebotDialog input[type=checkbox]:after {
    content: none !important;
}
#CybotCookiebotDialog input[type=checkbox] {
    height: 32px !important;
    margin-right: .5em !important;
    width: 57px !important;
}
#CybotCookiebotDialog a,
#CybotCookiebotDialog a span,
a#CybotCookiebotDialogDetailBulkConsentLink,
a#CybotCookiebotDialogDetailBulkConsentLink span {
    text-decoration: none !important;
    color: #95572B !important;
}
a.CybotCookiebotDialogNavItemLink {
    font-weight: bold !important;
}
a.CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    font-weight: bolder !important;
}
#CybotCookiebotDialog *, #CybotCookiebotDialogBodyUnderlay * {
    font-size: 15px !important;
}
#CybotCookiebotDialog h1,
#CybotCookiebotDialog h2,
#CybotCookiebotDialog h3 {
    font-weight: 600 !important;
}