html{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background-color: #f1f1f1;
}
.login__content{
    width: 100%;
    height: calc(100vh);
}

.content__form{
    width: 100%;
    height: calc(100vh);
}

#check__visible{
    width:30px;
}

.form__button{
    margin-top: 20px;
}

#login{
    position:relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width:40%;
    height: auto;
    text-align: center;
    padding:50px;
}

#pop_up_form{
    position:relative;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width:40%;
    height: auto;
    text-align: center;
    padding:50px;
}


form div{
    margin:20px 0px 20px 0px;
}

form legend{
    font-size: 2em;
}

form button{
    width: 100%;
    background-color: #b9e1ff;
    padding:10px 5px 10px 5px;
}

form input{
    width: calc(100% - 10px);
    padding:10px 5px 10px 5px;
}

form textarea{
    width:100%;
    height: 150px;
}


@media (max-width: 900px){
    #pop_up_form {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        width: calc(100% - 50px);
        height: auto;
        text-align: center;
        padding: 50px;
    }

    #login{
        width:calc(100% - 50px);
    }
}