/* Login */
:root {
    /* Couleur de fond de la page (derrière #login) */
    --login-background-color: #FCFCFC;
    /* Couleur de fond de #login le wrapper */
    --login-wrapper-color: #FFFFFF;
    /* Couleur du séparateur login-left / login-right */
    --login-separator-color: #dddddd;
    /* Couleur de police du titre de la partial */
    --login-partial-title-color: #444444;
    /* Couleur de police au hover des liens clickables */
    --login-link-hover-color: #008FD2;
    /* Padding de #login */
    --login-wrapper-padding: 1.4em;
    /* Hauteur du header (bouton aide etc ..) */
    --login-right-header-height: 30px;
    /* Hauteur du footer (Connexion mobile etc ..) */
    --login-right-footer-height: 15px;
    /* Hauteur du titre de la partial */
    --login-right-title-height: 4rem;
    /* Hauteur du logo lorsqu'on est en mode "mobile" responsive */
    --login-left-logo-responsive: 90px;
    /* 
     * Padding des boutons et autre éléments du dom, utilisé à pas mal d'endroit
     * pour que les espacements soient relativement unifiés
     */
    --login-identification-padding-buttons: 1.1rem;
}

/* Animation de loading dans les boutons */
@keyframes blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}

#msg-loading { font-size: 4rem; height: 5rem; transform: translateY(-1.3rem); width: 100%; color: white; overflow: hidden; }
#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; }

/* Animation "Chargement de l'application" */
#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); }
}

/* Classes utilitaires pour éviter les duplications */
.flex { display: flex; flex-direction: row; }
.flex.column { flex-direction: column; }
.flex.column-reverse { flex-direction: column-reverse; }
.flex.justify-content-flexend { justify-content: flex-end; }
.flex.justify-content-flexstart { justify-content: flex-start; }
.flex.justify-content-center { justify-content: center; }
.flex.justify-content-spacebetween { justify-content: space-between; }
.flex.align-items-center { align-items: center; }

/* Classes générales */
.login-link { cursor: pointer; transition: border 500ms, color 500ms; color: var(--color-light-grey); height: 20px; padding-bottom: 2px;  transform: translateY(2px); text-decoration: none; }
.login-link:hover { color: var(--login-link-hover-color); box-shadow: inset 0 -1px 0 0 var(--login-link-hover-color); }
.action-link { text-decoration: none !important; }

.login-small-text {
    color: var(--color-light-grey);
    text-decoration: none;
}

#login-container { height: 100vh; width: 100vw; background-color: var(--login-background-color); }

#login { width: 800px; min-height: 455px; border-radius: 8px; background-color: var(--login-wrapper-color); box-shadow: 0 2px 36px rgb(0 0 0 / 13%); padding: var(--login-wrapper-padding); }
#login input { height: 38px; background: none; border: none; line-height: 3em; padding: 0 0.5em; }
#login .identification-btn-primary { min-width: 130px; }
#login .identification-btn-primary span { transform: translateX(14px); transition: all 300ms; }
#login .identification-btn-primary:hover span { transform: translateX(0); }
#login .identification-btn-primary i { opacity: 0; transition: opacity ease 500ms; height: 100%; line-height: 35px; margin-right: 0; margin-left: 10px; }
#login .identification-btn-primary:hover i { opacity: 1; }

#login .identification-social button { width: 100%; }
#login .social-google { background-color: #cf4332; }
#login .social-microsoft { background-color: #106ebe; }
#login .social-linkedin { background-color: #0177b5; }

#login .separator { margin-bottom: var(--login-identification-padding-buttons); min-height: 1px; border-bottom-width: 1px; border-bottom-style: solid;border-image: linear-gradient(to right, #fff, var(--login-separator-color), #fff) 1; }

#login .separator-container { margin-bottom: var(--login-identification-padding-buttons); }
#login .separator-left { background-image: linear-gradient(to left, var(--login-separator-color), #ffffff); width:100%; min-height: 1px; }
#login .separator-right { background-image: linear-gradient(to right, var(--login-separator-color), #ffffff); width:100%; min-height: 1px; }
#login .separator-text { margin-left: 0.5em; margin-right: 0.5em; color: #AAAAAA; font-size: 1.1em; padding-bottom: 0.25em; font-weight: 300;}


#login #login-left, #login #login-right { width: 50%; }

/* Responsive */
@media only screen and (max-width: 768px) {
    #login { width: 90vw; flex-direction: column; }
    #login #login-right, #login #login-left { width: 100%; }

    #login #login-left { padding-right: 0;  border-right-width: 0px; border-bottom-width: 1px; padding-bottom: 1em; }
    #login #login-left #logo img {  max-width: var(--login-left-logo-responsive); }

    #login #login-right { padding-left: 0; height: 100%; flex: 1; }
    #login #login-right > .header { display: none; }

    #login #login-right #partial-placeholder { height: auto; flex: 1; }

    #login-right .identification-buttons-group { flex-direction: column-reverse; }
    #login-right .identification-buttons-group .identification-btn-primary { width: 100%; }
    #login-right .identification-buttons-group .btn-forgot-password,
    #login-right .identification-buttons-group .btn-login-home 
    { align-self: flex-start; margin-top: var(--login-identification-padding-buttons); }
}

/* Login Left */
#login-left { border-right-width: 1px; border-right-style: solid; border-image: linear-gradient(to bottom, var(--login-background-color) 1%, var(--login-separator-color) 1%, var(--login-separator-color) 99%, var(--login-background-color) 99%) 1;  padding-right: var(--login-wrapper-padding); }
#login-left #logo { height: 100%; flex: 1; }
#login-left #logo img { max-width: 100%; max-height: 250px; }
#login-left #security-rules-wrapper { transition: all ease 300ms; }

/* Login Right */
#login-right { padding-left: var(--login-wrapper-padding); }
#login-right > .header { height: var(--login-right-header-height); }
#login-right > .header #btn-header-help { transform: translateX(7px); }
#login-right > .footer { height: var(--login-right-footer-height); font-size: 1em; color: var(--color-light-grey); }
#login-right #partial-placeholder .partial-title { height: var(--login-right-title-height); display: flex; align-items: center; }
#login-right #mobile-access i { margin-right: 0.1rem; }

#login-right #partial-placeholder { height: calc(100% - var(--login-right-header-height) - var(--login-right-footer-height)); overflow-y: hidden; }
#login-right #partial-placeholder .partial-title { font-size: 2.1em; font-weight: bold; }
#login-right #partial-placeholder .partial-body { padding-bottom: var(--login-identification-padding-buttons); flex: 1; }

#login #login-right .identification-reset-success-msg { margin: var(--login-identification-padding-buttons) 0; }
#login #login-right .identification-reset-success-code { font-weight: bold; font-size: 1.2em; display: inline; margin: 0 0.8rem; }


#login-right #partial-placeholder .partial-body.profile { height: calc(100% - var(--login-right-footer-height) - var(--login-right-header-height) - var(--login-right-title-height)); }
#login-right #partial-placeholder .identification-social-profiles-wrapper { overflow-y: auto; width: 100%; height: 100%; display: block; flex: 1; }
#login-right #partial-placeholder .identification-social { margin-bottom: var(--login-identification-padding-buttons); } 
#login-right #partial-placeholder .identification-social-profile { height: 4em; flex: 1; }
#login-right #partial-placeholder .identification-social-profile:hover { cursor: pointer; background-color: #e8e8e8; border-top: 1px dashed var(--color-text); border-bottom: 1px dashed var(--color-text); }
#login-right #partial-placeholder .identification-social-profile .identification-social-profile-icon { width: 2.2em; font-size: 1.7rem; }
#login-right #partial-placeholder .identification-social-profile .identification-social-profile-infos { font-size: 1.1rem; font-weight: 300; }
#login-right #partial-placeholder .identification-social-home-button { width: 100%; background-color: #106ebe; color: white; margin-top: 10px;}
#login-right #partial-placeholder .identification-social-back { padding-bottom: 0 !important; }
#login-right #partial-placeholder .identification-social-profiles-wrapper a, #login-right #partial-placeholder .identification-social-profiles-wrapper a:visited { text-decoration: none; color: var(--color-text); }

#login-right #partial-placeholder .identification-inputs-group > div:not(:last-child) { margin-bottom: 0.5rem; }

#login-right .identification-input-label { opacity: 0; color: #AAAAAA; font-weight: 300; font-size: 1em; transition: opacity 500ms; }
#login-right .identification-input-wrapper { border-radius: 3px; border: 1px solid #DBDBDB; }
#login-right .identification-input-wrapper input { width: 100%; }
#login-right .identification-input-wrapper.password i { opacity: 0.5; color: var(--color-text); cursor: pointer; margin: 0 10px; }

#login-right #partial-placeholder .identification-buttons-group { padding: var(--login-identification-padding-buttons) 0; }
#login-right #partial-placeholder .identification-social * { color: var(--login-wrapper-color); }
#login-right #partial-placeholder .identification-social button:not(:last-child) { margin-bottom: var(--login-identification-padding-buttons); }
#login-right #partial-placeholder .identification-social .identification-social-icon-container { width: 30%; padding-right: 1em; }
#login-right #partial-placeholder .identification-social .identification-social-label { width: 70%; text-align: left }

#login-right #error-wrapper { padding-top: var(--login-identification-padding-buttons); }

/* Classes liées à password_security_check.js */
.icon-warning { display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; min-width: 2em; min-height: 2em; }
.icon-warning .fa-triangle { color: #edc87e; font-size: 1.4em; vertical-align: text-bottom; }
.icon-warning .fa-exclamation { color: black; font-size: 0.8em; transform: translateY(0.2em); }

div[class^=securite-mdp-tmpl-regles] { width: 100%; padding: 1em; box-sizing: border-box; }
div[class^=securite-mdp-tmpl-container] { display: flex; flex-direction: column; }
div[class^=securite-mdp-tmpl-regle] { line-height: 2em; font-size: 1rem; display: flex; align-items: center; }
div[class^=securite-mdp-tmpl-regle] .securite-mdp-tmpl-regle-icon { display: flex; justify-content: center; width: 30px; font-size: 1.1em; margin-right: 0.2em; }
div[class^=securite-mdp-tmpl-regle] .securite-mdp-tmpl-regle-icon.warning { font-size: 0.8em; }
div[class^=securite-mdp-tmpl-regle] .securite-mdp-tmpl-regle-icon .green { color: green; }
div[class^=securite-mdp-tmpl-regle] .securite-mdp-tmpl-regle-fulfilled { color: inherit; }
div[class^=securite-mdp-tmpl-regle] .securite-mdp-tmpl-regle-notfulfilled { color: #AAAAAA !important; }

fieldset[class^=securite-mdp-tmpl-regles-fieldset] { width: 100%; border: 1px solid rgb(222, 222, 222); border-radius: 4px; }
fieldset[class^=securite-mdp-tmpl-regles-fieldset] legend { padding: 0em 4px 0em 4px; color: #AAAAAA; }

#login #login__mdp__regles__wrapper { align-items: center; width: 100%; justify-content: center; }
#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; }

/* Snackbar pour les Messages d'Erreur */
.login-notification-snack { max-width: 400px; background-color: #cf4141; color: white; min-height: 4rem; border-radius: 4px; padding: var(--login-identification-padding-buttons); white-space: normal; }
.login-notification-snack-closebtn { min-width: 3rem; border-right: 1px solid white; padding-right: var(--login-identification-padding-buttons); margin-right: var(--login-identification-padding-buttons); }
#login-notification { position: absolute; top: 10px; left: 10px; opacity: 0; transition: opacity ease 200ms; }
#login-notification:hover { cursor: pointer; }

/* Fenêtre _LiaisonConfirmation */
#account-link-confirm-text .link-icon { margin-top: 0.4em; margin-bottom: 0.4em; font-size: 16px;  }
#account-link-confirm-text .inline-icon { font-size: 14px; }
#account-link-confirm-text .linked-emails { margin: 0.7em 0 0.7em 0; }
#account-link-confirm-text .email { font-weight: bold; font-size: 1.2em; }
#account-link-confirm-text .link-Google { color: #cf4332; }
#account-link-confirm-text .link-Microsoft { color: #106ebe; }

/* Fenêtre _LiaisonCompteEmail*/
#login-right .text-block { display: block; margin: 1em 0 0 0; }

/* Second Facteur */
.login-totp-field {
    width: 100%;
    margin-top: 10px;
}

.login-totp-field td {
    border: solid;
    border-radius: 3px;
    border-width: 1px;
    border-color: var(--login-separator-color);
    width: 25px;
    height: 35px;
    margin-left: 5px;
    margin-right: 5px;
}

.login-totp-field td input {
    width: 100%;
    font-size: 14px;
    height: 100% !important;
    text-align: center;
}

#login-right #partial-placeholder .partial-top-text {
    height: var(--login-right-title-height);
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
}

.login-resend-totp-link-container {
    margin-top: 10px;
    margin-bottom: 20px;
}

.login-resend-totp-link {
    cursor: pointer;
    transition: border 500ms, color 500ms;
    color: var(--color-light-grey);
    height: 20px;
    padding-bottom: 2px;
    transform: translateY(2px);
    text-decoration: none;
    font-size: 14px;
}

#demande-second-facteur .identification-buttons-group {
    margin-top: 20px;
    margin-bottom: 20px;
}

#saisie-second-facteur input::-webkit-outer-spin-button,
#saisie-second-facteur input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#saisie-second-facteur input[type=number] {
    -moz-appearance: textfield;
}

.login-resend-totp-link:hover {
    color: var(--login-link-hover-color);
    box-shadow: inset 0 -1px 0 0 var(--login-link-hover-color);
}

.login-second-factor-btn {
    margin-left: 60px;
    margin-right: 60px;
}

#demande-second-facteur span.text-block:first-of-type {
    font-size: 14px;
}

#saisie-second-facteur span.text-block:first-child {
    font-size: 14px;
}

#saisie-second-facteur .identification-input-group {
    margin-top: 10px;
}

#demande-second-facteur .email {
    color: var(--login-link-hover-color);
}

/* Fenêtre pour la compatibilité IE */
.k-widget.k-window {
    border: 0;
}

.k-widget.k-window .k-window-titlebar { background-color: #203239; color: white; background-image: none; }