html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

div.right.wrapper.forceCommunityLanguagePicker {
    background: white;
}

.vlc-separator {
    display: none !important;
}

@media screen and (max-width: 48em) {
    .cFooterPanel {
        position: absolute !important;
    }
}

.salesforceIdentityLoginBody2 {
    flex-direction: column;
}


.cFooterPanel {
    position: unset !important;
}

.cCenterPanel:before {
    position: unset !important;
}

.cCenterPanel {
    min-height: 70vh;
    display: inline-grid !important;
}

.footer {
    width: 100%;
}

.body {
    min-height: 73vh;
}

.forceCommunityFlowCommunityDesignSubstitute {
    border: #FFFFFF;
}

.forceCommunityFlowCommunity {
    border: #FFFFFF !important;
}

.slds-illustration__svg {
    display: none;
}

[data-omni-key="isVA"] {
    display: none !important;
}

h2.slds-text-align_center.slds-m-vertical_small.slds-text-color_default.slds-text-heading_large {
    display: none !important;
}

.cHeaderPanel {
    position: relative !important;
    z-index: 1000;
}

.comm-page-self-register .page-body {
    background-color: #e5f3fb !important;
    flex: 1;
}

.comm-page-forgot-password .page-body {
    background: linear-gradient(135deg,
            #a9c8ff 0%,
            /* lighter blue at top-left */
            #b7d0ff 25%,
            /* gentle mid-blue transition */
            #e6d9ff 65%,
            /* pale lilac bridge */
            #f6d1e9 100%
            /* pink bottom-right */
        ) !important;
    flex: 1;
}

.comm-page-login-error .page-body {
    background: linear-gradient(135deg,
            #a9c8ff 0%,
            /* lighter blue at top-left */
            #b7d0ff 25%,
            /* gentle mid-blue transition */
            #e6d9ff 65%,
            /* pale lilac bridge */
            #f6d1e9 100%
            /* pink bottom-right */
        ) !important;
    flex: 1;
}

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

.aou-spacer {
    padding: 1rem;
}

/* .aou-parent-section.cb-section_background:before */
.forceCommunitySection .aou-parent-section.cb-section_background {
    position: absolute;
    content: '';
    display: block;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    background: #EBF5FA url(/sfsites/c/resource/aouSectionBackground?v=1) 0 -150px / cover no-repeat;
}

.aou-parent-section.aou-parent-section_track.cb-section_background:before {
    background-image: none;
}

[data-component-label="AOU Spacer"] {
    margin-bottom: 0 !important;
}

/* manual override */
.aou-variation community_user-user-profile-menu.comm-user-profile-menu {
    --slds-c-button-color-background: transparent;
    --sds-c-button-color-background: transparent;
    --slds-c-button-color-border: transparent;
    --sds-c-button-color-border: transparent;
    --slds-c-button-shadow: none;
    --sds-c-button-shadow: none;
    --slds-c-button-sizing-border: 0;
    --sds-c-button-sizing-border: 0;
}

@media screen and (max-width: 48em) {

    .comm-page-forgot-password,
    .comm-page-self-register {
        & .aou-c-date-input input::-webkit-date-and-time-value {
            text-align: left;
            min-height: 32px;
            padding-left: .75rem;
            padding-right: .5rem;
            width: 100%;
            min-width: 100%;
        }

        & .aou-c-date-input .slds-input {
            min-width: calc(100% - 14px);
            min-height: 32px;
            padding-left: 0;
            padding-right: 0;
        }
    }
}

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

.aou-my-family {
    background-color: #F5EDFF;

    h1, h2, h3 {
        color: #262262;
    }

    .cb-section .cb-section_background {
        overflow: hidden;
        border-radius: 1em;
    }

    /* Section multi-column component */
    .siteforceDesignTimeSection:has(.aou-my-family-banner),
    .ui-widget:has(.aou-my-family-banner) {
        .cb-section .cb-section_background {
            box-shadow: 0px 2px 3px 0px #00000033;
        }

        .cb-section:has(.my-family-top-rainbow-stripe) .cb-section_background {

            /* rainbow stripe at top */
            &:before {
                content: '';
                position: absolute;
                z-index: 0;
                background: #262262;
                background: linear-gradient(90deg, rgba(38, 34, 98, 1) 0%, rgba(254, 194, 115, 1) 50%, rgba(153, 202, 233, 1) 100%);
                height: 4px;
                width: 100%;
            }
        }
    }

    /* Rich Content Editor component */
    .forceCommunityRichText.forceCommunityRichTextInline {
        h1 {
            font-family: Inter, sans-serif;
            font-size: 50px;
            font-weight: 700;
            line-height: 108%;
            margin-bottom: var(--lwc-spacingMedium, 1rem);
        }
    }

    /* HTML Editor component */
    .forceCommunityRichText.forceCommunityHtmlBlock {
        .button-header {
            display: inline-block;
            margin-bottom: 20px;
            padding: 4px 6px;
            border-radius: calc(1em + 8px);
            background: #e8f4fb;
            color: #006b8c;
            font-family: Helvetica Neue, sans-serif;
            font-weight: 400;
            font-size: 13px;
            line-height: 18px;
            letter-spacing: 0.52px;
            text-transform: uppercase;
        }

        h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 36.4px;
        }

        a.slds-button {
            color: var(--slds-c-button-text-color);
            text-decoration: none;

            &:active {
                color: var(--slds-c-button-text-color-active);
            }

            &:focus, &:hover {
                color: var(--slds-c-button-text-color-hover);
            }
        }
    }

    .forceCommunitySection .cb-section_column:has(.aou-my-family-info-card) {
        &:first-child {
            padding-left: 0;
        }

        &:last-child {
            padding-right: 0;
        }

        @media (max-width: calc(64em - 1px)) {
            padding: 16px 0 0 0;

            &:last-child {
                padding-bottom: 16px;
            }
        }
    }

    /* My Family Enrollment card */
    .cb-section:has(.aou-my-family-enrollment-card) .cb-section_background {
        box-shadow: 0px 2px 3px 0px #00000033;
    }

    .aou-my-family-enrollment-card .aou-my-family-info-card {
        box-shadow: none;
    }

    /* FAQ component */
    .cb-section:has(.aou-faq) {
        position: relative;
        background: white;
        margin: 2rem -2rem 0;
        padding: 0 2rem 2rem;
    }

    .cb-section:has(.aou-faq)::before {
        content: '';
        display: block;
        position: absolute;
        background-color: white;
        width: 100vw;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        z-index: 0;
    }

    /* flow custom styles */
    .flowruntimeBody .slds-rich-text-editor__output h2 {
        margin-bottom: 0;
    }
    .flowruntimeBody .slds-rich-text-editor__output h2 * {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #26226288 !important;
    }
    .flow-cls-section-styles {
        border-radius: 0.75rem;
    }
    .flowruntime-section-column.slds-col.slds-medium-size_1-of-12:has(img) {
        width: auto;
    }
    .slds-rich-text-editor__output img {
        vertical-align: middle;
        margin-bottom: 0;
    }
    c-fsc_flow-button-bar .slds-float_left.notToggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}

.aou-variation {
    & .slds-breadcrumb .slds-list__item:before,
    & .slds-breadcrumb .slds-breadcrumb__item:before {
        /* content: '\005C'; */
        content: '/';
    }

    & .aou-override_header-large h1 * {
        font-size: 30px !important;
    }

    & .aou-override_header-x-large h1 * {
        font-size: 42px !important;
    }

    & .slds-card.aou-override_container-medium,
    & .slds-card.aou-override_container-large {
        & .flowruntimeBody.slds-card__body {
            padding: calc(2rem - 1rem) 2rem;
        }
    }

    & .slds-card.aou-override_container-medium {
        max-width: 675px;
        margin: 0 auto
    }

    & .slds-card.aou-override_container-large {
        max-width: 100%;
        margin: 0 auto
    }

    & .aou-override_footer-grid {

        & .slds-float_right.notToggle,
        & .slds-float_left.notToggle {
            width: 100%;
            float: unset;
        }

        & .slds-button,
        & lightning-button {
            width: 100%;
        }

        & .slds-button {
            padding: .25rem;
        }

        & .section .slds-gutters_direct {

            & .flowruntime-column,
            &>.slds-col {
                flex: 0 1 auto;
            }
        }
    }

    & .aou-override_footer-grid flowruntime-screen-field:last-of-type .section {
        display: flex;
        flex-direction: row;

        & .slds-grid:first-of-type {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;

            &>.flowruntime-column {
                width: 100%;
                flex: 0 1 auto;
            }

            &>.flowruntime-column:first-of-type {
                padding-right: .25rem;
            }

            &>.flowruntime-column:last-of-type {
                padding-left: .25rem;
            }
        }
    }
}