/* Échec de l'agrandissement. Renvoi du contenu non agrandi.
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,1): run-time error CSS1019: Unexpected token, found '@import'
(48,9): run-time error CSS1019: Unexpected token, found 'url("variables.css")'
(55,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(56,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light-medium'
(69,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(119,31): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(120,24): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(125,31): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(126,24): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(131,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(135,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-dark'
(139,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning'
(155,1): run-time error CSS1019: Unexpected token, found '@import'
(155,9): run-time error CSS1019: Unexpected token, found 'url("variables.css")'
(156,1): run-time error CSS1019: Unexpected token, found '@import'
(156,9): run-time error CSS1019: Unexpected token, found 'url("global.css")'
(162,16): run-time error CSS1039: Token not allowed after unary operator: '-lateral-menu-width'
(171,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(190,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(226,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning'
(235,31): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning'
(252,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(254,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(258,31): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(271,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(272,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(294,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(295,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(333,1): run-time error CSS1019: Unexpected token, found '@import'
(333,9): run-time error CSS1019: Unexpected token, found 'url("variables.css")'
(347,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(360,17): run-time error CSS1039: Token not allowed after unary operator: '-lateral-menu-width'
(366,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-dark'
(373,17): run-time error CSS1039: Token not allowed after unary operator: '-lateral-menu-width'
(376,46): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(376,71): run-time error CSS1019: Unexpected token, found ':'
(376,71): run-time error CSS1042: Expected function, found ':'
(376,71): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(377,37): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(377,62): run-time error CSS1019: Unexpected token, found ':'
(377,62): run-time error CSS1042: Expected function, found ':'
(377,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(391,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-darken'
(407,32): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(456,1): run-time error CSS1019: Unexpected token, found '@import'
(456,9): run-time error CSS1019: Unexpected token, found 'url("variables.css")'
(459,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-dark'
(465,17): run-time error CSS1039: Token not allowed after unary operator: '-lateral-menu-width'
(478,29): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-ligthen2'
(479,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(480,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(498,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-dark'
(512,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light-medium'
(513,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(520,32): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-darken'
(528,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(599,1): run-time error CSS1019: Unexpected token, found '@import'
(599,9): run-time error CSS1019: Unexpected token, found 'url("variables.css")'
(603,22): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(605,31): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(614,35): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(623,39): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(631,44): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(635,31): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(670,31): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light-medium'
(671,24): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light-medium'
(681,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(704,31): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(710,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(711,24): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(712,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(716,32): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-ligthen'
(717,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-ligthen'
(718,21): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(722,40): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(726,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-secondary'
(727,24): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-secondary'
(728,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(732,32): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-secondary-ligthen'
(733,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-secondary-ligthen'
(734,21): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(738,40): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(742,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning'
(743,24): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning'
(744,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(748,32): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning-ligthen'
(749,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning-ligthen'
(750,21): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(754,40): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(760,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-secondary'
(767,21): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-secondary-ligthen'
(773,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-warning'
(862,36): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light'
(878,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-ligthen2'
(892,32): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-ligthen2'
(903,32): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(904,21): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-dark'
(909,30): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(1013,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(1014,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-ligthen2'
(1019,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light'
(1024,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(1031,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(1041,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(1048,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(1052,22): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light-medium'
(1068,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(1069,28): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary-ligthen2'
(1197,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light-medium'
(1207,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-secondary'
(1575,22): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-medium'
(1586,22): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light-medium'
(2058,16): run-time error CSS1039: Token not allowed after unary operator: '-lateral-menu-width'
(2059,29): run-time error CSS1039: Token not allowed after unary operator: '-lateral-menu-width'
(2201,21): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-dark'
(2228,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(2230,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(2241,26): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-light'
(2258,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
(2268,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light'
(2288,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(2289,17): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-dark'
(2305,21): run-time error CSS1039: Token not allowed after unary operator: '-current-font-size'
(2333,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(2337,28): run-time error CSS1039: Token not allowed after unary operator: '-color-basics-grey-light'
(2424,17): run-time error CSS1039: Token not allowed after unary operator: '-color-brand-primary'
 */
/* Les variables CSS de l'application Saphir à compter de la version 2.11 */
/* Dans ce fichier uniquement les variables et valeurs de base */
/* NOTE : Les commentaires sont en français mais les variables sont en anglais */

/* variables */
:root {
    font-size: 10px;
    font-family: 'Roboto', 'Arial', sans-serif;
    --color-brand-primary: #1E4F95; /* bleu */
    --color-brand-primary-darken: #223962;
    --color-brand-primary-ligthen: #325396;
    --color-brand-primary-ligthen2: #D8E1F0;
    --color-brand-secondary: #6CB04A; /* vert */
    --color-brand-secondary-ligthen: #80BA61;
    /* --color-brand-secondary-darken:;
    --color-brand-secondary-ligthen:;*/
    --color-brand-neutral1: #94A3B8; /* gris */
    --color-brand-neutral2: #0f1c25; /* gris foncé */
    --color-basics-light: #FFFFFF; /* blanc */
    --color-basics-grey-light: #EEEEEE; /* gris clair */
    --color-basics-grey-light-medium: #ECECEC; /* gris clair moyen */
    --color-basics-grey-medium: #BFBFBF; /* gris moyen */
    --color-basics-grey-dark: #3A3838; /* gris foncé */
    --color-basics-warning: #A2001D; /* rouge */
    --color-basics-warning-ligthen: #BD0324;
    --color-text-primary: #0F172A; /* gris noir */
    --color-text-primary-light: #475569; /* gris */
    --color-text-secondary: #6CB04A; /* vert */
    --color-text-terciary: #1E4F95; /* bleu */

    --current-font-size: 1.2rem;
    --lateral-menu-width: 23rem;
}

/*les fonts*/
@font-face {
    font-family: "Roboto";
    src: url('./fonts/Roboto_Condensed-Regular.ttf') format('truetype');
    /*, url('../Content/fonts/Roboto_Condensed-Bold.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-BoldItalic.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-Italic.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-Light.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-LightItalic.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-Medium.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-MediumItalic.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-SemiBold.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-SemiBoldItalic.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-Thin.ttf') format('truetype'), url('../Content/fonts/Roboto_Condensed-ThinItalic.ttf') format('truetype');*/
    font-weight: normal;
    font-style: normal;
}

/* CSS global de l'application Saphir à compter de la version 2.11 */
/* Dans ce fichier n'ajouter que les classes css applicables aux composants globaux */
/* NOTE : Les commentaires sont en français mais les variables sont en anglais */

@import url("variables.css");


body {
    padding-top: 0;
    padding-bottom: 2rem;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: var(--current-font-size); /* 1.2rem v2.10 */
    background-color: var(--color-basics-grey-light-medium);
}

.body-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

body label {
    font-weight: normal;
}

h5 {
    color: var(--color-brand-primary);
    display: inline;
    font-size: 1.6rem;
    line-height: 2.4rem;
}

.pr4 {
    padding-right: 0.4rem;
}

.pl4 {
    padding-left: 0.4rem;
}

.pl-md {
    padding-left: 1.5rem;
}

.pl-xl {
    padding-left: 3rem;
}

.float-right {
    float: right;
}

.text-left {
    text-align: left;
}

.text-right{
    text-align: right;
}


/* fields overrides */
.input-group-text-lg {
    height: 3rem !important;
    border-top-right-radius: 0.4rem !important;
    border-bottom-right-radius: 0.4rem !important;
}

.btn-group {
    height: 3rem !important;
    display: inline-block !important;
}

.multiselect {
    height: 3rem !important;
    border-radius: 0.4rem !important;
    border: 0.1rem solid var(--color-basics-grey-medium) !important;
    border-color: var(--color-basics-grey-medium) !important;
    box-shadow: none !important;
}

.form-control {
    border: 0.1rem solid var(--color-basics-grey-medium) !important;
    border-color: var(--color-basics-grey-medium) !important;
    border-radius: 0.4rem !important;
}

.form-label{
    color: var(--color-basics-grey-medium) !important;
}

.form-label-saphir {
    color: var(--color-basics-grey-dark) !important;
}

.text-important{
    color: var(--color-basics-warning);
}

.modal-footer {
    justify-content: space-between !important;
}

div.dt-scroll-body {
    overflow-y: scroll;
    /*scrollbar-color: var(--color-brand-primary) var(--color-brand-primary-ligthen2);*/
    scrollbar-width: thin;
}
/* Le style CSS du corps de l'application Saphir à compter de la version 2.11 */
/* Dans ce fichier uniquement les styles du corps (rendering principal) */
/* NOTE : Les commentaires sont en français mais les variables sont en anglais */

@import url("variables.css");
@import url("global.css");


.mainBody {
    position: absolute;
    top: 5rem;
    left: var(--lateral-menu-width);
    right: 0;
    bottom: 0;
    padding: 0 2rem 2rem 2rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.titlePage {
    color: var(--color-text-primary);
    font-weight: bold;
    font-size: 1.8rem;
    text-transform: uppercase;
    padding: 2rem 0 0 0;
    margin-bottom: 0.8rem;
}

.titlePageButton {
    padding-top: 2.2rem;
    margin-bottom: 0.8rem;
}

    .titlePageButton div.btn {
        float: right;
        margin-left: 1rem;
    }

input, select, button, textarea {
    font-size: var(--current-font-size) !important;
}

/*.multiselect {
    font-size: inherit;
    background-color: var(--color-basics-light);
    width: 100%;
    border-color: var(--color-basics-grey-medium);
    display: block;
    border-radius: 0.4rem;
    color: var(--color-text-primary);
}


    .multiselect span {
        color: #636363;
    }*/

#MutltiselectQuestion .multiselect-container {
    width: 100%;
}

#MutltiselectQuestion .multiselect {
    width: 100%;
    display: block;
}



/* Set width on the form input elements since they're 100% wide by default */
.multiselect-search {
    max-width: 1000px !important;
}

/* styles for validation helpers */
.field-validation-error {
    color: var(--color-basics-warning);
}

.field-validation-valid {
    display: none;
}

input.input-validation-error,
select.input-validation-error + .btn-group > button {
    border: 0.1rem solid var(--color-basics-warning) !important;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

/************** message reponse **************/
.message-reponse {
    font-size: var(--current-font-size);
    font-weight: bold;
    color: var(--color-text-secondary);
    background-color: rgba(255,255,255, 0.9);
    position: absolute;
    left: 48%;
    border: 0.1rem solid var(--color-text-secondary);
    border-radius: 0.4rem;
    line-height: 2.4rem;
    padding: 0.6rem 1rem 0.6rem 1rem;
    -webkit-animation-name: expand;
    animation-name: expand;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    transition: 1s;
    visibility: hidden;
    opacity: 0;
}

@keyframes expand {
    0% {
        top: 0rem;
        visibility: visible;
        opacity: 1;
    }
    15% {
        top: 6rem;
        visibility: visible;
        opacity: 1;
    }
    95% {
        top: 6rem;
        visibility: visible;
        opacity: 1;
    }
    100% {
        top: 0rem;
        visibility: hidden;
        opacity: 0;
    }
}

@-webkit-keyframes cssAnimation {
    0% {
        top: 0rem;
        visibility: visible;
    }
    50% {
        top: 2rem;
        visibility: visible;
    }
    100% {
        top: 2rem;
        visibility: hidden;
    }
}


.detailContainer {
    width: 100%;
    left: 0;
    right: 0;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}


table {
    border-collapse: collapse !important;
}

    table tbody {
        border-right: 20px solid red !important;
    }
/* CSS du menu horizontal en haut de l'application Saphir à compter de la version 2.11 */
/* Dans ce fichier n'ajouter que les classes css applicables au menu header globaux */
/* NOTE : Les commentaires sont en français mais les variables sont en anglais */

@import url("variables.css");

/* menu header */

.menuHeaderContainer {
    width: 100%;
    height: 5rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20000;
}

.menuHeader {
    background-color: var(--color-brand-primary);
    height: 5rem;
    display: inline-block;
}

.menuHeaderMainTitle {
    padding-top: 1rem;
    padding-left: 1rem;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    overflow: visible;
    width: var(--lateral-menu-width);
    float: left;
    cursor: pointer;
}

.newMenuBackGround {
    background-color: var(--color-basics-grey-dark);
    height: calc(100% - 5rem);
    display: block;
    position: fixed;
    left: 0;
    top: 5rem;
    margin-right: 0px;
    width: var(--lateral-menu-width);
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: inset -1px -10px 0.5rem var(--color-basics-grey-medium: #BFBFBF);
    border-right: 0.5rem solid var(--color-basics-grey-medium: #BFBFBF);
}

/* disconnect style */
.newDisconnect-position {
    position: absolute;
    display: flex;
    flex-direction: row;
    right: 0.5rem;
    top: 0;
    margin: auto;
    height: 100%;
    z-index: 1;
    margin-right: -0.5rem;
    background-color: var(--color-brand-primary-darken);
}

.newDisconnect-position select {
    margin: 0px;
    height: 100%;
    width: 100%;
    border-width: 0px;
    background-color: transparent;
    border-radius: 0px;
    color: white;
    padding-left: 2em;
}

    .newDisconnect-position select:hover,
    .newDisconnect-position select:focus {
        background-color: var(--color-brand-primary);
        color: white;
        outline: none;
        box-shadow: none;
    }

.newDisconnect-position option {
    background-color: white;
    color: black;
    font-weight: bold;
}

.newDisconnect-position div::before {
    content: '►';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    pointer-events: none;
    padding-left: 0.5em;
}

.newDisconnect-position div:focus-within::before {
    content: '▼';
}

.newDisconnect-position form {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.newDisconnect-position button {
    margin: auto !important;
    color: white;
    font-size: 2em !important;
    width: 2.5em;
}

    .newDisconnect-position button:hover {
        color: white;
    }



/* Les CSS du menu latéral de l'application Saphir à compter de la version 2.11 */
/* Dans ce fichier uniquement le style du menu latéral */
/* NOTE : Les commentaires sont en français mais les variables sont en anglais */

@import url("variables.css");

.menuBackGround {
    background-color: var(--color-basics-grey-dark);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 5rem 0 !important;
    width: var(--lateral-menu-width);
    overflow-y: auto;
    overflow-x: hidden;
}


/* navbar */
.navbar-collapse .navbar-nav > div > li > a:hover,
.navbar-collapse .navbar-nav > div > li > ul > li > a:hover,
.navbar-collapse .navbar-nav > div > .active > a,
.navbar-collapse .navbar-nav > div > .active > a:hover,
.navbar-collapse .navbar-nav > div > .active > a:focus {
    border-left: solid 0.5rem !important;
    border-left-color: var(--color-brand-primary-ligthen2) !important;
    background-color: var(--color-brand-primary);
    color: var(--color-basics-light);
    padding-left: 2rem;
    text-decoration: none !important;
}

.navbar-collapse {
    padding: 0;
}

.navbar-collapse .navbar-nav {
    width: 100%;
    margin: 0;
    padding: 0;
}

nav.sidebar {
    width: 100%;
    padding: 1rem;
    background-color: var(--color-basics-grey-dark);
    border: none;
    text-decoration: none !important;
}

/* liens du menu */
.nav > div > li > a {
    position: relative;
    display: block;
    padding: 0.5rem 3.4rem 0.5rem 1.3rem;
}

.menu-buttons {
    padding: 0.5rem 3rem 0.5rem 1.3rem;
    color: var(--color-basics-grey-light-medium);
    font-size: var(--current-font-size);
    text-decoration: none !important;
}

    .menu-buttons:focus,
    .menu-buttons:hover {
        padding: 0.5rem 3rem 0.5rem 1.3rem;
        background-color: var(--color-brand-primary-darken);
        text-decoration: none !important;
    }

.navPrompt {
    text-decoration: none !important;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--color-basics-grey-medium) !important;
    cursor: pointer;
    padding: 0.5rem 3rem 0.5rem 1.3rem;
    line-height: 3rem;
}


/* états et effets du menu */
nav.sidebar {
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
}

nav:hover .forAnimate {
    opacity: 1;
    text-decoration: none !important;
}

/* media queries */

/* large lg */
@media (min-width: 1330px) {

    nav.sidebar .forAnimate {
        opacity: 1;
        text-decoration: none !important;
    }
}


.DetailTitre {
    color: #06a3bf;
    font-size: 28px;
    font-style: italic;
}

.LibelleLabel {
    color: #e7eaf1;
    font-style: italic;
    font-size: 12px;
}



.detailtop {
    margin-top: 10px;
}

.margin-btn-enregistrer {
    margin-right: 15px;
}

.detail-render-area {
    position: absolute;
    height: 90%;
    margin: auto;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    width: 98%;
    background: white;
}

/* Le style CSS spécifique de l'application Saphir à compter de la version 2.11 */
/* Dans ce fichier uniquement les styles spécifiques */
/* NOTE : Les commentaires sont en français mais les variables sont en anglais */

@import url("variables.css");

/********************* panel et composant génériques *********************/
.bodyPanel {
    background: var(--color-basics-light);
    padding: 1rem;
    border: 0.1rem solid var(--color-basics-grey-medium);
    border-radius: 0.4rem;
    margin-bottom: 1rem;
}

    .bodyPanel input,
    .bodyPanel button,
    .bodyPanel select,
    .bodyPanel textarea {
        border: 0.1rem solid var(--color-basics-grey-medium);
        border-radius: 0.4rem;
        margin-bottom: 0.8rem;
        box-shadow: none !important;
    }

        .bodyPanel button:focus,
        .bodyPanel select:focus,
        .bodyPanel textarea:focus {
            border: 0.1rem solid var(--color-basics-grey-medium) !important;
            box-shadow: none !important;
        }

        .bodyPanel input:focus,
        .bodyPanel select.form-control:focus,
        .form-control:focus {
            /*border: 0.2rem solid var(--color-basics-grey-medium) !important;*/
            box-shadow: 0 0 0 0.15rem var(--color-basics-grey-medium) !important;
        }

.form-check-input {
    border: 0.1rem solid var(--color-basics-grey-medium) !important;
}

.bodyPanel h5 {
    margin-top: 0.8rem;
}


/********************* loading panel and Gif *********************/
.loadingPanel {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    user-select: none;
}

.loadingGif {
    background-color: transparent;
    background-image: url('Images/load.gif');
    background-repeat: no-repeat;
    background-size: contain;
    width: 6rem;
    height: 6rem;
    margin-top: 20%;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

.login-form-control input.form-control,
.login-form-control select.form-control {
    border: 0.1rem solid var(--color-basics-grey-light-medium) !important;
    border-color: var(--color-basics-grey-light-medium) !important;
}

.login-form-control input.form-control:focus,
.login-form-control select.form-control:focus {
    box-shadow: none !important;
}

/********************* boutons et liens *********************/
.btn {
    font-size: var(--current-font-size) !important;
    margin-bottom: 0.8rem !important;
    padding: 0.6rem 1.2rem 0.6rem 1.2rem;
}

.btnControlArea div.btn {
    float: right;
    margin-top: 2rem;
    margin-left: 1rem;
}

.btn-navigation {
    display: flex;
    flex-direction: row;
    padding: 0;
}

    .btn-navigation button {
        margin-right: 0.6rem;
        margin-bottom: 0.6rem;
    }

.bodyPanel .btn.multiselect:hover {
    border: 0.1rem solid var(--color-basics-grey-medium) !important;
    box-shadow: none !important;
}


.btn-primary { /* overwrite bootstrap style */
    background-color: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
    color: var(--color-basics-light) !important;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:focus-visible { /* overwrite bootstrap style */
        background-color: var(--color-brand-primary-ligthen) !important;
        border-color: var(--color-brand-primary-ligthen) !important;
        color: var(--color-basics-light) !important;
    }

    .btn-primary:focus, .btn-primary:focus-visible { /* overwrite bootstrap style */
        box-shadow: 0 0 0 0.15rem var(--color-basics-grey-medium) !important;
    }

.btn-secondary { /* overwrite bootstrap style */
    background-color: var(--color-brand-secondary) !important;
    border-color: var(--color-brand-secondary) !important;
    color: var(--color-basics-light) !important;
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:focus-visible { /* overwrite bootstrap style */
        background-color: var(--color-brand-secondary-ligthen) !important;
        border-color: var(--color-brand-secondary-ligthen) !important;
        color: var(--color-basics-light) !important;
    }

    .btn-secondary:focus, .btn-secondary:focus-visible { /* overwrite bootstrap style */
        box-shadow: 0 0 0 0.15rem var(--color-basics-grey-medium) !important;
    }

.btn-important {
    background-color: var(--color-basics-warning);
    border-color: var(--color-basics-warning);
    color: var(--color-basics-light);
}

    .btn-important:hover, .btn-important:focus, .btn-important:focus-visible {
        background-color: var(--color-basics-warning-ligthen);
        border-color: var(--color-basics-warning-ligthen);
        color: var(--color-basics-light);
    }

    .btn-important:focus, .btn-important:focus-visible {
        box-shadow: 0 0 0 0.15rem var(--color-basics-grey-medium) !important;
    }

.btn-link_secondary {
    background-color: transparent;
    font-weight: bold;
    color: var(--color-brand-secondary);
}

    .btn-link_secondary:active,
    .btn-link_secondary:hover {
        background-color: transparent;
        font-weight: bold;
        color: var(--color-brand-secondary-ligthen);
        border: 0.1rem solid transparent !important;
    }

.link-warn,
.link-warn:hover {
    color: var(--color-basics-warning);
    text-decoration: none;
    cursor: pointer;
    line-height: 2.8rem;
    margin-top: 3rem !important;
}

.btn-login {
    display: block;
    max-width: 100%;
    height: 3.4rem;
    width: 100%;
}

.btn-login:focus{
    box-shadow:none !important;
}

.btn-disconnect-login {
    display: block;
    height: 6rem;
    width: 6rem;
    max-width: 6rem;
    font-size: 3rem;
    width: 100%;
    border-radius: 0.3rem;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 100;
}

.bottom-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

/********************* labels *********************/
.textWithCheckbox {
    line-height: 3rem;
    margin-right: 0.5rem;
}

/********************* filtres *********************/
.checkboxContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
}

.filterCheckbox {
    justify-self: center;
}

    .filterCheckbox:first-child {
        justify-self: start;
    }

    .filterCheckbox:last-child {
        justify-self: end;
    }



/********************* dropdown list *********************/
.multiselect-container {
    width: 100%;
}

    .multiselect-container.show {
        /*z-index: 99999 !important;*/
        inset: 3rem 0 auto 0;
    }

        .multiselect-container.show .multiselect-search,
        .multiselect-container.show .multiselect-search:focus {
            border: none !important;
        }

    .multiselect-container button.multiselect-option {
        border: none;
        border: none;
        border-radius: 0rem;
    }

        .multiselect-container button.multiselect-option:hover {
            border: none;
            border-radius: 0rem;
            background-color: var(--color-basics-grey-light) !important;
        }

    .multiselect-container input {
        margin-bottom: 0.4rem;
    }

/********************* page selector *********************/
.pageSelectorArea {
    max-width: 17rem;
    line-height: 2rem;
}

/********************* table *********************/

.customTable > thead {
    background-color: var(--color-brand-primary-ligthen2) !important;
    border-radius: 0.1rem;
    padding-bottom: 1rem;
    margin-top: 0;
    margin-right: 0;
    width: 100% !important;
    border: none;
}

    /*.customTable > thead > tr {
        box-shadow: 0 0 0 0 red, 2rem 0 0 0 var(--color-brand-primary-ligthen2);
    }*/

    .customTable > thead > tr > th {
        background-color: var(--color-brand-primary-ligthen2) !important;
    }

.customTable > tbody {
    margin-top: 1rem !important;
    border-left: none !important;
    border-right: none !important;
    display: bloc;
}

    .customTable > tbody > tr {
        background-color: var(--color-basics-light);
        color: var(--color-basics-grey-dark) !important;
    }

        .customTable > tbody > tr > td {
            word-break: break-all;
            background: var(--color-basics-light);
            background-color: transparent !important;
            padding-left: 1rem;
            padding-right: 1rem;
        }


.scrollingAreaDatatable {
    overflow-y: auto;
    overflow-x: hidden;
}

.ligne_inactive { /*Classe pour les lignes inactives dans les écrans de liste*/
    background-color: #ececec !important;
}


/********************* switch et radio boutons *********************/
.switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.7rem;
    float: right;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e67e22;
    -webkit-transition: .4s;
    transition: .4s;
}

.sliderdisabled {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ad692d;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #7eb349;
}

input:focus + .slider {
    box-shadow: 0 0 1px #7eb349;
}

input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(12px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 17px;
}

    .slider.round:before {
        border-radius: 50%;
    }


/********************* modals *********************/
.modal {
    background: rgba(50, 50, 50, 0.64);
}

    .modal .modal-dialog {
        margin-top: 6rem;
    }

.modal-header, .modal-footer {
    width: 100%;
    height: 6rem;
    color: var(--color-text-primary);
    background-color: var(--color-brand-primary-ligthen2);
    border-radius: 0rem;
}

.modal-footer {
    background-color: var(--color-basics-grey-light);
    padding-top: 1.2rem;
}

.modal-header h5 {
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.modal-body {
    width: 100%;
    height: 100%;
    background-color: var(--color-basics-light);
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}

/********************* login styles *********************/


.login-img-container {
    background-attachment: fixed;
    background-color: var(--color-basics-light);
    background-image: url('Images/Pictures/backAuth2.jpg');
    background-repeat: no-repeat;
    background-position-x: left;
}

.login-container {
    background-color: var(--color-basics-light);
}

.AuthPopup {
    background: var(--color-basics-grey-light-medium);
    width: 57rem;
    text-align: center;
    position: absolute;
    top: 30%;
    left: calc(50% - 28rem);
    padding: 4rem 2rem 4rem 2rem;
    text-align: center;
}

    .AuthPopup h5 {
        margin-bottom: 3rem;
        font-weight: bold;
    }

.InformationLogin, .InformationMdpOublie {
    color: var(--color-brand-primary);
    background-color: var(--color-brand-primary-ligthen2);
    height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em;
    margin-bottom: 0.6em;
    font-weight: bold;
}

#WelcomeText {
    margin-top: 1rem;
}


/*.ImgBackAuth {
    display: inline-block;
    width: 50%;
    height: 100%;
    position: absolute;
    background-image: url('Images/Pictures/backAuth2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    top: 0;
}*/

.inner-addon {
    position: relative;
    color: #686c77;
}
    /* style icon */
    .inner-addon .bi {
        position: absolute;
        padding: 10px;
        pointer-events: none;
    }

/* align icon */
.left-addon .bi {
    left: 15px;
}

.right-addon .bi {
    right: 0px;
}

/* add padding  */
.left-addon input {
    padding-left: 15px;
}

.right-addon input {
    padding-right: 40px;
}

.DivAuthRight {
    display: inline-block;
    background-color: white;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}

.ImgIconeAuthContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: white;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    bottom: 0px;
}

.ImgIconeAuth {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
    width: auto;
    height: 65px;
}

@media (min-width: 992px) {
    .modal2-lg {
        width: 1300px;
    }
}


/*Titre du main */

.MainTitreText {
    text-align: center;
    display: block;
    font-size: 25px;
    color: #00a1bd;
    font-weight: bold;
}

.MainTitreTextForModal {
    text-align: center;
    display: block;
    font-size: 19px;
    color: #00a1bd;
    font-weight: bold;
}

.MainTitreBoutonExcelContainer {
    text-align: right;
}

.MainTitreBoutonExcel {
    margin-top: 5px;
    font-size: 10px;
    background-color: #7fa821;
}
/*Fin titre du main */


/*Classe pour les lignes inactives dans les écrans de liste*/
.ligne_inactive {
    background-color: var(--color-basics-grey-light-medium) !important;
}

/*Fin de la liste desc données*/

/*bouton feu tricolor*/
.actionSummary span {
    line-height: 3rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-brand-secondary);
}

.traffic-light {
    display: inline-block;
    background-color: #e0e0e0;
    width: 9.6rem;
    height: 3rem;
    border-radius: 3rem;
    padding-left: 0.7rem;
    float: right;
}

.traff {
    appearance: none !important;
    user-select: none !important;
    outline: none !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin-top: 0.9rem !important;
    margin-left: 1rem !important;
    border: none !important;
    border-radius: 1.2rem !important;
    color: transparent !important;
}

input.color1 {
    background-color: #cfa4a4 !important;
    box-shadow: 0 0 0 0.5rem #cfa4a4 !important;
}

    input.color1:hover {
        background-color: #ce0000 !important;
        box-shadow: 0 0 0rem 0.5rem #ce0000 !important;
    }

    input.color1:checked {
        background-color: #ce0000 !important;
        box-shadow: 0 0 0.2rem 0.5rem #ce0000 !important;
    }

input.color2 {
    background-color: #daba9c !important;
    box-shadow: 0 0 0rem 0.5rem #daba9c !important;
}

    input.color2:hover {
        background-color: #ff9d09 !important;
        box-shadow: 0 0 0rem 0.5rem #ff9d09 !important;
    }

    input.color2:checked {
        background-color: #ff9d09 !important;
        box-shadow: 0 0 0.2rem 0.5rem #ff9d09 !important;
    }

input.color3 {
    background-color: #bed0ad !important;
    box-shadow: 0 0 0rem 0.5rem #bed0ad !important;
}

    input.color3:hover {
        background-color: #34cb4a !important;
        box-shadow: 0 0 0rem 0.5rem #34cb4a !important;
    }

    input.color3:checked {
        background-color: #34cb4a !important;
        box-shadow: 0 0 0.2rem 0.5rem #34cb4a !important;
    }


/************ Global *************/
#container {
    margin: 0 auto;
    width: 100%;
}

    #container input {
        height: 1.5em;
        visibility: hidden;
    }

    #container label {
        background: #e7eaf1;
        border-radius: .25em .25em 0 0;
        color: #888;
        cursor: pointer;
        display: block;
        float: left;
        font-size: 1em;
        height: 2.5em;
        line-height: 2.5em;
        margin-right: .25em;
        padding: 0 1.5em;
        text-align: center;
    }

    #container input:hover + label {
        background: #ddd;
        color: #666;
    }

    #container input:checked + label {
        background: #00a1b9;
        color: #f1f1f1;
        position: relative;
        z-index: 6;
        /*
	-webkit-transition: .1s;
	-moz-transition: .1s;
	-o-transition: .1s;
	-ms-transition: .1s;
	*/
    }

#content {
    background: #ffffff;
    border-radius: 0 .25em .25em .25em;
    min-height: 20em;
    position: relative;
    width: 100%;
    z-index: 5;
}

    #content div {
        opacity: 0;
        padding: 1.5em;
        position: absolute;
        z-index: -100;
        /*
	transition: all linear 0.1s;
	*/
    }

#content-1 p {
    clear: both;
    margin-bottom: 1em;
}

    #content-1 p.left img {
        float: left;
        margin-right: 1em;
    }

    #content-1 p.last {
        margin-bottom: 0;
    }

#content-2 p {
    float: left;
    width: 48.5%;
}

    #content-2 p.column-right {
        margin-left: 3%;
    }

    #content-2 p img {
        display: block;
        margin: 0 auto 1em auto;
    }

#content-3 p,
#content-3 ul {
    margin-bottom: 1em;
}

#content-3 ul {
    margin-left: 2em;
}

#container input#tab-1:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3 {
    opacity: 1;
    z-index: 100;
}

input.visible {
    visibility: visible !important;
}


/* old but still used */

.tableList {
    width: 100%;
    border-radius: 3px;
    margin-left: 0px;
}

.inline {
    display: inline-block;
}

.scrollingAreaDatatableModal {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/*.tableListDetail {
    width: 100%;
    border-radius: 3px;
    margin-left: 15px;
}*/



.TableFilter {
    width: 100%;
    background: #00a1bd;
    border-radius: 1px;
    height: 80px;
}

/*
.TableFilterSenior {
    width: 100%;
    background: rgba(243,243,245,1);
    border-color: rgba(224,221,212,1);
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-radius: 1px;
    padding-bottom: 10px;
}*/

.TableFilterExportSenior {
    width: 100%;
    padding-top: 10px;
    background: white;
    border-color: rgba(224,221,212,1);
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-radius: 1px;
    margin-bottom: 0px;
}

.FiltreListBoxThin {
    width: 50% !important;
    min-width: 30px !important;
    max-width: 100px !important;
    margin-right: 5px;
    float: left;
}

/********* multiselect and custom controls*/

#MutltiselectQuestion .multiselect-container {
    width: 100%;
}

#MutltiselectQuestion .multiselect {
    width: 100%;
    display: block;
}

#InactiveRow {
    color: orange;
}

.selected {
    background: #d4d4d4;
}

.dataTables_filter {
    visibility: hidden;
}


.visibility_hidden {
    visibility: hidden;
}

.structureSelector {
    border: none !important;
}

.btn-enregistrer-Container {
    display: flex;
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
}




.panel-default > .panel-heading-custom {
    background: white;
    color: #00a1bd;
    border: none;
}

.panel-default {
    border-color: #fbfbfb;
}

.detailTitreContainer {
    top: 100px;
    position: absolute;
    width: 95%;
    left: 0;
    right: 0;
    margin: auto;
}

.FooterBouton {
    bottom: 100px;
    position: absolute;
    width: 95%;
    left: 0;
    right: 0;
    margin: auto;
}

.detailTitreContainerForModal {
    top: 40px;
    position: absolute;
    width: 95%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 20px;
}

.referenceEditionBody {
    height: 400px;
    padding-top: 150px;
    background: rgba(5, 5, 5, 0.01);
}

.operateurEditionBody {
    height: 930px;
    padding-top: 150px;
    background: rgba(5, 5, 5, 0.01);
}

SeniorProfilEditionBody .profilEditionBody {
    height: 60vh;
    padding-top: 5vh;
    background: rgba(5, 5, 5, 0.01);
}

.pilotageBody {
    padding-top: 10px;
    background: rgba(5, 5, 5, 0.01);
    padding-left: 10px;
}

.pilotageFiltreRowMargin {
    margin-bottom: 10px;
}

.questionnaireEditionBody {
    height: 450px;
    padding-top: 30px;
    background: rgba(5, 5, 5, 0.01);
    padding-left: 50px;
}


.listboxProfil {
    height: 35vh;
}


.ModalOptionQuestionStyle {
    background: var(--color-basics-grey-medium);
    overflow: auto;
}

.modal-content {
    border-radius: 0px !important;
}

.BodyForModalSouhait {
    height: auto;
    font-size: 1.2rem;
    background: var(--color-basics-grey-light-medium);
    border-radius: 0;
}

@media screen and (max-width: 1400px) and (min-width:901px) {
    body {
        font-size: 1.2rem;
    }

    .customTable > tbody > tr > td {
        word-break: break-all;
    }
}

.autocomplete-suggestions {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    overflow: auto;
    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-no-suggestion {
    padding: 2px 5px;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}

/*HOME*/

.UserInfoContainer {
    font-size: 14px;
    background-color: #e7eaf1;
    padding: 50px 0px 50px 0px;
    box-shadow: inset -1px -2px 4px rgba(0,0,0,0.2);
    color: #777;
}

    .UserInfoContainer .bi {
        font-size: 60px;
        color: white;
        background-color: #00a1bd;
        padding: 20px;
        border-radius: 5px;
    }

    .UserInfoContainer > div > div > p:nth-child(2n) {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .UserInfoContainer .UserInfoLabel {
        color: black;
    }

.HomePageFooter {
    position: absolute;
    bottom: -300px;
}


.btn-group {
    width: 100% !important;
}

table.dataTable {
    clear: both;
    margin-top: 0px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    //border-collapse: separate !important;
    border-bottom: solid 0px rgba(224,221,212,1) !important;
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid rgba(224,221,212,1) !important;
    margin-bottom: 10px !important;
}

.leftborder {
    border-left: solid 1px rgba(224,221,212,1) !important;
}

.rightborder {
    border-right: solid 1px rgba(224,221,212,1) !important;
}



.ListSeparator {
    color: #333333 !important;
    font-weight: bold;
}

.command-td {
    display: grid;
    justify-content: end;
}

/*.ligne_inactive .command-td{
    display: initial;
    justify-content: initial;
}*/

/* icone de boutons d'action de lignes des tableaux */
.ActionIcon {
    background-repeat: no-repeat;
    background-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    display: inline-block;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.EditIcone {
    background-image: url('Images/edit2.png');
}

.DelIcone {
    background-image: url('Images/delete2.png');
}

.DownloadIcone {
    background-image: url('Images/exportFichierTelechargement.png');
}

.InvitationIcone {
    background-image: url('Images/invit2.png');
}

.ConventionIcone {
    background-image: url('Images/Convention.png');
}

.SouhaitIcone {
    background-image: url('Images/fav2.png');
}

.ParcoursIcone {
    background-image: url('Images/parcours3.png');
}

.AddIcon {
    background-image: url('Images/add2.png');
}

.CopyIcone {
    background-image: url('Images/copy2.png');
}

.ContactIcone {
    background-image: url('Images/contact2.png');
}

.GroupIcone {
    background-image: url('Images/group2.png');
}

.BookIcone {
    background-image: url('Images/book2.png');
}

.FactureIcone {
    background-image: url('Images/facture.png');
}

.CalendarIcone {
    background-image: url('Images/calendar2.png');
}

.InfoIcone {
    background-image: url('Images/info2.png');
}

.PeopleIcone {
    background-image: url('Images/body2.png');
}

.ListeIcone {
    background-image: url('Images/list2.png');
}

.ObservationIcone {
    background-image: url('Images/obs2.png');
}

.DoneTache {
    background-image: url('Images/done.png');
}

.UnDoneTache {
    background-image: url('Images/undone.png');
}

.BluePen {
    background-image: url('Images/crayonbleu.png');
}

.ActiveIcone {
    background-image: url('Images/actif.png');
}

.InactiveIcone {
    background-image: url('Images/inactived.png');
}

.EncoursIcone {
    background-image: url('Images/encours.png');
}

.WebVisibleIcon {
    background-image: url('Images/eye2.png');
}

.WebUnvisibleIcon {
    background-image: url('Images/eyeOff2.png');
}

.QuestVisualisationIcon {
    background-image: url('Images/eyegrey.png');
}

.QuestGenerationIcon {
    background-image: url('Images/generationPDFQuestionnaire.png');
}

.QuestOptionIcon {
    background-image: url('Images/optionVisualisation.png');
}

.ExportExcelIcon {
    background-image: url('Images/excel2.png');
}

.popupContainer {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 500;
    background-color: rgba(0,0,0,0.5);
    display: none;
    padding: 100px;
}

.popupAction {
    width: 100%;
    height: 100%;
    background-color: white;
}

.popupFrame {
    width: 100%;
    height: 100%;
}

.noscroll {
    position: fixed;
    overflow: hidden;
}

.topBarPopup {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: lightgray;
    width: 100%;
}

.PopupTitle {
    width: 60%;
    height: 30px;
    background-color: transparent;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    color: darkgrey;
    font-size: 14px;
    font-weight: bold;
}

.closePopup {
    width: 30px;
    height: 30px;
    background-color: red;
    font-size: 14px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
}

.btnExportExcel {
    text-decoration: underline;
    cursor: pointer;
    background-image: url('Images/excel2.png');
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 25px;
    line-height: 20px;
    float: right;
    margin-left: 20px;
}

.btnNouveau {
    text-decoration: underline;
    cursor: pointer;
    background-image: url('Images/add2.png');
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 25px;
    line-height: 20px;
    float: right;
    margin-left: 20px;
}

.AddIcone {
    background-image: url('Images/add2.png');
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    float: right;
    cursor: pointer;
}

.ExportExcelIcone {
    background-image: url('Images/excel2.png');
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    float: right;
    cursor: pointer;
    position: relative;
    top: -2.5px;
}

.btnRetour {
    text-decoration: underline;
    cursor: pointer;
    background-image: url('Images/left2.png');
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 25px;
    line-height: 20px;
    float: right;
    margin-left: 20px;
}

.btnSelectionMultiple {
    text-decoration: underline;
    cursor: pointer;
    background-image: url('Images/multi2.png');
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 25px;
    line-height: 20px;
    float: right;
    margin-left: 20px;
}

.btnDesinscriptionMultiple {
    text-decoration: underline;
    cursor: pointer;
    background-image: url('Images/delete2.png');
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 25px;
    line-height: 20px;
    float: right;
    margin-left: 20px;
}

.checkBox {
    position: relative;
    top: 5px;
    margin-left: 10px;
    /*left: 200px;*/
}

.checkBoxDescription {
    display: block;
    text-align: left !important;
    margin-left: 12px;
}

.listButton {
    margin-right: 10px;
    margin-bottom: 20px;
}

.doublons {
    overflow-y: auto;
    max-height: 292px;
}

    .doublons a {
        text-decoration: none;
    }

.row.doublon {
    border: solid 1px lightgray;
    border-radius: 3px;
    margin: 0 1em 1em 1em !important;
    padding-top: 1em;
}

    .row.doublon:hover {
        background-color: #f5f5f5;
    }

    .row.doublon label {
        cursor: pointer;
    }

    .row.doublon > div > div > label {
        text-overflow: ellipsis;
        overflow: hidden;
        width: inherit;
    }

    .row.doublon .TitreLabel {
        color: #333;
    }

/* Selection multiple et checkbox de selection */
.ChkLine {
    display: none;
    float: right;
}

/*.ChkLineVisible {
    float: right;
}*/

.MultiSelectionPanel {
    position: fixed;
    bottom: 0;
    left: var(--lateral-menu-width);
    width: calc(100% - var(--lateral-menu-width));
    height: 6rem;
    background-color: rgba(236,236,236,1);
    z-index: 10000;
    -webkit-box-shadow: 0px -4px 18px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 0px -4px 23px rgba(50, 50, 50, 0.25);
    box-shadow: 0px -4px 18px rgba(100, 100, 100, 0.25);
    display: none;
    padding: 0.8rem 2rem 0.5rem 2rem;
}

/* .MultiSelectionPanel > div > button {
        float: right;
        width: auto;
        margin-right: 0.5rem;
    }*/


/******* boutons *******/
.btn-export-excel {
    background-color: #00a1bd;
    color: white;
    display: block;
    height: 50px;
    border-color: transparent;
    border-radius: 5px;
    margin-bottom: 2px;
    text-transform: initial;
    text-align: center;
}

.btn-export-ftp-excel {
    background-color: #00a1bd;
    color: white;
    display: block;
    height: 50px;
    border-color: transparent;
    border-radius: 5px;
    margin-bottom: 2px;
    text-transform: initial;
    text-align: left;
}



.libelleInput {
    width: 100% !important;
    max-width: none !important
}

.InputFiltre::after {
    display: none !important;
}

.hidden {
    display: none !important;
}


/************* evaluation style ***************/
.EvalQuestionTextInput {
    width: 100%;
}

    .EvalQuestionTextInput:focus {
        width: 100%;
        outline: none;
    }

.EvalQuestionEvaluationDiv {
    background-color: rgba(236, 236, 236, 1);
    background-clip: content-box;
    border-radius: 5px;
    margin-right: 5px;
    height: 25px;
    display: flex;
    align-items: center;
}

.EvalQuestionEvaluationDivChecked {
    background-color: #072591;
    background-clip: content-box;
    border-radius: 5px;
    margin-right: 5px;
    height: 25px;
    display: flex;
    align-items: center;
}

    .EvalQuestionEvaluationDivChecked > label {
        color: white;
    }

.EvalQuestionListeMenuDiv {
    position: relative;
    /*transform: scale(1.3);
    left: 10.5%;
    width: 77.5%;
    z-index: 1;*/
}

.EvalQuestionBackground {
    padding: 2px 2px 2px 6px;
    margin: 0px 5px;
    position: relative;
    left: 10%;
    width: 77.5%;
    transform: scale(1.3);
}

.QuestionNomPositionRow {
    position: relative;
    left: -16px;
    width: 102.5%;
    height: 10px
}

.DisplayReponseEvaluation {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    transform: scale(1.3);
    position: relative;
    left: 3rem
}


.evaluationBody label,
.accordion-body label {
    margin-left: 12px;
    display: block;
    text-align: left;
}

    .evaluationBody label:not([for]),
    .evaluationBody label.form-check-label,
    .evaluationBody .form-check label.form-check-label,
    .accordion-body label:not([for]),
    .accordion-body label.form-check-label,
    .accordion-body .form-check label.form-check-label {
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--color-basics-grey-dark);
    }

    .evaluationBody label[for],
    .accordion-body label[for] {
        font-weight: 400;
    }

    .evaluationBody label.form-check-label,
    .accordion-body label.form-check-label {
        margin-left: 2.4rem;
    }

.evaluationBody .form-check .form-check-input,
.accordion-body .form-check .form-check-input {
    margin-left: 0;
}

.evaluationBody select,
.evaluationBody textarea,
.evaluationBody input:not(.form-check-input),
.accordion-body select,
.accordion-body textarea,
.accordion-body input:not(.form-check-input),
.inputFormStyle {
    display: block;
    height: 2.4rem;
    font-size: var(--current-font-size);
    text-align: left;
    color: var(--color-text-primary);
    max-width: 95%;
}

    .evaluationBody select:not(.form-control[disabled]),
    .evaluationBody textarea:not(.form-control[disabled]),
    .evaluationBody input:not(.form-check-input):not(.form-control[disabled]),
    .accordion-body select:not(.form-control[disabled]),
    .accordion-body select:not(.form-control[disabled]),
    .accordion-body input:not(.form-check-input):not(.form-control[disabled]),
    .inputFormStyle {
        background: var(--color-basics-light);
    }

.evaluationBody .input-group-text,
.accordion-body .input-group-text {
    height: 2.4rem;
}

.evaluationBody textarea.form-control,
.accordion-body textarea.form-control {
    height: auto;
}


.evaluationHeader {
    background-color: transparent;
    font-weight: 600;
    color: var(--color-brand-primary);
    text-align: center;
    font-size: 2rem;
}

.EvalQuestionOption {
    cursor: pointer !important;
}

.EvalQuestionImpair {
    background-color: var(--color-basics-grey-light);
    background-clip: content-box;
}

.evaluationHeader label.EvalQuestionnaireLibelle {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
}

.evaluationHeader label.EvalTypeActionLibelle {
    text-align: center;
    font-size: large;
    font-weight: normal;
}

.evaluationHeader label.EvalLieuDateParticipantLibelle {
    text-align: center;
    font-style: italic;
    font-weight: normal;
    font-size: var(--current-font-size);
    color: var(--color-basics-grey-dark);
}

.evaluationBody span.EvalObligatoire {
    color: red;
}

.evaluationBody div.form-radio-button,
.evaluationBody div.EvalQuestionRadioDiv,
.evaluationBody div.EvalQuestionCheckboxDiv,
.evaluationBody div.evalQuestionTextboxDiv,
.evaluationBody div.EvalQuestionListeMenuDiv {
    margin-left: 3rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    font-size: var(--current-font-size);
}

.evaluationBody .DisplayReponseEvaluation {
    margin-left: 2.4rem;
}

.evaluationBody input.EvalQuestionEvaluationRadioInput {
    display: none
}

.evaluationBody label.EvalQuestionRadioLabel {
    padding-right: 1rem;
    padding-left: 1rem;
    font-weight: normal;
    text-align: center;
    margin-bottom: 0;
    margin-left: 0;
}

.evaluationBody div.QuestionSliders {
    position: relative;
    display: flex;
    left: 1rem;
    width: 129%
}

.evaluationBody label.LabelQuestion {
    color: var(--color-text-primary);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 4rem;
    background-color: var(--color-basics-grey-light);
    margin-bottom: 1rem;
    margin-top: 2rem;
    padding-left: 0.6rem;
}

span.multiselect-native-select{
    width: 95%;
}

/*******************  *********************/
.FakeInputLabel {
    border-style: solid;
    border-width: 1px;
    border-color: #777777;
    border-radius: 2px;
    background-color: #efefef;
    font-weight: normal;
    font-size: 14px;
    margin-left: 12px;
    margin-bottom: 0px;
    width: 120px;
    height: 22px;
    text-align: center;
    color: black;
}

    .FakeInputLabel:hover {
        border-color: #4f4f4f;
        background-color: #e5e5e5;
    }

.FakeInputDiv {
    width: 280px;
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
    height: 34px;
    display: flex;
    align-items: center;
}

.FakeInputNomFichier {
    font-weight: normal;
    font-size: 14px;
    margin-left: 5px;
    margin-bottom: 0px;
    color: #555555
}



.PositionnementIcone {
    cursor: pointer
}

.sph-ps-0 {
    padding-left: 0px;
}


.sph-users-operator {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    white-space: nowrap;
}



/******************* accordion ********************/

.accordion-item div.collapse[aria-labelledby] {
    padding: 1.5rem;
}

.accordion-item .accordion-header button i.cheveronUpDown:after {
    content: "\25B2"; /* "▴"; */
    /*zoom: 150%;*/
}

.accordion-item .accordion-header button.collapsed i.cheveronUpDown:after {
    content: "\25BC"; /* "▾"; */
    /*zoom: 150%;*/
}

.accordion-item .accordion-header button[data-bs-toggle="collapse"] {
    color: var(--color-brand-primary) !important;
    font-size: 16px !important;
    border-width: 0px;
    background-color: rgba(0, 0, 0, 0);
}

    .accordion-item .accordion-header button[data-bs-toggle="collapse"]:hover {
        text-decoration: underline;
    }