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

html,
body{
    background-color:   var( --background-color ) !important;
}

body{
    font-size:          inherit;
    color:              var( --text-color );
}

h1, h2, h3, h4, h5, h6{
    color:              var( --text-color );
}

/**
 * Original CSS
 */
h1,
h2,
h3,
h4,
h5 {
    margin:     0 0 0.5em;
}

h1,
h2,
h3 {
    line-height: 1.1;
    font-weight: 400;
}

h1 {
    margin: 0 0 0.5em;
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    margin: 0 0 0.5em;
    font-size: 1rem;
}

h4 {
    font-size: 1rem;
    margin-bottom: 0;
}

h5 {
    font-size: 1rem;
    margin: 0;
}

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

.center {
    padding: 0 1em;
}

.content-block,
.slds-card{
    background:         var( --card-background-color );
    border:             1px solid var( --card-border-color );
    color:              var( --text-color );
    padding:            1rem 1rem 1.5rem 1rem;
}

body,
.cc_main_body {
    background-color: var( --background-color );
    line-height: 1.5;
    font-weight: 300;
    color: var( --text-color );
}

.bold {
    font-weight: 400;
}

.cc_main_body .prodDetailContainer a {
    color: var( --link-color );
    cursor: pointer;
}

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

a,
.slds-scope a {
    color: var( --link-color ) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    cursor: pointer;
}

a.button:hover,
a.button:focus,
.slds-scope .slds-button:focus,
.slds-scope .slds-button:hover,
.SFIN a:hover,
.SFIN a:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

a:hover,
a:focus {
    color: var( --link-hover-color ) !important;
    text-decoration: none !important;
    font-weight: normal !important;
}

/* 
 *  Button design
 */
.slds-button,
.registrationWrapperConsentFlow .pbBottomButtons .FlowNextBtn {
    border-color: var( --primaryBtnBorder ) !important;
    background-color: var( --primaryBtnBackground ) !important;
    color: var( --primaryBtnColor ) !important;
    border-radius: 999rem !important;
    padding: 0.5em 1em !important;
    border: 2px solid var( --primaryBtnBorder ) !important;
    font-weight: 400 !important;
    line-height: 1.45rem !important;
    margin-right: 0.25rem;
}

.slds-button:hover,
.slds-button:focus,
.registrationWrapperConsentFlow .pbBottomButtons .FlowNextBtn:hover,
.registrationWrapperConsentFlow .pbBottomButtons .FlowNextBtn:focus {
    border-color: var( --primaryBtnHoverBorder ) !important;
    background-color: var( --primaryBtnHoverBackground ) !important;
    color: var( --primaryBtnHoverColor ) !important;
}

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

.slds-button.slds-button_secondary,
.slds-button.slds-button_neutral {
    background-color: var( --secondaryBtnBackground ) !important;
    color: var( --secondaryBtnColor ) !important;
    border-color: var( --secondaryBtnBorder ) !important;
}

.slds-button.slds-button_secondary:hover,
.slds-button.slds-button_secondary:focus,
.slds-button.slds-button_neutral:hover,
.slds-button.slds-button_neutral:focus {
    background-color: var( --secondaryBtnHoverBackground ) !important;
    color: var( --secondaryBtnHoverColor ) !important;
    border-color: var( --secondaryBtnHoverBorder ) !important;
}

button.button,
.cc_main_body button.button {
    background-color: transparent;
    color: var( --link-color );
}

button.button:hover,
button.button:focus,
.cc_main_body button.button:hover,
.cc_main_body button.button:focus {
    color: var( --link-hover-color );
}

button.button:hover,
button.button:active,
.cc_main_body button.button:hover {
    color: var( --link-hover-color );
}

/* Disabled Button Styling */
.slds-scope .slds-button[disabled],
.slds-scope .slds-button:disabled,
button.slds-button.slds-button_primary[disabled],
button.slds-button.slds-button_primary.disabled,
button.slds-button.slds-button_dark[disabled],
button.slds-button.slds-button_dark.disabled {
    color: var( --color-grey-70 ) !important;
}

/* SLDS Button Group Styling */
/* NOTE: USED ONLY IN UKI_Case_Creation_Flow */
.slds-button-group {
    border-radius: 0 !important;
    border: 1px solid var( --secondaryBtnBackground ) !important;
    padding: 0.25rem 0.25rem;
    margin: 0.25rem 0 !important;
    background: var( --surface-color ) !important;
}

.slds-button-group .slds-button {
    border-radius: 0 !important;
    color: var( --text-color ) !important;
    border-color: transparent !important;
    background: transparent !important;
    line-height: 1.35rem !important;
    padding: 0.25rem 0.5rem !important;
    font-weight: 700;
}
.slds-button-group .slds-button:hover {
    color: var( --link-hover-color ) !important;
}

.slds-button-group .slds-button.active {
    border-radius: 0 !important;
    color: var( --primaryBtnColor ) !important;
    border-color: var( --primaryBtnBorder ) !important;
    background: var( --primaryBtnBackground ) !important;
}

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

.form-control:focus {
    border-color: var( --primaryBtnBackground );
}

.form-control-radio-button label {
    font-weight: 300;
}

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

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

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

@media (pointer:coarse) and (hover:none) {
    /* Reset font size of touch devices, Spring '21(SLDS Touch Styles) made them bigger by default */
    body {
        font-size: initial;
    }
}

.slds-scope .slds-radio .slds-radio_faux,
.slds-scope .slds-radio .slds-radio--faux {
    width: 24px !important;
    height: 24px !important;
    border-radius: 100% !important;
    content: "";
    position: absolute !important;
    color: var( --primaryBtnBackground );
}

.slds-scope .slds-radio [type=radio]+.slds-radio__label .slds-radio_faux {
    margin-top: 0.15rem;
}

.slds-scope .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux {
    border-color: var( --primaryBtnBackground ) !important;
    box-shadow: none !important;
}

.slds-scope .slds-radio .slds-form-element__label {
    margin-left: 1.75rem;
    font-size: 14px !important;
}

.slds-scope span.slds-radio {
    margin-bottom: 0.5rem;
}

.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 {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    position: absolute !important;
    border-radius: 100% !important;
    background-color: var( --primaryBtnBackground ) !important;
}

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

a.consent-wall-button-primary,
a.consent-wall-button-secondary {
    box-shadow: none !important;
}

a.consent-wall-button-primary {
    text-decoration: none !important;
}

a.consent-wall-button-secondary {
    text-decoration: underline !important;
}

a.consent-wall-button-primary:hover,
a.consent-wall-button-primary:focus {
    background: var( --primaryBtnHoverBackground ) !important;
    color: var( --primaryBtnHoverColor ) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

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

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

.slds-tabs_default__item a.slds-tabs_default__link,
.slds-tabs--default__item a.slds-tabs_default__link {
    box-shadow: none !important;
}

.slds-tabs_default__item.slds-is-active,
.slds-tabs--default__item.slds-is-active {
    background: var( --card-background-color ) !important;
}

.siteforceSldsOneColLayout.siteforceContentArea .contentRegion.comm-layout-column {
    padding: 0 !important;
}

.siteforceSldsOneColLayout.siteforceContentArea .contentRegion.comm-layout-column .campaigns-wrapper.content-block {
    margin-left: var(--lwc-layoutVerticalPadding,0.75rem) !important;
    margin-right: var(--lwc-layoutVerticalPadding,0.75rem) !important;
}

.slds-button+.slds-button {
    margin-left: 0;
}

/* Datepicker css */
.os-datepicker-pagination[c-osDatepicker_osDatepicker] button[c-osDatepicker_osDatepicker] {
    color: var( --link-color ) !important;
    background-color: transparent !important;
    line-height: 1rem !important;
    border: 0px !important;
}
.os-datepicker-pagination[c-osDatepicker_osDatepicker] button:disabled[c-osDatepicker_osDatepicker] {
    color: var( --brand-grey ) !important;
    background-color: transparent !important;
    line-height: 1rem !important;
}
.os-datepicker-days[c-osDatepicker_osDatepicker] button {
    margin-right: 0px !important;
}
.os-datepicker-weekdays-headings[c-osDatepicker_osDatepicker] {
    background-color: var( --surface-color-hover ) !important;
}
.os-datepicker-days[c-osDatepicker_osDatepicker] button.os-datepicker-selected[c-osDatepicker_osDatepicker] {
    background-color: var( --primaryBtnBackground ) !important;
    color: var( --primaryBtnColor ) !important;
}

.slds-button-group .slds-button {
    margin-right: 0px !important;
}


/* modal pop up close button css */
lightning-button-icon.slds-modal__close button {
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 !important;
    top: 10px;
}

lightning-button-icon.slds-modal__close button:focus {
    outline: none !important;
    box-shadow: none !important;
}