@charset "UTF-8";

.login-box input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

.login-box {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    max-width: 360px;
}
.login-box .card-header img {
    max-width: 90%;
}
.login-box .show-password {
    right: 48px;
}

/* Styles that not depend on theme */
#languageDropDown i {
    height: 18px;
}
#colorDropDown {
    font-size: 18px;
}

/* Light Theme color styles */
.light-mode .login-box .card {
    color: #676a6c;
}
.light-mode .card-primary.card-outline {
    border-top: 3px solid #1ab394;
}
.light-mode .login-box .card-header img {
    filter: brightness( 0 )
            saturate( 100% )
            invert( 41% )
            sepia( 7% )
            saturate( 209% )
            hue-rotate( 161deg )
            brightness( 96% )
            contrast( 85% );
}
.light-mode .login-box .dropdown-toggle i {
    color: #555;
}
.light-mode .login-box .dropdown-toggle::after {
    color: #555;
}

/* Dark Theme color styles */
.dark-mode .login-box .card-header {
    border-bottom: 1px solid rgba( 255, 255, 255, .125 );
}
.dark-mode .login-box .card-header img {
    filter: brightness( 0 )
            saturate( 100% )
            invert( 93% )
            sepia( 19% )
            saturate( 0% )
            hue-rotate( 134deg )
            brightness( 96% )
            contrast( 89% );
}
.dark-mode .login-box .dropdown-toggle i {
    color: #fff;
}
.dark-mode .login-box .dropdown-toggle::after {
    color: #fff;
}