/*------------------------------------------------------------------------------------------
   GLOBAL
    Body, Errors, Anchor Color
------------------------------------------------------------------------------------------*/
body {
    color: Black;
    font-weight: normal;
    font-family: 'Open Sans',Verdana,Arial,Helvetica,sans-serif;
    /*background: #87ADC4 url(../../Static/Images/loginbackground.gif) repeat-x;*/
    background: linear-gradient(to bottom, #003b62 0%, #99b9ce 100%);
}

div.psLoginError {
    margin: 5px 0 15px 25px;
    color: #D0021B;
}

a {
    color: #0066cc !important;
}

/*------------------------------------------------------------------------------------------
   GLOBAL
    Button Hover Effects
------------------------------------------------------------------------------------------*/
button {
    transition: background-color 0.1s ease-in-out, border 0.1s ease-in-out, box-shadow 0.1s ease-in-out !important;
}

    button:hover,
    button:focus {
        background-color: #ccc !important;
        border: 1px solid #40525d;
        box-shadow: 3px 3px 3px rgba(150, 150, 150, 0.35) !important;
    }

/*------------------------------------------------------------------------------------------
   GLOBAL
    Buttons
------------------------------------------------------------------------------------------*/
button.psLoginButton { /* grows in height when text wraps */
    background-color: #fff;
    border: 1px solid #87adc4;
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(150, 150, 150, 0.15);
    display: flex;
    align-items: center;
    width: 175px;
    padding: 8px;
    min-height: 32px;
    height: auto;
}

    button.psLoginButton img { /* icon stays locked at left edge */
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin-right: 0px !important;
    }

    button.psLoginButton span { /* text fills remaining space & is fully centered */
        flex: 1 1 auto;
        display: flex;
        /*        justify-content: center;*/
        align-items: center;
        text-align: center;
        white-space: normal; /* allow wrapping */
        word-break: break-word;
        padding-left: 6px;
    }

    button.psLoginButton:not(:last-child) {
        margin-bottom: 5px;
    }

/*------------------------------------------------------------------------------------------
   Outermost Wrapper (DOM starts here)
------------------------------------------------------------------------------------------*/
div.psLoginWrapper {
    margin: 0 auto;
    margin-top: 75px;
    padding: 0 0 0 0;
    border: 1px solid black;
    -moz-box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.35);
    width: 600px;
    background-color: #fff;
    border-radius: 5px;
}

/*------------------------------------------------------------------------------------------
   Individual sections under psLoginWrapper (inherited by all sections)
------------------------------------------------------------------------------------------*/
div.psLoginSection {
    position: relative;
    background-color: white;
    min-height: 120px;
    padding: 5px;
}

/*------------------------------------------------------------------------------------------
   psLoginSection dividers
------------------------------------------------------------------------------------------*/
div.psLoginSectionDividerHorizontal {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.25);
    margin: 10px 15px;
}

/*------------------------------------------------------------------------------------------
   DOM ORDERING STARTS HERE

   1. Customer Branding
    Container, logo, splash text
------------------------------------------------------------------------------------------*/
div.psLoginSection.Branding {
    position: relative;
    background-color: white;
    /*    height: 245px;*/
    padding: 5px;
    margin-top: 5px;
}

    div.psLoginSection.Branding > div.psLoginBrandingLogoContainer { /* logo */
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 5px;
        min-height: 150px;
        max-height: 250px;
    }

        /*div.psLoginSection.Branding > div.psLoginBrandingLogoContainer img {
            height: 200px;
            width: auto;
        }*/

        div.psLoginSection.Branding > div.psLoginBrandingLogoContainer img { /* prevent wide logos from overflowing */
            max-width: 100%;
            height: auto;
            max-height: 250px;
        }

    div.psLoginSection.Branding > div.psLoginBrandingText { /* welcome splash text */
        text-align: center;
        margin-top: 20px;
        font-size: 13px;
    }

/*------------------------------------------------------------------------------------------
   2a. Main section
    Outer padded wrapper + child flexbox
------------------------------------------------------------------------------------------*/
div.psLoginSection.Creds {
    display: flex;
    align-items: center;
    height: auto; /* let flex grow if needed */
    min-height: 200px; /* ensure we dont shrink though */
    margin: 0 15px;
}

    div.psLoginSection.Creds > div.psLoginContainerMain {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: auto; /* let flex grow if needed */
        min-height: 200px; /* ensure we dont shrink though */
    }

/*------------------------------------------------------------------------------------------
   2c. Main section
    Login form (actual element - triggers login submission)
------------------------------------------------------------------------------------------*/
form#psLoginForm {
    width: 415px;
}

/*------------------------------------------------------------------------------------------
   2d. Main section
    Login form child container
------------------------------------------------------------------------------------------*/
div.psLoginContainerMain > form#psLoginForm > div.psLoginFormInner {
    display: flex;
    flex-direction: column;
}

/*------------------------------------------------------------------------------------------
   2e. Main section
    Login method radio buttons
------------------------------------------------------------------------------------------*/
.psLoginSectionHeader {
    margin: 0 0 4px 0;
    font-weight: bold;
}

div.psLoginFormInner > div.psLoginMethodSelect {
    margin: 0 10px 10px 0;
}

    div.psLoginFormInner > div.psLoginMethodSelect label {
        display: block;
        margin-right: 15px;
    }

        div.psLoginFormInner > div.psLoginMethodSelect label + label {
            padding-top: 9px;
        }

/*------------------------------------------------------------------------------------------
   2f. Main section
    Email + password fields
------------------------------------------------------------------------------------------*/
div.psLoginFormFields {
    align-items: start;
}

    div.psLoginFormFields input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

        div.psLoginFormFields input[type="text"],
        div.psLoginFormFields input[type="password"] {
            margin: 5px 10px 5px 15px;
        }

/*------------------------------------------------------------------------------------------
   2g. Main section
    Remember me checkbox + login buttons
------------------------------------------------------------------------------------------*/
div.psLoginFormInner > div.psLoginFormActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    vertical-align: middle;
    margin: 5px 0 0 0;
}

    div.psLoginFormActions > div.psLoginRememberMe {
        margin-top: 5px;
    }

        div.psLoginFormActions > div.psLoginRememberMe input {
            vertical-align: sub;
        }

    div.psLoginFormActions > div,
    div.psLoginFormActions > button {
        flex: 0 0 auto; /* This prevents the children from growing or shrinking */
    }

    div.psLoginFormActions > button#btnLogonExternal { /* Hide this button intially until JS shows it (when SSO radio selected) */
        display: none;
        margin-top: 8px;
        margin-left: 12px;
        width: auto;
    }

/*------------------------------------------------------------------------------------------
   Main section
    Splitter (UNUSED -- DISABLED -- TBD)
------------------------------------------------------------------------------------------*/
/*div.psLoginSectionDividerVertical {
    width: 1px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.25);
    margin: 0 15px;
    align-self: center;
}*/

/*------------------------------------------------------------------------------------------
   2h. Main section
    Other Options (right side) -- links to Portal, Reset Pass, Contact, Privacy Policy
------------------------------------------------------------------------------------------*/
div.psLoginContainerMain > div.psLoginOtherOptions {
    display: flex;
    align-items: flex-start;
/*    justify-content: center;*/
    flex-direction: column;
}

    div.psLoginOtherOptions a {
        display: inline-block;
        margin-left: 15px;
    }

        div.psLoginOtherOptions a img {
            width: 16px;
            height: auto;
            vertical-align: bottom;
            margin-right: 4px;
        }

        div.psLoginOtherOptions a:not(:last-child) {
            margin-bottom: 8px;
        }

    div.psLoginOtherOptions div.Divider {
        height: 14px;
    }

    /*div.psLoginOtherOptions div.Divider {
        width: 10px;
        height: 2px;
        background: rgba(0, 0, 0, 0.075);
        margin: 2px 0 8px 18px;*/ /* align left edge with imgLink icons */
    /*}*/

/*------------------------------------------------------------------------------------------
   3. Notice section
    Authorized Use Only, copyright, trademark text
------------------------------------------------------------------------------------------*/
div.psLoginSection.Notice {
    margin: 10px;
    height: auto; /* let browser calculate height from content */
    min-height: 0;
}

/*------------------------------------------------------------------------------------------
   Logon Dropdown button (used to switch between BA and FBS)
    'div.btnSplit' is the wrapper
    Its child button will be given class 'NoDropdown' when the dropdown is not in the HTML, which rounds the right edge's corners

    BT 2024-01-18: this code was cloned from Priority_web and has *not* been modified.
------------------------------------------------------------------------------------------*/
div.btnSplit {
    float: right;
    margin-right: 5px;
}

    div.btnSplit button {
        position: relative;
        margin: 0;
        padding: 0 6px 0 24px;
        box-sizing: unset;
        float: left;
        font-size: 11px;
        color: black;
        border: 1px solid #87adc4;
        box-shadow: 3px 3px 3px rgba(150, 150, 150, 0.25);
        height: 31px;
    }

        div.btnSplit button.btnMain:not(.NoDropdown) {
            border-right: none;
            border-top-right-radius: unset;
            border-bottom-right-radius: unset;
        }

        div.btnSplit button.btnDrop {
            padding: 0 10px 0 10px;
            border-left: 1px dotted gray;
            border-right: 1px solid #87adc4;
            border-top-left-radius: unset;
            border-bottom-left-radius: unset;
            color: #555;
            font-size: 10px;
        }

        div.btnSplit button > img {
            width: 16px;
            height: 16px;
            position: absolute;
            left: 4px;
            top: 8px;
        }

        div.btnSplit button.btnMain:hover,
        div.btnSplit button.btnDrop:hover,
        div.btnSplit button.btnMain:hover + div.Dropdown > button.btnDrop {
            background-color: #ccc;
        }

    div.btnSplit div.Dropdown {
        display: inline-block;
    }

    div.btnSplit div.Content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 80px;
        z-index: 1000;
        opacity: 0;
        animation-name: fadeIn;
        animation-duration: 0.15s;
        animation-fill-mode: forwards; /* Ensures the final state (opacity: 1) is retained after the animation */
    }

        div.btnSplit div.Content a {
            color: black;
            text-decoration: none;
            display: block;
            height: 20px;
            position: relative;
            padding: 5px 0 0 24px;
        }

            div.btnSplit div.Content a img {
                width: 16px;
                height: 16px;
                position: absolute;
                left: 4px;
                top: 4px;
            }

            div.btnSplit div.Content a:hover {
                background-color: #ddd
            }

    div.btnSplit button.btnDrop:hover {
        border-left: 1px solid #a0a0a0;
    }

        div.btnSplit button.btnDrop:hover + div.Content,
        div.btnSplit button.btnDrop + div.Content:hover {
            display: block;
            opacity: 1;
        }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}