body {
    background: radial-gradient(circle,#333 10%,transparent 11%),radial-gradient(circle at bottom left,#333 5%,transparent 6%),radial-gradient(circle at bottom right,#333 5%,transparent 6%),radial-gradient(circle at top left,#333 5%,transparent 6%),radial-gradient(circle at top right,#333 5%,transparent 6%);
    background-size: 3em 3em;
    background-color: #141414;
}

body:has(.login-modern-layout) {
    background: #000 !important;
}

#main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

body:has(.login-modern-layout) #main {
    display: block;
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

.login-container {
    min-width: 330px;
    display: inline-block;
    background-color: #191919;
    box-shadow: 0 0 15px rgba(0,0,0,.7);
}

.login-container h1 {
    text-align: center;
    margin-bottom: 0;
    font-size: 3.5rem;
    font-weight: 700;
}

.login-container p {
    text-align: center;
    padding: 0;
    margin-bottom: 15px;
    font-size: small;
}

.login-container button {
    width: 100%;
    font-weight: 600;
    font-size: larger;
    padding: 3px;
    margin-bottom: 0 !important;
}

.login-container a {
    font-size: small;
    font-weight: 400 !important;
}

.col {
    padding: 0 !important;
}

#password {
    margin-top: 10px;
    margin-bottom: 10px;
}

.messagealerts {
    background: rgba(255,0,0,.2);
    color: #e2e2e2;
    word-wrap: break-word;
}

.form-text {
    word-wrap: break-word;
}

#main a {
    text-decoration: none !important;
    color: #2093ff !important;
    font-weight: 500 !important;
    transition: .2s;
}

#main a:hover {
    text-decoration: none !important;
    color: #0385ff !important;
    transition: .2s;
}

.login-modern-layout {
    display: flex;
    min-height: 100vh;
    background: #000;
    padding-top: 60px;
}

.login-modern-layout h1 {
    text-align: left !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
}

.login-modern-layout p {
    text-align: left !important;
    color: #b8b8b8 !important;
}

.login-form-side {
    flex: 0 0 100%;
    max-width: 600px;
    padding: 48px 60px;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
}

@media(min-width: 992px) {
    .login-form-side {
        flex: 0 0 45%;
    }
}

.login-image-side {
    flex: 1;
    position: relative;
    background-image: url('/static/img/ModernSiteImage2.png');
    background-size: cover;
    background-position: center;
}

.login-image-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

@media(max-width: 992px) {
    .login-image-side {
        display: none;
    }
    
    .login-form-side {
        max-width: 100%;
    }
}

.login-modern-layout .btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    padding: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.login-modern-layout .btn-primary:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

.login-modern-layout .btn-success {
    background-color: #00a652 !important;
    border-color: #00a652 !important;
    color: #fff !important;
    padding: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.login-modern-layout .btn-success:hover {
    background-color: #008844 !important;
    border-color: #008844 !important;
}

.login-modern-layout .form-control {
    background: #393b3d !important;
    border: 1px solid #393b3d !important;
    color: #fff !important;
    padding: 12px !important;
    border-radius: 8px !important;
}

.login-modern-layout .form-control:focus {
    background: #393b3d !important;
    border-color: #0066ff !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.login-modern-layout .form-control::placeholder {
    color: #888 !important;
}

.login-modern-layout .form-label {
    color: #fff !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.login-modern-layout a {
    color: #fff !important;
}

.login-modern-layout a span {
    color: #2093ff !important;
}

.or-divider-modern {
    position: relative;
    text-align: center;
    margin: 24px 0;
}

.or-divider-modern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #3f4147;
}

.or-divider-modern span {
    position: relative;
    background: #0a0a0a;
    padding: 0 16px;
    color: #b8b8b8;
    font-size: 14px;
}