/*
    Bleu clair  : #3246bc   rgb(50,70,188)
    Bleu foncé  : #27348b   rgb(39,52,139)
    Violet clair : #853ea5  rgb(133,62,165)
    Violet foncé : #502d87  rgb(80,45,135)
    Gris clair   : #4a4a49
    Gris foncé   : #3c3c3b
*/

#website-reolin {
    position: fixed;
    bottom: 1em;
    right: 1em;
    width: 10em;
}

body {
    font-family: Ubuntu, Roboto, sans-serif;
    font-size: 100%;
    margin:0;

    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(to right, #5FB9C7, #428994);
    background-size: cover;
    background-repeat: repeat;
}

p {
    font-size: 100%;
}

div {
    font-size: 100%;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/********************/
/*    Login form    */
/********************/
div.loginContainer {
    background-color: white;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 90px;
    display: flex;
    max-height: 890px;
    max-height: 800px;
    max-width: 800px;
    margin-top: 20px;
    margin-bottom: 20px;
}

div.loginContainerLeft {
    width: 520px;
    display: flex;
    flex-direction: column;
}

div.loginContainerRight {
    display: flex;
    justify-content: center;
    background-color: #5FB9C7;
    width: 520px;
    border-radius: 80px;
    margin-top:20px;
    margin-right:20px;
    margin-bottom: 20px;
}

div.loginContainerRight > img {
    object-fit: contain;
    width: 90%;
}

div.login2 {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

div.loginTitle {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

div.loginlogo {
    max-width:380px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    justify-content: center;
}

div.loginlogo > img {
    max-width:300px;
    max-height:200px;
    object-fit: contain;
}

div.login-form {
    padding: 0 24px 50px 24px;
    position: relative;
    line-height: 1.7222;
    width:360px;
}

div.form-group {
    box-sizing: border-box;
    margin-bottom: 0;
    position: relative;
    line-height: 1.72222;
}

div.form-group:first-of-type {
    margin-bottom: 15px;
}

input.login-field {
    box-sizing: border-box;
    text-indent: 3px;
    font-size: 20px;
    width:100%;
    height:60px;
    line-height: 1.467;
    text-align: left;
    border:2px solid #5FB9C7;
    border-radius: 45px;
    padding:8px 20px;
    transition: border 0.25s linear 0s, color 0.25s linear 0s, background-color 0.25s linear 0s;
}

span.showPassword {
    position: absolute;
    right: 15px;
    top: 15px;
    line-height: 30px;
    font-size: 1.5em;
    font-weight: bold;
    color: #5FB9C7;
}

input.login-field:focus {
    border-color: #008791;
}

input.login-field:focus + label.login-field-icon {
    color: #008791;
}

button.btn-login {
    border:none;
    box-sizing: border-box;
    font-size: 25px;
    line-height: 1.471;
    background-color: var(--btn-login_background);
    color: var(--btn-login_color);
    border-radius: 45px;
    text-decoration: none;
    width:100%;
    height: 60px;
    display: block;
    cursor:pointer;
    text-align:center;
    margin-bottom: 2px;
}

button.btn-login:hover {
    opacity: 0.9;
}

div.ReolinLogo {
    padding: 30px 0 0 30px;
    text-align: left;
}

a.reolin_logo > img {
    max-width: 100px;
    max-height: 100px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    font-style: italic;
    font-weight:normal;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    font-style: italic;
    font-weight:normal;
}

a.forgot_password {
    float:right;
    color: var(--forgot_password);
    padding-bottom:0.5em;
    font-size: 15px;
}

@media (max-width:1024px) {
    div.loginContainer {
        border-radius: 45px;
    }

    div.loginContainerLeft {
        width: 400px;
    }

    div.loginContainerRight {
        display: none;
    }

    div.login-form {
        padding: 0;
        width:auto;
    }

    div.ReolinLogo {
        text-align: center;
    }
}

@media (max-height:720px) {
    div.loginlogo {
        display: none;
    }
}



/*
    Violet clair : #853ea5
    Violet foncé : #502d87
    Gris clair   : #4a4a49
    Gris foncé   : #3c3c3b
*/
