/*
    Vert clair   : #87b626
    Vert foncé   : #52ae32
    Gris clair   : #4a4a49
    Gris foncé   : #3c3c3b
*/

@font-face {
    font-family: 'exo';
    font-style: normal;
    font-weight: normal;
    src: url('Exo2.0-Medium.otf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    src: url(Roboto.woff) format('woff');
}

@font-face {
    font-family: 'Satoshi-Variable';
    src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
    url('fonts/Satoshi-Variable.woff') format('woff'),
    url('fonts/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

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

body {
    font-family: 'Satoshi-Variable', 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, #5c8413, #87b626);
    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: 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: #87b626;
    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 #87b626;
    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: #52ae32;
}

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

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

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;
}

input:-ms-input-placeholder, textarea:-ms-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;
        width: calc(100% - 20px);
    }

    div.loginContainerLeft {
/*        width: 400px; */
        width: 100%;
    }

    div.loginContainerRight {
        display: none;
    }

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

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

    div.login2 {
        width: calc(100% - 20px);
    }
}

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