/*
==========
Styles for form login.
==========
*/

.container__form{
    width: 100%;
    height: 100vh;
    background-color: var(--blue-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.container__form .content{
    width: 400px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container__form .content img{
    width: 170px;
    height: auto;
}

.form__login {
    width: 100%;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 1em;
    border: none;
    background-color: var(--silver-color);
    overflow: auto;
    border-radius: 5px;
}

.form__login .container__title{
    width: 100%;
    text-align: center;
}

.form__login .container__title .title__three{
    color: var(--blue-color);
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
}

.form__login .container__description{
    width: 100%;
    height: max-content;
}

.form__login .container__description .description{
    color: var(--grey-color);
    text-align: center;
    width: 100%;
    height: auto;
    padding-bottom: 1em;
}

.form__login .container__action{
    display: flex;
    justify-content: flex-start;
}

.form__login .button__green{
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.form__login .container__input__checkbox .input__checkbox{
    cursor: pointer;
    transition: all ease-in-out .3s;
}

.label__attendance{
    transition: all ease-in-out .3s;
}

.input__checkbox:hover + .label__attendance,
.label__attendance:hover {
    cursor: pointer;
    opacity: 0.5;
    transition: all ease-in-out .3s;
}

/*
==========
Styles for screens up to 400px.
==========
*/

@media (max-width: 400px) {
    .container__form .content{
        width: calc(100% - 2em);
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .container__form .content img{
        width: 130px;
        height: auto;
    }
}