/* ==========================================================================
   Loginbereich
   ========================================================================== */

#login {display:flex;
justify-content: center;
align-items:center;
width:100%;
height:100vh;
background-color: #efefef;
background-image: url("../img/dark-stripes-light.png");
padding:1rem;}

div#login:before {
    content: "";
    width: 100vw;
    height: 250px;
    background: rgba(0,0,0,0.3);
    background-image:url("/assets/img/shutterstock_1781271839.png");
    background-size:cover;
    background-position: center;
    position: fixed;
    z-index: 0;
    opacity: 0.05;
    filter: brightness(0);
    box-shadow: inset 0 0 7px rgba(0,0,0,0.2);
    /*filter: grayscale(1);
    box-shadow: inset 0 0 7px rgba(0,0,0,0.2);*/
}

#login > div {max-width:800px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border-radius:20px;
    overflow: hidden;
    background:#fff;
    width:100%;
    display:flex;
position: relative;
z-index:1;}

#login > div > div {width:50%;
    min-height:492px;}

#login > div > div:first-child {background:url("/assets/img/learning.jpg");
    background-size:cover;}

#login > div > div:last-child {width:50%;
    padding:20px;}

#login > div > div:last-child > div {
    padding:3.5em;
        border:1px dashed #ddd;
        border-radius:10px;    
        min-height:472px;}

#loginlogo {max-width:150px;
    margin:0 auto 4em;
    width:100%;
display:block;}

.formfield {position:relative;}

.formfield label {font-size:0.7em;
text-transform: uppercase;}

.input-icon {position:absolute;
    opacity:0.2;
    bottom:0.8em;
    left:0.5em;}

.input-icon + input.form-control {padding-left:2em;}

.form-group {margin: 1em 0;}

#login .btn-ohne,
#login .btn-primary {display:block;
    margin:0.5em 0;
    width:100%;
text-align: center;}

.notification {color:#fcb117;
    font-style: italic;
    text-align: center;}

@media all and (max-width:700px) {
    #login > div > div:first-child {display:none;} 

    #login > div > div:last-child {width:100%;} 
}