@import url("global.css");

:root {
    /*--login-primary: #0067B8;*/         
    --login-primary: #000000;
    /*--login-header-bg: var(--login-primary);*/    
    --login-header-bg: #FFFFFF;
    --login-header-justify-content: center;
}

body {
    #oktaControl {
        display: grid;
        grid-template-areas: "wc" "vc";
        /* Reduce space between top of screen and control */
        margin: 30px 15px;
        @media (min-width: 768px) {
            margin: 60px 30px;
        }

        #widget-container {
            grid-area: wc;
            display: grid;
            grid-template-areas: "osi" "cap";
            &:not(:has(#clientAdditionalPanel)){
                grid-template-areas: "osi";
            }
            @media (min-width: 768px) {
                grid-template-areas: "osi cap";
                &:not(:has(#clientAdditionalPanel)){
                    grid-template-areas: "osi";
                }
            }
            max-width: 1080px;
            margin: 0 auto;
            

            /* Add Border to OKTA Control */
            border-width: 4px;
            border-style: solid;
            border-color: var(--login-primary);
            border-radius: 5px;
            color: black;

            #okta-sign-in.auth-container {
                grid-area: osi;

                width: auto;
                margin: 0;
                border: 0;
                border-radius: 0;

                & .okta-sign-in-header {
                    padding: 10px 20px 10px;
                    min-height: 60px;
                    display: flex;
                    justify-content: var(--login-header-justify-content);
                    align-items: center;
                    background-color: var(--login-header-bg);

                    .auth-org-logo {
                        max-width: 100%;
                    }
                }
                & .link.js-forgot-password,
                & .button-primary {
                    background-color: var(--login-primary) !important;
                    &:hover {
                        background-color: var(--login-primary) !important;
                        -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.50);
                    }
                }
                & .auth-content {
                    /*max-width: fit-content;*/
                    max-width: 100%;
                }
                & .auth-footer {
                    font-size: 1rem;
                    color: black;
                }
            }

            #clientAdditionalPanel {
                grid-area: cap;
                background-color: var(--login-primary);
                color: white;

                #additionalLoginInstructions {
                    padding: 1rem;

                    ul {
                        list-style-position: inside;
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                    }
                    a {
                        color: white;
                        text-decoration: underline;
                    }
                }
            }
        }

        #versionContainer {
            grid-area: vc;
            /* Application Copyright, Privacy Policy, Terms and Conditions */
            text-align: center;
            font-size: 1rem;
            padding: .5rem;
        }
    }
}



    /* Reduce space between divider and control */
    #okta-sign-in .form-divider {
        margin-bottom: 15px;
    }

    /* Hide Login Help Link */
    #okta-sign-in .js-help-link {
        display: none;
    }

    /* Allow for Larger Logo Image */
    #okta-sign-in .auth-org-logo {
        max-width: 300px;
        max-height: 80px;
    }

    /* Reduce Control Header Padding */
    #okta-sign-in .auth-header {
        padding: 10px 10px 70px;
    }

    /* Reduce Control Content Padding */
    #okta-sign-in .auth-content {
        padding: 10px 20px 10px;
    }

    /* Adjust Control Footer Padding to Add a little space between button and footer to remove from shadow */
    #okta-sign-in .auth-footer {
        padding-top: 8px;
    }

    /* Reduce Form Bottom Padding */
    #okta-sign-in .o-form-theme {
        padding-bottom: 0px;
    }

    /* Increase Title Font Size */
    #okta-sign-in .o-form-head {
        font-size: 24px;
        line-height: 1;
        margin-top: 50px;
    }

    /* Hide Input labels */
    #okta-sign-in.auth-container .okta-form-label {
        display: none;
    }

    /* Change Explanation Color */
    #okta-sign-in .o-form-explain {
        color: #000000;
    }

    /* Hide Control Scrollbars, remove padding above logo */
    #okta-sign-in.auth-container.main-container {
        overflow: hidden;
        padding-top: 0px;
    }

    /* Change Title Font */
    #okta-sign-in.auth-container h2, #okta-sign-in.auth-container h3 {
        font-weight: 900;
        color: black;
    }

    /* Change OKTA Button Focus */
    #okta-sign-in.auth-container input[type=button]:focus, #okta-sign-in.auth-container input[type=submit]:focus {
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        border-color: rgba(0,0,0,0.70);
    }

    /* Add separation between input controls */
    #okta-sign-in .o-form-input {
        padding-top: 8px;
    }

    /* reduce space between button and help */
    #okta-sign-in .o-form-button-bar {
        padding: 0 0 8px;
    }

    /* Align Verify Pass code button */
    #okta-sign-in .mfa-verify-passcode .link-button {
        float: right;
        margin-top: 8px;
    }

    /* add separation between button and email notification */
    #okta-sign-in .mfa-send-email-content {
        padding-bottom: 10px;
    }

#help-links-container {
    text-align: right;
    float: right;
    clear: both;
    list-style: none;
}

/* Change Forgot Button appearance */
.js-forgot-password {
    display: block;
    background-color: #000000 !important;
    color: #FFF !important;
    text-decoration: none !important;
    padding: 8px !important;
    margin: 8px 0 8px !important;
    border-radius: 3px;
}

    /* Change Forgot Button Hover */
    .js-forgot-password:hover {
        box-shadow: 8px 6px 16px 1px rgba(0,0,0,0.70);
        -webkit-box-shadow: 8px 6px 16px 1px rgba(0,0,0,0.70);
        -moz-box-shadow: 8px 6px 16px -px rgba(0,0,0,0.70);
    }

    /* Change Forgot Button Focus */
    .js-forgot-password:focus {
        box-shadow: 0 0 8px #51cbee;
    }

/* Change Unlock Account appearance */
.js-unlock {
    display: block;
    background-color: #000000 !important;
    color: #FFF !important;
    text-decoration: none !important;
    padding: 8px !important;
    margin: 8px 0 8px !important;
    border-radius: 3px;
}

    /* Change Unlock Account Hover */
    .js-unlock:hover {
        box-shadow: 8px 6px 16px 1px rgba(0,0,0,0.70);
        -webkit-box-shadow: 8px 6px 16px 1px rgba(0,0,0,0.70);
        -moz-box-shadow: 8px 6px 16px -px rgba(0,0,0,0.70);
    }

    /* Change Unlock Account Focus */
    .js-unlock:focus {
        box-shadow: 0 0 8px #51cbee;
    }

/* Change Register New User appearance */
.registration-link {
    display: block;
    background-color: #000000 !important;
    color: #FFF !important;
    text-decoration: none !important;
    padding: 8px !important;
    margin: 8px 0 8px !important;
    border-radius: 3px;
    float: right;
}

    /* Change Register New User Hover */
    .registration-link:hover {
        box-shadow: 8px 6px 16px 1px rgba(0,0,0,0.70);
        -webkit-box-shadow: 8px 6px 16px 1px rgba(0,0,0,0.70);
        -moz-box-shadow: 8px 6px 16px -px rgba(0,0,0,0.70);
    }

    /* Change Register New User Focus */
    .registration-link:focus {
        box-shadow: 0 0 8px #51cbee;
    }

/* User Registration Section */
#okta-sign-in .registration-container {
    margin-top: 90px;
}

    #okta-sign-in .registration-container .content-container {
        padding: 10px 0 !important;
    }



#okta-sign-in i {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* User name Icon */
.o-form-input .fa-user:before {
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    left: 0px;
    top: 0px;
    padding: .25rem .5rem;
    font-size: 1.25rem;
    align-items: center;
}

/* Password Icon */
.o-form-input .fa-lock:before {
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    left: 0px;
    top: 0px;
    padding: .25rem .5rem;
    font-size: 1.25rem;
    align-items: center;
}

/* MFA Icon */
.o-form-input .fa-key:before {
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    left: 0px;
    top: 0px;
    padding: .25rem .5rem;
    font-size: 1.25rem;
    align-items: center;
}