:root {
    --primary-color: #A50021;

    --font-size-md: 16px; 
    --font-size-xxxxl: 40px; 
    --font-weight-regular: 400; 
    --font-weight-bold: 700; 
}

.dark-mode {
    /* --primary-color: #666; */

}

body {
}
.login-form .form-control {
    border-color: #757575;
}
.login-form .no-focuse.form-control:focus {
    /*color: #212529;*/
    /*background-color: #fff;*/

    border-color: #757575;
    outline: 0;
    box-shadow: 0;
}
.login-form .warning-icon::before {
    content: url("../Images/warning-1.svg");
    display: inline-block;
    margin-right: 5px; /* Adjust as needed */
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}


.text-bold {
    font-size: var(--font-size-xxxxl) ;
    font-weight: var(--font-weight-bold);
}
.form-user {
    position: relative;
    margin-top:20px
}
.form-user label {
    position: absolute;
    background-color: white;
    line-height:8px;
    top: -4px;
    left: 10PX;
    font-size: 12px;
    color: #6c757d;
}
.form-pass {
    position: relative;
    margin-top:5px
}
.form-pass label {
    position: absolute;
    background-color: white;
    line-height:8px;
    top: -4px;
    left: 10PX;
    font-size: 12px;
    color: #6c757d;
}
.form-captcha {
    position: relative;
    margin-top:5px
}
.form-captcha label {
    position: absolute;
    background-color: white;
    line-height:8px;
    top: -4px;
    left: 10PX;
    font-size: 12px;
    color: #6c757d;
}
.forgot-text {
    color: var(--primary-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    margin-top: 10px;
}
.button-login {
    border-radius: 15px;
    width: 300px !important;
    height: 50px!important;
    font-family: inherit;
    font-size:  var(--font-size-md);
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0px;
}
.rights-text{
    margin-top: 40px !important;
    color: #757575;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}
#loginViewModel_RememberMe{
    color:#FA8072;
}
.width-input {
    width: 300px !important;
    padding: 0 !important;
}
.h-47{
    height:47px!important;
}
.vh-90 {
    height: 98vh !important;
}
.mb-5vh{
    margin-bottom: 5vh;
}
.mb-3vh {
    margin-bottom: 3vh;
}
.mb-1vh {
    margin-bottom: 1vh;
}
.z-index-100 {
    z-index: 100;
}
.btn-no-hover:hover {
    background-color: #fff !important ;
}
.mt-15vh {
    margin-top: 0vh;
}
.radius-pass {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

::placeholder {
    font-size: var(--font-size-md);
    opacity: 0.8;
}
.error-box {
    display: flex;
    text-align: center;
    justify-content: center;
}

/* Responsive font sizes */
@media (min-width: 1300px) {
    :root {
        --font-size-md: 14px;
        --font-size-xxxxl: 35px; 
    }
}

@media only screen and (min-width: 1100px) and (max-width: 1300px) {
    :root {
        --font-size-md: 12px;
        --font-size-xxxxl: 32px; 
    }
}

@media only screen and (min-width: 990px) and (max-width: 1100px) {
    :root {
        --font-size-md: 11px; 
        --font-size-xxxxl: 30px; 
    }
}

@media only screen and (min-width: 768px) and (max-width: 990px) {
    :root {
        --font-size-md: 10px; 
        --font-size-xxxxl: 27px; 
    }
    .width-input {
        width: 250px !important;
        padding: 0 !important;
    }
    .button-login {
        width: 250px !important;
        height: 50px !important;
    }
}
@media (max-width: 768px) {

    :root {
        --font-size-md: 10px; 
        --font-size-xxxxl: 22px; 
    }
    .login-mobile-bg {
        background-image: url("../Images//login-banner.png")
    }
    .vh-90 {
        height: 84vh !important;
    }
    .mb-5vh {
        margin-bottom: 3vh;
    }

    .mb-3vh {
        margin-bottom: 1.5vh;
    }

    .mb-1vh {
        margin-bottom: 0.5vh;
    }
    .mt-15vh {
        margin-top: 6vh;
    }
}


.custom-checkbox{

    border: 2px solid red; /* Change to your desired color */
    border-radius: 4px;
}
img.img-login{
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
}