body {
    font-size: 14px;
    font-family:Arial, sans-serif;

    /*background-color: #f3f3f6;*/
    /*background-image: url('img/background.jpg');*/
}

.wallpaper {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-image: url('../img/background_login.png');
    background-size: cover;
    opacity: 0.5;
    filter:alpha(opacity=50);
}

.error {
    /*width: 550px;*/
    color: red;
    font-weight: bold;
    margin: 32px auto;
    text-align: center;
    font-size: 16px;
}

div.lib {
    color: #6D6E71;
    cursor: default;
    padding-top: 5px;
    margin-bottom: 5px;
    width: 90%;
    margin: auto;
}

div.lib input {
    text-align: center;
}

.button input.connexion{
    background-color: #495870;
    color:#fff;
    font-size: 18px;
    cursor: pointer;
    border : 1px solid #495870;
    position: relative;
    top: 0px;
    padding: 15px 10px;
    transition: 0.3s;
    width: 100%;
    border-radius: 7px;
    margin-top: 25px;
}

div.wait-on-submit-container{
    position: relative;
    top: 0px;
    margin-top: 43px;
    margin-bottom: 42px;
    width: 100%;
    text-align: center;
}

/*img.wait-on-submit{
    padding-left: 140px;
}*/

.button input.connexion:hover, .button input.connexion:focus {
    background-color: #738eb7;
}

#title {
    font-family: 'icomoon';
    font-size: 36px;
    float: right;
    padding-right: 20px;
    padding-bottom: 10px;
    color:#6D6E71;
    text-shadow: rgba(0, 0, 0, 0.3) -1px 0, rgba(0, 0, 0, 0.6) 0 -1px, rgba(255, 255, 255, 0.3) 0 1px, rgba(0, 0, 0, 0.6) -1px -2px;
    margin-top: 20px;
    cursor:default;
}

#saisie {
    position: relative;
    margin-top: 10px;
}

#title_acces {
    width:340px;
}

/*Useless ?*/
#acces {
    width:140px;
    background-color:#E6E7E8;
    padding:8px;
    font-size:16px;
    color:#950E0F;
    text-align:center;
    text-shadow: white 0px 1px 1px;
    border-radius:8px 8px 0px 0px;
    behavior:  url("${url('/PIE.htc')}");
    cursor:default;
}

/*Useless ?*/
#logo {
    font-family: 'icomoon';
    padding-top: 30px;
    font-size:100px;
    text-align:center;
    color:#424142;
    text-shadow: rgba(0, 0, 0, -1) -1px 0, rgba(0, 0, 0, 1) 0 -1px, rgba(255, 255, 255, 0.3) 0 1px, rgba(0, 0, 0, 1) -1px -2px;
    cursor:default;
    display: none;
}

#logo_client{
    margin: 10px auto auto;
    text-align: center;
    width: 100%;
    /*position: relative;*/
    /*top: -15px;*/
}

#logo_down {
    width: 150px;
    margin : auto;
}

#logo_down img {
    width: 150px;
}

form[name='login-form']{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateY(-50%)translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    background-color: white;
    padding-top: 20px;
    border-radius: 10px;
}

form[name='login-form'],
form[name='reset_password-form'] {
    margin: auto;
    min-height: 215px;
    width: 600px;
}

#saisie input:-webkit-autofill,
#saisie textarea:-webkit-autofill,
#saisie select:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px #fff; /*chrome only*/
    -webkit-border: bor;
}

#nm, #nm_display, #pa, #password, #confirm, #cvv, #displayed_cvv {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border-radius: 7px;
    border: 1px solid #adadad;
    font-size: 18px;
}

div.button{
    width: 50%;
    margin: auto;
}

#pa::-ms-reveal,#password::-ms-reveal, #confirm::-ms-reveal{
    display: none;
}

span.password_eye{
    font-family: 'icomoon';
    cursor: pointer;
    color: #00384d9e;
    font-size: 2em;
    position: absolute;
    top: 13px;
    right: 5px;
}

div.password_and_icon{
    position: relative;
}

/**** CREATE ACCOUNT *************************************************/

#create_account{
    margin-top: 10px;
    margin-left: 30px;
    color: blue;
    cursor: pointer;
}

div#create_account_popup h3{
    text-transform: uppercase;
    text-align: center;
}

/*div#create_account_popup div.row{
    margin-top: 5px;
    margin-bottom: 5px;
}
*/
div#create_account_popup div.row input{
    max-width: 170px;
    min-width: 170px;
    margin-left: 10px;
    /* On met les margin top et bottom sur chaque élément pour que l'affichage soit + joli en cas de page trop étroite */
    margin-top: 5px;
    margin-bottom: 5px;
}

/*Fichus select qui ne respectent pas les tailles*/
div#create_account_popup div.row select{
    max-width: 178px;
    min-width: 178px;
    height: 21px;
    margin-left: 10px;
    /* On met les margin top et bottom sur chaque élément pour que l'affichage soit + joli en cas de page trop étroite */
    margin-top: 5px;
    margin-bottom: 5px;
}

div#create_account_popup div.row input.nogood,
div#create_account_popup div.row select.nogood,
#reset_password-form div#saisie input.nogood{
    border: 2px solid #FF3300 !important;
}

div#create_account_popup div.row.button_save_container input{
    max-width: 174px;
    min-width: 174px;
    height: 25px;
    background-color: #FFB20F;
    color: white;
    border: none;
    margin-top: 10px;
}

div#create_account_popup div.row.button_save_container input.disabled{
    background-color: lightgrey;
}

div#create_account_popup div#message_displayer{
    margin-left: 10px;
    margin-top: 10px;
    text-align: justify;
}

/**** FORGOTTEN PASSWORD *************************************************/

#forgotten_password{
    margin-top: 10px;
    margin-left: 30px;
    color: blue;
    cursor: pointer;
}

div#forgotten_password_popup{
    text-align: center;
}

div#forgotten_password_popup h3{
    text-transform: uppercase;
}

div#forgotten_password_popup div.mail_input_container input{
    max-width: 200px;
    min-width: 200px;
    height: 25px;
}

div#forgotten_password_popup div.button_save_container{
    margin-top: 10px;
    margin-bottom: 10px;
}

div#forgotten_password_popup div.button_save_container input{
    max-width: 150px;
    min-width: 150px;
    height: 25px;
    background-color: #FFB20F;
    color: white;
    border: none;
}

div#forgotten_password_popup div#message_displayer{
    margin-top: 5px;
    margin-bottom: 5px;
}

/**** TSV *************************************************/

#two_step_verification_popup{
    overflow: auto;
    height: 600px;
    width: 101.5%
}

#two_step_verification_popup::-webkit-scrollbar{
    width: 0.3em;
}

#two_step_verification_popup::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}

#two_step_verification_popup::-webkit-scrollbar-thumb{
    background-color: #2d2d2d;
    outline: 1px solid #2d2d2d;
}

#two_step_verification_popup .tsv {
    width: fit-content;
    margin: auto;
}

#two_step_verification_popup .tsv_method {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 60px;
    line-height: 60px;
    border:  1px solid grey;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

#two_step_verification_popup .tsv_method:hover,
#two_step_verification_popup .tsv_method.active {
    border-color: red;
}

#two_step_verification_popup span.bold_span{
    font-weight: bold;
}

#two_step_verification_popup span.title{
    font-size: 16px;
}

#two_step_verification_popup div#saisie{
    margin-top: 35px;
}

#two_step_verification_popup span#name,
#two_step_verification_popup span#secret{
    cursor: pointer;
}

#two_step_verification_popup div#application.bloc li{
    margin: 15px 0px;
}

#two_step_verification_popup div#application.bloc a{
    text-decoration: none;
}

#two_step_verification_popup div.bloc{
    margin-top: 35px;
    text-align: center;
}

#two_step_verification_popup div#application.bloc img.qrcode{
    display: block;
    margin: auto;
    width: 200px;
}

#two_step_verification_popup div#application.bloc div.badges div{
    width: 49%;
    display: inline-block;
    vertical-align: middle;
}

#two_step_verification_popup div#application.bloc div.badges img{
    margin: auto;
    display: block;
    width: 200px;
}

#two_step_verification_popup div#application.bloc div.badges div.play_store_badge img{
    height: auto;
}

#two_step_verification_popup div#application.bloc div.badges div.apple_store_badge img{
    height: 55px;
}

#two_step_verification_popup div.div_cvv{
    height: 30px;
    width: 50%;
    margin: 20px auto;
}

#two_step_verification_popup input#displayed_cvv{
    text-align: center;
}

#two_step_verification_popup span#receive_mfa_code{
    padding: 10px;
    border: 1px solid #495870;
    border-radius: 5px;
    background-color: #495870;
    color: white;
    cursor: pointer;
}

#two_step_verification_popup span#receive_mfa_code:hover{
    background-color: #738eb7;
}

#two_step_verification_popup div.title{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 6px;
}

.displaynone{
    display: none;
}

/**** OVERLAY *************************************************/

div.overlay{
    background: black;
    opacity: 0.2;
    filter:alpha(opacity=20);
    /*height: 100%;*/
    width: 100%;
    position: absolute;
    top: -1px;
    display: none;
    z-index: 1000;
}

/**** MEDIA QUERIES *************************************************/

/*@media only screen and (min-width:321px) and (max-width:768px) and (orientation:portrait){
    .button input.connexion{

    }
}*/

@media only screen and (min-width:321px) and (max-width:768px){
    form[name='login-form']{
        width: 97%;
    }
}