@charset "UTF-8";
/*
    TABLE DES MATIÈRES
    ------------------------------

    Variables
    Modules - site.scss
    Modules - telerik.scss
    Modules - general.scss
    Modules - menuSidebar.scss
    Modules - headerAccueilFooter.scss
    Modules - login.scss
    Modules - chartesIndividuelles.scss
    Modules - equipeRelations.scss
    Modules - tableauxGestion.scss

*/
/* Polices */
@font-face {
    font-family: "Exo";
    src: url("/fonts/exo-regular-webfont.woff2") format("woff2"), url("/fonts/exo-regular-webfont.woff") format("woff"), url("/fonts/Exo-Regular.ttf") format("truetype");
}
/* Couleurs */
/* Valeurs de breakpoints */
html, body {
    color: #444;
    font-family: "Exo", "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .relationnelDescriptionIndividu h2, .relationnelDescriptionIndividu h1, .h4, .h5, .h6 {
    color: #444;
    font-weight: bold;
    margin: 1.5rem 0;
}

h1, .h1 {
    font-size: 28px;
    color: #055FA6;
    border-bottom: 1px solid #ccc;
    margin-top: 0;
}

h2, .h2 {
    font-size: 22px;
    border-bottom: none;
}

h3, .h3, .relationnelDescriptionIndividu h2, .relationnelDescriptionIndividu h1 {
    font-size: 18px;
    border-bottom: none;
}

h4, .h4,
h5, .h5,
h6, .h6,
.titrebold {
    font-size: 16px;
    font-weight: bold;
    border-bottom: none;
}

/*p:not(.categorie):last-child {
    margin-bottom: 2rem;
}*/
.categorie {
    text-transform: uppercase;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 14px;
}

.relationnelDescriptionIndividu h2 {
    margin-top: 0.6rem;
}

/* Gros ménage de style effectué, le code est répartit dans les fichiers scss appropriés */
/*
    Modules - site.scss
    -------------------

    SIDEBAR STYLE
    CONTENT STYLE
    Pour les objets Telerik/Kendo
    Pour la div de loading
    Bootstrap 3 Media Queries

*/
.attirerAttention {
    color: #F46154;
    font-weight: 700;
    font-size: 1.5rem;
    font-style: italic;
    margin: 1rem 0 3rem;
    text-align: center;
    background-color: white;
    padding-bottom: 5px;
}

.anotation {
    font-style: italic;
    font-weight: bold;
    padding: 2.5rem 0 1rem 2rem;
}

.btnBleu {
    max-width: none;
    color: #fff;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.75rem 2rem;
    text-transform: uppercase;
    text-decoration: none;
    background: #055FA6;
}

    .btnBleu:hover, .btnBleu:focus {
        color: #055FA6;
        text-decoration: none;
        border: 1px solid #055FA6;
        background: #fff;
    }

.bulle-info-notification {
    background: #cc0000;
    font-size: 0.75rem;
    padding: 0 0.5rem 0.125rem;
    border-radius: 12%;
    margin-left: 0.5rem;
    color: #fff;
}

.arrow {
    padding: 8px 0 5px 266px;
}

/* Lettres des initiales dans Signification des initiales (Personnalité) */
.signatures .SignatureNumerolgiqueChiffre,
.signatures .SignatureNumerolgiqueChiffreFinale {
    font-size: 1.875rem;
    margin: 0 0.225rem 0 0;
    line-height: 1.5em;
    width: 1.5em;
    height: 1.5em;
    font-weight: normal;
}

.signatures .SignatureNumerolgiqueChiffre {
    background: transparent;
    color: #00325A;
    border: 1px solid #DEDEDE;
}

.signatures .SignatureNumerolgiqueChiffreFinale {
    background-color: #00325A;
}

.SignatureNumerolgiqueChiffreOriginal,
.SignatureNumerolgiqueChiffre,
.SignatureNumerolgiqueChiffreFinale,
.SignatureNumerolgiqueChiffreFinal {
    border-radius: 6px;
    font-size: 1rem;
    padding: 0;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #fff;
    margin: 0 0.2rem;
    font-weight: 700;
    text-align: center;
}

.chiffresDansTitre .SignatureNumerolgiqueChiffre,
.chiffresDansTitre .SignatureNumerolgiqueChiffreOriginal {
    color: #fff;
    border-color: transparent;
}

.quatreElements h3 {
    margin-left: 0.6rem;
}

.quatreElements p {
    margin-bottom: 1.5rem;
}

.quatreElements img {
    display: block;
    margin: 0 auto;
    margin-left: -0.6rem;
}

i, span {
    display: inline-block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
    z-index: 10;
    margin-bottom: 70px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}

/* ??? Utilisé mais ne sais pas comment.... */
.sectionToutesLesChartes {
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: block;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

    .sectionToutesLesChartes .positif, .sectionToutesLesChartes .negatif {
        background: #fff;
    }

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
/*==========  Non-Mobile First Method  ==========*/
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    .colonneSecondaire {
        margin: 0;
        padding: 0;
    }
}
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
    #logo {
        display: block;
        margin: 0 auto;
        width: 80%;
    }

    #sidebar {
        min-width: 250px;
        max-width: 250px;
        /*text-align: center;*/
        margin-left: -250px !important;
    }

        #sidebar.active {
            margin-left: 0 !important;
        }

        #sidebar .sidebar-header strong {
            display: block;
        }

        #sidebar ul li a {
            padding: 20px 10px 20px 10px;
        }

            #sidebar ul li a span {
                font-size: 0.85em;
            }

            #sidebar ul li a i {
                margin-right: 0;
                display: block;
            }

        #sidebar ul ul a {
            padding: 10px !important;
        }

        #sidebar ul li a i {
            font-size: 1.3em;
        }

    #sidebar {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }

    .padding {
        padding: 0rem;
    }

    .padding-lg {
        padding: 0.75rem;
    }

    .padding-sm {
        padding: 0rem;
    }

    .titreSection,
    .numeroInfluence {
        text-align: center;
    }

    .sidebar {
        margin: 0;
        padding: 0;
    }

    .negatif {
        background: #f2f2f2;
        border-left: none;
        border-radius: 6px;
        margin: 1.5rem 0;
        padding: 1.5rem;
    }

    .BoiteSignatureElement {
        position: relative;
        right: 0;
        bottom: 0;
    }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width: 450px) {
    .navbar-header {
        text-align: center;
    }

    #content {
        width: 100%;
    }
}
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
    .sectionToutesLesChartes {
        background: transparent;
        border: none;
        border-radius: 0;
        display: block;
        margin-bottom: 1.5rem;
        padding: 0;
    }

    .positif h3,
    .negatif h3,
    .BoiteSignatureNumerologique {
        text-align: center;
    }
}
/* Set width on the form input elements since they're 100% wide by default */
/* Voir aussi la classe pour les contrôles Telerik*/
input,
select,
textarea,
.largeurMaxInput {
    max-width: 280px;
}

.init-section.k-content {
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.k-grid .k-alt {
    background-color: #F2F2F2;
}

.init-section:not(.wide), #exampleWrap .box:not(.wide) {
    max-width: 400px;
}

.init-section {
    margin: 1em auto 4.5em;
    padding: 3em;
    border: 1px solid rgba(20, 53, 80, 0.14);
}

.k-block, .k-content,
.k-dropdown .k-input,
.k-popup, .k-widget {
    color: #444;
}

.k-content,
.k-panel > li.k-item,
.k-panelbar > li.k-item,
.k-tiles {
    background-color: #fff;
}

.k-dropdown-wrap.k-state-default {
    background: #fff;
}

.k-tabstrip-content ul {
    list-style: none;
}

/* Drop down list */
/*.kendoDropDownList {
    display: block;
    width: 100%;
}
*/
/* Combobox (AjouterPersonneEnLot) */
/*.k-combobox{
    input{
        width: 100%;
        max-width:none;
    }
}*/
/*
    Modules - general.scss
    ----------------------

    Conteneur global
    Padding du corps des pages
    Forms
    Listes
    Hover des dropdowns items
    Conteneur des chiffres numérologiques
    Couleurs des chiffres numérologiques
    Chevron de blocs de contenu
    Animation Zoom lors du hover
    Icônes éléments
    Item inactif
    Tableaux (table)
    Boutons
    Fenêtre de chargement (loading)
    Légende éléments en sidebar
    Sidebar droit
    Classe visuallyhidden
    Message d'erreur

*/
a {
    color: black;
}

    a:hover, a:focus {
        color: inherit;
        text-decoration: none;
        transition: all 0.1s;
    }

p {
    line-height: 27px;
}

.show-only-in-print {
    display: none;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    background: #000;
    border-color: #000;
    color: white;
    padding: 0.65rem 1rem;
}

    .back-to-top:hover, .back-to-top:focus, .back-to-top:active {
        background-color: #055FA6;
        border-color: #055FA6;
        color: white;
    }

#divBarreAvertissement {
    background-color: #ce3623;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

/* Conteneur global */
#content {
    background-color: white;
    min-height: 100vh;
    min-width: 100%;
    transition: all 0.3s;
    position: relative;
    overflow-x: hidden;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    #content {
        min-width: auto;
    }
}

/* Padding du corps des pages */
.normalizedPadding {
    padding: 0 1.5rem;
}

@media (min-width: 768px) {
    .normalizedPadding {
        padding: 2rem 3rem 0;
    }
}

/* Forms */
fieldset {
    border: 1px solid #ccc;
    padding: 0 1rem;
    margin: 2rem 0;
}

legend {
    display: inline-block;
    width: auto;
    font-size: 16px;
}

/* Listes */
ul {
    padding: 0;
}

.descriptionSection {
    text-align: center;
}

@media (min-width: 450px) {
    .descriptionSection {
        text-align: left;
    }
}

/* Hover des dropdowns items */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #6C757D;
}

/*Conteneur des chiffres numérologiques*/
.BoiteSignatureElement {
    border-left: 1px solid #DEDEDE;
    padding-left: 0.5rem;
    position: static !important;
}

.icone-fleche {
    width: auto !important;
    color: #b2b2b2;
    font-size: 18px;
}

/* Couleurs des chiffres numérologiques */
.chiffresDansTitre {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    vertical-align: middle;
}

@media (min-width: 1200px) {
    .chiffresDansTitre {
        margin-left: 0.8rem;
    }
}

.SignatureNumerolgiqueChiffreOriginal {
    background-color: #00325A;
    border-color: #00325A;
}

.SignatureNumerolgiqueChiffre {
    background-color: #045FA6;
    border-color: #045FA6;
}

.SignatureNumerolgiqueChiffreFinale,
.SignatureNumerolgiqueChiffreFinal {
    background-color: #008FFF;
    border-color: #008FFF;
}

.nombreMaitre {
    background-color: #F87B47 !important;
    border-color: #F87B47 !important;
    border-radius: 50%;
}

/* Chevron de blocs de contenu */
/* Comment faire marcher le chevron :
   Ajouter l'icone du chevron comme indiqué ci-dessous :
    <span class="iconeChevron"><i class="fal fa-chevron-down"></i></span>
   Ajouter la classe .accordeon au parent du span (le parent du
    span devrait être le bouton qui toggle l'accordeon) */
.accordeon[aria-expanded=true] .iconeChevron {
    transition: ease all 300ms;
    transform: rotate(180deg);
}

.accordeon[aria-expanded=false] .iconeChevron {
    transition: ease all 300ms;
    transform: rotate(0deg);
}

.iconeChevron {
    display: inline-block;
    font-size: 1.5rem;
}

@media (min-width: 992px) {
    .iconeChevron {
        margin-left: 0;
    }
}

@media (min-width: 1500px) {
    .iconeChevron {
        margin-left: auto;
    }
}

/* Animation Zoom lors du hover */
.animationHoverZoom {
    transition: all 350ms ease-in-out;
}

    .animationHoverZoom:hover, .animationHoverZoom:focus {
        transform: scale(1.07);
    }

.k-dropdown {
    min-width: 255px;
    width: auto !important;
    max-width: 350px;
}

@media (min-width: 768px) {
    .k-dropdown {
        min-width: 320px !important;
        width: auto;
        max-width: none;
    }
}

/* Icônes éléments */
.iconesElements {
    position: relative;
    vertical-align: middle;
    width: 45px;
    height: 45px;
}

    .iconesElements .elementAir, .iconesElements .elementEau,
    .iconesElements .elementFeu, .iconesElements .elementTerre {
        background-color: transparent;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0;
        padding: 0;
        width: 45px;
        height: 45px;
        line-height: 41px;
    }

    .iconesElements .elementAir {
        background-image: url("Images/ico-air.png");
    }

    .iconesElements .elementEau {
        background-image: url("Images/ico-eau.png");
    }

    .iconesElements .elementFeu {
        background-image: url("Images/ico-feu.png");
    }

    .iconesElements .elementTerre {
        background-image: url("Images/ico-terre.png");
    }

/* Item inactif */
.itemDisabled {
    display: none;
}

/* Tableaux (table) */
table td, .table td {
    vertical-align: middle;
}

/* Boutons */
.btn-outline-vert {
    background-color: #e38777;
    border-color: #e38777;
    color: #fff !important;
}

    .btn-outline-vert:hover, .btn-outline-vert:focus {
        background-color: #fff;
        border-color: #e38777;
        color: #e38777 !important;
    }

.btn-outline-secondary:hover {
    color: #fff !important;
}

.btn-primary {
    max-width: none;
    color: #fff;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0.75rem 2rem;
    text-transform: uppercase;
    text-decoration: none;
    background: #e38777;
    border: 1px solid #e38777;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        color: #e38777 !important;
        border: 1px solid #e38777 !important;
        background-color: #fff !important;
    }

.hyperlien {
    color: gray;
    display: inline-block;
    padding: 0.375rem 0.75rem;
}

    .hyperlien:hover, .hyperlien:focus {
        text-decoration: underline;
    }

/* Fenêtre de chargement (loading) */
.boiteLoading {
    background-color: white;
}

div#divBoiteLoading {
    display: none;
    width: 333px;
    height: 111px;
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: center;
    padding: 10px;
    font: normal 16px Tahoma, Geneva, sans-serif;
    border-radius: 25px;
    border: 1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 2;
    overflow: auto;
}

/* Légende éléments en sidebar */
.legendeElement {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0 0 0;
}

    .legendeElement .element {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 1.5rem;
    }

        .legendeElement .element:last-child {
            margin-right: 0;
        }

@media (min-width: 450px) {
    .legendeElement .element {
        display: inline-flex;
        margin-right: 1.5rem;
        margin-bottom: 0;
    }
}

.legendeElement .h4 {
    font-size: 1rem;
    text-align: center;
    margin-top: 0 !important;
}

/* Sidebar droit */
@media (min-width: 992px) {
    .colonneSecondaire {
        margin: 2rem 0 3rem 1.5rem;
    }
}

.accueilNouvellesItem {
    margin-bottom: 1rem;
    padding: 1rem 0;
}

@media (min-width: 768px) {
    .accueilNouvellesItem {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.accueilNouvellesItem .imageSidebar {
    background: #055FA6;
    padding: 1.5rem;
    width: 30%;
    min-width: 140px;
    margin-bottom: 0.25rem;
}

    .accueilNouvellesItem .imageSidebar img {
        margin: 0 auto;
    }

@media (min-width: 768px) {
    .accueilNouvellesItem .imageSidebar {
        margin-bottom: 0;
        margin-right: 1rem;
    }
}

.accueilNouvellesItem div {
    display: inline-block;
}

@media (min-width: 768px) {
    .accueilNouvellesItem div:nth-child(2) {
        width: 65%;
    }
}

/* Classe visuallyhidden */
.visuallyhidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* Message d'erreur */
.messageErreur {
    color: darkred;
}

/*
    Modules - menuSidebar.scss
    --------------------------

    Sidebar Table
    Sidebar mobile

*/
/*Sidebar Table*/
#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #1A1A1A;
    color: #fff;
    transition: all 0.3s;
}

    #sidebar .sidebar-header {
        padding: 1.4rem 2.5rem 1.5rem 1.5rem;
        border-top: 6px solid #055FA6;
        margin-top: 16px;
    }

        #sidebar .sidebar-header strong {
            display: none;
            font-size: 1.8em;
        }

    #sidebar ul.components {
        padding: 20px 0;
    }

    #sidebar ul li a {
        text-align: left;
        font-size: 18px;
        padding: 15px 10px;
        color: #fff;
        display: block;
    }

        #sidebar ul li a:hover, #sidebar ul li a:focus, #sidebar ul li a:active {
            color: #444;
            background: #fff;
        }

            #sidebar ul li a:hover span.bulle-info-notification, #sidebar ul li a:focus span.bulle-info-notification, #sidebar ul li a:active span.bulle-info-notification {
                color: #fff;
            }

        #sidebar ul li a i {
            margin-right: 10px;
        }

    /*Sidebar mobile*/
    #sidebar.active .sidebar-header h3,
    #sidebar.active .ctas {
        display: none;
    }

    #sidebar.active .sidebar-header strong {
        display: block;
    }

    #sidebar.active ul li a {
        padding: 20px 10px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

        #sidebar.active ul li a i {
            margin-right: 1rem;
            display: block;
        }

    #sidebar.active ul ul a {
        padding: 15px !important;
    }

    #sidebar.active a[aria-expanded=false]::before,
    #sidebar.active a[aria-expanded=true]::before {
        top: auto;
        bottom: 5px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    /*Sidebar table*/
    #sidebar ul li.active > a {
        color: #444 !important;
        background: #fff;
    }

#sidebarCollapse {
    margin: 0;
}

a[data-toggle=collapse] {
    position: relative;
}

ul ul {
    background: #fff;
}

    ul ul a {
        font-size: 0.9rem !important;
        padding-left: 30px !important;
        font-size: 0.9em !important;
        padding-left: 30px !important;
        background: #6C757D;
        color: #fff;
        border-bottom: 1px dotted #f2f2f2;
    }

ul.CTAs {
    padding: 20px;
}

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }

/* Chevrons du menus */
.icon-caret {
    position: absolute;
    right: 0.6rem;
}

    .icon-caret i {
        margin: 0 !important;
    }

a[aria-expanded=false] .icon-caret {
    transition: ease all 300ms;
    transform: rotate(0deg);
}

a[aria-expanded=true] .icon-caret {
    transition: ease all 300ms;
    transform: rotate(180deg);
}

/*
    Modules - headerAccueilFooter.scss
    ----------------------------------

    Header mauve
    Bouton hamburger
    Profil actif
    Textes titres en Accueil
    Drop down selection de personnes
    Footer

*/
/*Header mauve*/
.navbar-header {
    background-color: #055FA6;
    color: white;
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    width: 100%;
    position: relative;
    z-index: 5;
}

    .navbar-header .menuRapportsPDFs {
        transition: all 0.15s ease-in-out;
    }

        .navbar-header .menuRapportsPDFs:hover .fa-file-pdf, .navbar-header .menuRapportsPDFs:active .fa-file-pdf, .navbar-header .menuRapportsPDFs:focus .fa-file-pdf {
            color: red;
        }

.navbar-equipe .btn {
    background-color: #055FA6;
}

.navbar-equipe .menuRapportsPDFs:hover {
    background-color: white;
}

.navbar-equipe .dropdown-item {
    white-space: normal;
}

@media (min-width: 768px) {
    .navbar-equipe .dropdown-item {
        white-space: nowrap;
    }
}

.navbar-equipe::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70px;
    opacity: 0.2;
    background: url(Images/equipe-banner.png) center repeat-x;
}

/* Bouton hamburger */
#sidebarCollapse:active,
#sidebarCollapse:hover {
    background: #fff;
    color: #055FA6;
}

/*Profil actif*/
.profilActif {
    border-bottom: 1.5px solid #055FA6;
    padding: 0.6rem 2.5rem;
    margin: 0 -1.8rem;
    text-align: center;
    font-size: 1.125rem;
}

@media (min-width: 576px) {
    .profilActif {
        text-align: left;
    }
}

@media (min-width: 768px) {
    .profilActif {
        padding: 0.6rem 4rem;
    }
}

/* Drop down selection de personnes */
.loginPartial {
    padding: 1.5rem 0;
    text-align: center;
}

@media (min-width: 576px) {
    .loginPartial {
        text-align: left;
    }
}

/*Textes titres en Accueil*/
#divResultatDonnee h1 p:last-child {
    font-weight: normal;
    font-size: 24px;
}

/*Footer*/
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 70px;
    background-color: #6C757D;
    z-index: -1;
}

    footer small {
        color: white;
    }

/*
    Modules - login.scss
    --------------------

    Mot de passe oublié
    Image de login

*/
.boiteInscription {
    /* Mot de passe oublié */
    /* Image de login */
}

    .boiteInscription .hyperlien {
        padding: 0;
        margin-top: 1rem;
        width: 100%;
    }

@media (min-width: 450px) {
    .boiteInscription .hyperlien {
        padding: 0.375rem 0.75rem;
        width: auto;
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .boiteInscription .hyperlien {
        padding: 0;
        margin-top: 1rem;
    }
}

@media (min-width: 1386px) {
    .boiteInscription .hyperlien {
        padding: 0.375rem 0.75rem;
        width: auto;
        margin-top: 0;
    }
}

.boiteInscription .loginImageContainer {
    min-height: 100vh;
    height: 100%;
    width: 68%;
    padding: 0;
    position: absolute;
    top: -4rem;
    right: -3rem;
    z-index: 3;
    display: none;
}

@media (min-width: 992px) {
    .boiteInscription .loginImageContainer {
        display: block;
    }
}

.boiteInscription .loginImageContainer .loginImg {
    background: url("Images/LineRousseau-cover-executif.jpg") no-repeat right center;
    background-size: cover;
    width: auto;
    height: 100%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.19);
    transform: scaleX(-1);
}

/*
    Modules - chartesIndividuelles.scss
    -----------------------------------

    (À développer) Chemin de vie
    (Personnalité) Éléments de base
    (À développer) Tous vos éléments
    Liste dans Sommaire des Talents
    Boites positives/négatives
    (Personnalité) Vos éléments de base
    (Personnalité) Défi de vie
    Toutes les chartes

*/
/* (À développer) Chemin de vie */
.vibrations-positives {
    border-left: 0.5em solid #71B84B;
    padding: 1.5rem 3rem;
    margin: 0 0 1.5rem 0;
    background: #f2f2f2;
    page-break-inside: avoid;
}

.vibrations-negatives {
    border-left: 0.5em solid #F46154 !important;
    padding: 1.5rem 3rem;
    margin: 0 0 3rem 0;
    background: #f2f2f2;
    page-break-inside: avoid;
}

/* (Personnalité) Éléments de base */
.resumerElement {
    display: block;
    overflow: hidden;
    margin-top: 0.5rem;
}

    .resumerElement .charteResultat {
        margin-left: 0.4rem;
    }

    .resumerElement .BoiteSignatureElement {
        position: relative;
        right: 0;
        bottom: 0;
    }

#divCharteElementsNomPrenom .elementAir, #divCharteElementsNomPrenom .elementEau,
#divCharteElementsNomPrenom .elementFeu, #divCharteElementsNomPrenom .elementTerre {
    border-top: 1px solid grey;
    padding: 1rem 0;
}

    #divCharteElementsNomPrenom .elementAir .texteValeur, #divCharteElementsNomPrenom .elementEau .texteValeur,
    #divCharteElementsNomPrenom .elementFeu .texteValeur, #divCharteElementsNomPrenom .elementTerre .texteValeur {
        margin-bottom: 1.5rem;
    }

        #divCharteElementsNomPrenom .elementAir .texteValeur p:last-child, #divCharteElementsNomPrenom .elementEau .texteValeur p:last-child,
        #divCharteElementsNomPrenom .elementFeu .texteValeur p:last-child, #divCharteElementsNomPrenom .elementTerre .texteValeur p:last-child {
            margin-bottom: 1.5rem;
        }

    #divCharteElementsNomPrenom .elementAir .chart-wrapper, #divCharteElementsNomPrenom .elementEau .chart-wrapper,
    #divCharteElementsNomPrenom .elementFeu .chart-wrapper, #divCharteElementsNomPrenom .elementTerre .chart-wrapper {
        padding-left: 0;
    }

        #divCharteElementsNomPrenom .elementAir .chart-wrapper .k-chart, #divCharteElementsNomPrenom .elementEau .chart-wrapper .k-chart,
        #divCharteElementsNomPrenom .elementFeu .chart-wrapper .k-chart, #divCharteElementsNomPrenom .elementTerre .chart-wrapper .k-chart {
            width: 300px;
            height: 300px;
        }

@media (min-width: 1200px) {
    #divCharteElementsNomPrenom .elementAir .chart-wrapper .k-chart, #divCharteElementsNomPrenom .elementEau .chart-wrapper .k-chart,
    #divCharteElementsNomPrenom .elementFeu .chart-wrapper .k-chart, #divCharteElementsNomPrenom .elementTerre .chart-wrapper .k-chart {
        width: 350px;
        height: 350px;
    }
}

#divCharteElementsNomPrenom .elementAir .charteDonutExplication, #divCharteElementsNomPrenom .elementEau .charteDonutExplication,
#divCharteElementsNomPrenom .elementFeu .charteDonutExplication, #divCharteElementsNomPrenom .elementTerre .charteDonutExplication {
    padding-right: 0;
}

@media (min-width: 1200px) {
    #divCharteElementsNomPrenom .elementAir .charteDonutExplication, #divCharteElementsNomPrenom .elementEau .charteDonutExplication,
    #divCharteElementsNomPrenom .elementFeu .charteDonutExplication, #divCharteElementsNomPrenom .elementTerre .charteDonutExplication {
        padding-left: 5rem;
    }
}

@media (min-width: 1600px) {
    #divCharteElementsNomPrenom .elementAir .charteDonutExplication, #divCharteElementsNomPrenom .elementEau .charteDonutExplication,
    #divCharteElementsNomPrenom .elementFeu .charteDonutExplication, #divCharteElementsNomPrenom .elementTerre .charteDonutExplication {
        padding-left: 3rem;
    }
}

/* (À développer) Tous vos éléments */
.celluleLettre {
    margin-right: 2rem;
    margin-top: 0.5rem;
    float: left;
}

.boiteLettreElement {
    border: 1px solid black;
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: large;
    font-weight: bold;
}

/*Liste dans Sommaire des Talents*/
.sommaireDesTalents .ulSommaireTalent {
    margin-top: 1rem;
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.sommaireDesTalents .talents {
    padding-left: 1.5rem;
}

/* Boites positives/négatives */
.lead {
    font-weight: bold;
    font-size: 16px;
}

i.fa-check-square {
    display: inline-block;
    font-size: 3rem;
    float: left;
    margin: 0 1.5rem 0.75rem 0;
}

    i.fa-check-square:hover::after {
        content: attr(data-tool-tip);
        display: block;
        background-color: #F8F8F8;
        border: 1px solid #DEDEDE;
        color: gray;
        padding: 1rem;
        font: 16px "Open Sans", sans-serif;
        position: absolute;
        width: 250px;
    }

@media (min-width: 576px) {
    i.fa-check-square:hover::after {
        width: 350px;
    }
}

.negatif,
.positif {
    background: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-radius: 16px 6px 6px 16px;
    margin: 1.5rem 0;
    padding: 1.5rem 3rem;
    min-height: 100px;
}

    .negatif h2,
    .positif h2 {
        font-size: 1.5rem;
    }

    .negatif .lead,
    .positif .lead {
        margin-bottom: 0;
    }

    .negatif .texteValeur,
    .positif .texteValeur {
        padding-left: 65px;
    }

        .negatif .texteValeur p,
        .positif .texteValeur p {
            margin-bottom: 0 !important;
        }

        .negatif .texteValeur h2,
        .positif .texteValeur h2 {
            font-size: 1.5rem;
        }

.negatif {
    border-left: 0.5rem solid #F46154;
    margin-bottom: 3rem;
}

    .negatif i.fa-check-square {
        color: #F46154;
        position: relative;
    }

.positif {
    border-left: 0.5rem solid #71B84B;
}

    .positif i.fa-check-square {
        color: #71B84B;
    }

.lettreAnnuelle {
    background-color: transparent;
    color: #008FFF !important;
    border: 1px solid #DEDEDE;
    font-size: 20px !important;
}

/* (Personnalité) Vos éléments de base */
.charteDonutExplication .positif,
.charteDonutExplication .negatif {
    padding: 0;
    background-color: transparent;
    border: none;
}

    .charteDonutExplication .positif i.fa-check-square,
    .charteDonutExplication .negatif i.fa-check-square {
        font-size: 2rem;
        margin-right: 0.75rem;
    }

    .charteDonutExplication .positif .texteValeur,
    .charteDonutExplication .negatif .texteValeur {
        padding-left: 40px;
    }

/* (Personnalité) Défi de vie */
.chiffreManquant {
    float: left;
    margin-left: -1rem;
}

    .chiffreManquant .SignatureNumerolgiqueChiffreFinale {
        margin-bottom: 0;
        background: transparent;
        border-radius: 0;
        border-color: transparent;
        border: none;
        color: #F46154;
        font-weight: 700;
        font-size: 3rem;
        width: initial;
    }

.exclamationTriangleAttention {
    color: #F46154;
    font-size: 6rem;
    float: left;
    padding: 1.5rem 1.5rem 1.5rem;
}

/* Toutes les chartes */
.trancheVotreProfil {
    display: inline-block;
    width: 100%;
}

    .trancheVotreProfil .labelCharte {
        margin-bottom: 1rem;
        font-size: 14px;
        font-weight: bold;
        padding: 0.5rem 1.5rem 0.5rem 0;
        text-transform: uppercase;
        border-bottom: 1px dotted #ccc;
    }

@media (min-width: 450px) {
    .trancheVotreProfil .labelCharte {
        width: 50%;
        float: left;
        text-align: right;
    }
}

@media (min-width: 992px) {
    .trancheVotreProfil .labelCharte {
        width: 40%;
    }
}

@media (min-width: 450px) {
    .trancheVotreProfil .resultatCharte {
        width: 50%;
        float: left;
        padding-left: 1rem;
    }
}

@media (min-width: 992px) {
    .trancheVotreProfil .resultatCharte {
        width: 60%;
    }
}

.trancheVotreProfil .labelResultatCharte {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.trancheVotreProfil .BoiteSignatureNumerologique {
    display: inline-block;
}

.annexeTalents {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .annexeTalents .actuelsOuDevenir {
        max-width: 800px;
    }

    .annexeTalents i.fa-check-square {
        font-size: 25px;
        vertical-align: bottom;
    }

    .annexeTalents .negatif, .annexeTalents .positif {
        border: none;
        background-color: transparent;
        padding: 0;
        margin: 0;
    }

        .annexeTalents .negatif .texteValeur, .annexeTalents .positif .texteValeur {
            padding: 0;
        }

/*
    Modules - equipeRelations.scss
    ------------------------------

    PAGES COMPATIBILITÉ ET EXPÉRIENCE
     Tableau Sommaire des comparaisons
     Contenant des membres de l'équipe
    PAGE RÉPARTITION DES FORCES
     Tree map
     Radar chart
     Légende répartition des forces
     Graphiques Répartition des forces individuelle
    PAGE RÉPARTITION PAR ÉLÉMENT
     Pie chart Répartion individuelle des éléments
     Résumé des éléments
     Style des titres des éléments de la légende
    Explications du nombre maître
    GESTION DES ÉQUIPES

*/
.contourSection {
    padding: 1rem 0;
    border: 1px solid #DEDEDE;
}

.descriptionCharte {
    margin-top: 1.5rem;
}

@media (min-width: 992px) {
    #divCharteAdresse .descriptionCharte {
        width: 75%;
    }
}

/** PAGES COMPATIBILITÉ ET EXPÉRIENCE **/
/* Tableau Sommaire des comparaisons */
.rangeeTableauPersonneAComparer {
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .rangeeTableauPersonneAComparer {
        flex-direction: row-reverse;
    }
}

.rangeeTableauPersonneAComparer table .BoiteSignatureElement {
    border: none;
}

.rangeeTableauPersonneAComparer table .iconesElements {
    width: 38px;
    height: 38px;
}

    .rangeeTableauPersonneAComparer table .iconesElements span {
        width: 38px;
        height: 38px;
    }

/* Contenant des membres de l'équipe  */
.boiteMembreEquipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F8F8F8;
    border-radius: 0.3rem;
    padding: 0 0.4rem 0.4rem 0.4rem;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
    transition: ease box-shadow 200ms;
    text-align: center;
}

@media (min-width: 576px) {
    .boiteMembreEquipe {
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 0.8rem 0.8rem 0.8rem;
        text-align: left;
    }
}

@media (min-width: 768px) {
    .boiteMembreEquipe {
        flex-direction: column;
        justify-content: initial;
        padding-top: 0;
        text-align: center;
    }
}

@media (min-width: 1500px) {
    .boiteMembreEquipe {
        flex-direction: row;
        padding-top: 1rem;
        text-align: left;
    }
}

.boiteMembreEquipe:hover, .boiteMembreEquipe:focus {
    box-shadow: none;
}

.boiteMembreEquipe .divNombreElementPersonne {
    display: inline-block;
}

@media (min-width: 992px) {
    .comparationAvec .h3, .comparationAvec .relationnelDescriptionIndividu h1, .relationnelDescriptionIndividu .comparationAvec h1, .comparationAvec .relationnelDescriptionIndividu h2, .relationnelDescriptionIndividu .comparationAvec h2 {
        margin-top: 0;
    }
}

/** PAGE RÉPARTITION DES FORCES **/
.boiteLegendeValeurAbsente {
    color: grey;
    background-color: #e5e5e5;
}

/* Tree map */
.treemapPersonneAComparer {
    max-width: 1000px;
    width: 100%;
}

@media (min-width: 1350px) {
    .treemapPersonneAComparer {
        width: 1000px;
    }
}

/* Radar chart */
.radarChartPersonneAComparer {
    max-width: 495px;
}

/*Légende répartition des forces*/
.legendeRepartitionForces {
    list-style: none;
    padding: 0.4rem;
    border: 1px solid #DEDEDE;
    border-radius: 2px;
    margin-top: 1.6rem;
    background-color: #fff;
    max-width: 800px;
    /*@media (min-width: 1390px) {
      flex-direction: column;
      margin: 0;
  }*/
}

@media (min-width: 576px) {
    .legendeRepartitionForces {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.legendeRepartitionForces li {
    padding: 0.4rem;
}

@media (min-width: 576px) {
    .legendeRepartitionForces li {
        width: 11rem;
    }
}

.carrerLegende {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 0.4rem;
    border-radius: 2px;
}

/* Graphiques Répartition des forces individuelle */
.charteRepatitionForcesIndividuelles {
    margin-bottom: 5rem;
}

    .charteRepatitionForcesIndividuelles .charte {
        max-width: 850px;
        width: 100%;
    }

/** PAGE RÉPARTITION PAR ÉLÉMENT **/
/* Pie chart Répartion individuelle des éléments */
.container-width-75 {
    width: 75%;
}

.charteParElementIndividu {
    margin-bottom: 2rem;
}

/* Résumé des éléments */
.titreResume {
    font-size: 16px;
    text-transform: uppercase;
    text-align: left;
    font-weight: bold;
    margin: 0;
}

.resumeElements,
.definitionForces,
.explicationsChiffreMaitre {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

    .resumeElements:hover, .resumeElements:focus,
    .definitionForces:hover,
    .definitionForces:focus,
    .explicationsChiffreMaitre:hover,
    .explicationsChiffreMaitre:focus {
        box-shadow: none;
    }

.definitionForces {
    margin: 3rem 0;
    max-width: 900px;
}

    .definitionForces .iconeChevron {
        margin: 1rem 0 0 0;
    }

#collapseDefinition {
    max-width: 900px;
}

.resumeElements {
    max-width: 550px;
    margin: 5rem auto;
}

@media (min-width: 450px) {
    .resumeElements .titreResume {
        align-self: flex-start;
    }
}

.resumeElements .contenantLegende {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

@media (min-width: 450px) {
    .resumeElements .contenantLegende {
        flex-direction: row;
        justify-content: space-between;
    }
}

.resumeElements .contenantLegende .legendeElement {
    justify-content: flex-start;
    flex-direction: row;
}

@media (min-width: 768px) {
    .resumeElements .contenantLegende .legendeElement {
        margin-right: 7rem;
    }
}

.resumeElements .contenantLegende .legendeElement .element {
    margin-bottom: 0;
    margin-right: 1rem;
}

@media (min-width: 768px) {
    .resumeElements .contenantLegende .legendeElement .element {
        margin-right: 3rem;
    }
}

.resumeElements .iconeChevron {
    margin-top: 1rem;
}

@media (min-width: 450px) {
    .resumeElements .iconeChevron {
        margin-top: 0;
    }
}

/* Style des titres des éléments de la légende */
#collapseResume .quatreElements {
    max-width: 450px;
}

    #collapseResume .quatreElements .titrebold {
        margin-bottom: 0;
        margin-left: 1rem;
    }

.resumeAbregeElements {
    margin-left: -2rem;
    margin-right: -2rem;
}

    .resumeAbregeElements tr td:first-child {
        text-align: center;
    }

@media (min-width: 992px) {
    .resumeAbregeElements tr td:first-child {
        width: 140px;
        text-align: left;
    }
}

/* Explications du nombre maître */
.explicationsChiffreMaitre {
    text-align: left;
    align-items: flex-start;
    max-width: 900px;
}

    .explicationsChiffreMaitre:hover, .explicationsChiffreMaitre:focus {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .explicationsChiffreMaitre .titreResume {
        padding: 1rem 0;
    }

/* GESTION DES ÉQUIPES */
.boiteGestionEquipe {
    border: 1px solid rgba(20, 53, 80, 0.14);
    padding: 0.6rem;
    max-width: 900px;
}

@media (min-width: 992px) {
    .boiteGestionEquipe {
        padding: 2rem;
    }
}

@media (min-width: 1200px) {
    .boiteGestionEquipe {
        padding: 3rem;
    }
}

.boiteGestionEquipe__listbox .k-listbox {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

@media (min-width: 576px) and (max-width: 768px) {
    .boiteGestionEquipe__listbox .k-listbox {
        display: block;
    }
}

@media (min-width: 576px) and (max-width: 768px), (min-width: 992px) {
    .boiteGestionEquipe__listbox .k-listbox {
        align-items: initial;
        flex-direction: row-reverse;
    }
}

.boiteGestionEquipe__listbox .k-listbox .k-listbox-toolbar {
    transform: rotate(90deg);
}

@media (min-width: 576px) and (max-width: 768px), (min-width: 992px) {
    .boiteGestionEquipe__listbox .k-listbox .k-listbox-toolbar {
        transform: none;
    }
}

.boiteGestionEquipe__listbox .k-listbox .k-list-scroller {
    height: 220px;
    width: 100%;
}

@media (min-width: 576px) and (max-width: 768px) {
    .boiteGestionEquipe__listbox .k-listbox .k-list-scroller {
        width: 220px;
    }
}

@media (min-width: 650px) and (max-width: 768px) {
    .boiteGestionEquipe__listbox .k-listbox .k-list-scroller {
        width: 250px;
    }
}

@media (min-width: 992px) {
    .boiteGestionEquipe__listbox .k-listbox .k-list-scroller {
        width: 300px;
    }
}

/*
    Modules - tableauxGestion.scss
    ------------------------------

    Toggles dans les options d'achats
    Styles généraux des grilles
    Grille de gestion de personnes
    Styles section gestion de personnes
    Options d'achats
    Chartes personnalisés

*/
/* Toggles dans les options d'achats */
.optionOn {
    color: greenyellow;
}

.optionOff {
    color: red;
}

/*Styles généraux des grilles*/
.k-header {
    background-color: #F8F8F8;
    background-image: none;
}

.k-link {
    font-size: 14px;
    color: #6c757d !important;
}

.spanOption {
    font-size: 1.12rem;
    padding: 0.6rem 0.5rem;
}

/*Grille de gestion de personnes*/
#grilleGestionPersonne .k-grid-toolbar {
    background-color: #6C757D;
}

#grilleGestionPersonne .changerProfil:hover {
    background: #fff;
    border-color: #089E19;
    color: #089E19 !important;
}

    #grilleGestionPersonne .changerProfil:hover .k-icon {
        color: #089E19 !important;
    }

#grilleGestionPersonne .btnGestion {
    color: #6c757d;
    border-color: #6c757d;
}

    #grilleGestionPersonne .btnGestion:hover, #grilleGestionPersonne .btnGestion:focus {
        background: #6c757d;
        color: #fff;
    }

/* Styles section gestion de personnes */
.adminMesPersonnes {
    padding: 1.5rem 1.5rem;
}

    .adminMesPersonnes .adminPersonneDisponible {
        font-weight: 700;
    }

    .adminMesPersonnes .adminChiffreResultat {
        font-weight: 700;
        font-size: 1.2rem;
    }

/* Options d'achats */
.mesPersonnes,
.mesEquipes {
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 1.5rem 0;
    padding: 1.5rem;
}

    .mesPersonnes h2,
    .mesEquipes h2 {
        background: #999;
        color: #fff;
        padding: 0.75rem;
        margin: 0;
        border-radius: 6px;
    }

.btnBigFA button.btn,
.btnBigFA a.btn {
    margin: 0;
}

@media (min-width: 1200px) {
    .btnBigFA button.btn,
    .btnBigFA a.btn {
        padding: 1rem;
    }
}

.btnBigFA button.btn:hover,
.btnBigFA a.btn:hover {
    color: #fff;
}

.btnBigFA button.btn i,
.btnBigFA a.btn i {
    padding-right: 0.75rem;
}

/* Chartes personnalisés */
.sectionEdition {
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1.5rem;
}

.personneCharte {
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ccc;
}

.usagerClient,
#divStatutBrouillon {
    padding: 1.5rem;
}