/*
 * Your global styles here
 */

 

:root {
    --sbb-color-primary: #333463;
    --sbb-color-secondary: #01E6D9;
    --sbb-color-white: white;
    --sbb-color-gray: #707070;
    --sbb-color-muted: #B1B1B1;
    --sbb-color-red: #D23737;
    --sbb-color-green: #37D178;
    --sbb-color-blue-gray: #F1F3FA;
    --sbb-color-bg-gray: #EBEBEB;

    --sbb-bg-gradient: linear-gradient(180deg, var(--sbb-color-primary, rgb(51, 52, 99)) 0%, var(--sbb-color-secondary, rgb(1, 230, 217)) 100%);
    --sbb-bg-gradient-muted: linear-gradient(rgba(51, 52, 99, 70%) 0%, rgba(1, 230, 217, 70%) 100%);

    --sbb-border-radius: 8px;
    --sbb-border-radius-round: 50px;
    --sbb-max-width: 1200px;
    --sbb-main_nav-height: 60px; /** Main Navigation only */
    --sbb-main_nav-full-height: 110px; /** Main Navigation + Return to My Account Bar */
    --sbb-myacc-container-height: calc(100vh - var(--sbb-main_nav-height));
    --sbb-buyflow-container-height: calc(100vh - var(--sbb-main_nav-height));

    --sbb-myacc-page-title-height: 2.25rem; /** Page title component used on my account pages */
    --sbb-myacc-appbar-height: 4.75rem;
}    

:root:has(c-main-navigation-actions) {
    --sbb-buyflow-container-height: calc(100vh - var(--sbb-main_nav-full-height));
}

.slds-dropdown__item a {
    text-decoration: none !important;
}

.my-account-content {
    height: calc(var(--sbb-myacc-container-height) - var(--sbb-myacc-page-title-height));
}

.my-account-content .columns-content:first-child, .my-account-content .columns-content:first-child .columns:first-child {
    height: 100%;
}


html,
body {
    height: 100%;
    overflow: hidden !important;

}

a {
    text-decoration: underline;
}

html {
    background: white;
}

body {
    margin: 0;
}

/** Force required asterisk to right side of field labels **/
.slds-form-element__label:has(.slds-required) {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.slds-form-element__label:has(.slds-required) .slds-required {
  order: 2;
  margin-left: 2px;
}
/*********/

.slds-badge {
    padding-top: 2px;
    padding-bottom: 2px;
}

.bf-main-content-area {
    overflow-y: auto;
}

.community_byo-scoped-header-and-footer__header-content {
    background-color: white;
}

.title {
    color: var(--sbb-color-primary, #333463) !important;

    /* Buy Flow Screen Title */
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.slds-button {
    background-color: var(--sbb-color-primary, #333463) !important;
    color: white !important;
    border-radius: var(--sbb-border-radius-round, 50px) !important;
    padding-top: .2125rem;
    padding-bottom: .2125rem;
    text-wrap: nowrap;
}

.slds-button:disabled {
    background-color: var(--sbb-color-muted) !important;
}

.slds-button:focus, .slds-button:hover {
    border-color: var(--sbb-color-primary) !important;
}

.button-green .slds-button {
    background-color: var(--sbb-color-green) !important;
    border-color: var(--sbb-color-green) !important;
    box-shadow: inherit inherit var(--sbb-color-green);
}

.button-green  button.slds-button:focus, .button-green  .slds-button:hover {
    border-color: var(--sbb-color-green) !important;
    outline-color: var(--sbb-color-green) !important;
}

.slds-text-title {
    color: var(--sbb-color-primary, #333463);

    /* Buy Flow Screen Title */
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.slds-text-heading_large {
    font-size: 2rem;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 120%; /* 2.4rem */
    letter-spacing: -0.04rem;
    color: var(--sbb-color-primary, #333463);
}

.slds-text-heading_small {
    color: #2F2A5B;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.slds-form-element__label {
    color: var(--sbb-color-primary);
    font-style: normal;
    font-weight: 600 !important;
}

.slds-required {
    color: var(--sbb-color-primary);
}

.alert-error {
    text-align: center;
    border: 1px solid var(--sbb-color-red);
    color: var(--sbb-color-red);
    border-radius: var(--sbb-border-radius);
}

.screen-container.gradient-background {
    background: linear-gradient(90deg, var(--primary, #333463) 0%, var(--secondary, #01E6D9) 100%);
}

.card {
    border-radius: var(--sbb-border-radius);
    border: 1px solid var(--white, #FFF);
    background: var(--white, #FFF);
    box-shadow: var(--Box-Shadow-x-offset, 0px) var(--Box-Shadow-y-offset, 4px) var(--Box-Shadow-blur, 4px) var(--Box-Shadow-radius, 0px) var(--Box-Shadow-color, rgba(33, 36, 41, 0.25));
}

.cf_body {
    background-color: #fff !important;
}

.slds-modal__close, .slds-modal__close .slds-button, .slds-modal__close:focus,.slds-modal__close .slds-button:focus {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.circle-icon-container {
    display: flex; 
    align-items: center;
    justify-content: center;
}

.circle-icon {
    background-color: var(--sbb-color-primary);
    color: var(--sbb-color-secondary);
    border-radius: 50%;
    height: 8rem;
    aspect-ratio: 1 / 1;
    display: flex; 
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.number-containers {
    display: flex; 
    align-items: center;
    justify-content: center;
}

.account-number-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.account-number-container span {
    color: var(--sbb-color-primary, #333463);
    text-align: center;
    /* Body */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.number-container {
    border-radius: var(--sbb-border-radius, 0.5rem);
    background: var(--sbb-color-primary, #333463);
    color: var(--white, #FFF);
    text-align: center;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
}

.welcome {
    color: var(--sbb-color-primary, #333463);
    text-align: center;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
}

#installation-window {
    color: var(--primary, #333463);
    text-align: center;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.slds-modal__container:has(.broadband-label) {
    min-width: unset;
    width: 35vw;
}

.text-color-red {
    color: var(--sbb-color-red);
}

.component-wrapper-spacer {
    margin: 0 !important;
}


/************************ MY ACCOUNT ************************/
.welcome-user {
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    color: var(--sbb-color-primary);
}

.view-services-content {

}

.my-account-container {
    height: var(--sbb-myacc-container-height) !important;
    padding: 0px !important;
    margin: 0px !important;
}

.my-account-container > .columns-content:first-of-type > .columns {
    height: var(--sbb-myacc-container-height) !important;
}

.my-account-content > .columns-content:first-child > .columns:first-child > dxp_layout-column:last-of-type {
    overflow-y: auto;
}

.my-account-content, .my-account-container {
    background-color: var(--sbb-color-bg-gray);
}

.my-account-content > .columns-content:first-child > .columns:first-child > dxp_layout-column:first-child { /** Sidebar **/
    transition: width .25s ease, flex .25s ease .125s;
}

.columns-content dxp_layout-column:nth-of-type(1):has(.sidebar-container.close) {
    width: 0;
    flex: 0;
    flex-grow: 0 !important;
}


.my-account-container .label {
    color: var(--sbb-color-gray, #707070);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
}

.my-account-container a {
    text-decoration: none !important;
}

.my-account-container .value {
    color: var(--sbb-color-primary, #333463);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    min-height: 2.4rem;
}

.home-account-section-container dxp_layout-column > .column-content, .home-account-section-container dxp_layout-column > .column-content > webruntime-slot-container {
    height: 100%;
}

.my-account-container .address {
    color: var(--sbb-color-primary, #333463);
    font-style: normal;
    font-weight: 400;
}

.my-account-container .panel {
    background-color: var(--sbb-color-white);
    border-radius: var(--sbb-border-radius);
}

.my-account-container .center-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-account-container .full-height {
    height: 100%;
}

.slds-modal__footer {
    border: none !important;
    border-bottom-left-radius: var(--sbb-border-radius) !important;
    border-bottom-right-radius: var(--sbb-border-radius) !important;
}

.modal-title {
    color: var(--sbb-color-primary, #333463);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.modal-icon {
    font-size: 1.35rem;
    color: var(--sbb-color-primary);
}


.account-selector-page-container {
    background-color: var(--sbb-color-bg-gray);
}

.account-selector-page-container > .columns-content {
    height: 100%;
    overflow-y: scroll;
}


.profile-name, .profile-name .slds-button {
    background-color: rgba(0,0,0,0) !important;
        color: var(--sbb-color-gray, #707070)  !important;
        border: none !important;
        text-decoration: none !important;
}


/************************************************************/


@media only screen and (max-width: 767px) {

    .screen-container {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    .my-account-content .columns-content:first-child, .my-account-content .columns-content:first-child .columns:first-child {
        height: auto !important;
    }

    .my-account-container.account-selector-page-container {
        height: var(--sbb-myacc-container-height) !important;
    }

    .product-card-container {
        flex-direction: column;
    }

    .container_add2cart {
        width: 100% !important;
    }

    .action-panel {
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: white;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: .5rem;
        border-top: 1px solid var(--sbb-color-bg-gray);
        z-index: 100000000;
    }

    .add2cart {
        flex-direction: row !important;
    }

    .my-account-container .columns-content .columns {
        display: block;
    }

    .my-account-container {
        height: calc(var(--sbb-myacc-container-height) - var(--sbb-myacc-appbar-height)) !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .my-account-container .columns-content dxp_layout-column:nth-of-type(3) {
    }

    .my-account-content > .columns-content:first-child > .columns:first-child > dxp_layout-column:first-child:has(c-acc-sidebar) { /** Hide sidebar container on mobile */
        max-width: 0px !important; 
    }

    .dxp_layout-column-spacer {
        display: none !important;
    }
}