body {
    background-color: #fff;
    margin: 0 !important;
}

body.theme-dark {
    background-color: #080929;
}

body.theme-dark #auth .btn-primary {
	background-color: var(--brand-color);
	border-color: var(--brand-color);
}

#auth {
    height: 100vh;
    overflow-x: hidden
}

body.theme-dark #auth input:autofill, body.theme-dark input:-webkit-autofill {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0 1000px var(--box-bg-color) inset !important;
}

    #auth #auth-left {
        background: url('/public/images/login-bg.png'),linear-gradient(90deg,#2d499d,#3f5491);
        height: 100%;
        background-size: cover;
    }

    #auth #auth-right {
        padding: 5rem 8rem
    }

        #auth #auth-right .auth-title {
            font-size: 2.2rem;
            margin-bottom: 1rem
        }

        #auth #auth-right .auth-subtitle {
            color: #a8aebb;
            font-size: 1.7rem;
            line-height: 2.5rem
        }

        #auth #auth-right .auth-logo {
            margin-bottom: 7rem
        }

            #auth #auth-right .auth-logo img {
                max-height: 85px
            }

    #auth :focus-visible {
        outline: none !important;
    }

.form-group[class*=has-icon-] .form-control-icon {
    padding: 0 .6rem;
    position: absolute;
}

.is-rtl .form-check {
    padding-right: 1.7em;
    padding-left: unset;
}

.is-rtl .form-group[class*="has-icon-"].has-icon-left .form-control {
    padding-left: 0.75em !important;
    padding-right: 2.5rem;
}

.is-rtl .form-group[class*="has-icon-"].has-icon-left .form-control-icon {
    left: unset !important;
    right: 0;
}

#auth .form-control::placeholder {
    opacity: 1 !important;
}

body .form-control ~ .form-control-icon {
    top: 0.75rem !important;
    font-size: 1.4em;
}

#auth .btn-primary {
    background-color: var(--bg-color);
    border-color: var(--bg-color);
}

.form-check {
    padding-right: 1.7em;
    padding-left: unset;
}

    .form-check.form-check-lg .form-check-input {
        height: 1.3rem;
        width: 1.3rem;
        margin-top: .3em;
        margin-right: -1.7em;
    }

@media screen and (max-width:767px) {
    #auth #auth-right {
        padding: 5rem
    }
}

@media screen and (max-width:576px) {
    #auth #auth-right {
        padding: 5rem 3rem
    }
}

body.theme-dark #auth-left {
    background: url('/public/images/login-bg.png'),linear-gradient(90deg,#2d499d,#3f5491)
}