body { background-color: #000; height: 100%; }

.login-page { display: flex; min-height: 100vh; }
.login-image { flex: 1; background: url(../images/login-banner.webp) center center / cover no-repeat; }
.login-panel {
    flex: 1; /* 50% width */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.login-panel h4 { padding-bottom: 25px; font-size: 26px; color: #fff; font-weight: bold; letter-spacing: 1px;}

.form-box { width: 300px; color: #fff; text-align: center; }
.form-box .logo { width: 100%; margin-bottom: 1.5rem; }
/* .form-box h1 { font-size: 2rem; margin-bottom: 1.5rem; } */
.form-box ul li { margin-bottom: 15px; }
.form-box ul li .field { width: 100%; }
.form-box ul li .roundedborder {
    border: solid 1px #eeeeee;
    border-radius: 30px;
    padding: 18px 26px;
    text-align: left;
}
.form-box ul li .field i {
    color: #fff;
    margin-right: 3px;
}

.form-box ul li .field input { width: 197px; color: #fff; }

/* Chrome / Edge / Opera */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}
/* Firefox */
input:-moz-autofill {
    box-shadow: 0 0 0 1000px transparent inset !important;
    -moz-text-fill-color: #fff;
}

.form-box ul li .field button {
    width: 100%;
    padding: 18px 0;
    background: #0C8443;
    font-size: 16px;
    color: #fff;
    font-weight: 200;
    text-align: center;
    border-radius: 30px;
    letter-spacing: 1.5px;
}
.form-box ul li .field a.plaintext { width: 100%; font-size: 16px; color: #fff; font-weight: 200; text-align: center; }
/* .form-box ul li .field a { width: auto; text-align: right;} */


/* .registr-wrap-head { padding-bottom: 25px; }
.registr-wrap-head h4 { font-size: 26px; color: #fff; font-weight: bold; letter-spacing: 1px; }
.registr-wrap-hd p { font-size: 18px; color: #000; padding-top: 10px; } */

/* === Below 1024px === */
@media (max-width: 1024px) {

    .login-page {
        position: relative;
        justify-content: center;
        align-items: center;
    }
  
    /* Show the same image as a full-screen background */
    .login-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/login-banner.webp) center center / cover no-repeat;
        filter: brightness(40%); /* darken the image */
        z-index: -1;             /* keep it behind the form */
    }
  
    .login-panel {
        flex: none;
        width: 100%;
        background: transparent; /* let the darkened image show */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
    }

    .form-box { width: 300px; }
}

.error-wrap { width: 300px; }
.error-wrong { background-color: #ffd5d5;}
.error-wrap .error-wrong ul,
.error-wrap .error-success ul {width: 100%; margin-bottom: 25px; padding: 15px 10px 10px 30px;}
.error-wrap .error-wrong ul li,
.error-wrap .error-success ul li { width: 100%; margin-bottom: 10px; font-size: 14px; list-style: disc; line-height: 20px; text-align: justify;}
.error-wrap .error-wrong ul li { color: #ff0000; }

.error-success { background-color: #d5ffda;}
.error-wrap .error-success ul li { color: #1d8122; }