@import 'variables.css';
@import 'fonts.css';
@import '../../Theme_General/css/base.css';
@import 'device_modes.css';

* {
    font-size:  18px;
    line-height: 1.444rem;
}

*:focus {
    outline: 1px dotted var( --brand-black );
}

h1,
.forceCommunityRichText h1,
h2,
.forceCommunityRichText h2,
h3,
.forceCommunityRichText h3,
h4,
.forceCommunityRichText h4 {
    font-family: var( --font-family );
    margin: 0;
    font-weight: 500 !important;
}

.forceCommunityRichText h1,
.forceCommunityRichText h2,
.forceCommunityRichText h3,
.forceCommunityRichText h4 {
    margin-bottom: 1rem;
}

h1,
.forceCommunityRichText h1 {
    font-size: var( --h1-size ) !important;
    line-height: var( --h1-line-height );
}

h2,
.forceCommunityRichText h2 {
    font-size: var( --h2-size ) !important;
    line-height: var( --h2-line-height );
}

h3,
.forceCommunityRichText h3 {
    font-size: var( --h3-size ) !important;
    line-height: var( --h3-line-height );
}

h4,
.forceCommunityRichText h4 {
    font-size: var( --h4-size ) !important;
    line-height: var( --h4-line-height );
}

b,
strong,
.uiOutputRichText strong {
    font-weight: 600 !important;
}

/* 
 *  Button design
 */
.slds-button,
.registrationWrapperConsentFlow .pbBottomButtons .FlowNextBtn {
    padding: 0.25rem 1rem !important;
    border: 1px solid var( --primary-color ) !important;
    border-radius: var( --border-radius ) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: background-color 0.3s linear;
}

.slds-button span {
    font-size: 1.44rem;
    display: block;
    margin-top: -4px;
    margin-left: 15px;
    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_primary::after,
.slds-button.slds-button_dark::after,
.slds-button.slds-button_secondary::after,
.slds-button.slds-button_neutral::after,
.slds-button.flow-button__NEXT::after,
a.slds-button.slds-button_primary::after,
a.slds-button.slds-button_dark::after,
a.slds-button.slds-button_secondary::after,
a.slds-button.slds-button_neutral::after,
a.slds-button.flow-button__NEXT::after {
    content: '\203A';
    font-size: 1.44rem;
    display: block;
    margin-top: -5px;
    margin-left: 10px;
    font-weight: 500;
}

.slds-button.navigation-button-back,
.slds-button.flow-button__BACK {
    padding-left: 1.6rem !important;
}

.slds-button.navigation-button-back::after,
.slds-button.flow-button__BACK::after {
    content: '\2039';
    font-size: 1.44rem;
    display: block;
    position: absolute;
    left: 0;
    font-weight: 500;
}

.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 {
    border-radius: 50px;
    border: 1px solid var( --brand-black ) !important;
    padding: 0.25rem 0.25rem;
    margin: 0.25rem 0 !important;
    background: var( --brand-white ) !important;
}

.slds-button-group .slds-button {
    border-radius: 50px !important;
    color: var( --primary-color ) !important;
    border-color: transparent !important;
    background: transparent !important;
    line-height: 1.35rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0;
}

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

.slds-button-group .slds-button.active {
    border-radius: 50px !important;
    color: var( --brand-white ) !important;
    border-color: var( --primary-color ) !important;
    background: var( --primary-color ) !important;
}

.slds-button-group .slds-button.active:hover {
    background-color: var( --secondary-color ) !important;
}

/* 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 - in Cupra theme, there are 3 types of links: primary, secondary and light */
a,
a span,
.slds-scope a,
.slds-scope a.primary,
a.primary {
    color: var( --primary-color ) !important;
    font-size: 16px!important;
    font-weight: 600 !important;
}

a:hover,
a span:hover,
.slds-scope a:hover,
.slds-scope a span:hover,
.slds-scope a.primary span:hover,
a.primary:hover,
.slds-scope a.primary span:hover {
    color: var( --link-color ) !important;
    text-decoration: none !important;
}

a.secondary {
    color: var( --link-color ) !important;
}

a.secondary:hover {
    color: var( --primary-color ) !important;
}

a.light {
    color: var( --brand-white ) !important;
}

a.light:hover {
    color: var( --brand-light-grey ) !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;
}

.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( --primary-color-light ) !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: 0px !important;
    border-bottom: 1px solid var(--brand-black) !important;
    border-radius: 0px !important;
    transition: border-color 0.2s ease;
    width: 100%;
    background: transparent !important;
}

.checkout-container .slds-form-element .slds-form-element__label {
    color: var( --primary-color-light );
    font-size: 15px !important;
    font-weight: 400;
}

.checkout-container .slds-form-element .slds-input,
.checkout-container .slds-form-element .slds-combobox__input,
.checkout-container input {
    border: 0px !important;
    border-bottom: 1px solid var( --brand-black ) !important;
    border-radius: 0px !important;
    transition: border-color 0.2s ease;
    width: 100%;
    background: transparent !important;
    font-size: 16px !important;
}

.checkout-container .slds-form-element .slds-combobox__input span {
    font-size: 16px;
    line-height: var(--lwc-heightInput, 1.875rem);
}

.checkout-container .slds-form-element .slds-form-element__help {
    font-size: 15px !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;
}

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

.checkout-container .slds-required {
    font-size: 15px !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;
}

/**
 * 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-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: 0px !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: 0px !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: 0em !important;
}

div[c-osmyprivateleaseorders_osmyprivateleaseorders].page .checkout-buttons {
    margin-top: 0px !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: 0px !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: 0px !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))
    }

    .content {
        padding: 0 30px;
    }
}

/* 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;
}