body{
    background-image: url("/assets/accueil-EB-copa-fr.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

#login-logo{
    width: 25%;
    max-width: 256px;
}

#login-form{
    height: 30%;
    border: 0;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 30px 24px 30px 24px;
    max-width: 450px;
    min-width: 200px;
    width: 80%;
    margin: 5% auto;
}

#login-form * {
    margin: 0;
    padding: 0;
}

#login-form label{
    color: #72777c;
    font-size: 14px;
    margin-left: 8px;
}

#login-form input[type=password],  #login-form input[type=text]{
    color: #32373c;
    font-size: 14px;
    margin-bottom: 16px;
    border: #dddddd 1px solid;
    border-radius: 8px;
    padding: 3px 0 3px 12px;
    line-height: 1.33;
    width: 100%;
    height: 38px;
    outline: none;
}

#login-form input[type=checkbox]{
    appearance: none;
    height: 16px;
    width: 16px;
    background-color: #fbfbfb;
    border: 1px #b4b9be solid;
    border-radius: 4px;
    cursor: pointer;
    outline: 0;
}

#login-form input[type=checkbox]:before{
    content: "";
    position: absolute;
    display: none;
    width: 16px;
    height: 16px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
}

#login-form input[type=checkbox]:checked:before{
    display: block;
    background-color: #0085ba;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0.8);
}

#login-form button{
    float: right;
}

#lang-popup{
    width: 10%;
    max-width: 70px;
    display: inline-block;
    text-align: center;
}

#lang-popup img{
    margin-top: 10px;
    border-radius: 100px;
    transition: margin-left 0.2s;
}

#lang-popup img.selected{
    border: 4px #0085ba solid;
    margin-left: 4px !important;
}

.clickable{
    cursor: pointer;
}

#password-eye{
    margin-left: -30px;
    position:absolute;
    margin-top: 7px;
    cursor: pointer;
}