:root {
    --bs-input-border-opacity: .5;
}

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    body {
        min-height: 100vh;
        position: relative;
        overflow-x: hidden;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 30%;
        height: 100%;
        background: #091644;
        z-index: -2;
    }

    body::after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        width: 70%;
        height: 100%;
        background-image: url("/assets/images/bg-4k.jpg");
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
        z-index: -2;
    }

#login .fa-user::before {
    font-size: 60px;
    color: #091644;
}

body #main-wrapper {
    overflow-y: auto;
}

#login .h-25 {
    height: calc(30% + (env(safe-area-inset-top) / 4))!important;
    /* height: 35%!important; */
    min-height: 235px;
}

#login .h-75 {
    height: calc(70% - (env(safe-area-inset-top) / 4))!important;
    /* height: 65%!important; */
    min-height: 400px;
}

.btn {
    font-size: 16px;
    font-weight: lighter !important;
}

.btn:hover,
.btn:active,
.btn:focus {
    /* border: none !important; */
    /* border-width: 0; */
}

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

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    color: #AABFF0;
    opacity: 1;
    /* background-color: #3B6CCF !important; */
}

button.send-again:visited,
button.send-again:focus-within,
button.send-again:focus,
button.send-again:active,
button.send-again {
    margin-top: -4px;
    border: none;
}

/*641013*/
/*8b1f25*/
/*d10226*/
h1 {
    font-size: 25px;
    font-weight: normal;
}

h1, p {
    color: #091644
}

p {
    font-weight: lighter;
}

a {
    color: #091644;
}

.invalid-feedback {
    color: #AE1D17;
    font-weight: 900;
}

.form-floating {
    /*height: 45px;*/
}

.form-control {
    border: 1px solid rgba(var(--bs-secondary-rgb),var(--bs-input-border-opacity))!important;
}

.form-control:focus {
    box-shadow: none;
    border-width: 0 0 0 1px;
}

.form-check-input {
    border: 1px solid rgba(var(--bs-secondary-rgb),var(--bs-input-border-opacity))!important;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
    /*padding: .7rem .75rem .6rem;*/
    padding: 1.1rem .85rem;
    height: calc(2.7rem + calc(var(--bs-border-width) * 2));
    min-height: calc(2.7rem + calc(var(--bs-border-width) * 2));
    border-radius: 10px;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: none;
}

.form-floating>.form-control-plaintext:focus,
.form-floating>.form-control-plaintext:not(:placeholder-shown),
.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 1.525rem;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
    background-color: #FFF;
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;
}


.form-floating>label {
    top: 10px;
    margin-left: 0.5rem;
    padding: 0 .75rem;
    height: auto;
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;
    border-radius: 10px;
}

.form-floating>label {
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;
}


.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    top: 8px;
    transform: scale(.75) translateY(-.5rem) translateX(.15rem);
    background-color: transparent !important;
    
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background-color: transparent;
}

.form-control {
    border: 1px rgba(var(--bs-secondary-rgb),var(--bs-input-border-opacity))!important !important;
    /* border-radius: 10px; */
    /* background-color: #a3a3a3 !important; */
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;
}

.form-control:link,
.form-control:visited,
.form-control:hover,
.form-control:active,
.form-control:focus {
    /*border: none;*/
    /* background-color: #a3a3a3 !important; */
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;
}

/*
.form-control.login-digit {
    border: none !important;
}

.form-control.login-digit:first-child {
    border-left: 5px solid #D12026 !important;
    border-radius: 10px;
}
*/

#login-container {
    /* max-width: 476px !important; */
    /*padding: 0 10px;*/
}

.login-details {
    /*position: absolute;*/
    /*bottom: 0;*/
}

input.login-digit {
    max-width: 50px;
}

input.login-digit.ld-nf {
    border: none;
}

.form-check.rememberme {
    width: 120px;
}

.digits-wrapper {
    padding: 0 3px;
    max-width: 60px;
}

/* vue */
[v-cloak] {
    display: none;
}

/* trick  */
/* hide flash effect */
input.form-control {
    box-shadow: 0px 0px 0px 1000px #fff inset !important;

}

/* hide yellow background */
input:-webkit-autofill, input:-webkit-autofill:focus {
    box-shadow: 0px 0px 0px 1000px #fff inset !important;

    -webkit-text-fill-color: color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important;;
}

#login-box {
    padding: 50px 40px;
    background: #FFF;
    border-radius: 25px;
    max-width: 476px !important;
    margin-left: 10%;
    /* z-index: 3; */
}

@media (max-width: 768px) {
    #login-box {
        margin: auto auto;
        max-width: 400px !important;
    }
}

@media ((min-height: 1079.98px) and (orientation: portrait)) or (max-width: 991.98px) {
    #login-box {
        margin: auto auto;
    }

    body::after {
        top: 0;
        left: 0;
        width: 100%;
        height: 40%;
    }

    body::before {
        top: 40%;
        left: 0;
        width: 100%;
        height: 60%;
    }
}