@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --sty-font-family: "Noto Sans", "Roboto", sans-serif;
    --sty-border-radius: 0.375rem;
    --sty-bg: #ffffff;
    --sty-text-color: #000000;
    --sty-text-color-secondary: #111111;
    --sty-primary-color: #0032A0;
    --sty-danger-color: #D50032;
    --sty-panel-bg: transparent;
    --sty-panel-container-padding: 0;
    --sty-panel-box-shadow: none;
    --sty-panel-border-width: 0;
    --sty-panel-text-alignment: left;
    /* CS-533
     * The entire content container should be 1000px in width. */
    --sty-panel-max-width: minmax(360px, 1000px);

    --sty-dialog-bg: #ffffff;

    --sty-input-style: outer;
    --sty-input-border-radius: 0.25rem;
    --sty-input-button-font-weight: 400;
    --sty-input-label-font-weight: 700;
    --sty-input-label-padding: 0 0 0.5rem;
    --sty-input-label-color: #111111;
    --sty-input-border-color: var(--sty-primary-color);
    --sty-input-focus-border-color: var(--sty-primary-color);
    --sty-input-button-color: var(--sty-primary-color);
    --sty-input-focus-box-shadow: 0 0 0 1px var(--sty-primary-color);

    --sty-checkbox-border-radius: 0.25rem;
    --sty-checkbox-border-color: var(--sty-primary-color);
    --sty-checkbox-border-width: 2px;
    --sty-checkbox-checked-box-shadow: inset 0 0 0 1px var(--sty-primary-color);
    --sty-checkbox-focus-ring-width: 0;

    --sty-button-box-shadow: none;
    --sty-button-border-width: 2px;
    --sty-button-primary-color: #FFFFFF;
    --sty-button-primary-disabled-color: #616161;
    --sty-button-primary-bg: var(--sty-primary-color);
    --sty-button-primary-hover-bg: #00236F;
    --sty-button-primary-focus-bg: #00163B;
    --sty-button-primary-disabled-bg: #EEEEEE;
    --sty-button-secondary-color: var(--sty-primary-color);
    --sty-button-secondary-disabled-color: #616161;
    --sty-button-secondary-bg: #FFFFFF;
    --sty-button-secondary-hover-bg: #E8F4FF;
    --sty-button-secondary-focus-bg: #C2E2FF;
    --sty-button-secondary-disabled-bg: #EEEEEE;
    --sty-button-secondary-border-color: var(--sty-primary-color);
    --sty-button-secondary-hover-border-color: var(--sty-primary-color);
    --sty-button-secondary-focus-border-color: var(--sty-primary-color);
    --sty-button-secondary-disabled-border-color: #616161;
    --sty-button-secondary-text-color: var(--sty-primary-color); 
    --sty-button-secondary-text-hover-color: var(--sty-primary-color);
    --sty-button-secondary-text-focus-color: var(--sty-primary-color);
    --sty-button-secondary-text-disabled-color: #616161;
    --sty-button-secondary-text-hover-bg: #E8F4FF;
    --sty-button-secondary-text-focus-bg: #C2E2FF;
    --sty-button-secondary-text-border-color: transparent;
    --sty-button-secondary-text-hover-border-color: transparent;
    --sty-button-secondary-text-focus-border-color: transparent;
    --sty-dialog-backdrop-bg: transparent;
}

[data-content="right"],
[data-section="panelHeader"],
#language-selector,
[data-section="notice"],
[data-section="copyright"],
[data-separator="login"],
[data-block] [data-block-title],
[data-button="forgottenPasswordEmail"],
[data-button="forgottenPasswordPhone"],
/*[data-button="forgottenEmail"] */
[data-block="identifier"] [data-separator="registration"],
[data-block="mfaEnrollTargetSelect"] [data-field="method"]
{
    display: none !important;
}

/* Put back the "You've been succesfully logged out" message after logging out. */
[data-block="loggedOut"] [data-block-title],
/* Put back the "Your account has been successfully deleted" message after confirming the delete. */
[data-block="accountDeletion"] [data-block-title]
{
    display: block !important;
}

sty-form {
    position: relative;
    text-align: right;

    .text {
        text-align: left;
    }
}
div::part(error) {
    color: red;
}
sty-input-date-picker,
sty-input-date-picker-memorable,
sty-input-number,
sty-input-file,
sty-input-text,
sty-input-password,
sty-input-passcode,
sty-input-phone,
sty-select {
    padding-block-end: 1rem;

    sty-feedback {
        margin-top: 0.25rem;
    }
}
sty-radio-group {
    label,
    &::part(label) {
        font-weight: 600;
    }
    sty-radio {
        margin-block-start: 0.5rem;
    }
}
sty-checkbox {
    &::part(input) {
        border-inline-start-width: 1px;
    }
}
sty-checkbox-group {
    label,
    &::part(label) {
        font-weight: 600;
    }
    sty-checkbox {
        margin-block-end: 0.5rem;
    }
}
sty-dialog {
    a {
        padding: 0;
        border: none;
    }
    &[data-custom] {
        max-width: 640px;
        margin: 0 auto;
        z-index: 1001;

        &::part(dialog) {
            padding: 0;
        }
        &::part(backdrop) {
            background-color: rgba(1, 1, 1, 0.55);
            height: 100%;
            left: 0px;
            position: fixed;
            top: 0px;
            touch-action: none;
            width: 100%;
            display: block;
            opacity: 1;
            visibility: visible;
            transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1), visibility 225ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        &::part(button-close) {
            color: #ffffff;
        }
        .dialog-title {
            padding: 1rem;
            background: var(--sty-primary-color);
            color: #ffffff;
            font-size: 28px;
            border-top-left-radius: var(--sty-border-radius);
            border-top-right-radius: var(--sty-border-radius);
        }
        .dialog-content {
            padding-block: 0.5rem;
	        padding-inline: 1.5rem 1rem;
        }
    }
}
sty-button {
    font-size: 18px;
    min-height: 2.375rem;

    .icon {
        display: none;
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        
        &::before {
            display: block;
            content: "";
            width: 1.5rem;
            height: 1.5rem;
            background-color: currentColor;
            mask-size: contain;
            mask-repeat: no-repeat;
        }
    }

    @media (min-width: 960px) {
        display: inline-flex;
        min-width: 12rem;

        &[data-arrow] {
            .icon {
                display: block;
            }
        }
        &[data-arrow="right"] {
            padding-inline: 2rem 3.5rem;

            .icon {
                right: -2.5rem;
                
                &::before {
                    mask-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiBhcnJvdy1yaWdodCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI1IiB2aWV3Qm94PSIwIDAgMjQgMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PG1hc2sgaWQ9Im1hc2swXzEwODRfNDUwIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjUiPjxyZWN0IHk9IjAuNzgxMDA2IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNEOUQ5RDkiLz48L21hc2s+PGcgbWFzaz0idXJsKCNtYXNrMF8xMDg0XzQ1MCkiPjxwYXRoIGQ9Ik0xNi4xNzUgMTMuNzgxSDRWMTEuNzgxSDE2LjE3NUwxMC41NzUgNi4xODEwMUwxMiA0Ljc4MTAxTDIwIDEyLjc4MUwxMiAyMC43ODFMMTAuNTc1IDE5LjM4MUwxNi4xNzUgMTMuNzgxWiIgZmlsbD0id2hpdGUiLz48L2c+PC9zdmc+");
                }
            }
        }
        &[data-arrow="left"] {
            padding-inline: 3.5rem 2rem;

            .icon {
                left: -2.5rem;

                &::before {
                    mask-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiBhcnJvdy1sZWZ0IiB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFzazBfMTI5XzUzNTUiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMSI+PHJlY3QgeT0iMC41IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiNEOUQ5RDkiLz48L21hc2s+PGcgbWFzaz0idXJsKCNtYXNrMF8xMjlfNTM1NSkiPjxwYXRoIGQ9Ik02LjUyMDUxIDExLjMzMzNMMTEuMTg3MiAxNS45OTk5TDkuOTk5NjcgMTcuMTY2NkwzLjMzMzAxIDEwLjQ5OTlMOS45OTk2NyAzLjgzMzI1TDExLjE4NzIgNC45OTk5Mkw2LjUyMDUxIDkuNjY2NThIMTYuNjY2M1YxMS4zMzMzSDYuNTIwNTFaIiBmaWxsPSIjMDAzMkEwIi8+PC9nPjwvc3ZnPg==");
                }
            }
        }
    }
}

sty-input-date-picker-memorable::part(content) {
    max-width: 268px;   
}

.separator {
    &::before,
    &::after {
        content: none !important;
    }
}

/* Hiding Red Asterik * from certain form fields. */
.customerInput [slot="label"]::after,
.registration sty-radio-group::part(label)::after,
.registration [slot="label"]::after,
.registration sty-input-text::part(label)::after {
    content: none;
}

.registration sty-input-text::part(label) {
    font-size: 18px;
}

.customerInput [data-field="attribute-local.wrapper.recoveryError"] {
    display: none;
}

.customerInput [data-section="panel"] {
    /* --sty-panel-max-width: 500px; */
    max-width: 500px;
    width: 100%;
}

.shelter-number {
    text-decoration: underline;
}

.pageFooter {
    border-top: 2px solid #e8f4ff;
    margin-top: 2rem;
}
.separator-w-text {
    height: 0;
    overflow: hidden;
    border-block-end: none;
    border-block-start: 2px solid #E8F4FF;

    &::before,
    &::after {
        content: none !important;
    }
}
.registration-step {
    position: absolute;
    bottom: -3rem;
    font-size: 1rem;
    font-weight: 400;
    color: #616161;
}

[data-button="skip"] {
    display: block;
}

[data-button="login"][data-custom] {
    --sty-link-decoration: underline;
    display: inline-flex;
    align-items: center;
    padding: 1rem 0;
    border: none;

    .icon {
        width: 24px;
        margin-inline-end: 0.25rem;
    }
}

[data-section="panelContainer"] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'title' 'content' 'promotion';

    @media (max-width: 425px) {
        padding-right: 24px !important;
    }

    > [data-panel-title] {
        grid-area: title;
        position: relative;
        margin-block: 2rem;
        text-align: var(--sty-panel-text-alignment, left);
        .section-title {
            font-size: 2.5rem;
            margin-block-end: 0;

            @media (max-width: 425px) {
                font-size: 2rem !important;
            }

        }
        .text {
            margin-block-start: 1.25rem;
            font-weight: 400;

            /* CS-533
             * Paragraph text “Let’s get started creating an account” is currently 20px.
             * Please change to 26px text size for desktop and 22px text size for mobile
             */
            font-size: 22px;
            @media (min-width: 960px) {
                font-size: 26px;
            }

            @media (max-width: 375px) {
                font-size: initial;
            }
        }

        /* CS-533
         * “Step 1 of X” is should be 18px text size */
        .step  {
            font-size: 18px;
        }
    }

    > [data-block] {
        grid-area: content;
        padding-block-start: 2rem;
        /* CS-533
         * The left content container should be 480px wide */
        /*@media (min-width: 960px) {
            max-width: 480px;
        }*/
    }
    > section.promotion-section {
        /* CS-533
         * Right-side container wraps text b/c of the above,
         * so decrease margin between left and right side panes
         */
        /*margin-inline-start: 14px;*/
    }

    > [data-promotion] {
        display: block;
        grid-area: promotion;
        font-size: 22px;
        text-align: left;
        /*
        padding-block: 2rem;
        padding-inline-start: 2rem;
        padding-inline-end: 0;
        */
        padding: 2rem 0 2rem 2rem;
        margin-inline-start: 0;
        /* border-inline-start: 2px solid #E8F4FF; */

        .promotion-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 30px;
            letter-spacing: -0.48px;
        }
        .promotion-item {
            display: grid;
            align-items: center;
            grid-template-columns: 2.125rem 1fr;
            grid-gap: 0 0.5rem;
            margin-block-start: 1.5rem;
        }
    }

    @media (min-width: 960px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: 'title title' 'content content';

        &:has([data-promotion]) {
            grid-template-areas: 'title title' 'content promotion';
        }
        > [data-panel-title] {
            margin-block-start: 0;
        }
        > [data-promotion] {
            display: block;
            margin-inline-start: 2rem;
            border-inline-start: 2px solid #E8F4FF;
        }
    }
}
[data-section="accountInfo"] {
    position: absolute;
	top: -4rem;
    margin: 0 !important;
}
[data-content="header"],
[data-content="footer"] {
    --sty-link-color: #ffffff;
    --sty-link-hover-color: #ffffff;
}
[data-content="header"] {
    margin-block-end: 1rem;
}
[data-content="footer"] {
    margin-block-start: 4rem;
}


/* Blocks & Attributes */
[data-field="attribute-attributes.mailingPreference"] {
    .helperText {
        font-size: 0.875rem;
        margin-block-start: 0.5rem;
    }
}
[data-field="optionalTypes"] {
    margin-block-end: 1rem;
}
[data-block="mfaEnrollTargetSelect"] {
    .text {
        margin-block-end: 2rem;
        font-size: 1.125rem;
    }
    @media (min-width: 960px) {
        [data-button="selectDifferentMethod"] {
            float: left;
            margin-block-start: 0;
        }
        [data-button="useCustom"] {
            margin-block-start: 0;
        }
    }
}
[data-block="mfaEnrollChallenge"] {
    .text {
        .target {
            display: inline-block;
        }
    }
    @media (min-width: 960px) {
        [data-button="selectDifferentMethod"] {
            float: left;
            margin-block-start: 0;
        }
    }
}
[data-block="externalLoginProvider"] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
[data-block="identifier"] [data-button][data-custom],
[data-block="identifier"] [data-button][data-custom],
[data-block="password"] [data-button][data-custom] {
    @media (min-width: 960px) {
        float: right;
    }
}
[data-block="forgottenPasswordEmail"],
[data-block="forgottenPasswordPhone"],
[data-block="genericAction"],
[data-block="genericResult"] {
    [data-block-title] {
        display: inline-block !important;
    }
    .text {
        .target {
            display: inline-block;
        }
    }
    .state-icon {
        width: 1.75rem;
        margin-block: 0;
        position: relative;
        top: 0.375rem;
        margin-inline-end: 0.5rem;
    }
}

/* CS-533
 * The input field label text should be 18px text size */
div.attributes label[slot="label"] {
    font-size: 18px !important;
}

/* CS-533
 * First name and last name inputs should be on the same row */
 /*
.adjacentFirstLast {
    display: flex;
    gap: 0.5rem;
}
sty-input-text[data-field="attribute-attributes.name.firstName"], sty-input-text[data-field="attribute-attributes.name.lastName"] {
    flex: auto;
    padding-bottom: 0px;
}
#newNameHelper {
    text-align: left;
    padding-bottom: 16px;
}
.hiddenHelperFirstLast {
    display: none;
}
*/
/*
#app.registration sty-button[data-button="submit"] {
    display: none;
}
*/
/* [Continue] button should be aligned to right */
#app.genericResult[data-screen="mfaEnrollSuccess"] {
    section[data-block="genericResult"] sty-button {
        --sty-panel-text-alignment: right;
    }
}

@media (max-width: 959px) {
    #app.genericResult[data-screen="mfaEnrollSuccess"] {
        section[data-block="genericResult"] sty-button {
            --sty-panel-text-alignment: left;
        }
    }
}

[data-screen="mfaEnrollSuccess"] sty-button[data-button="login"] {
    display: none;
}

#app.landing {
    --sty-panel-text-alignment: center;
}
[data-button=selectDifferentMethod]{display: block}