/**********************************************************
* Existing Styling for 'Unsupported Browser Version' Warning.
**********************************************************/
#unsupported-browser-version-warning {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
}

    #unsupported-browser-version-warning > div {
        padding: 10px;
        font-size: 11px;
        background-color: #ff9;
        border: 1px solid #dd7;
    }

        #unsupported-browser-version-warning > div > span, #unsupported-browser-version-warning > div > img {
            vertical-align: middle;
        }

        #unsupported-browser-version-warning > div > img {
            margin-right: 10px;
        }

/**********************************************************
* Existing Styling for the Third Party login providers.
**********************************************************/

.login-providers-container {
    display: flex;
    flex-direction: column;
    gap: 2px; 
}

.login-providers-container:hover {
    cursor: pointer;
}
.login-providers-box {
    justify-content: center;
    width: 100%;
}

.login-provider {
    color: #FFF;
    display: block;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

    .login-provider:hover > .login-provider-text {
        padding-left: 15px;
        transition: 0.3s all;
        cursor: pointer;
    }

    .login-provider .fa {
        border-right: 1px solid;
        font-size: 30px;
        padding: 10px;
        vertical-align: middle;
        width: 30px;
    }

.login-provider-text {
    font-size: 15px;
    padding-left: 10px;
    transition: 0.3s all;
    vertical-align: middle;
}

.login-providers-instructions {
    color: #00457c;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin: 10px auto;
    text-align: center;
    white-space: nowrap;
}

    .login-providers-instructions > span {
        position: relative;
        display: inline-block;
    }

        .login-providers-instructions > span:before,
        .login-providers-instructions > span:after {
            background: #00457c;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: 80px;
        }

        .login-providers-instructions > span:before {
            right: 100%;
            margin-right: 10px;
        }

        .login-providers-instructions > span:after {
            left: 100%;
            margin-left: 10px;
        }

/**********************************************************
* New Styling for the Login Page.
**********************************************************/

html {
    height: 100%;
}

body {
    height: 100%;
}

:root {
    --surface-branded-page-bg: #F5F5F6;
    --color-neutral-gray-60: #7C7E80;
    --branded-padding-desktop: 4em;
    --component-branded-form-pad: 2em;
    --component-branded-form-mar: 2em;
    --component-branded-form-rad: 0.125em;
    --component-branded-form-border: #E3E4E6;
    --component-branded-form-bg: #FFF;
    --component-branded-message-border: #E3E4E6;
    --component-branded-message-bg: #FFF;
    --component-branded-message-mar: 2em;
    --component-branded-message-pad: 2em;
    --component-branded-message-rad: 0.125em;
    --component-button-button-height: 2em;
    --component-button-button-pad-lr: 1em;
    --component-button-button-mar-int: 0.5em;
    --component-button-button-rad: 0.125em;
    --component-button-button-key-bg-rest: #0058C4;
    --component-input-input-pad-tb: 1em;
    --component-input-input-pad-lr: 1em;
    --component-input-input-rad: 0.125em;
    --component-input-input-border: #AFB1B3;
    --component-input-input-bg: #FFF;
    --component-input-input-label-text: #3E3F40;
    --component-input-input-label-bg: #FFF;
    --component-input-input-label-border: #AFB1B3;
    --component-input-input-label-pad: 0.5em;
    --component-input-input-label-rad: 0.125em;
    --component-input-input-bg-disabled: #E3E4E6;
    --component-dialog-message-pad: 1em;
    --component-dialog-message-mar-int: 0.25em;
    --component-dialog-message-rad: 0.125em;
    --component-dialog-message-bg-error: #F8E8E8;
    --component-dialog-message-title-error: #700E10;
    --component-dialog-body: #656668;
    --component-button-button-key-bg-disabled: #D1D3D4;
}

.login-body {
    background: var(--surface-branded-page-bg);
    font-family: Lato;
    font-style: normal;
}

.login-screen {
    display: flex;
    padding: var(--branded-padding-desktop) 0px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    height: 85%;
}

.unauthorized-body {
    background: var(--surface-branded-page-bg);
    font-family: Lato;
    font-style: normal;
}

.unauthorized-screen {
    display: flex;
    padding: var(--branded-padding-desktop) 0em;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    height: 85%;
}

.unauthorized-title {
    font-size: 1.5em;
    font-weight: 400;
    line-height: 100%;
    display: flex;
}

.unauthorized-message-text {
    display: flex;
}

.unauthorized-box {
    display: flex;
    width: 31.25em;
    padding: var(--component-branded-message-pad);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-branded-message-mar);
    border-radius: var(--component-branded-message-rad);
    border: 1px solid var(--component-branded-message-border);
    background: var(--component-branded-message-bg);
}

.unauthorized-message{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    /*width: 100%;*/
    gap: var(--component-branded-message-mar);
}

.validation-error {
    display: flex;
    padding: var(--component-dialog-message-pad);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--component-dialog-message-mar-int);
    align-self: stretch;
    border-radius: var(--component-dialog-message-rad);
    background: var(--component-dialog-message-bg-error);
}

.error-text {
    color: var(--component-dialog-message-title-error);
    font-size: .75em;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.validation-text {
    color: var(--component-dialog-body);
    font-size: 1em;
    font-weight: 400;
    line-height: 150%;
}

.login-content, .login-content form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.login-header-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    align-self: stretch;
    width:250px;
    height:65px;
}

.login-input {
    display: flex;
    align-items: center;
    align-self: stretch;
    border-radius: var(--component-input-input-rad);
    border: 1px solid var(--component-input-input-border);
    background: var(--component-input-input-bg);
    font-family: var(--fontFamilies-lato, Lato);
}

    .login-input input {
        z-index: 0;
        padding: var(--component-input-input-pad-tb) var(--component-input-input-pad-lr);
        margin: 0;
        border: none;
        width: 100%;
        font-family: var(--fontFamilies-lato, Lato);
        font-size: 14px;
    }

/*.invalid{
    background: yellow;
}*/

.login-input input:focus {
   outline: none;
}

.login-input input:disabled {
   outline: none;
   background: var(--component-input-input-bg-disabled);
}

.login-footer-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 0.5em;
   color: var(--color-neutral-gray-60);
   font-size: 0.75em;
   font-weight: 400;
   line-height: 100%;
}

.login-footer-links {
   display: flex;
   align-items: center;
   gap: 0.5em;
}

.login-footer-links a {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}

input::placeholder {
    text-align: left;
}

.login-box {
    display: flex;
    width: 25em;
    padding: var(--component-branded-form-pad);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-branded-form-mar);
    border-radius: var(--component-branded-form-rad);
    border: 1px solid var(--component-branded-form-border);
    background: var(--component-branded-form-bg);
}

.input-label {
    color: var(--component-input-input-label-text);
    font-size: 1em;
    font-weight: 700;
    line-height: 100%;
    padding-top: 1em;
    padding-bottom: .25em;
}

.login-input-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
}

.login-button {
    font-family: var(--fontFamilies-lato, Lato);
    font-size: var(--fontSize-4, 14px);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--component-button-button-mar-int, 8px);
    align-self: stretch;
    border-radius: var(--component-button-button-rad, 2px);
    background: var(--component-button-button-key-bg-rest, #0058C4);
}

    .login-button input {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        width: 100%;
        padding: 0em 1em;
    }

.button-container {
    position: relative;
    display: inline-block; /* Ensures the container wraps around the button */
}

    .button-container #spinner {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none; /* Initially hide the spinner */
        z-index: 1; /* Ensures the spinner is on top of the button */
    }

    .button-container input:disabled + #spinner {
        display: inline-block; /* Show the spinner when the button is disabled */
    }

.login-button input:disabled {
    background: var(--component-button-button-key-bg-disabled);
}

.spinner {
    display: inline-block;
    animation: spin 2s linear infinite; /* Adjust the duration (5s) for slower rotation */
    color: #656668;
}

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

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


.remember-username {
    display: flex;
    padding-top: 1em;
    padding-bottom: 2em;
    flex-direction: row;
    align-items: center;
}

.remember-username-label {
    padding-left: .25em;
    color: var(--component-input-input-label-text);
    font-size: 1em;
    font-weight: 700;
    line-height: 100%;
}

.remember-username input {
    width: 1.1em;
    height: 1.1em;
    padding-top: .25em;
    margin-left: 0px;
}

.checkbox-spacing{
    padding-top: 5.25em;
}

/**********************************************************
* New styling for the logout page.
**********************************************************/

.logout-successful-label {
    color: var(--wireframe-color-blue-blue-80, #00234E);
    font-size: 1.5em;
    font-weight: 400;
    line-height: 100%;
}

.logout-success-label {
    color: var(--body-text, #1F1F20);
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}

.return-to-application-label {
    color: #0058C4;
    font-size: 0.875em;
    font-weight: 400;
    line-height: 100%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    cursor: pointer;
}

.logoff-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;
    align-self: stretch;
}

/**********************************************************
* New styling for the register new user page.
**********************************************************/
.register-user-input-value-pair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:  0.25em;
    width: 100%;   

}
.register-user-input-label {
    color: #7C7E80;
    /* component-type/nvlabel-label */
    font-family:  Lato;
    font-size: 0.75em;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 0.75rem */
    text-transform: uppercase;
}
.register-user-input-value {
    color: #1F1F20;
    /* component-type/nvlabel */
    font-family: Lato;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 1rem */
}

.register-user-input-label-active {
    color: #3E3F40;
    font-family: Lato;
    font-size: 0.875em;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 0.875rem */
}
.required-input {
    color: #BA181B;
    font-family: Lato;
    font-size: 0.875em;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 0.875rem */
}

.register-user-button {
    font-family: Lato;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 2px;
    width: 100%;
    font-size: 14px;
    height: 32px;
    padding: 0px var(--component-button-button-pad-lr, 16px);
    gap: var(--component-button-button-mar-int, 8px);
}
.register-new-user-button-submit {
    border: none;
    background: #0058C4;
    color: #FFF;
}

.register-new-user-button-cancel {
    border: 1px solid #D1D3D4;
    background:  #FFF;
}
.register-new-user-button-cancel:hover, .register-new-user-button-submit:hover{
    cursor: pointer;
}
.register-user-form, #register-new-user-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}
.register-new-user-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
/*    padding-top: 1em;*/
}
.register-new-user-information-text {
    color: #9B9DA0;
    /* body/p */
    font-family: Lato;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 1.25rem */
    align-self: stretch;
}
.reigster-user-header {
    color: #00234E;
    font-family: Lato;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 1.5rem */
}



/**********************************************************
* New styling for the register new user confirmation sent page.
**********************************************************/

.register-user-confirmation-sent-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;
    align-self: stretch;
}
.register-user-confirmation-sent-body-header {
    align-items: flex-start;
    color: #00234E;
    font-family: Lato;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 1.5rem */
}
.register-new-user-confirmation-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.register-user-body{
    display: flex;
    background: var(--surface-branded-page-bg);
    font-family: Lato;
}


/**********************************************************
* New styling for the register new user confirm page.
**********************************************************/

.register-user-confirm-body{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/**********************************************************
* Password recovery page
**********************************************************/

.password-recovery-label {
    color: var(--wireframe-color-blue-blue-80, #00234E);
/*    font-size: 1.5em;*/
    font-weight: 400;
    line-height: 100%;
/*    padding-bottom: 1em;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    font-family: Lato;
    font-size: 24px;
    font-style: normal;
}

.password-fields {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.forgot-password-inputs {
    padding-bottom: 1em;
}

.extra-padding {
    padding-bottom: 1em;
}

.security-questions-instructions {
    color: var(--body-text-helper, #9B9DA0);
    font-size: 1em;
    font-weight: 400;
    line-height: 125%;
}

.verify-identity-fields {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.verify-identity-content {
    display: flex;
    flex-direction: column;
    gap: 2em;
    padding-top: 1em;
}

.validation-summary-errors {
    color: var(--component-dialog-body);
}

.invisible {
    display: none;
}

.visible {
    display:block;
}

.custom-overlay {
    /* z-index: 1000; */
    width: 100%;
    height: 100%;
    padding-top: var(--component-modal-top-spacing, 128px);
    align-items: center;
    position: fixed;
    background: var(--component-modal-overlay, rgba(101, 102, 104, 0.50));
    top: 0;
}

.info-dialog {
    display: flex;
    width: 544px;
    padding: var(--component-dialog-pad, 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-dialog-mar-int, 24px);
    border-radius: var(--component-dialog-rad, 4px);
    border: 1px solid var(--component-dialog-border, #D7D8D9);
    background: var(--component-dialog-bg, #FFF);

    /* drop-shadow-dialog */
    box-shadow: 0px 4px 10px 0px #7C7E80;
}
.top-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.top-line-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--component-dialog-subtitle-mar, 4px);
    flex: 1 0 0;
}

.top-line-text-main {
    align-self: stretch;
    color: var(--component-dialog-title, #1F1F20);
    /* component-type/dialog-title */
    font-family: var(--fontFamilies-lato, Lato);
    font-size: var(--fontSize-7, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 20px */
}

.top-line-text-subtitle {
    color: var(--body-text-helper, #9B9DA0);
    /* body/helper */
    font-family: var(--fontFamilies-lato, Lato);
    font-size: var(--fontSize-4, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 14px */
}

.body-text-container {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
    gap: 1em;
}
.action-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--component-dialog-action-mar-int, 12px);
    align-self: stretch;
}

.regular-text {
    color: var(--component-dialog-body, #656668);
    /* component-type/dialog-body */
    font-family: var(--fontFamilies-lato, Lato);
    font-size: var(--fontSize-5, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 1.5rem */
}

.bold-text {
    color: var(--component-dialog-body, #656668);
    /* component-type/dialog-body */
    font-family: var(--fontFamilies-lato, Lato);
    font-size: var(--fontSize-5, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}
.button-dismissive {
    display: flex;
    height: var(--component-button-button-height, 32px);
    padding: 0px var(--component-button-button-pad-lr, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--component-button-button-mar-int, 8px);
    border-radius: var(--component-button-button-rad, 2px);
    border: 1px solid var(--component-button-button-dis-border, #D1D3D4);
    background: var(--component-button-button-dis-bg-rest, #FFF);
}

.button-dismissive:active{
    background: var(--component-button-button-dis-bg-active, #D1D3D4);
}

.button-dismissive:hover{
    cursor: pointer;
    background: var(--component-button-button-dis-bg-hover, #E3E4E6);
}

.button-label {
    color: var(--component-button-button-dis-text, #3E3F40);
    /* component-type/button */
    font-family: var(--fontFamilies-lato, Lato);
    font-size: var(--fontSize-4, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 14px */
}
.xmark {
    font-size: 1.5em !important;
    color: var(--component-dialog-close-icon, #AFB1B3);
    
}
.close-button {
    border: none;
    background: none;
}

.xmark:hover{
    cursor: pointer;
    color: var(--component-button-button-dis-bg-hover, #E3E4E6);
}

.noTitle .ui-dialog-titlebar {
    display: none
}

.dialogFront{
    z-index: 1 !important;
}

.centered-link {
    display: flex;
    width: 100%;
    justify-content: center;
}

.link, forgot-password-link {
    text-align: center;
    width: fit-content;
    padding-top: 1em;
    color: #0058C4;
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 0.875rem */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.login-button-input {
    height: 2.5em;
    font-family: Lato;
    font-size: 14px;
}
.login-button-input:active{
    background: var(--component-button-button_key-bg-active, #00469D);
}
.login-button-input:hover{
    background: var(--component-button-button-key-bg-hover, #3379D0);
}

.do-not-display {
    display: none;
}

.input-error {
    gap: .1em;
    display: flex;
    margin-left: .1em;
    margin-top: .5em;
    color: var(--component-input-input-attention-text, #BA181B);
    font-family: var(--fontFamilies-lato, Lato);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

.invisible {
    display: none !important;
}

.security-question-input {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.hidden {
    display: none;
}