body{
    background-color:var(--bs-body-bg)
}
#auth{
    height:100vh;
    overflow-x:hidden
}
#auth #auth-right{
    height:100%;
    background:url(./png/4853433.png),linear-gradient(90deg,#000,#fff)
}
#auth #auth-left{
    padding:5rem
}
#auth #auth-left .auth-title{
    font-size:4rem;
    margin-bottom:1rem;
    color:white;
}
#auth #auth-left .auth-subtitle{
    font-size:1.7rem;
    line-height:2.5rem;
    color:#a8aebb
}
#auth #auth-left .auth-logo{
    margin-bottom:7rem
}
#auth #auth-left .auth-logo img{
    height:2rem
}
@media screen and (max-width: 1399.9px){
    #auth #auth-left{
        padding:3rem
    }
}
@media screen and (max-width: 767px){
    #auth #auth-left{
        padding:5rem
    }
}
@media screen and (max-width: 576px){
    #auth #auth-left{
        padding:5rem 3rem
    }
}
html[data-bs-theme=dark] #auth-right{
    background:url(./png/4853433.png),linear-gradient(90deg,#2d499d,#3f5491)
}

.dark-theme {
    background-color: #1e1e1e;
    color: #c5c6c7;
}

.dark-theme .form-control {
    background-color: #2b2b2b;
    color: #c5c6c7;
    border: 1px solid #444;
}

.dark-theme .form-control::placeholder {
    color: #888;
}

.dark-theme .btn-primary {
    background-color: #4a76a8;
    border-color: #4a76a8;
}

.dark-theme .btn-primary:hover {
    background-color: #3b5a6e;
    border-color: #3b5a6e;
}

.dark-theme .card {
    background-color: #282828;
    border: 1px solid #444;
}

.dark-theme .text-primary {
    color: #4a76a8 !important;
}