.login.login-1 .login-forgot,
.login.login-1 .login-otp,
.login.login-1 .login-password,
.login.login-1 .login-signin,
.login.login-1 .login-signup {
    display: none
}

.login.login-1.login-signin-on .login-signup {
    display: none
}

.login.login-1.login-signin-on .login-signin {
    display: block
}

.login.login-1.login-signin-on .login-forgot {
    display: none
}

.login.login-1.login-signin-on .login-otp {
    display: none
}

.login.login-1.login-signin-on .login-password {
    display: none
}

.login.login-1.login-signup-on .login-signup {
    display: block
}

.login.login-1.login-signup-on .login-signin {
    display: none
}

.login.login-1.login-signup-on .login-forgot {
    display: none
}

.login.login-1.login-signup-on .login-otp {
    display: none
}

.login.login-1.login-signup-on .login-password {
    display: none
}

.login.login-1.login-forgot-on .login-signup {
    display: none
}

.login.login-1.login-forgot-on .login-signin {
    display: none
}

.login.login-1.login-forgot-on .login-forgot {
    display: block
}

.login.login-1.login-otp-on .login-otp {
    display: block
}

.login.login-1.login-password-on .login-password {
    display: block
}

.login.login-1.login-forgot-top-on .login-signup {
    display: none
}

.login.login-1.login-forgot-top-on .login-signin {
    display: none
}

@media (min-width:992px) {
    .login.login-1 .login-aside {
        width: 100%;
        max-width: 600px
    }

    .login.login-1 .login-form {
        width: 100%;
        max-width: 400px
    }
}

@media (min-width:992px) and (max-width:1399.98px) {
    .login.login-1 .login-aside {
        width: 100%;
        max-width: 400px
    }
}

@media (max-width:991.98px) {
    .login.login-1 .login-form {
        width: 100%;
        max-width: 350px
    }
}

@media (max-width:575.98px) {
    .login.login-1 .login-form {
        width: 100%;
        max-width: 100%
    }
}

.cursor-pointer {
    cursor: pointer;
}

.link-primary {
    color: #1b85ff;
}

    .link-primary:hover {
        color: #004595;
    }

.form-forgot-action {
    display: block;
    position: absolute;
    margin-top: 24px;
}

#otpTimer {
    font-weight: bold;
}

.inputfield {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.input {
    /* The card these sit in is 330px wide. Sizing the boxes in em off a 1.5em font meant six
       of them plus their margins came to roughly 430px, so they ran out past its right edge.
       They now share the width they are given and stop growing at 44px, which keeps them
       square at the card's size and keeps them inside it at any smaller one. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 2px solid #dad9df;
    outline: none;
    text-align: center;
    font-size: 1.25em;
    border-radius: 0.3em;
    background-color: #ffffff;
    /*Hide number field arrows*/
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#submit {
    background-color: #044ecf;
    border: none;
    outline: none;
    font-size: 1.2em;
    padding: 0.8em 2em;
    color: #ffffff;
    border-radius: 0.1em;
    margin: 1em auto 0 auto;
    cursor: pointer;
}

.show {
    display: block !important;
}

.hide {
    display: none !important;
}

.input:disabled {
    color: #89888b;
}

.input:focus {
    border: 3px solid #ffb800;
}

/* Splits the six into two groups of three, the way the code is read out and the way the text
   message writes it. 12px rather than the 25px it was: the boxes shrink to absorb it, so a
   wider gap came straight out of their width. */
.input:nth-child(4) {
    margin-left: 12px;
}

#kt_body #kt_login_signin_submit,
#kt_login_otp_submit,
#kt_login_password_submit {
    background: #18329D;
    border-color: #18329D;
    border-radius: 4px;
    color: #ffffff;
}

#kt_body #kt_login_forgot_submit {
    background: #18329D;
    border-color: #18329D;
    border-radius: 4px;
    color: #ffffff;
}

#kt_body #kt_login_forgot_cancel,
#kt_login_password_cancel {
    /*background: #18329D;
    border-color: #18329D;*/
    border-radius: 4px;
    /*color: #ffffff;*/
}