@import '/__generated__/stylesheets/appx-css.css?v1';

@font-face {
    font-family: 'SalesforceSans';
    src: local('SalesforceSans-Regular'), url('../slds/fonts/webfonts/SalesforceSans-Regular.woff2') format('woff2'),
        url('../slds/fonts/webfonts/SalesforceSans-Regular.woff') format('woff');
    font-display: swap;
    font-weight: 400;
}
 
@font-face {
    font-family: 'SalesforceSans';
    src: local('SalesforceSans-Semibold'), url('../slds/fonts/webfonts/SalesforceSans-Semibold.woff2') format('woff2'),
        url('../slds/fonts/webfonts/SalesforceSans-Semibold.woff') format('woff');
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: 'SalesforceSans';
    src: local('SalesforceSans-Bold'), url('../slds/fonts/webfonts/SalesforceSans-Bold.woff2') format('woff2'),
        url('../slds/fonts/webfonts/SalesforceSans-Bold.woff') format('woff');
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: 'ITCAvantGardePro-Demi';
    src: url('../fonts/ITCAvantGardePro-Demi.otf');
    font-display: swap;
}

/* This is an example of how you can use global style variables to customize the look of SLDS components: */
:root {
    --temp-min-width: 1280px;
    --c360-primary-blue: #0176d3;
    --c360-button-border: 2px solid #0176d3;
    --c360-default-font-color: #080707;
    --c360-box-shadow-focus: 0px 0px 2px 2px var(--c360-primary-blue);
    --i18n-link-text-color: #080707;
    --c360-g-color-palette-blue-20: #032d60;
    --appx-dependent-combobox_label-font-size: 0.8125rem;
}

html {
    background: #ffffff;
}

body {
    font-family: SalesforceSans, Arial, sans-serif;
    font-weight: 400;
}

.slds-global-header_container {
    position: relative;
}

.container-inner {
    max-width: 1440px;
    margin: auto;
    padding: 0 2rem;
    min-height: 620px;
}

.step {
    padding-left: 2rem;
    padding-top: 4rem;
    border-left-width: 1px;
    border-left-style: solid;
    border-image: linear-gradient(to bottom, rgb(223, 223, 223), rgb(255, 255, 255)) 1 100%;
    max-width: 1050px;
    min-height: 500px;
}

.section-title {
    margin-bottom: 1rem;
    font-size: 2.25rem;
    font-weight: 500;
    color: rgb(6, 50, 115);
    font-family: ITCAvantGardePro-Demi, Arial, sans-serif;
}

.section-overview {
    margin-bottom: 4rem;
    font-size: 1.25rem;
    color: rgb(52, 52, 52);
}

.section-description {
    margin-bottom: 4rem;
    font-size: 1.25rem;
    color: rgb(52, 52, 52);
}

.section-sub-title {
    color: rgb(52, 52, 52);
    font-size: 1.5rem;
    font-weight: 500;
    font-family: ITCAvantGardePro-Demi, Arial, sans-serif;
    margin-bottom: 1rem;
}

.sub-section-title {
    color: rgb(52, 52, 52);
    font-size: 1rem;
    font-weight: 500;
    font-family: ITCAvantGardePro-Demi, Arial, sans-serif;
    margin-bottom: 1rem;
}

.slds-input {
    --sds-c-input-radius-border: 0.5rem;
    --sds-c-input-color-border: #b4b5b6;
    --sds-c-input-spacing-horizontal-end: 1rem;
    --sds-c-input-spacing-horizontal-start: 1rem;
    border: 1px solid rgb(129, 129, 129);
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.customer-resource-error .slds-input {
    box-shadow: 0 0 0 1pt rgb(190 49 44);
    border: 1px solid rgb(190, 49, 44);
}

.slds-input:focus {
    box-shadow: 0 0 0 1pt rgb(1, 118, 211);
    border: 1px solid rgb(1, 118, 211);
}

.slds-combobox__input {
    border: 1px solid rgb(129, 129, 129);
    font-size: 16px !important;
}

.combobox-non-searchable .slds-combobox__input {
    cursor:pointer
 }

.slds-combobox__input:focus-within {
    box-shadow: 0 0 0 1pt rgb(1, 118, 211);
    border: 1px solid rgb(1, 118, 211);
}

.required.slds-combobox__input{
    box-shadow: 0 0 0 1pt rgb(190, 49, 44);
    border: 1px solid rgb(190, 49, 44);
}

[role=combobox] input[readonly], input[readonly][role=combobox]{
    border: 1px solid rgb(129, 129, 129);
}

[role=combobox] input[readonly]:focus, 
[role=combobox] input[readonly].slds-has-focus, 
input[readonly][role=combobox]:focus, 
input[readonly][role=combobox].slds-has-focus {
    box-shadow: 0 0 0 1pt rgb(1, 118, 211);
    border: 1px solid rgb(1, 118, 211);
}

.slds-textarea {
    --sds-c-textarea-radius-border: 0.5rem;
    --sds-c-textarea-color-border: #b4b5b6;
    --sds-c-textarea-spacing-horizontal-end: 1rem;
    --sds-c-textarea-spacing-horizontal-start: 1rem;
    border: 1px solid rgb(129, 129, 129);
    font-size: 1rem;
    padding-top: 9px;
    padding-bottom: 4px;
    height: 106px;
    min-height: 40px;
}

.slds-textarea:focus-within {
    box-shadow: 0 0 0 1pt rgb(1, 118, 211);
    border: 1px solid rgb(1, 118, 211);
}

.error .slds-textarea {
    box-shadow: 0 0 0 1pt rgb(190, 49, 44);
    border: 1px solid rgb(190, 49, 44);
    border-radius: 0.5rem;
}

.editor-footer-container .slds-progress {
    margin: 0;
    max-width: 100%;
    height: 2rem;
}

.editor-footer-container .footer-buttons .slds-button, .submission-buttons .slds-button{
    width: 200px;
}

.save-media-button .slds-button{
    width: 100%;
}

.slds-popover_tooltip {
    background: rgb(255, 255, 255) !important;
    border-radius: 0.5rem;
    border: 1px solid rgb(221, 219, 218);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.slds-popover__body {
    font-size: 1rem !important;
    min-width: 200px;
    min-height: 50px;
    color:rgb(52, 52, 52) !important;
    line-height: 34px;
    padding: 1rem 0 1rem 0.75rem;
}

.slds-nubbin_bottom:after, .slds-nubbin_bottom:before{
    width: 0;
    height: 0;
}

/*modals without footer*/
.edit-video .slds-modal__content, .edit-image .slds-modal__content  {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

@media (min-width: 48em){
    .edit-image .slds-modal__container {
        margin: 0 auto;
        width: 40rem;
        min-width: 20rem;
        max-width: 60rem;
    }
}

/*bootstrapper modal*/
.boot-strapper .slds-modal__container {
    width: unset;
    max-width: 51rem;
    min-width: 51rem;
    height: 100%;
}

.boot-strapper .slds-modal__content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.boot-strapper .slds-modal {
    position: absolute;
    margin-top: 58px;
}

.boot-strapper .slds-backdrop_open{
    opacity: 0;
}

/*Buttons*/
.slds-button {
    background: rgb(255, 255, 255);
    border-radius: 0.25rem;
    color: rgb(12, 95, 201);
    font-weight: 700;
    font-size: 0.875rem;
} 

.slds-button.slds-progress__marker {
    background: #dddbda;
    border-radius: 50%;
}

.slds-button.slds-progress__marker:hover{
    background: #dddbda;
    border-color: #fff;
}

.slds-button:hover, .slds-button:focus {
    background: rgb(240, 240, 240);
    border-color: rgb(240, 240, 240);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.slds-button.slds-button_icon-container:hover, .slds-button.slds-button_icon-container:focus {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}


.slds-button:active {
    background: rgb(255, 255, 255);
    border: 2px solid rgb(223, 223, 223);
}

.slds-button_brand {
    background: rgb(12, 95, 201);
    border-color: rgb(12, 95, 201);
    color: rgb(255, 255, 255);
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.875rem;
}

.slds-button_brand:hover, .slds-button_brand:focus {
    background: rgb(14, 70, 155);
    border-color:rgb(14, 70, 155);
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.slds-button_brand:active{
    background: rgb(12, 95, 201);
    border-color: rgb(12, 95, 201);
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.slds-button_brand:disabled {
    border-radius: 0.25rem;
}

.slds-button_neutral {
    background: rgb(255, 255, 255);
    border: 2px solid rgb(26, 127, 255);
    color: rgb(0, 112, 210);
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.875rem;
}

.slds-button_neutral:hover, .slds-button_neutral:focus{
    background: rgb(234, 241, 255);
    border: 2px solid rgb(26, 127, 255);
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.slds-button_neutral:active{
    border: 2px solid rgb(26, 127, 255);
    background: rgb(255, 255, 255);
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.tertiary .slds-button_neutral {
    background: rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);
}

.tertiary .slds-button_neutral:hover{
    background: #EEF4FF;
    border: 2px solid rgb(255, 255, 255);
}

.tertiary .slds-button_neutral:focus, .tertiary .slds-button_neutral:active{
    background: #EEF4FF;
    border: 2px solid rgb(26, 127, 255);
}

.slds-button_outline-brand {
    background: rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);;
    color: rgb(0, 112, 210);
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.875rem;
}

.slds-button_outline-brand:hover, .slds-button_outline-brand:focus{
    background: rgb(240, 240, 240);
    border: 2px solid rgb(240, 240, 240);
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.slds-button_outline-brand:active{
    background: rgb(255, 255, 255);
    box-shadow: none;
    border: 2px solid rgb(223, 223, 223);
    transition: background-color 0.3s, border-color 0.3s;
}

.slds-button_text-destructive {
    background: rgb(255, 255, 255);
    border-radius: 0.25rem;
    border: 2px solid rgb(190, 49, 44);
    color: rgb(190, 49, 44);
    font-weight: 700;
    font-size: 16px;
}

.text-destructive-alternative .slds-button_text-destructive{
    border: none;
}

.slds-button_text-destructive:disabled {
    background: rgb(255, 255, 255);
    border-radius: 0.25rem;
    border: none;
    color: rgb(119, 107, 107);
}

.slds-button_text-destructive:hover,.slds-button_text-destructive:focus {
    background: rgb(248, 239, 236);
    border-radius: 0.25rem;
    border: 2px solid rgb(190, 49, 44);
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.text-destructive-alternative .slds-button_text-destructive:hover,.text-destructive-alternative .slds-button_text-destructive:focus{
    border: none;
}

.slds-button_text-destructive:active {
    background: rgb(255, 255, 255);
    box-shadow: none;
    border: 2px solid rgb(190, 49, 44);
    transition: background-color 0.3s, border-color 0.3s;   
}
/*End Buttons*/

/*Notifications on home page*/
.actions .slds-button_icon-border {
    border: none;
}

.actions .slds-button_icon-border:active, .actions .slds-button_icon-border:focus{
    border: 2px solid rgb(26, 127, 255);
    box-shadow: none;
}
/*End notifications on home page*/

.slds-badge {
    line-height: 30px;
    height: 22px;
}

.slds-radio [type=radio]:focus + .slds-radio__label .slds-radio_faux, 
.slds-radio [type=radio]:focus + .slds-radio__label .slds-radio--faux {
    box-shadow: none;
    border: 2px solid #0176d3;
}

.appx-radio-item .slds-form-element__label{
     border: 2px solid #fff;
}

.slds-radio [type=radio]:focus + .slds-radio__label .appx-radio-item .slds-form-element__label{
    border: 2px solid #0176d3;
    border-radius: 0.5rem;
}

.icon-warning {
    --sds-c-icon-color-foreground-default: #d36607;
}

.icon-error {
    --sds-c-icon-color-foreground-default: #c23934;
}

.icon-success {
    --sds-c-icon-color-foreground-default: #027e46;
}

.icon-info {
    --sds-c-icon-color-foreground-default: #5f96b5;
}

.slds-checkbox [type=checkbox]:checked + .slds-checkbox_faux, 
.slds-checkbox [type=checkbox]:checked + .slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:checked ~ .slds-checkbox_faux, 
.slds-checkbox [type=checkbox]:checked ~ .slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox_faux, 
.slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox--faux,
.slds-checkbox .slds-checkbox_faux, 
.slds-checkbox .slds-checkbox--faux {
    border: 1px solid rgb(129, 129, 129);
}

.slds-checkbox [type=checkbox]:focus + .slds-checkbox_faux, 
.slds-checkbox [type=checkbox]:focus + .slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:focus ~ .slds-checkbox_faux, 
.slds-checkbox [type=checkbox]:focus ~ .slds-checkbox--faux, 
.slds-checkbox [type=checkbox]:focus + .slds-checkbox__label .slds-checkbox_faux, 
.slds-checkbox [type=checkbox]:focus + .slds-checkbox__label .slds-checkbox--faux {
    border: 2px solid rgb(1, 118, 211);
    box-shadow: none;
}

.appx-wizard-nav-vertical .slds-progress_vertical .slds-progress__item.slds-is-active:before {
    background-color: #dddbda;
}


.appx-wizard-nav-vertical .slds-progress_vertical .slds-progress__item_content {
    margin-top: 0;
    padding-bottom: 0;
}

.appx-wizard-nav-vertical .slds-progress_vertical .slds-progress__marker {
    margin-left: -3px;
}

.slds-spinner_container {
    background-color: transparent;
}

appx-filter .section .checkbox {
    margin-bottom: 4px;
    line-height: initial;
}

appx-filter .section fieldset {
    margin-left: 0;
}

/*SRW Toggle*/
.slds-checkbox_toggle .slds-checkbox_faux {
    width: 68px;
    height: 36px;
    border: 1px solid #969492;
}

.slds-checkbox_toggle .slds-checkbox_faux:after {
    top: 3.5px;
    width: 26px;
    height: 26px;
    left: 3.5px;
}

.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_on{
    text-align: center;
    color: #009900;
}

.slds-checkbox_toggle [type=checkbox] + .slds-checkbox_faux_container .slds-checkbox_off {
    text-align: center;
}

.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux{
    width: 68px;
    height: 36px;
    border: 1px solid #009900;
    
}

.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before {
    top: 3.5px;
    right: 3.5px;
    width: 26px;
    height: 26px;
}

.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after{
    top: 8px;
    left: 45px;
    height: 14px;
    width: 8px;
    border-color: #3BA755;
}

div:focus-visible .slds-assistive-text{
    margin: unset !important;
}

.srw .slds-button_icon {
    width: 40px;
    height: 40px;
    vertical-align: top;
}
.srw .slds-button__icon {
    width: 20px;
    height: 20px;
}

.enable-test-drive .slds-checkbox_toggle {
    flex-direction: row-reverse;
    justify-content: start;
}

.enable-test-drive .slds-form-element__label {
    font-size: 20px;
    margin-left: 1rem;
}