/* Login page styles */

#login-title {
    font-size: 160%;
    margin: 20px;
}

#login-subtitle {
    font-size: 130%;
    margin: 10px 0 30px 0;
}

#form_login .icon {
    margin: 12px 0 0 -30px;
    position: absolute;
    color: #8B9883;
}

@keyframes login_init {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 1;
    }
}

body {
    background: #eeeeee;
    font-family: Arial, sans-serif;
}

#main {
    max-width: 400px;
    margin: 40px auto;
    text-align: center;
    background: #CFD4CC;
    border: 1px solid #8B9883;
    padding: 5px;
}

#footer {
    font-size: 0.8em;
    color: gray;
    text-align: center;
}

form {
    padding: 5px;
}
input[type="text"], input[type="password"] {
    padding: 8px 30px 8px 8px;
    margin: 3px;
    border: 1px solid #8B9883;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
    animation-name: login_init;
}
form input[type="submit"] {
    margin: 20px 0 0 0;
    min-width: 90px;
    padding: 5px;
}
#messages {
    font-size: 0.8em;
}
#messages ul {
    list-style: none;
    padding: 0;
}
#messages .error {
    color: red;
}


/* Mobile */
@media screen and (max-width: 414px) and (max-height: 736px) and (orientation: portrait) {

    body #main {
        max-width: 95%;
        padding: 40px 0;
    }

    body #main input[type="text"],
    body #main input[type="password"]
    {
        width: 80%;
        margin: 10px 0;
        text-align: center;
        font-size: 1.3em;
    }

    body #main input[type="submit"] {
        width: 80%;
        margin: 20px 0 0 0;
    }
    body #form_login .icon {
        margin: 25px 0 0 -30px;
    }
}

@media screen and (max-width: 736px) and (max-height: 414px) and (orientation: landscape) {

    body #main {
        margin: 18px auto;
        max-width: 80%;
    }

}

.g-recaptcha
{
    margin-top: 20px;
}

.g-recaptcha div
{
    margin: 0 auto;
}

#lang
{
    display: inline-flex;
    margin: 0 auto;
    width: 150px;
}

.lang_button
{
    width: 50px;
    margin-bottom: 10px;
}

.lang_button img
{
    cursor: pointer;
}