/* Log-In*/

.fn-info-display {
    display: inline-flex;
    justify-content: space-evenly;
}

.fn-nav {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    list-style: none;
    border-bottom: 1px solid var(--line-4-grey);
}

.fn-nav-tabs {
    width: 50%;
    border: 0;
    justify-content: center;
}

.nav-tabs {
    border-bottom: 0;
}

.fn-nav-menu > a {
    font: normal var(--noto-xxs) var(--font-family-Noto);
    height: 100%;
    padding: 24px 0px 8px;
    text-decoration: none;
    text-align: center;
    color: var(--1-txt-1-black);
}

    .fn-nav-menu > a.active {
        font: bold var(--noto-xxs) var(--font-family-Noto);
        color: var(--1-txt-6-mint);
        /* padding-bottom: 4px; */
        /* border-bottom: solid 4px var(--line-1-active); */
        text-decoration-line: none;
        position: relative;
    }

        .fn-nav-menu > a.active::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 4px;
            left: 0;
            bottom: 0;
            background-color: var(--line-1-active);
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
        }

.fn-login-btn > .fn-button {
    width: 100%;
}

.fn-info-display > .tab-content {
    width: 100%;
}

.fn-info-display > span {
    font: normal var(--noto-xxs) var(--font-family-Noto);
    color: var(--1-txt-1-black);
}

.fn-forget-pass,
.fn-forget-pass:is(:hover) {
    font: bold var(--noto-xxs) var(--font-family-Noto);
    color: var(--btn-1-mint);
}
/* Alert */

.fn-display-alert {
    display: none;
}

.fn-alert {
    background-color: var(--tone-5-red-7);
    border-radius: var(--border-rad-normal);
    width: 100%;
    padding: 16px;
}


.fn-password {
    display: flex;
    position: relative;
}

.fn-password-invisible {
    display: block !important;
    padding: 19px 16px;
    position: absolute;
    right: 0;
}

/* Popup */
.modal-dialog .modal-content > .modal-body.p0 {
    padding: 0;
}

/* info-createaccount*/
.title2 {
    font: bold var(--noto-s) var(--font-family-Noto);
    color: var(--1-txt-1-black);
}

.short-message {
    font: normal var(--noto-xxs) var(--font-family-Noto);
}

.info-createaccount > .fn-rdo-box,
.info-createaccount > .fn-button {
    width: 100%;
}

    .info-createaccount > .fn-rdo-box label {
        justify-content: start;
    }

/* Footer Page */
.fn-login-footer {
    padding-top: 0px;
    padding-bottom: 16px;
    text-align: center;
    margin-top: auto;
    color: var(--1-txt-2-grey);
}

    .fn-login-footer .container span {
        font: normal var(--noto-xxxxs) var(--font-family-Noto);
    }

    .fn-login-footer .container .text-policy-footer {
        color: var(--1-txt-2-grey);
    }

/* Password not mat */

.fn-text-confirmpassword {
    font: 500 var(--noto-xxxs) var(--font-family-Noto);
    padding: 4px 16px 16px;
    color: var(--1-txt-2-grey);
    font-weight: 500;
}

.fn-valid-password {
    font: 500 var(--noto-xxxs) var(--font-family-Noto);
    color: var(--syst-1-error);
    padding: 4px 16px 0 16px;
}

.errorempty input[type="password"] {
    box-shadow: inset 0 0 0 2px var(--line-3-error);
    background-color: var(--btn-2-white);
    border-color: transparent !important;
}
/* Alert Email OTP */
.fn-text-alert {
    font: normal var(--noto-xxs) var(--font-family-Noto);
    background-color: var(--tone-1-orange-7);
    border-radius: var(--border-rad-normal);
    text-align: center;
    padding: 16px 0;
    width: 100%;
}

.fn-valid {
    padding: 4px 16px 0px;
    font: 500 var(--noto-xxxs) var(--font-family-Noto);
    color: var(--syst-1-error);
}

.fn-createa-sucsess .modal-dialog.fn-modal-1button > .modal-content {
    width: 384px;
}

.fn-createa-sucsess .modal-dialog > .modal-content {
    padding: var(--p-24) var(--p-16);
}

.info-createaccount .fn-rdo-box.fn-rdo-box-border label {
    /*padding-left: 6px;*/
    padding: 6px;
    height: 48px;
}

/* New Content */
.fn-login-head {
    font: bold var(--noto-s) var(--font-family-Noto);
    color: var(--1-txt-1-black);
}

    .fn-login-head > .fn-new-line {
        display: block;
    }
/* New Login Sysytem Fail */
.fn-login-fail .fn-title {
    font: bold var(--noto-s) var(--font-family-Noto);
    color: var(--1-txt-1-black);
}

.fn-login-fail .fn-text {
    font: normal var(--noto-xxs) var(--font-family-Noto);
    color: var(--1-txt-2-grey);
    margin-top: 0;
}

.modal-dialog.fn-modal-2button > .modal-content {
    width: 320px;
}

.modal-dialog .modal-content > .modal-body {
    padding: 0 0 0 0;
}
/* Recapchar */
.grecaptcha-badge {
    visibility: hidden !important;
}

@media (max-width: 991px) {
    .header {
        height: 52px;
    }

    .form-login > .mt32 {
        margin-top: 0;
    }

    .fn-createa-sucsess .modal-dialog.fn-modal-1button > .modal-content {
        width: 320px;
    }
}

@media (min-width: 576px) {
    .fn-login-head > .fn-new-line {
        display: none;
    }
}

.text-highlight-mint {
    color: #13875D;
}
#fn-phonenum-email:focus {
    padding-right: 40px;
    overflow: hidden;
}

.fn-form-control-passport::placeholder {
    text-transform: none;
}

.fn-form-control-passport {
    text-transform: uppercase;
}