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

* {
    margin: 0;
    padding: 0;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

html:focus-within {
    scroll-behavior: smooth;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
}

input,
button,
textarea,
select {
    font: inherit;
}

    input::-ms-reveal,
    input::-ms-clear {
        display: none;
    }

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body,
html {
    height: 100%;
    scroll-behavior: smooth;
}

/**--------------------------
        Variables
         --------------------------**/

:root {
    /* fonts */
    --default-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --default-font-size: 16px;
    /* colours */
    --neutral-0: #fff;
    --neutral-50: #f7f7f7;
    --neutral-100: #eee;
    --neutral-200: #c6c6c6;
    --neutral-300: #ababab;
    --neutral-400: #8f8f8f;
    --neutral-700: #474747;
    --neutral-800: #303030;
    --primary-400: #428fed;
    --primary-500: #2177c2;
    --primary-600: #005faf;
    --primary-700: #004786;
    --supporting-critical-500: #d9372b;
    /* --primary-400: #753bcc;
          --primary-500: #5c19b3;
          --primary-600: #42008a;
          --primary-700: #270057;
 
          --brand-background: #004f54; */

    --brand-background: var(--neutral-50);
    --brand-button: var(--primary-500);
    --brand-button-hover: var(--primary-600);
    --brand-button-active: var(--primary-700);
    --brand-button-focus: var(--primary-600);
    --brand-button-focus-ring: var(--primary-400);
    --error: var(--supporting-critical-500);
    /* effects */
    --light: 0px 1px 4px rgba(0, 0, 0, 0.11);
}

/**--------------------------
        Body
         --------------------------**/

body {
    font-size: var(--default-font-size);
    font-family: var(--default-font);
}

.groupauth-landing-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    color: var(--neutral-800);
    background-color: var(--neutral-0);
}

.page {
    align-self: stretch;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 2rem;
    box-sizing: border-box;
}

/**--------------------------
        Body Responsiveness
         --------------------------**/

/**Bigger Mobile Upwards**/
@media only screen and (min-width: 480px) {
    .dialog {
        padding: 3rem 4rem;
    }
}

/**Tablet Upwards**/
@media only screen and (min-width: 600px) {
    .groupauth-landing-screen {
        align-items: center;
        justify-content: center;
        background-color: #002E73;
        background-size: cover;
    }

    .page {
        flex: 1;
        justify-content: center;
    }

    .dialog {
        padding: 3rem 4.5rem 3.75rem 4.5rem;
        width: 30rem;
        box-shadow: var(--light);
        border-radius: 0.5rem;
        background-color: var(--neutral-0);
        max-width: 30rem;
    }

    .footer {
        background-color: var(--neutral-50);
    }
}

/**--------------------------
        Content
         --------------------------**/

.dialog-content {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem; /* 120% */
}

.has-backlink .header {
    padding: 3rem 0 0 0;
}


.header2 {
    font-size: 1.25rem;
}

.text-block {
    line-height: 1.5rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
}

.form {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.cancel-form {
    padding: 0.5rem 0 0;
    align-self: stretch;
    display: flex;
    justify-content: center;
}

.help {
    line-height: 1.5rem;
    padding: 1.5rem 0 0;
    align-self: stretch;
    display: flex;
    justify-content: center;
}

.having-trouble-signing {
    white-space: pre-wrap;
}

.groupauth-landing-screen a {
    text-decoration: underline;
    white-space: pre-wrap;
    font-weight: 600;
    color: var(--primary-500);
}

.footer {
    width: 100%;
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    background-color: #F7F7F7;
}

/**--------------------------
        B2C
         --------------------------**/

#api {
    display: table;
    margin: 0;
    width: 100%;
}

    #api ul li {
        display: inline;
        list-style-type: none;
    }

/**--------------------------
        B2C Buttons
         --------------------------**/
button {
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    min-height: 2.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    background-color: var(--neutral-100);

    &:hover {
        background-color: var(--neutral-200);
    }

    &:active {
        background-color: var(--neutral-300);
    }
}

#api #continue:active,
.verifyCode:active {
    background-color: var(--brand-button-active);
}

/**--------------------------
        B2C Social Buttons
         --------------------------**/

#api .accountButton,
.accountButton {
    margin-top: 1.5rem !important;
    background-color: var(--neutral-0);
    border: 1px solid var(--neutral-400);

    &:hover {
        border-color: var(--neutral-800);
        background-color: var(--neutral-50);
    }

    &:active {
        background-color: var(--neutral-100);
    }
}

    #api .accountButton::before,
    .accountButton::before {
        margin: -2px 0 0 -2rem;
        position: absolute;
    }

#GoogleExchange::before {
    content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjM3NV8yODIwOSkiPgogICAgICAgIDxwYXRoIGQ9Ik0xMiA1Ljk1ODMzQzEzLjQ3NSA1Ljk1ODMzIDE0Ljc5NTggNi40NjY2NyAxNS44Mzc1IDcuNDU4MzNMMTguNjkxNyA0LjYwNDE3QzE2Ljk1ODMgMi45OTE2NyAxNC42OTU4IDIgMTIgMkM4LjA5MTY1IDIgNC43MTI0OCA0LjI0MTY3IDMuMDY2NjUgNy41MDgzM0w2LjM5MTY1IDEwLjA4NzVDNy4xNzkxNSA3LjcxNjY3IDkuMzkxNjUgNS45NTgzMyAxMiA1Ljk1ODMzWiIgZmlsbD0iI0VBNDMzNSIvPgogICAgICAgIDxwYXRoIGQ9Ik0yMS41NzUgMTIuMjI5MUMyMS41NzUgMTEuNTc1IDIxLjUxMjUgMTAuOTQxNiAyMS40MTY3IDEwLjMzMzNIMTJWMTQuMDkxNkgxNy4zOTE3QzE3LjE1IDE1LjMyNSAxNi40NSAxNi4zNzUgMTUuNCAxNy4wODMzTDE4LjYyMDggMTkuNTgzM0MyMC41IDE3Ljg0MTYgMjEuNTc1IDE1LjI2NjYgMjEuNTc1IDEyLjIyOTFaIiBmaWxsPSIjNDI4NUY0Ii8+CiAgICAgICAgPHBhdGggZD0iTTYuMzg3NSAxMy45MTI1QzYuMTg3NSAxMy4zMDg0IDYuMDcwODMgMTIuNjY2NyA2LjA3MDgzIDEyQzYuMDcwODMgMTEuMzMzNCA2LjE4MzMzIDEwLjY5MTcgNi4zODc1IDEwLjA4NzVMMy4wNjI1IDcuNTA4MzZDMi4zODMzMyA4Ljg1ODM2IDIgMTAuMzgzNCAyIDEyQzIgMTMuNjE2NyAyLjM4MzMzIDE1LjE0MTcgMy4wNjY2NyAxNi40OTE3TDYuMzg3NSAxMy45MTI1WiIgZmlsbD0iI0ZCQkMwNSIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMiAyMkMxNC43IDIyIDE2Ljk3MDggMjEuMTEyNSAxOC42MjA4IDE5LjU3OTJMMTUuNCAxNy4wNzkyQzE0LjUwNDIgMTcuNjgzMyAxMy4zNSAxOC4wMzc1IDEyIDE4LjAzNzVDOS4zOTE2NyAxOC4wMzc1IDcuMTc5MTcgMTYuMjc5MiA2LjM4NzUgMTMuOTA4M0wzLjA2MjUgMTYuNDg3NUM0LjcxMjUgMTkuNzU4MyA4LjA5MTY3IDIyIDEyIDIyWiIgZmlsbD0iIzM0QTg1MyIvPgogICAgPC9nPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwMF8yMzc1XzI4MjA5Ij4KICAgICAgICAgICAgPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiAyKSIvPgogICAgICAgIDwvY2xpcFBhdGg+CiAgICA8L2RlZnM+Cjwvc3ZnPgo=);
}

#AzureADCommonExchange::before {
    content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTEuNSAyLjVIMi41VjExLjVIMTEuNVYyLjVaIiBmaWxsPSIjRjI1MDIyIi8+CiAgICA8cGF0aCBkPSJNMTEuNSAxMi41SDIuNVYyMS41SDExLjVWMTIuNVoiIGZpbGw9IiMwMEE0RUYiLz4KICAgIDxwYXRoIGQ9Ik0yMS41IDIuNUgxMi41VjExLjVIMjEuNVYyLjVaIiBmaWxsPSIjN0ZCQTAwIi8+CiAgICA8cGF0aCBkPSJNMjEuNSAxMi41SDEyLjVWMjEuNUgyMS41VjEyLjVaIiBmaWxsPSIjRkZCOTAwIi8+Cjwvc3ZnPgo=);
}


/**--------------------------
        B2C Wizard Button
         --------------------------**/

#api #continue,
.verifyCode {
    margin-top: 1.5rem !important;
    background-color: var(--brand-button);
    color: var(--neutral-0);

    &:hover {
        background-color: var(--brand-button-hover);
    }

    &:active {
        background-color: var(--brand-button-active);
    }
}

#api .sendNewCode {
    margin-top: 1.5rem !important;
}

#api .sendCode {
    visibility: hidden;
}

#api .changeClaims {
    visibility: hidden;
}

#cancel {
    position: absolute;
    padding: 0.5rem 1.5rem;
    background: none;
    background-image: url(img/chevron-left.svg);
    background-repeat: no-repeat;
    background-position-y: 50%;
    border: 0;
    top: 0;
    left: 0;
    box-shadow: none;
    text-align: left;
    font-weight: 400;

    &:active {
        background-color: var(--neutral-100);
    }
}

label {
    font-weight: 600;
    line-height: 2rem;
}

#attributeList ul li input {
    min-height: 3rem;
    padding-right: 2.5rem;
    width: 100%;
    border-radius: 0.5rem;
    text-indent: 1.5rem;
    border: 1.5px solid var(--neutral-400);
}

    #attributeList ul li input::placeholder {
        font-style: italic;
    }

#attributeList ul li .attrEntry.validate input.invalid,
#attributeList ul li .attrEntry.validate input:invalid {
    border: 1px solid var(--error);
}

.error {
    color: var(--error);
    padding-bottom: 4px;
}


    .error.itemLevel.show {
        display: block !important;
    }

        .error.itemLevel.show + input {
            border-color: var(--error) !important;
        }

#api .TextBox {
    display: block !important;
    padding: 1rem 0 0 0;
}

/**--------------------------
        Hidden Things
         --------------------------**/

.helpLink,
.intro,
#attributeList ul .email,
#emailVerificationControl_success_message {
    display: none !important;
}

#btnSignInWithPassword {
    text-decoration: none;
    color: black;
}

#simplemodal-container,
.simplemodal-data {
    all: unset;
    display: none !important;
    color: #0b0b0b !important;
}

#simplemodal-overlay {
    all: unset;
    background-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    #simplemodal-overlay::before {
        content: "";
        box-sizing: border-box;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
        margin-bottom: 15px;
        display: block;
    }

    #simplemodal-overlay::after {
        content: "Please wait...";
        color: #333 !important;
        font-family: Arial, sans-serif;
        font-size: 1em;
        font-weight: 400 !important;
        padding-top: 24px !important;
        display: block;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.verifying-modal {
    display: none;
}

#Refresh {
    display: none;
    visibility: hidden;
}

#btnBack, #emailText {
    margin-right: 7px;
    cursor: pointer;
    text-decoration: none;
    color: #303030;
    font-weight: normal;
}

.divider, .create {
    display: none;
    visibility: hidden;
}

#password {
    min-height: 2.5rem;
    padding-right: 2.5rem;
    width: 100%;
    border-radius: 0.5rem;
    text-indent: 1.5rem;
    border: 1.5px solid var(--neutral-400);
}

#next {
    margin-top: 1.5rem !important;
    background-color: var(--brand-button);
    color: var(--neutral-0);
}

.claims-provider-list-text-links-bottom-under-form {
    text-align: center;
    padding: 2rem 0 0;
}

.password-complexity {
    border-left: 8px solid #2177C2;
    border-radius: 4px;
    background-color: #EBF1FF;
    padding: 16px;
}