/**********************************************************/
/**** LOGIN ***********************************************/
/**********************************************************/
body {
    display:        flex;
    justify-content: center;
    align-items:    center;
    text-align:     center;
    background:     #6b6b6b;
}

#login {
    padding:        1em;
    width:          90%;
    max-width:      22em;
    text-align:     center;
    background:     #fff;
    box-shadow:     0 0 2em rgba(0,0,0,.3);
}

#login.error {
    animation:      errorShake 250ms ease-in-out;
}

#login::before {
    content:        '';
    display:        inline-block;
    margin-top:     1em;
    margin-bottom:  2em;
    width:          8em;
    height:         8em;
    background:     #000 url(../images/login-icon.png) no-repeat center;
    background-size: cover;
    border-radius:  10em;
}


#login p.error {
    padding:        1em;
    text-align:     center;
    font-weight:    bold;
    color:          #ff0c0c;
    visibility:     hidden;
}

#login.error p.error {
    visibility:     visible;
}

#login input.text {
    width:          100%;
    margin-bottom:  .7em;
    padding:        1em;
    color:          #666;
    background:     #eee;
    border-left:    .2em solid var(--form-color1);
}

#login.error form input.text {
    color:          red;
    border-color:   red;

}

#login input[type='submit'] {
    width:          auto;
    color:          var(--form-color1);
    margin:         .5em 0;
    padding:        1em;
    line-height:    1em;
    color:          #fff;
    background:     var(--form-color1);
}


/******************** ANIMATIONS ********************/
@keyframes errorShake {
    0%    { transform: translate3d(1em,0,0); }
    25%   { transform: translate3d(-1em,0,0); }
    50%   { transform: translate3d(.7em,0,0); }
    70%   { transform: translate3d(-.4em,0,0); }
    90%   { transform: translate3d(-.2em,0,0); }
    100%  { transform: translate3d(0,0,0); }
}