html, body {
    height: 100%;
    margin: 0;
}

.fontred {
    color: #DC1010;
}
/*.fontred {
    color: #29166F;
}*/

.fontgray {
    color: #999999;
    font-size: 1.2rem;
}

.logintext {
    /*border: 1px solid #cbced1;*/
    border: 0;
    border-bottom: 1px solid;
    border-radius: 0px;
    color: #bababa;
    padding: 10px 15px;
    margin-top: 10px;
    font-size: 0.92rem;
}

    .logintext:focus {
        /*border: 1px solid #29166F;
        background-color: #ffffff;
        transition: all ease-in-out .5s;
        padding: 10px 15px;
        margin-top: 10px;
        color: #29166F !important;
        outline: none;*/


        color: #545965;
        background-color: #FFF;
        border-color: #BABABA;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.authentication {
    background-size: cover;
    background-repeat: no-repeat;
    /*background-image: url(//themesdesign.in/webadmin/layouts/assets/images/login-img.png);*/
    background-image: url(../img/login-img.png);    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: inherit;
}

.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    opacity: .7;
    background-color: #000;
    --bs-bg-opacity: 1;
    background-color: rgba(245,246,248,var(--bs-bg-opacity)) !important;
}

.authentication .bg-overlay {
    opacity: .85;
}

.loginbutton {
    background-color: #EC3237;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 10px 10px;
    /*width: 85%;*/
    font-size: 16px;
    height: 50px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

    .loginbutton:hover {
        background-color: #DC1010;
        transition: all ease-in-out .5s;
        padding: 10px 10px;
        color: #FFFFFF !important;
        outline: none;
        height: 50px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    /*.loginbutton:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
    }

    .loginbutton:after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
        transition: 0.5s;
        transition-delay: 0.5s;
    }

    .loginbutton:hover:after {
        left: 100%;
    }*/


/*.logo {
    margin-left: 80px;
}*/
.center {
    text-align: center;
}

.logo {
    width: 50%;
    padding: 0% 0 5% 0;
}

.innerdiv {
    padding: 5% 10% 10% 10%;
    box-shadow: 0 0 25px 5px rgb(0 0 0 / 10%);
    text-align: center;
    border-radius: 2%;
    background-color: #fff;
}

.mrgtp12 {
    margin-top: 12%;
}

.mrgtp11 {
    margin-top: 11%;
}

.mrgtp8 {
    margin-top: 8%;
}

.mrgtp5 {
    margin-top: 5%;
}

.mrgtp2 {
    margin-top: 2%;
}

.mrgless20 {
    margin-top: -20px;
}

.mrgless15 {
    margin-top: -15px;
}

.maindiv {
    /*padding: 0px 85px;*/
    padding: 0% 30% 0 30%;
}

.forgotpassword {
    color: #999999;
    font-size: 1.0rem;
}

.imgbox {
    display: grid;
    height: 100%;
}

.center-fit {
    margin: auto;
    padding: 0;
    width: 100%;
}
.input-icon {
    text-align: left;
}

.has-error .help-inline, .has-error .help-block, .has-error .control-label {
    color: #ec3439;
}

@media only screen and (max-width: 600px) {
    .maindiv {
        padding: 10px 35px;
        text-align: center;
        margin-bottom: 10%;
    }

    .logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.input-icon {
    position: relative;
}

    .input-icon i {
        color: #ccc;
        display: block;
        position: absolute;
        margin: 12px 2px 4px 10px;
        width: 16px;
        height: 16px;
        font-size: 0.92rem;
        text-align: center;
    }

    .input-icon input {
        padding-left: 33px !important;
    }
@media only screen and (max-width: 768px) {
    .maindiv {
        padding: 0% 10% 0% 10%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .maindiv {
        padding: 0% 20% 0% 20%;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .maindiv {
        padding: 0% 25% 0% 25%;
    }
}