/*****
* Custom Styles for Okta Sign-In Widget (SIW)
* -------------------------------------------
* This CSS customizes the appearance of the Okta SIW within the application.
* It scopes all styles to the #okta-login-container to avoid global overrides.
*****/

body {
    font-family: var(--caqh-font-family);
}

/* Scope to Okta Sign In Widget (SIW) using nesting */
#okta-login-container {
    margin-bottom: 64px;

    /* 1. SIW Global */
    & #okta-sign-in.auth-container.main-container {
        background-color: var(--caqh-background-blue);
        border-width: 0;
        margin: 0;
        box-shadow: none;
        overflow-y: hidden;

        /* 1.1. Typography */
        & a, & abbr, & acronym, & address, & applet, & b, & big, & blockquote, & body, & caption, & center, & cite, & code, & dd, & del, & dfn, & div, & dl, & dt, & em, & fieldset, & form, & h1, & h2, & h3, & h4, & h5, & h6, & html, & i, & iframe, & img, & ins, & kbd, & label, & legend, & li, & object, & ol, & p, & pre, & q, & s, & samp, & small, & span, & strike, & strong, & sub, & sup, & table, & tbody, & td, & tfoot, & th, & thead, & tr, & tt, & u, & ul, & var {
            font-family: var(--caqh-font-family);
        }

        /* 2. SIW Header */
        & > div.okta-sign-in-header.auth-header {
            border-bottom: none;
        }

        /* 3. SIW Content */
        /* Add a little space to accomodate error icons or other things that overflow the container */
        & > div.auth-content {
            padding: 2px;
        }

        /* 3.1. Content Header */

        /* None yet */

        /* 3.2. Content Body */
        & .o-form-content {
            margin-top: 20px;
        }

        /* 3.2.1. Inputs & Labels */
        & .okta-form-label, & label {
            color: var(--caqh-grey);
            font-size: 12px;
            transition: all 0.1s linear;
            font-weight: 600;
            letter-spacing: 0.25px;
            padding: 0px;
        }

        & .o-form .o-form-input .o-form-control {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid var(--caqh-grey);
            width: 100%;
            font-family: var(--caqh-font-family);
            font-size: 18px;
            color: var(--caqh-black);
            padding: 0px;
            border-radius: 0px;
            box-shadow: none;
            caret-color: var(--caqh-brand-blue);
            height: 34px;
            /* Remove bottom border on select input - Okta uses jQuery Chosen combobox styles instead */
            &:has(select) {
                border-bottom: none;
            }
        }

        & .o-form .input-fix input[type=number],
        & .o-form .input-fix input[type=password],
        & .o-form .input-fix input[type=tel],
        & .o-form .input-fix input[type=text],
        & .o-form .input-fix input[type=textbox] {
            font-family: var(--caqh-font-family);
            font-size: 18px;
            padding-left: 0px;
            height: 34px;
            border-radius: 0px;
        }

        & .o-form .input-fix input[type=number]:focus,
        & .o-form .input-fix input[type=password]:focus,
        & .o-form .input-fix input[type=tel]:focus,
        & .o-form .input-fix input[type=text]:focus,
        & .o-form .input-fix input[type=textbox]:focus,
        & .o-form .input-fix.o-form-has-errors input[type=number]:focus,
        & .o-form .input-fix.o-form-has-errors input[type=password]:focus,
        & .o-form .input-fix.o-form-has-errors input[type=tel]:focus,
        & .o-form .input-fix.o-form-has-errors input[type=text]:focus,
        & .o-form .input-fix.o-form-has-errors input[type=textbox]:focus {
            border-bottom: 2px solid var(--caqh-brand-blue);
            padding-bottom: 4px;
            background-color: var(--caqh-e4f1ff);
            border-radius: 0px;
        }

        & .o-form .input-fix.o-form-has-errors input[type=number],
        & .o-form .input-fix.o-form-has-errors input[type=password],
        & .o-form .input-fix.o-form-has-errors input[type=tel],
        & .o-form .input-fix.o-form-has-errors input[type=text],
        & .o-form .input-fix.o-form-has-errors input[type=textbox] {
            background-color: transparent;
            border: none;
            border-bottom: 2px solid var(--caqh-system-error-red);
            width: 100%;
            font-family: var(--caqh-font-family);
            font-size: 18px;
            color: var(--caqh-system-error-red);
            padding: 8px 0px 0px;
            border-radius: 0px;
            box-shadow: none;
        }

        & .o-form-explain.o-form-input-error {
            color: var(--caqh-system-error-red);
        }

        & .help-wrap .infobox.infobox-error:before, & .infobox-error:before, & .infobox.infobox-subtle.infobox-error:before {
            background-color: var(--caqh-system-error-red);
        }

        & .error-16-red:before, & .error-16-small:before {
            color: var(--caqh-system-error-red);
        }

        & .focused-input:focus,
        & .link.help:focus,
        & input[type=radio] + label:focus,
        & input[type=text]:focus {
            box-shadow: none;
        }

        /* Google authenticator secret key disabled input field */
        .o-form-disabled, .o-form-saving .o-form-input > :not(.o-form-disabled) {
            opacity: .8;
            margin-top: 8px;
        }

        /* 3.2.2. Checkboxes */
        & .custom-checkbox input[type="checkbox"] {
            display: inline;
            width: 22px;
            height: 22px;
            box-shadow: none;
            margin-right: 12px;
            border-radius: 0;
            accent-color: #0072CD;
            cursor: pointer;
            opacity: 1;
            top: 3px;
            & + label {
                opacity: 1;
                color: var(--caqh-black);
                font-size: 18px;
                font-weight: 500;
                margin-left: 34px;
                background: none;
            }
        }

        /* 3.2.3. Select/Combobox */
        .chzn-single {
            border: none;
            border-bottom: 1px solid var(--caqh-grey);
            border-radius: 0px;
            background: #f1f8ff;
            padding-left: 0px;
            &:hover {
                border-top: none;
                border-left: none;
                border-right: none;
            }
            &:focus, &:focus-visible & > span, & > span:focus, & > span:focus-visible {
                box-shadow: none;
            }
        }

        .chzn-search {
            background: #f1f8ff;
            font-family: var(--caqh-font-family);
            &:focus {
                box-shadow: none;
            }
        }

        .chzn-drop, .chzn-drop:focus {
            box-shadow: none;
        }

        [class^="chzn"]:focus {
            box-shadow: none;
        }

        select.chzn-done, ul.chzn-results {
            font-family: var(--caqh-font-family);
        }

        .chzn-container.chzn-container-single {
            box-shadow: none;
            font-family: var(--caqh-font-family);
        }

        .chzn-container.chzn-container-single.closed {
            &:focus, &:focus-within {
                box-shadow: none;
            }
        }

        .chzn-container.chzn-container-single.chzn-container-active.chzn-with-drop {
            box-shadow: none;
            & div, & span, & applet, & object, & iframe, & h1, & h2, & h3, & h4, & h5, & h6, & p, & blockquote, & pre, & a, & abbr, & acronym, & address, & big, & cite, & code, & del, & dfn, & em, & img, & ins, & kbd, & q, & s, & samp, & small, & strike, & strong, & sub, & sup, & tt, & var, & b, & u, & i, & center, & dl, & dt, & dd, & ol, & ul, & li, & fieldset, & form, & label, & legend, & table, & caption, & tbody, & tfoot, & thead, & tr, & th, & td {
                font-family: var(--caqh-font-family);
            }
        }

        /* 3.2.4. Radio Buttons */
        .custom-radio {
            /* Okta verify can't scan options & any others */
            & label {
                display: block;
                padding-left: 22px;
                margin-top: 8px;
                background: none;
                font-size: 14px;
                letter-spacing: 0px;
                &:focus, &.focus {
                    box-shadow: none;
                }
            }
            & input {
                opacity: 1;
                top: 0px;
                height: 16px;
                width: 16px;
                &:focus, &.focus {
                    box-shadow: none;
                }
            }
            /* Security question */
            & label[data-se-for-name*="sub_schema_local_credentials"] {
                display: none;
            }
            & input[data-se-name*="sub_schema_local_credentials"] {
                opacity: 0;
            }
        }

        /* 3.2.3. Buttons */
        & .button.button-primary, & .button-primary {
            background: var(--caqh-brand-blue);
            transition: 0.3s background ease-in;
            border: none;
            font-size: 20px;
            font-weight: 500;
            color: var(--caqh-white);
            padding: 0px 64px 2px;
            margin-top: 48px;
            border-radius: 24px 0 0 0;
            cursor: pointer;
            font-family: var(--caqh-font-family);
            box-shadow: none;
            height: 48px;
            &:focus {
                background: var(--caqh-brand-blue);
                transition: 0.3s background ease-out;
                border: none;
                outline: 3px solid var(--caqh-00d9ff);
                font-family: var(--caqh-font-family);
                box-shadow: none;
            }
            &:hover {
                background: var(--caqh-brand-dark-blue);
                transition: 0.3s background ease-out;
                border: none;
                font-size: 20px;
                font-weight: 500;
                color: var(--caqh-white);
                box-shadow: 0, 0, 4px, rgba(#488af3,0.2);
            }

            &.send-push.link-button-disabled {
                background: #BFD9EE;
                color: #7A7A7A;
                font-weight: 700;
                padding: 0px 64px 2px;
                width: auto;
                &:hover, &:focus {
                outline: none;
                    cursor: default;
                }
            }

            &.skip-all.link-button {
                padding: 4px 64px 2px;
            }

        }

        & input[type=button], & input[type=submit] {
            font-family: var(--caqh-font-family);
            width: auto;
        }

        /* 3.2.4. Etc. */
        & .authenticator-row .authenticator-button .button {
            border-radius: 4px;
            background: var(--caqh-white);
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.20);
            border: none;
            color: var(--caqh-0055a3);
            font-family: var(--caqh-font-family);
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            padding: 9px 10px 10px;
            height: 37px;
            line-height: normal;
            &:focus, &:focus-visible {
                outline: 2px solid var(--caqh-00d9ff);
                background: var(--caqh-white);
            }
            &:hover {
                background: var(--caqh-e4f1ff);
            }
        }

        & .o-form .o-form-fieldset:last-child {
            margin-bottom: 0px;
        }

        & .password-authenticator--list {
            list-style: inside;
        }

        /* 3.3. Content Footer */
        &.auth-container .link,
        &.auth-container .link:active,
        &.auth-container .link:hover,
        &.auth-container .link:link,
        &.auth-container .link:visited {
            font-size: 18px;
            font-weight: 500;
            color: var(--caqh-brand-blue);
        }
    }
}

/* 4. Global scope for elements that are part of SIW but fall outside scope in DOM */
.chzn-container.chzn-container-single.chzn-container-active.chzn-with-drop {
    box-shadow: none;
    & div, & span, & applet, & object, & iframe, & h1, & h2, & h3, & h4, & h5, & h6, & p, & blockquote, & pre, & a, & abbr, & acronym, & address, & big, & cite, & code, & del, & dfn, & em, & img, & ins, & kbd, & q, & s, & samp, & small, & strike, & strong, & sub, & sup, & tt, & var, & b, & u, & i, & center, & dl, & dt, & dd, & ol, & ul, & li, & fieldset, & form, & label, & legend, & table, & caption, & tbody, & tfoot, & thead, & tr, & th, & td {
        font-family: var(--caqh-font-family);
    }
}

.chzn-search input {
    font-family: var(--caqh-font-family);
}