@font-face {
    font-family: 'noto_sanslight';
    src: url(../fonts/ba81a13ff42c00001663797006e7e1c8.woff2) format('woff2'),
        url(../fonts/96ee0759b6176c4314e2982524bd56bc.woff) format('woff');
    font-weight: normal;
    font-style: normal;

}

*{
    font-family:'noto_sanslight', sans-serif;
}

.estee-icon {
  width: 100px;
  height: 100px;
  background-image: url('../img/esteeIcon.png');
  background-repeat: no-repeat;
  background-size: contain; 
  background-position: center;
}

.footerP1 {
    text-align: center !important;
}

.device-tip {
    font-size: 17px !important;
}

#otpInput {
    margin-bottom: 20px;
}

.reactSingularKey_timeoutErrorContainer {
    padding-top: 120px !important;
    background: url(../img/b10163747729296d73ca558db9b8c1e0.png) center 30px / 150px;
    background-repeat: no-repeat;
    background-color: #003262 !important;
    color: #FFF !important;
}

.reactSingularKey_timeoutErrorContainer .reactSingularKey_timeoutTitle {
    color:#FFF !important;
}

.return-to-login-page {
    text-align: center;
}

.btn-lg {
    font-size: initial !important;
}

#mfa-type-list-button-TOTP {
    background: #FFF;
    color: green;
    font-size: initial;
}

#btnTrouble {
    padding: 2px 0 !important;
    margin-top: 20px;
}

#warning {
    line-height: normal !important;
    margin-bottom: 0 !important;
}

#btnSignIn {
    margin-bottom: 0 !important;
}

#content {
    padding-bottom: 60px !important;
}

.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

button[type="submit"].btn-block,
button[type="reset"].btn-block,
button[type="button"].btn-block {
    width: 100%;
}

@media screen and (min-width: 300px) and (max-width: 990px) {
    .login-form {
        height: auto !important;
        background: none !important;
        width: auto !important;
        position: unset !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* eliminates the background of the qr-box */
    .qr-code {
        background: none !important;
    }

    #callback_0 {
        color: #a94442;
        background-color: #fff;
    }

    .login-container {
        margin-top: 5% !important;
        height: auto !important;
        background: none !important;
        width: auto !important;
        position: unset !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        padding: 10px;
    }

    .logo-container {
        margin: auto !important;
        background-image: url(../img/b10163747729296d73ca558db9b8c1e0.png) !important;
        background-repeat: no-repeat !important;
        background-size: 250px !important;
        background-position: center;
    }

    .form-section {
        background: none !important;
        width: 100% !important;
    }

    #callback_0 p {
        display: block !important;
    }

    .validation-message:before {
        display: none;
    }

    .validation-message {
        left: 10px !important;
        top: 40px !important;
        padding: 5px !important;
        height: 78px !important;
        width: 95% !important;
    }

    .validation-message p {
        display: inline-block !important;
        font-size: 5px !important;
    }

    .validation-message h4 {
        font-size: 6px !important;
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    .validation-message li {
        font-size: 5px !important;
    }

    .tool-tips::before {
        display: none !important;
    }

    .tool-tips {
        left: 3px !important;
        transform: translate(0, -32px) !important;
        border-style: none !important;
        background-color: transparent !important;
        width: 100% !important;
        position: relative !important;
    }

    #tool-tips-username {
        top: 30px;
    }

    #tool-tips-password {
        top: 30px;
    }

    .clearfix1 {
        width: 100% !important;
    }

    .footer {
        height: 60px !important;
    }

    .footer .container p {
        padding: 1px !important;
    }

    .footer p a {
        padding-right: 4px !important;
    }

    .clearfix1 {
        line-height: 18px !important;
    }

    .clearfix1 p {
        font-size: 17px !important;
    }
}

@media screen and (min-width: 991px) and (max-width: 1024px) {
    .login-container {
        width: 750px !important;
        height: 500px !important;
    }

    .logo {
        height: 250px !important;
        width: 250px !important;
    }

    #callback_0 p {
        display: block !important;
    }

    .validation-message:before {
        display: none;
    }

    .validation-message {
        left: 10px !important;
        top: 40px !important;
        padding: 5px !important;
        height: 78px !important;
        width: 95% !important;
    }

    .validation-message p {
        display: inline-block !important;
        font-size: 5px !important;

    }

    .validation-message h4 {
        font-size: 6px !important;
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    .validation-message li {
        font-size: 5px !important;
    }

    .tool-tips {
        top: 30px !important;
        position: relative !important;
        width: 100% !important;
        left: 2px !important;
        padding: 2px !important;
        transform: translate(0, -32px) !important;
        border-style: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .tool-tips::before {
        display: none;
    }

    .tool-tips p {
        font-size: 11px;
    }

    .clearfix1 {
        width: 353px !important;
    }
}

* {
    margin: 0;
    padding: 0;
    font-family: 'noto_sanslight', sans-serif;
}

img {
    padding-bottom: 2%;
}

body {
    background-color: #001c2c;
    color: #000;
}

.login-container {
    height: 500px;
    width: 750px;
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.logo-container {
    background-image: url(../img/f9048edd694663e207c53339ccdbca70.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.form-section {
    background-image: linear-gradient(#005f98, #003262);
    height: 100%;
}

.login-form {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    margin-top: 2%;
    padding: 0 !important;
}

.btn-primary {
    background-color: #006199 !important;
    border-color: #006199 !important;
}

.base-wrapper {
    background-color: #fff;
}

.form-group input[type="password"],
.form-group input[type="text"] {
    padding-right: 0 !important;
}

.remember-forgot ul li {
    list-style-type: none;
}

.btn.btn-lg {
    width: 100% !important;
    padding: 10px 16px !important;
}

.text-center a {
    color: #ffffff;
}

.remember-forgot label {
    color: #ffffff;
}

.logo {
    height: 250px !important;
    width: 250px !important;
}

.form-group {
    overflow: auto;
    margin-bottom: 0 !important;
}

#usernameForm .form-group {
    margin-bottom: 20px !important;
}

.fa-lock {
    position: relative;
    left: 90%;
    bottom: 35px;
    color: #00305F;
    font-size: 25px;
}

.fa-lock::before {
    content: ""; 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2300305f' d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain; 
}

.footer {
    background-color: #001c2c !important;
    text-align: center !important;
    height: 60px !important;
    padding-top: 20px !important;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.footer p {
    display: inline !important;
    color: #ffffff !important;
    padding: 10px !important;
}

.footer a {
    height: 24px;
    border-right: 1px #ffffff solid;
    text-decoration: none !important;
    color: #ffffff;
    padding-right: 10px !important;
}

form a,
.btn-link {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
}

form a:hover,
.btn-link:hover {
    color: #ffffff;
    text-decoration: none;
}

/*** Data Validation CSS ***/
.input-red,
select {
    border: 1px solid rgb(220, 21, 21);
    background-color: rgba(240, 103, 103, 0.5);
    outline: none;
}

.input-green {
    border: 1px solid #B2CF5C !important;
    background-color: #B2CF5C !important;
}

.input-green h3 {
    border: 1px solid #B2CF5C !important;
    background-color: #B2CF5C !important;
}

.validation-message {
    display: none;
    position: absolute;
    left: 105%;
    transform: translate(0, -115px);
    border: 1px solid rgb(220, 21, 21);
    background-color: rgb(240, 103, 103);
    padding: 1.0rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    width: 75%;
    border-radius: 5px;
}

.validation-message:before {
    position: absolute;
    z-index: -1;
    content: "";
    left: -16px;
    top: 62px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #bfbfbf transparent;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: rotate(270deg);
}

.popover__wrapper .validation-message {
    z-index: 10;
    opacity: 1;
    display: block;
    /*transform: translate(0, -20px);*/
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.validation-message h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: bolder;
}

.validation-message p {
    font-size: 13px;
    display: block;
}

.valid {
    color: rgb(125, 152, 45);
}

.valid:before {
    position: relative;
    left: 35px;
}

.invalid {
    color: #ffffff;
}

.invalid:before {
    position: relative;
    left: -35px;
}

#callback_0 div.text-center img {
    height: 250px;
    width: 250px;

}

#callback_0 p {
    color: #ffffff;
    text-align: center;
    display: block;
}

label#label_callback_0 {
    color: #ffffff;
    font-weight: normal;
}

/***** MFA Failure Page Style *****/
.mfa-page {
    padding-left: 50px;
    padding-right: 50px;
}

.mfa-page hr {
    background-color: #ffffff;
    height: 3px !important;
}

.mfa-page h2 {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.mfa-page h4 {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.message-container p {
    color: #a94442;
    text-align: center;
    font-size: 16px;
    border: 1px solid #a94442;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 15px;
}

.message-container a {
    color: #ffffff;
    display: block;
    text-align: center;
}

.message-container a:hover {
    text-decoration: none;
    color: #ffffff;
}

/*** pager header h1 ***/
#content .text-center .page-header h1 {
    color: #ffffff;
}

/*** mfa success page ***/
.message-container-success p {
    color: #519387;
    text-align: center;
    font-size: 16px;
    border: 1px solid #CBDFDB;
    background-color: #F1F7F6;
    border-radius: 4px;
    padding: 15px;
}

.message-container-success a {
    color: #ffffff;
    display: block;
    text-align: center;
}

.message-container-success a:hover {
    text-decoration: none;
    color: #ffffff;
}

/* removes UI codes button */
#idToken2_1 {
    display: none;
}

/* password reset re-entry*/
#validation #callback_0 {
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #a94442;
    background-color: rgb(240, 103, 103);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

/* styling  code */

#validation .qr-code {
    background: none !important;
    border: none !important;
    padding: 0px !important;
}

.logo-container-message {
    width: 250px;
    margin: 0px auto;
    background-image: url(../img/b10163747729296d73ca558db9b8c1e0.png);
    height: 154px;
    background-repeat: no-repeat;
}

/*** tool tips  ***/
.tool-tips {
    display: none;
    border: 1px solid #ffffff;
    position: absolute;
    left: 105%;
    background-color: rgb(0, 80, 133);
    transform: translate(-6px, 5px) !important;
    padding: 0.4rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    width: 79%;
    border-radius: 5px;
    line-height: normal !important;
}

.tool-tips::before {
    position: absolute;
    z-index: -1;
    content: "";
    left: -16px;
    top: 26px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ffffff transparent;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: rotate(270deg);
}

.tool-tips p {
    color: #ffffff;
    margin: 0px;
}

.login-form .form-group #callback_2 {
    color: #a94442;
    border: 1px solid #a94442;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 16px;
}

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

/***** sms message block ******/
.clearfix1 {
    border: 1px solid #005f98 !important;
    border-radius: 16px !important;
    background-color: #B0B0B0 !important;
    float: right;
    line-height: 18px;
    font-size: 0 !important;
    overflow: auto;
}

.clearfix1 p {
    font-size: 19px;
    color: #000000 !important;
    font-weight: normal !important;
}

.estee-icon {
    float: right;
    padding-bottom: 0px;
}

/* login message banner */
.loginMessage {
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 7px;
    background-color: rgb(0, 80, 133);
    color: #ffffff;
    text-align: center;
    line-height: normal !important;
}

#tool-tips-username,
#tool-tips-password {
    line-height: normal !important;
    padding: 0.4rem !important;
}