html {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/*
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/


body {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: #787e87;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 0;
}


.main-wrapper {
    background-position: left;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 15px;
    width: 100%;
    min-height: 0;
}

.ie-center {
    margin: 0 auto;
    width: 100%;
    max-width: 1055px;
}

.spacer50 {
    padding-top: 0 !important;
    margin-top: 0;
}

.brand_wrapper {
    width: 492px !important;
    max-width: 492px !important;
    flex: 0 0 492px !important;
    min-height: 390px;
    height: auto;
    padding: 45px 20px;
    box-sizing: border-box;
    background-color: rgba(49, 166, 241, 0.69);
    color: white;
    text-align: center;
    margin-right: -3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand_wrapper img {
    opacity: 1;
    width: 125px;
    max-width: 125px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.align_wrapper {
    margin-top: 0;
}

.brand_wrapper p {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.form_wrapper {
    width: 502px !important;
    max-width: 502px !important;
    flex: 0 0 502px !important;
    padding: 45px 90px;
    box-sizing: border-box;
    background-color: #ffffff;
    background-size: 30% 6%;
    background-position: 50% 98%;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-top: 0;
    text-align: center;
}

.form_wrapper input {
    border: 0;
    margin-left: 10%;
    width: 90%;
    box-sizing: border-box;
}

.form_wrapper input:required {
    box-shadow: none;
}



.form_wrapper input::-webkit-input-placeholder {
    vertical-align: middle;
    padding-top: 5px;
}

.form_wrapper input:-moz-placeholder {
    /* Firefox 18- */
    vertical-align: middle;
    padding-top: 5px;
}

.form_wrapper input::-moz-placeholder {
    /* Firefox 19+ */
    vertical-align: middle;
    padding-top: 5px;
}

.form_wrapper input:-ms-input-placeholder {
    vertical-align: middle;
    padding-top: 5px;
}

.form_wrapper input:focus {
    border-color: #dfddd8;
    box-shadow: 0 0 5px rgba(207, 220, 0, 0);
}

.ga-two-factor {
    font-size: 34px;
    font-weight: bold;
    margin: 0;
}

.ga-form-heading {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}

h1 {
    font-size: 38px;
    font-weight: bold;
    margin: 20px 0;
}

h4 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}

p {
    font-size: 15px;
    color: #ffffff;
}

p a,
p a:visited,
p a:active {
    color: #ffffff;
    text-decoration: underline;
    font-weight: bold;
}

p a:hover {
    text-decoration: none;
    color: #ffffff;
}

.uid {
    padding: 0 0 5px 10px;
    font-size: 18px;
}

.pswd {
    padding: 0 0 5px 10px;
    font-size: 18px;
}

.form-group-input {
    background: url("../images/icon_uid.png") left top no-repeat;
    border-bottom: 1px solid #dfddd8;
    margin-bottom: 2.4rem;
}

.form-group-input-password {
    background: url("../images/icon_password.png") left top no-repeat;
    border-bottom: 1px solid #dfddd8;
    margin-bottom: 2.4rem;
}

#submit,
#loginwithpwdbtn {
    margin-top: 40px;
}

.btn {
    border-radius: 20px;
    background-color: #31a6f1;
    font-size: 20px;
    font-weight: bold;
    border-color: #31a6f1;
    margin: auto;
}


.form_wrapper p {
    color: #393939;
    padding: 38px 0 28px 0;
    text-align: left;
    font-size: 16px;
}

.form_wrapper p a,
.form_wrapper p a:visited,
.form_wrapper p a:active {
    color: #31a6f1;
    text-decoration: underline;
    font-weight: normal;
}

.form_wrapper p a:hover {
    color: #31a6f1;
    text-decoration: none;
}

hr {
    width: 70%;
    background-color: #416486;
}

footer {
    width: 100%;
    background-color: #ffffff;
    color: #92a2ad;
    font-size: 14px;
    text-align: center;
    padding: 15px 0;
    margin: 0;
    padding-top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

footer .first-line {
    background-color: #f7f7f7;
}

footer p {
    color: #92a2ad;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: 14px;
}

footer .privacy-icon {
    width: 100px;
}

footer p a,
footer p a:visited,
footer p a:active {
    color: #34a8f2;
    text-decoration: none;
    font-weight: normal;
}

footer p a:hover {
    opacity: 0.7;
}

.footer .copyright {
    font-size: 11px;
}

.request-access {
    font-weight: normal;
    color: black;
}

.forgot-password {
    margin-top: 1rem;
}

.forgot-password a {
    color: #34a8f2;
}

.forgot-password a:hover {
    opacity: 0.7;
}

.forgot-network,
.register-auth {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
}

.forgot-network a {
    color: #34a8f2;
    font-weight: normal;
}

.forgot-network a:hover {
    opacity: 0.7;
}

.questions {
    margin-bottom: 2rem;
}

.brand-icon {
    width: 130px;
}

.main-wrapper .container-fluid {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}

.main-wrapper .row > .brand_wrapper,
.main-wrapper .row > .form_wrapper {
    float: none;
    align-self: center;
}

/* Side-by-side login card on wide screens; stack on narrow */
@media (min-width: 995px) {
    .main-wrapper .row {
        flex-wrap: nowrap;
    }
}

@media (max-width: 768px) {
    .main-wrapper {
        padding: 12px 10px;
    }

    .form_wrapper {
        padding: 32px 24px;
    }

    .brand_wrapper {
        min-height: 320px;
    }

    p {
        font-size: 14px;
        padding: 0 20px;
    }

    footer {
        line-height: 30px;
    }
}

.pop_container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4)
}

.pop_content {
    position: relative;
    width: 790px;
    height: auto;
    padding: 30px 80px;
    margin: 4% auto 0 auto;
    background-color: #ffffff;
    color: #000000;
    opacity: 1;
}

.pop_content h2 {
    font-size: 28px;
    color: #3a3c3b;
    font-weight: bold;
    padding: 30px 0;
    text-align: center;
}

.pop_content p {
    color: #757b7f;
    text-align: justify;
}

.ic_close {
    position: absolute;
    top: 25px;
    right: 25px;
}

.errorMsg,
.errorMsg p {
    color: red !important;
    padding-left: 20px;
    padding-top: 8px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.errorMsg1 {
    color: red !important;
}

#fsso-terms-en-footer {
    padding: 0;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    margin-top: auto;
}

.fsso-terms-en-title {
    font-size: 12px;
    padding: 5px 10px;
    color: black;
}

.fsso-terms-en-details {
    font-size: 10px;
    padding: 0px 10px 5px 10px;
    color: #504b4b;
}

.fsso-terms-en-footer-div {
    text-align: left;
    margin-bottom: 3px;
    /* background-color: #ebecf1; */
    padding: 0px 30px 3px 30px;
    line-height: 13px;
    /* background-color: rgba(255,255,255,0.5); */
}

#fsso-terms-en-footer-actual {
    background: white;
    padding: 10px;
    width: 100%;
    color: black;
}

@media (max-width: 1074px) {

    html,
    body {
        background-size: cover;
    }

    .main-wrapper {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    .spacer50 {
        padding-top: 0 !important;
    }

    .brand_wrapper {
        width: 45% !important;
        max-width: 45% !important;
        flex: 0 0 45% !important;
        padding-top: 35px;
    }

    .form_wrapper {
        width: 45% !important;
        max-width: 45% !important;
        flex: 0 0 45% !important;
    }

    .pop_content {
        width: 80% !important;
        margin-top: 24px !important;
    }

    h4 {
        font-size: 19px;
    }
}

@media (max-width: 1024px) {
    .main-wrapper-fsso-en {
        display: block !important;
        background-size: cover;
        padding-bottom: 460px;
    }

    .form-group-input,
    .form-group-input-password {
        margin-bottom: 3rem;
    }
}

@media screen and (min-width: 900px) and (max-width:1074px) {
    .spacer50 {
        padding-top: 0 !important;
    }
}

@media (max-width: 899px) {

    body {
        background-attachment: scroll;
    }

    .main-wrapper .row {
        flex-wrap: wrap;
        align-items: center;
    }

    .brand_wrapper,
    .form_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .brand_wrapper {
        padding-top: 30px;
        min-height: 430px;
        height: auto;
        margin-top: 0;
    }

    .form_wrapper {
        margin-top: 0;
        padding: 45px 40px;
    }

    h1 {
        font-size: 30px;
    }

    p {
        padding: 0 20px;
    }

    .spacer50 {
        padding-top: 0 !important;
        margin-left: 0;
    }

    .main-wrapper {
        padding: 12px 10px;
    }

    footer {
        line-height: 30px;
    }

    h4 {
        font-size: 19px;
    }
}

@media (max-width: 650px) {
    .main-wrapper-fsso-en {
        padding-bottom: 270px;
    }

    .fsso-terms-en-footer-div {
        margin: 0px 10px 3px 10px;
    }

    .fsso-terms-en-details {
        line-height: 13px;
    }
}

@media (max-width: 600px) {
    .brand_wrapper {
        margin-top: 0;
    }

    html {
        position: relative;
        height: auto;
    }

    .pop_content {
        width: 80% !important;
        margin-top: 70px !important;
        padding: 20px 20px !important;
    }
}

@media (max-width: 450px) {
    .main-wrapper {
        padding: 10px 8px;
    }

    .spacer50 {
        padding: 0 !important;
        margin-left: 0;
    }

    .brand_wrapper {
        padding-top: 15px;
        height: 300px;
        padding-bottom: 15px;
    }

    .brand_wrapper img {
        width: 75px;
        max-width: 75px;
        height: auto;
    }

    #ssodiv hr {
        display: none;
    }

    .brand_wrapper#ssodiv {
        height: 165px;
    }

    .fsso-terms-en-footer-div {
        padding: 0px 0px 3px 0px;
    }

    .form_wrapper {
        padding: 30px 40px;
    }

    #submit,
    #loginwithpwdbtn {
        margin-top: 28px;
    }

    .password-wrapper {
        margin-top: 28px;
    }
}

@media (min-height: 1100px) {
    .main-wrapper {
        padding: 20px 15px;
    }
}

/* Two-step: hide password step until Next (customUI.js reveals it) */
#passwordWrapper[hidden],
#submit[hidden],
#loginwithpwdbtn[hidden] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.password-wrapper {
    position: relative;
    width: 100%;
    margin-top: 0;
    padding-bottom: 0;
}

/* Password input — underline is on .form-group-input-password wrapper */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    width: 90%;
    margin-left: 10%;
    border: 0;
    border-bottom: none;
    background: transparent;
    box-sizing: border-box;
    /* Pin an explicit height so both type="password" and type="text" render
       at identical dimensions on all mobile browsers, preventing truncation
       when the show/hide toggle switches the type attribute.
       IMPORTANT — do NOT override padding-top/bottom or line-height here:
       iOS Safari's password bullet glyph renderer uses the natural vertical
       padding to position mask dots within the field. Zeroing those values
       causes the dots to be clipped at the box boundary, making the field
       appear empty even while characters are being typed. */
    height: 44px !important;
    min-height: 44px !important;
    /* iOS Safari fixes for password field editability */
    -webkit-appearance: none;
    -webkit-user-select: text;
    -webkit-text-size-adjust: 100%;
    /* Use CSS-based text masking for iOS Safari reliability */
    -webkit-text-security: disc;
}

/* Override -webkit-text-security when field type is text and not masked */
.password-wrapper input[type="text"] {
    -webkit-text-security: none;
}