#login, #login * { box-sizing: border-box !important; }
#login { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FCFCFC; }

#loading-application { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: white; z-index: 1000; }
#loading-application div { font-size: 14px; margin-bottom: 20px; }
#loading-application img { width: 32px; height: 32px; animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#login .login-wrapper { width: 800px; height: 442px; display: flex; background-color: #fff; border-radius: 8px; position: relative; box-shadow: 0 2px 36px rgba(0,0,0,0.125); transition: all 200ms; }

#login .login-left { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; }
#login .login-left .center-image { width: 100%; display: flex; justify-content: center; align-items: center; }
#login .login-left .center-image img { max-height: 350px; max-width: 350px; }
#login .login-left .login-left-container {  display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90%; width: 100%; padding: 20px; border-right: 1px solid #DDDDDD; }

#login #login__mdp__regles__wrapper { display: flex; align-items: center; width: 100%; justify-content: center; margin-top: 4em; }
#login #login__mdp__regles__wrapper fieldset { width: 100%; border: 1px solid rgb(222, 222, 222); border-radius: 4px; }
#login #login__mdp__regles__wrapper fieldset legend { padding: 0em 4px 0em 4px; color: #AAAAAA; }

#login #login__mdp__regles { width: 100%; padding: 1em; }
.login__mdp__regle { line-height: 2em; font-size: 1.1rem; display: flex; align-items: center; }
.login__mdp__regle .login__mdp__regle__icon { display: flex; justify-content: center; width: 30px; font-size: 1.1em; transform: translateY(1px); margin-right: 0.2em; }
.login__mdp__regle .login__mdp__regle__icon.warning { font-size: 0.8em; }
.login__mdp__regle .login__mdp__regle__icon .green { color: green; }
.login__mdp__regle .login__mdp__fullfilled { color: inherit; }
.login__mdp__regle .login__mdp__notfullfilled { color: #AAAAAA !important; }
#login__mdp__regles__wrapper fieldset { display: none; }

#login .login-right { width: 50%; height: 100%; padding: 20px 20px 20px; min-height: 250px; }
#login .login-right .title { color: #444444; font-size: 25px; font-weight: bold; }
#login .login-right .zone-bouton { display: flex; justify-content: space-between; align-items: center; }
#login .login-right .btn-identification { margin-top: 20px; }

#login .login-right .zone-bouton .zone-connexion-remember { flex: 1; margin-top: 20px; }
#login .login-right .zone-bouton .zone-connexion-remember .container { color: #666 !important; height: 24px; padding-left: 30px; top: 0 !important; display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; width: 135px; }
#login .login-right .zone-bouton .zone-connexion-remember .container input { position: absolute; opacity: 0; cursor: pointer; width: 0 !important; }
#login .login-right .zone-bouton .zone-connexion-remember .container .checkmark { cursor: pointer; position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 3px; }
#login .login-right .zone-bouton .zone-connexion-remember .container:hover input ~ .checkmark { background-color: #ccc; }
#login .login-right .zone-bouton .zone-connexion-remember .container input:checked ~ .checkmark { background-color: #2196F3; }
#login .login-right .zone-bouton .zone-connexion-remember .checkmark:after { content: ""; position: absolute; display: none; }
#login .login-right .zone-bouton .zone-connexion-remember .container input:checked ~ .checkmark:after { display: block; }
#login .login-right .zone-bouton .zone-connexion-remember .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }


#login .login-right .zone-bouton.hideOnResponsive button, #login .login-right .probleme-info.hideOnResponsive button { font-size: 13px !important; border-radius: 4px !important; box-shadow: 1px 1px 5px #D2D2D2 !important; }

#login .login-right #formulaire { margin-bottom: 5px; }

/*
 * Oeil pour visualisation du mot de passe
 **********************************************/

.struct-showhide-pwd { display: flex; flex-direction: row; align-items: center; width: 100%; border: 1px solid rgb(222, 222, 222); border-radius: 4px; transition: border 300ms; }
.myInputPwd { border-width: 0 !important; } /* On cache le style par défaut, pour avoir un div qui aura l'air d'un input avec l'icone. */
.label-login-form { opacity: 0; color: #AAAAAA; font-weight: 300; font-size: 13px; transition: opacity 500ms; }
.struct-login-form-column { display: flex; flex-direction: column-reverse; margin-bottom: 5px; }


#login .login-right #formulaire label { position: relative; top: -59px; opacity: 1; color: #AAAAAA; font-weight: 300; font-size: 13px; transition: opacity 500ms; }
#login .login-right #formulaire input { width: 100%; height: 42px !important; padding: 12px 8px; background: none !important; border: 1px solid rgb(222, 222, 222); border-radius: 4px; transition: border 300ms; }
#login .login-right #formulaire input:placeholder-shown + label  { opacity: 0; }


#login .login-right #formulaire ::-webkit-input-placeholder { font-size: 14px; font-weight: 300; }
#login .login-right #formulaire input:-ms-input-placeholder { color: white !important; }

.btn-connexion { height: 40px; font-size: 18px; cursor: pointer; padding: 0 20px; border: none; color: white; border-radius: 4px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); background: #008FD2; transition: background 500ms; }
.btn-connexion:hover { background: #007BB4; }
.btn-connexion i { vertical-align: middle; margin-left: 3px; font-size: 20px; }

.forgot-pass { cursor: pointer; text-decoration: none; font-size: 12px; font-weight: 300; color: #666; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border 500ms, color 500ms; width: 118px; margin-top: 5px; }
.forgot-pass:hover { color: #008FD2; border-bottom: 1px solid #008FD2; }
#acdCode.myInput { text-transform: uppercase; }

/*
 * Nouveau système d'identification par "view" (CFRA 10/01/2020)
 * ****************************************************************** */

#forgot-pwd-msg { display:flex; flex-direction: column; }
.forgot-pwd-msg-icon-status { display:flex; justify-content: center; width: 100%; color: #008000; margin-bottom: 40px; font-size: 110px; } 
#set-pwd-msg-error { display: flex; flex-direction: column; justify-content: space-around; height: 100%; align-items: center; }
#set-pwd-msg-icon-status { display: flex; justify-content: center; width: 100%; color: rgb(244,116,33); }

#index-form-content-ph { width: 50%; }

.identification-view-wrapper { display: flex; flex-direction: column; justify-content: space-around; height: 100%; align-items: center; }
.identification-view-container { display: flex; flex-direction: column; align-items:center; width: 100%; }
.identification-view-icon-status { display: flex; justify-content: center; width: 100%; color: #203239; margin-bottom: 40px; font-size: 100px; }
.identification-view-icon-status.error { color: rgb(244,116,33); }
.identification-view-icon-status.success { color: #008000; }
.identification-view-msg { width: 100%; font-size: 15px; margin-bottom: 40px; text-align:center;  }
.identification-demande-mdp-backlink { display: flex; flex-direction: column; justify-content: flex-end; }
.identification-demande-mdp-zonebuttons { display: flex; width: 100%; justify-content: space-between; margin-top: 20px; }

/* Nouvelle structure de la page (ébauche) */

.connexion-view-structure { display: flex; flex-direction: column; height: 100%; }
.connexion-view-structure-row.header {  }
.connexion-view-structure-row.title { height: 45px; margin-top: 10px; margin-bottom: 5px; }
.connexion-view-structure-row.help { height: 45px; display: flex; flex-direction: row-reverse; }
.connexion-view-structure-row.help.changepass { height: 80px; display: flex; flex-direction: row-reverse; }
.connexion-view-structure-row.body { height: 100%; display: flex; flex-direction: column; } 
.connexion-view-structure-row.footer { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;  }
.connexion-view-structure-row.version { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content:flex-end; }
.connexion-view-structure-row .special { height: 40%; display: flex; flex-direction: column; justify-content: center; }
.connexion-view-structure-row .special .binded-value { display: inline-block; }
.connexion-view-structure-row.body .identification-label-changepass-id { color: #203239; }
.connexion-view-structure-row.body.changepass.success { height: 100%; display: flex; flex-direction: column;}
.connexion-view-structure-row.body.changepass.success .centeredbutton { display: flex; align-items: center; width: 100%; justify-content: flex-end; }

/* Fin Structure */

#login .login-right button .connectionIcon {
    opacity: 0;
    transition: all 300ms;
}
#login .login-right button:hover .connectionIcon { opacity: 1; }
#login .login-right button { min-width: 130px; }
#login .login-right button .connectionText { transform: translateX(14px); transition: all 300ms; height: 100%;line-height: 35px; }
#login .login-right button:hover .connectionText { transform: translateX(0); }




/* Fin nouveau CSS */

@keyframes blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}
#msg-loading { width: 100%; text-align: right; color: #666; overflow: hidden; font-size: 14px; margin-bottom: 18px; }
#msg-loading span { animation-name: blink; animation-duration: 1s; animation-iteration-count: infinite; animation-fill-mode: both; }
#msg-loading span:nth-child(2) { animation-delay: .2s; }
#msg-loading span:nth-child(3) { animation-delay: .4s; }

#msg-error { width: 100%; text-align: center; color: #F5434E; overflow: hidden; font-size: 12px; margin-top: 5px; }

#version { color: rgb(182, 182, 182); font-size: 11px; }

.probleme-info { position: absolute; right: 15px; top: 15px; }

.showOnResponsive { display: none !important; }

@media only screen and (max-width: 820px) {
    #login { padding: 20px; }

    #login .login-wrapper { width: 100%; height: auto; flex-direction: column; }

    #login #login__mdp__regles { width: 100%; margin-top: 0em; min-height: 0em; }
    #login #login__mdp__regles__wrapper { margin-top: 2em; }
    #login .login-right { padding-top: 0px; }
    #login .login-left .login-left-container { border: 0px; }
    #login .login-left { width: 100%; padding: 0px 20px 0px 20px; border: 0; }
    #login .login-left .center-image { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border: none; }
    #login .connexion-view-structure-row.help { display: none; }
    #login .login-left .center-image img { max-height: 100px !important; max-width: 150px !important; }
    #index-form-content-ph { width: 100% !important; height: 100%; padding: 0px 20px 20px 20px; }
    #index-form-content-ph .zone-bouton:first-child { margin-bottom: 38px !important; }
    #login #login-wrapper .login-right { width: 100%; }
    #login .button-responsive { display: flex; align-items: flex-start;   }
    #login .identification-demande-mdp-backlink { margin-top: 10px; }
    #login .button-responsive { }
    #login .btn-connexion { width: 100%; }
    #login .acd-btn { margin: 0 !important; min-width: unset !important; }
    #login .button-responsive i { margin: 0; }
    #login .identification-demande-mdp-zonebuttons { flex-direction:column-reverse; }

    .zone-bouton .title { font-size: 19px !important;  }
    .zone-bouton { margin-bottom: 15px; }

    .showOnResponsive { display: block !important; }
    .hideOnResponsive { display: none !important; }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .icon-warning {
        padding-top: 5px;
    }

    #login #login__mdp__regles {
        padding-bottom: 1em;
    }
    #login #login__mdp__regles__wrapper {
        padding-top: 1em; 
    }
}

/* NEW LAYOUT
----------------------------------------------------- */
.row { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; min-height: 0; padding: 5px; /* min-height pour FF */ }
.row-fix { height: 100px; }
.row-fill { height: 0; flex: 1; }
.column { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; height: 100%; min-width: 0; padding: 5px; /* min-width pour FF */ }
.column-fix { width: 150px; }
.column-fill { width: 0; flex: 1; }
.column-scroll { display: block; overflow-y: auto; }