.body-login {
    display: flex;
    min-height: 100vh;
    background-color: black !important;
}

.container.login {
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    background-color: #368636;
    width: 100%;
    padding: 1em;
}
.container.login form {
    padding: 1em;
    width: 30em;
    margin: auto;

}


.container.login h3 {
    color: darkgreen;
    margin-bottom: 8px;
    font-size: 30PX;
    background-color: greenyellow;
    padding: 10px;
    border-radius: 8px;
}

.container.login span:first-of-type {
    color: #c5c7c5;
    text-align: center;
}


.container.login {
    width: 100%;
}

#banner {
    border-right: 4px solid yellowgreen;
}

#logo{
    width: 80%;
    margin: auto!important;
}
#banner{
    background-image: url(../img/login_banners/b4.jpg);
    width: 85%!important;
    background-size: cover!important;
}
@media only screen and (max-width:650px) {

    .body-login {
        display: flex;
        min-height: 100vh;
        background-color: black !important;
        flex-direction: column!important;
    }
    #login{
        background-image: url(../img/login_banners/b3.jpg)!important;
        background-size: cover!important;
    }
    form{
        border-radius: 8px;
        background-color: #174d13db;
    }
}