/* les variables appelées dans ce fichier proviennent des fichiers 'nomEnvironnement'.css (prive.css, eksae.css...
    Si les variables sont communes à tous les environnements, elles sont définies dans ce fichier (grafiQ.css) 
    dans :root
*/

/*------------------------- Globals -----------------------------------------------------------------*/
:root {

    /*variables pour statuts des rapports */
    --emptyProgressLineBackground: rgb(182, 182, 182);
    --toCompleteProgressLineBackground: rgb(255, 69, 36);
    --toCommentProgressLineBackground: rgb(255, 251, 33);
    --toPlanProgressLineBackground: rgb(104, 255, 74);
    --stoppedProgressLineBackground: red;

    /* variables communes aux environnement */
    --black: #000;
    --white: #fff;
    --text: #585b5f;
    --green: #7fbf7f;
    --red: #ff7f7f;
    --lightYellow: #ffed99;
    --warningColor: #ffd78c;
    --sucessColor: #d4edda;
    --dangerColor: #f8d7da;
    --dangerText: #73293a;
    --dangerBackgroundColor: #EA585B;


    --tableBackgroundColor: #f9f9f9;
    --tableColor: #212529;
    --tableTdBackgroundColor: #343a40;
    --tableTdColor: #ffffff;
    --tableThBackgroundColor: #ffffff;
    --tableThColor: #212529;
    --tableBackgroundHoverColor: rgba(251, 247, 247, 0.055);
    --dt-row-selected: rgb(182, 182, 182) !important;
    --btn-diffuse: #009800;
    --btn-non-diffuse: #c82333;

    --tcdBackgroundColor: #f9f9f9;
    --tcdColor: #212529;
    --tcdTdBackgroundColor: #343a40;
    --tcdTdColor: #ffffff;
    --tcdThBackgroundColor: #ffffff;
    --tcdThColor: #212529;

}

body {
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/*p {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 0;
}*/

a:hover {
    text-decoration: none !important;
}

select {
    max-width: 100%;
}

footer {
    position: absolute;
    width: 100%;
}

/*! BOOTSTRAP (custom class) */

/** Mime le CSS d'un input disabled avec la class form-control de bootstrap */
.disabled-div-form-control {
    align-content: center;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    color: #495057;
    cursor: not-allowed;
    height: calc(1.5em + .75rem + 2px);
    opacity: 1;
    pointer-events: none;
    width: 100%;
}

.qms-list-group-item {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Non présent en Bootstrap 5*/
textarea.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.badge-secondary-qms {
    color: #fff;
    background-color: #6c757d;
}

/*! END BOOTSTRAP (custom class) */

.ui-widget.ui-widget-content {
    z-index: 9999;
}


.containerlogoFooter {
    position: fixed;
    right: 0px;
    bottom: 0px;
    margin: 0px 5px 10px 0px;
    width: 25%;
    max-width: 295px;
}

.logoFooter {
    max-width: 100%;
    max-height: 100%;
}

@media screen and (max-width: 767.98px) {
    .logoFooter {
        max-width: 100%;
        max-height: 100%;
        opacity: 0.4;
    }
}

#fm-pivot-view .fm-grid-layout.fm-flat-view .fm-header {
    background-color: var(--tcdThBackgroundColor) !important; /* Couleur de fond des en-têtes */
    color: var(--tcdThColor) !important; /* Couleur du texte */
}

#fm-pivot-view .fm-data-sheet .fm-row .fm-cell[data-n="even"]:not(.fm-empty):not(.fm-grand-total-r) {
    background-color: var(--tcdTdBackgroundColor) !important;
    color: var(--tcdTdColor) !important;
  }

#fm-pivot-view .fm-data-sheet .fm-row .fm-cell[data-n="odd"]:not(.fm-empty):not(.fm-grand-total-r) {
    background-color: var(--tcdBackgroundColor) !important;
    color: var(--tcdColor) !important;
  }


.logoGabarit{
    width: 5%;
    height: auto;
}


/*------ Class standard de mise en forme margin, padding... -------*/
.padb-50 {
    padding-bottom: 50px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #000 !important;
    text-decoration: none !important;
    background-color: #f8f9fa !important;
}

/* flèches de trie datatables mettre un écart 
entre le triangle orienté vers le haut et celui orienté vers le bas 
*/
table.dataTable th.sorting::before,
table.dataTable th.sorting::after {
    padding: 0.5px;
}

a,
button,
#showhideCommentairesTdB,
.nav-item {
    cursor: pointer;
}

.obligatoire {
    color: var(--dangerBackgroundColor)
}

.form-qms {
    border: 1px solid var(--secondaryTransparencyColor);
    padding: 20px;
    border-radius: 0 0 5px 5px;
}

i.fav {
    color: var(--lightYellow);
}

i.fav.hide,
div.fav-message.hide {
    display: none;
}

.sub-h2 {
    font-size: 1.5rem;
}

/*---------Background ----------------*/

.bg-primary-qms {
    background-color: var(--background) !important;
    border-color: var(--white);
    color: var(--white);
}


.bg-secondary-qms {
    background-color: var(--secondaryColor);
    border-color: var(--secondaryColor);
    color: var(--white);
}

.bg-info-qms {
    background-color: var(--infoBackgroundColor) !important;
    border-color: var(--infoBackgroundColor) !important;
    color: var(--white) !important;
}

.bg-empty-qms {
    background-color: var(--emptyProgressLineBackground) !important;
    border-color: var(--emptyProgressLineBackground) !important;
    color: var(--white) !important;
}

.bg-valid-qms {
    background-color: var(--successBackgroundColor) !important;
    border-color: var(--white);
    color: var(--white);
}

.bg-clear-valid-qms {
    background-color: var(--backgroundHover) !important;
    border-color: var(--backgroundHover);
}

.bg-form {
    background-color: var(--formBackgroundColor);
    border-color: var(--formBackgroundColor);
}

.dt-button.qms-dt-editor-button {
    background-color: var(--formBackgroundColor) !important;
    background: var(--formBackgroundColor) !important;
    border-color: var(--formBackgroundColor) !important;
    margin: 15px 30px !important;
}

.bg-warning-qms {
    background-color: var(--warningColor) !important;
    border-color: var(--warningColor);
}

.bg-danger-qms {
    background-color: var(--dangerColor) !important;
    border-color: var(--dangerColor);
    color: var(--dangerText);
}

.bg-success-green-qms {
    background-color: var(--sucessColor) !important;
    border-color: var(--sucessColor);
}

/*---------Text ----------------*/

.text-qms {
    color: var(--secondaryColor) !important;
}

.text-light-qms {
    color: var(--primaryColor) !important;
}

a.text-qms:focus,
a.text-qms:hover {
    color: var(--text) !important;
}

b.text-qms:hover {
    color: var(--text) !important;
    border: none !important;
    background: transparent !important;
    font-weight: bolder !important;
}

/*---------Boutons ----------------*/

.btn-success-qms {
    color: #fff !important;
    background-color: var(--qmsGreen, var(--successBackgroundColor)) !important;
    border-color: var(--qmsGreen, var(--successBackgroundColor)) !important;
}

.btnCancel,
button.bg-danger,
button.bg-form:not(.login-box button),
button.qms-dt-editor-button {
    height: 50px;
    padding: 10px 20px;
    border: none !important;
    color: var(--text) !important;
    border-radius: 40px !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    box-shadow: 0 0 22px rgb(0 0 0 / 7%) !important;
    -webkit-transition: all 0.3s ease 0s !important;
    transition: all 0.3s ease 0s !important;
}

.btnCancel {
    background: var(--secondaryTransparencyColor);
}

.btn-diffuse {
    color: #fff !important;
    background-color: var(--btn-diffuse) !important;
    border-color: var(--btn-diffuse) !important;
}

.btn-non-diffuse {
    color: #fff !important;
    background-color: var(--btn-non-diffuse) !important;
    border-color: var(--btn-non-diffuse) !important;
}

/* hover des boutons bg-form */
button.bg-form:hover,
button.qms-dt-editor-button:hover {
    background-color: var(--backgroundHover) !important;
    color: var(--white) !important;
}

/* pour les boutons retour dans les formulaires dans balise a */
a.btnCancel {
    padding: 17px 20px !important;
}

a.btnCancel:hover {
    text-decoration: none !important;
}

.btnCancel:hover {
    background: var(--text);
    color: #fff !important;
}

.btnCancel i,
button.bg-form i {
    margin: 10px;
}

button.buttons-html5 {
    background: none;
    background-color: initial !important;
    background-image: none !important;
    border: none !important;
    font-size: 30px !important;
    color: var(--secondaryColor) !important;
    padding: 10px !important;
    margin: 0 !important;
}

.arrowCarouselIndic {
    width: 50px;
}

/*---------Badges ----------------*/

/*------ checkbox + animation ------*/

.s-switch input[type=checkbox] {
    display: none;
}

.s-switch label {
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    background: var(--secondaryTransparencyColor);
    display: block;
    border-radius: 100px;
    position: relative;
    margin: 0;
}

.s-switch label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: var(--white);
    border-radius: 90px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.s-switch input:checked+label {
    background: var(--backgroundHover);
}

.s-switch input:checked+label.disabled {
    background: #e9ecef;
}

.s-switch input:checked+label:after {
    left: calc(100% - 5px);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

/*------END checkbox + animation ------*/

/*------popover (card indicateurs) ------*/
/* firefox bibliothèque indicateurs */
@-moz-document url-prefix() {
    .popover {
        max-width: 80% !important;
        margin-top: 10%;
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
}

/* chrome et les autres */
.popover {
    max-width: 65% !important;
    width: auto;
}

.popover-body a:hover {
    background-color: var(--primaryColor);
}

.indicActiv {
    overflow-x: auto;
    box-shadow: 0px 1px 5px grey;
}

.modal-lg-profil {
    max-width: 50% !important;
}

/* Suppression fleche input affectation 'poste' */
input::-webkit-calendar-picker-indicator {
    display: none !important;
}

.scrollable-menu {
    border: 3px solid var(--secondaryColor);
    max-height: 30em;
    width: auto;
    overflow-y: auto;
}

.product-container i.fa-times-circle {
    z-index: 1;
    color: var(--dangerBackgroundColor);
}

/*------------------------- end globals ----------------------------------------------------*/

/*------------------------- Core Css --------------------------------------------------------*/
.page-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding-left: 60px;
    -webkit-transition: padding-left 0.3s ease 0s;
    transition: padding-left 0.3s ease 0s;
}

/* chargement lors de la navigation sur le site */
#loading,
#loadingVue {
    width: 100%;
    height: 100%;
    padding-top: 200px;
    top: 0;
    left: 0;
    position: fixed;
    display: table-cell;
    opacity: 0.7;
    color: var(--secondaryColor);
    background-color: var(--white);
    z-index: 99;
    text-align: center;
    vertical-align: middle;
}

/* span 'voir' dans commentaire tdb par exemple */
.readMore {
    cursor: pointer;
}

/* classes pour limiter taille du texte dans commentaite */
.limit-text-content-hide {
    display: inline-block;
    width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-content> :first-child {
    display: inline-block;
    width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.limit-text-content> :first-child {
    width: 20em;
}

/* end classes pour limiter taille du texte dans commentaite */
/*------------------------- END Core Css -----------------------------------------------------------*/

/*-------------------- Sidebar Menu ----------------------------------------------------------------*/

.sbar_collapsed.page-container {
    padding-left: 0;
}

.sbar_collapsed .sidebar-menu {
    left: -200px;
}

.sidebar-menu {
    max-width: 136px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    height: 100vh;
    overflow: hidden;
    background-color: var(--backgroundNavBars, var(--background));
    box-shadow: 2px 0 32px rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu {
    height: calc(100% - 100px);
    overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.menu-inner {
    overflow-y: scroll;
    height: 100%;
}

.sidebar-header {
    position: relative;
    padding: 15px 20px;
    background-color: var(--backgroundNavBars, var(--background));
}

.btn-menu a {
    border: none;
}

.logo a {
    display: inline-block;
    max-width: 120px;
}

#falling-man {
    width: 30px !important;
    height: 26px !important;
}

.metismenu>li>a>span,
#iconeQ-in-header {
    display: none;
}

#sideBar>ul>li>a>span {
    justify-content: center;
    color: var(--primaryColor) !important;
}

#sideBar {
    justify-content: center;
    padding-top: 15px;
}

#sideBar li {
    margin: auto;
    text-align: center;
}

#sideBar ul {
    margin-left: 0px !important;
}

#sideBar a {
    /* Center-align text */
    padding-top: 15px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
}

.metismenu li a:hover>span.menu-main-item {
    display: inline-block;
    font-size: x-small;
    color: var(--primaryColor);
    background-color: var(--secondaryBackgroundHover);
}

.metismenu li a:hover>span {
    display: inline-block;
    margin: auto;
    font-size: x-small;
}

.collapsed-item a:hover>span {
    font-weight: bold;
}

.metismenu li:hover {
    width: 136px;
    margin: auto;
    background-color: var(--secondaryBackgroundHover);
    max-width: initial;
    min-width: initial;
}

.metismenu li a {
    display: block;
    position: relative;
    color: var(--primaryColor);
    font-size: x-small;
    letter-spacing: 0;
    font-weight: 400;
}

.metismenu li a i {
    font-size: 15px;
    color: var(--primaryColor);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.metismenu .menuDropdownSide:after {
    position: absolute;
    content: '\f107';
    font-family: fontawesome;
    right: 15px;
    top: 12px;
    color: var(--primaryColor);
    font-size: 20px;
}

.iconeQ:not(#iconeQ-in-header) {
    width: var(--iconeSidebarSize, 1.5em);
    max-width: 5em;
    margin: auto;
}

#iconeQ-in-header img {
    width: var(--iconeInHeaderSize, 40px);
}

#iconeQ-not-connected {
    width: var(--iconeNotConnectedSize, 15em) !important;
}

@media screen and (max-width: 767.98px) {
    #iconeQ-not-connected {
        width: var(--iconeNotConnectedSize, 7em) !important;
    }
}

/*Navbar Bibliothèque TdB*/
.nav-item.nav-link.active {
    background-color: #f8f9fa !important;
}

/*FIN Navbar Bibliothèque TdB*/

.nav-item {
    cursor: pointer;
}

.navbar-toggle {
    /* (60px - button height 34px) / 2 = 30px */
    margin-top: 13px;
    padding: 9px 10px !important;
}

.sbar_collapsed.nav-btn {
    margin: 0px 0 0 30px !important;
    cursor: pointer;
}

.sbar_collapsed .nav-btn span {
    transform: none !important;
    opacity: 1 !important;
}

.navbar-qms {
    background-color: var(--backgroundNavBars, var(--background)) !important;
    border-color: var(--white);
}

/*-------------- END Sidebar Menu -----------------------------------------------------------------*/

/*------------------------- LOGIN Page ------------------------------------------------------------*/

.login-box,
.login-box a {
    color: var(--text);
}

.login-box .submit-btn-area button {
    width: 100%;
}

.login-box label,
.login-box button {
    font-size: 30px;
}

@media (max-width: 575.98px) {

    .login-box label,
    .login-box button {
        font-size: 22px;
    }
}

@media (max-width: 375.98px) {
    .login-box button {
        font-size: 16px;
        word-wrap: break-word;
    }

    .login-box label {
        font-size: 18px;
    }
}

.login-box input:not([type='checkbox']) {
    border: none;
    border-bottom: var(--text) dotted;
    width: 100%;
    background: none;
}

.login-box button {
    border: none;
    background: var(--text);
    color: var(--white);
}

/*---supp fond bleu des input--- */

.login-form-body {
    width: fit-content;
    margin: 0 auto;
    background: url(../image/backlogin.png) center no-repeat
}

.login-area {
    background: url(../image/visuel_800.svg) 93.5% 65.5% no-repeat;
    background-size: 23.65%;
}

@media screen and (max-width: 767.98px) {
    .login-area {
        background: url(../image/visuel_800.svg) 93.5% 65.5% no-repeat;
        background-size: 23.65%;
        background-image: none;
    }
}

.login-area+.offset-area {
    display: none;
}


@media (max-width: 575.98px) {
    .loginPageTitle {
        font-size: 2rem;
    }
}

/*-------------- END Login Page ------------------------------------------------------------------*/

/*-------------------- Horizontal Menu -----------------------------------------------------------*/

#navbar-inverse #choixlangmenu {
    /* right: 30px;
    position: absolute; */
}

#navbar-inverse>ul:nth-child(2) {
    position: absolute;
    right: 10px;
}

.nav-btn {
    margin: 0px 0 0 30px;
    cursor: pointer;
}

.nav-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--primaryColor);
    margin: 4px 0;
    border-radius: 15px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    box-shadow: 0 0 0 4px rgba(99, 96, 96, 0.03);
}

.nav-btn span:nth-child(2) {
    opacity: 0;
}

.nav-btn span:first-child {
    -webkit-transform: rotate(45deg)translate(5px, 5px);
    transform: rotate(45deg)translate(5px, 5px);
}

.nav-btn span:last-child {
    -webkit-transform: rotate(-45deg)translate(3px, -3px);
    transform: rotate(-45deg)translate(3px, -3px);
}

.search-box form {
    position: relative;
}

.search-box input {
    width: 10em;
    height: 40px;
    border-radius: 33px;
    border: none;
    padding-left: 20px;
    padding-right: 40px;
    letter-spacing: 0;
    background: var(--white);
}

.search-box form i {
    position: absolute;
    right: 21px;
    top: 14px;
    font-size: 14px;
    color: var(--secondaryColor);
}

#stick-tbord-menu {
    position: absolute;
    top: 200px;
    right: 0px;
    z-index: 1800;
}

#stick-tbord-menu ul .list-group-item {
    color: var(--secondaryColor);
}

.menu-title {
    display: block;
    padding: 18px 30px;
    font-size: 15px;
}

.menu-title a {
    font-size: 13px;
    text-decoration: underline;
    color: var(--primaryColor);
}

/* ---------------notification-area--------------- */
#notification {
    position: relative;
}

#notification .notifnum {
    position: absolute !important;
    right: -6px !important;
    top: -3px !important;
}

#notifications-box {
    width: max-content;
    cursor: auto;
}



#notifications-box p {
    padding: 0rem 1.5rem;
    font-weight: 400;
    color: #212529;
    margin: 0;
}

#notifications-box .nofity-title {
    color: #575F6A;
    padding: 1rem 0rem 0rem 1.5rem;
    font-weight: bolder;
}

.navbar li,
#settings li {
    list-style-type: none;
}

li{
    list-style-type: none;
}

/*--------------- filtres------------------------- */
.fr-box .fr-wrapper .fr-view ul,
.descriptionModalIndicateur.show .modal-content ul {
    list-style-type: initial !important;
}

.collapse-filtre {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 100;
    top: 77px;
    box-shadow: 2px 0px 16px 0px #40473b;
    border-radius: 0px 0px 7px 7px;
    padding: 50px;
    width: 75%;
}

.collapse-filtre h1 {
    font-size: 20px;
    color: #b6bf0e;
    margin: 20px 0 0 0;
    font-weight: bold;
}

div[class^='collapse-block']:not([id-parent='0']) {
    display: none;
}

.container-filter {
    flex-wrap: wrap !important;
}

.container-filter>ul {
    margin-left: 0 !important;
    display: flex;
    flex-wrap: inherit;
}

.container-filter>ul>li {
    margin-right: 20px;
    margin-bottom: 10px;
}

.container-filter .dropdown-item {
    white-space: normal;
}

.container-filter .dropdown-menu {
    min-width: 500px;
}

/*-----------Paramètres : offset menu ----------------------------------*/

.offset-area {
    position: fixed;
    right: -345px;
    top: 0;
    background: var(--white);
    color: var(--secondaryColor);
    z-index: 998;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
    -webkit-transition: right 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
    transition: right 0.3s cubic-bezier(0.62, -0.01, 0.2, 0.83) 0s;
}

.offset-area hr {
    margin: 20px;
    border-top: 3px solid var(--secondaryColor);
}

.show_hide.offset-area {
    right: 0;
}

.offset-close {
    font-size: 19px;
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: var(--secondaryColor);
}

.offset-close:hover {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.offset-menu-tab {
    padding-top: 20px;
    text-align: center !important;
    color: var(--text);
}

.offset-menu-tab li {
    display: inline-block;
    width: 50%;
    color: var(--text);
}

/*-------------- END horizontal menu -----------------------------------*/

/*---------------- Drill down ------------------------------------------*/

.drill-down-parent {
    position: relative;
}

.drill-down {
    display: none;
    border: 2px solid var(--secondaryColor);
    padding: 20px;
    height: 50vh;
    overflow-y: scroll;
}

#mytable-drill th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
}

#mytable-drill td,
#mytable-drill th {
    border: 1px solid var(--primaryColor);
    padding: 8px;
}

#mytable-drill tr:nth-child(2n) {
    background-color: var(--secondaryTransparencyColor);
}

.drill-down-alert {
    display: none;
    font-size: 22px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    cursor: pointer;
    z-index: 10;
}

.drill-down-alert-hide {
    display: none;
    font-size: 22px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    margin: 0 auto;
    width: 100%;
    cursor: pointer;
}

.drill-down-alert p,
.drill-down-alert-hide p {
    margin: 0;
}

/*-------------------- End drill down ------------------- */

/*-------------------- icone menu TCD Flexmonster ------------------- */

#fm-tab-newtab #fm-tab-export .fm-shadow-container {
    top: 30px !important;
}

/*-------------------- End TCD ------------------- */

/*-------------------Rapports----------------------------- */

.lastCalculRapport {
    font-size: 1.3rem;
}

/* Arborescence pour afficher 
le style des titres au niveau de la liste des sections du rapport */

.rapport-section-title__scha {
    margin-left: 2em;
}

.rapport-section-title__sscha {
    margin-left: 4em;
}

.rapport-section-title__sscha {
    margin-left: 6em;
}

/* ----------- Tableau de numérotation des rapports ----------- */
.arrayNumerotation thead {
    font-size: 18px;
    background-color: var(--secondaryColor) !important;
    color: #fff;
    text-align: center;
}

.arrayNumerotation input {
    margin: 10px;
}

.arrayNumerotation td {
    padding-left: 0%;
}

.arrayNumerotation th {
    width: 20%;
    text-align: center;
}

table.arrayNumerotation {
    width: 100%;
    text-align: center;
}

/*-------------------Fact tables (faits, remuneration, primes, autres)----------------------------- */
.facts-table td.not-editable,  .index-table td.not-editable {
    background-color: #d2d1d1 !important;
}

.hidden-select-fact-field {
    display: none;
}

.facts-table th, .index-table th {
    white-space: nowrap;
}

#facts-table tbody tr, #index-table tbody tr {
    cursor : pointer;
}
/*La barre de progression en fonction de status rapport et entretien */

.progress-bar {
    background: rgb(182, 182, 182) !important;
}

.progress-point {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
    background: rgb(182, 182, 182);
}

.progress-line {
    height: 5px;
    width: 25px;
    background: var(--emptyProgressLineBackground);
}

/**** menu rapport dans edition en ligne ****/
.progress-point-menu-rapport {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    display: inline-block;
    background: rgb(182, 182, 182);
}

.progress-line-menu-rapport {
    height: 3px;
    width: 15px;
    background: var(--emptyProgressLineBackground);
}

td .a-completer,
td .a-commenter,
td .commente,
td .valide,
td .a-planifier,
td .planifie,
td .realise,
td .not-selected {
    justify-content: center;
}

.a-completer span:nth-child(-n+1) {
    background: var(--toCompleteProgressLineBackground) !important;
}

.a-commenter span:nth-last-child(-n+3) {
    background: var(--toCommentProgressLineBackground) !important;
}

.a-commenter span:nth-child(-n+2),
.commente span:nth-child(-n+3),
.valide span:nth-last-child(-n+6),
.a-planifier span:nth-child(-n+1),
.planifie span:nth-child(-n+3),
.realise span:nth-child(-n+6) {
    background: var(--toPlanProgressLineBackground) !important;
}

.abandonne span:nth-last-child(-n+6),
.refus-salarie span:nth-last-child(-n+6) {
    background: var(--stoppedProgressLineBackground) !important;
}

.not-selected span:nth-last-child(-n+6),
.a-commenter span:nth-last-child(-n+2) {
    background: var(--emptyProgressLineBackground) !important;
}


/*** Liste d'indicateurs à gauche (indicateurCategorie) ***/
.indicInList {
    font-size: 12px;
}

.indicInList:hover {
    transform: scale(1.2);
}

/* bug tooltip indicateurs (info bulle) si texte trop long clignotte */

.tooltip {
    pointer-events: none;
}

/* end bug tooltip indicateurs (info bulle) */

/* Container de l'organigramme Postes et UO */
div#organizationalTree {
    min-width: 300px;
    max-height: 1200px;
    overflow: scroll !important;
    align-content: center;
}

#organizationalTree>.highcharts-container {
    margin: auto !important;
}

/* Flèche du datatable des categories et sous-catégories */
.qms-child-table {
    margin: 1rem 2rem 3rem 2rem !important;
    border: 1px solid darkgray;
    max-width: 95% !important;
}

td.details-control {
    position: absolute;
    cursor: pointer;
    position: relative;
    color: var(--secondaryColor);
    font-family: "Font Awesome 5 Free";
    padding: 10px;
    font-size: 20px;
    font-weight: 900;
}

td.details-control:before {
    content: "\f138";
    text-align: center;
    display: block;
}

tr.shown td.details-control:before {
    content: '\f13a';
}

/* tooltip liste siège lesion*/
.listLesions {
    visibility: hidden;
    width: fit-content;
    background-color: var(--infoBackgroundColor) !important;
    border-color: var(--infoBackgroundColor) !important;
    color: var(--primaryColor) !important;
    padding: 20px;
    border-radius: 5px;
}

.listLesions>ul {
    list-style-type: disc !important;
    column-count: 3;
}

/* .showListLesion {
    cursor: pointer;
} */
.showListLesion:hover .listLesions {
    visibility: visible;
    bottom: 0;
}

/* rapports : espacer les titres des indicateurs + mettre les boutons d'export à gauche pour faciliter la lecture */
.dataTables_wrapper.no-footer>div.pull-right>div.dt-buttons>button.buttons-html5 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.dataTables_wrapper.no-footer>div.pull-right {
    float: left;
}

/* dans édition en ligne des rapports dans modification d'une section, trick pour éviter que le scroll 
se désactive, lors de la refonte il faudrait éviter d'avoir une modal dans une modal... */

.modal-update-section,
.modal-create-section {
    overflow: auto !important;
}

/* end RAPPORTS */

/* scrollbar dans les menu de recherche indic (dans tdb, rapports et navbar horizontale) */
.ui-menu {
    width: 380px;
    height: 450px;
    overflow-y: scroll;
    overflow-x: hidden !important;

}

/*MAD ORANO*/

.option-ghost {
    display: none;
}

.datatable-fixed-header {
    left: auto !important;
}

/* Couleurs pour indicateurs tableaux lignes impaires*/
.tableTb tr:nth-child(odd),
.tableTb tr:nth-child(odd) td,
.tableRed tr:nth-child(odd),
.tableRed tr:nth-child(odd) td {
    background-color: var(--tableBackgroundColor);
    color: var(--tableColor);
}

/* Couleurs pour indicateurs tableaux lignes paires */
.tableTb tr:nth-child(even),
.tableTb tr:nth-child(even) td,
.tableRed tr:nth-child(even),
.tableRed tr:nth-child(even) td {
    background-color: var(--tableTdBackgroundColor);
    color: var(--tableTdColor);

}

/* Couleurs pour indicateurs tableaux */
.highlighted td {
    background-color: var(--tableBackgroundHoverColor) !important;
}

/* Couleurs pour indicateurs tableaux en tête*/
.tableTb th,
.tableRed th {
    background-color: var(--tableThBackgroundColor);
    color: var(--tableThColor);
    text-align: right;

}

.tableTb td,
.tableRed td {
    text-align: right;

}

/**Le not permet d'éviter ce comportement sur les page avec onglet (ex : modification de l'index)*/
:not(#myTab) > button:disabled {
    cursor: not-allowed;
    pointer-events: all !important;
}


/* Ajustements formulaires */
.input-group-addon {
    background-color: rgba(0, 0, 0, .05);
    width: 23px;
    border-radius: 3px 0 0 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, .125);
    border-left: 1px solid rgba(0, 0, 0, .125);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

#indicTitleModal {
    font-style: italic;
}

/* DataTable des tableaux de bord */
#dashboards-table .checkbox-button {
    border: none !important;
    display: block;
    margin: auto;
}

#dashboards-table [class*="check"], #indicTableAdminTheme [class*="check"] {
    display: block;
    border-radius: 3px;
    position: relative;
    margin: auto;
}

.status-wrapper.global-status-wrapper {
    justify-content: center;
    align-items: center;
}

.status-wrapper:not(.global-status-wrapper)>div {
    margin-right: 0;
}

.status-wrapper.global-status-wrapper .qms-box {
    margin: unset;
}

.status-wrapper {
    display: flex;
    justify-content: space-evenly;
    padding: 0 1rem;
}

.status-wrapper>div,
.status-wrapper>span {
    margin-right: 1rem;
    display: block;
}


.interactiveModeBtn {
    font-size: .8rem;
    margin-top: 5px;
    transform: rotate(0);
    transform-origin: 50% 41%;
    transition: .3s;
    color: var(--backgroundHover);
}

.interactiveModeBtn.modeEnabled,
.interactiveModeBtn:not(.modeEnabled):hover {
    transform: rotate(-180deg);
    animation-name: toActiveColor;
    animation-duration: .3s;
    animation-fill-mode: forwards;
}

@keyframes toActiveColor {
    to {
        color: #1edc3e;
    }
}

.qms-box {
    display: block;
    border-radius: 3px;
    position: relative;
    margin: auto 0;
}

.qms-box:not(:checked) {
    width: 1.3rem;
    height: 1.3rem;
}

.qms-box:checked {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: var(--green);
}

#dashboards-table .check-disabled {
    width: calc(1.3rem - 1px);
    height: calc(1.3rem - 1px);
    background-color: #e9ecef;
    border: 1px solid lightgray;
}

#dashboards-table .check-filled, #indicTableAdminTheme .check-filled {
    width: 1.3rem;
    height: 1.3rem;
    background-color: var(--green);
}

#dashboards-table .check-unfilled, #indicTableAdminTheme .check-unfilled {
    width: calc(1.3rem - 1px);
    height: calc(1.3rem - 1px);
    background-color: #7fbf7f41;
    border: 1px solid #7fbf7f8f;
    cursor: pointer;
}

#dashboards-table .check-filled:after, #indicTableAdminTheme .check-filled:after,
.check-unfilled:hover:after {
    content: '\2713';
    display: block;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Fin dataTable des tableaux de bord */
/* Toast messages */

.qms-toast {
    z-index: 2147483648;
    position: fixed;
    bottom: 4vh;
    right: 3vh;
    min-height: 2rem;
    min-width: 4rem;
    padding: 12px 36px 12px 24px;
    background-color: lightgray;
    border: 1px solid gray;
    border-radius: 3px;
    transform: translateX(100vh);
    animation-name: slide-rtl;
    animation-duration: 300ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.qms-toast.qms-toast-success {
    background-color: #d3f1d3;
    border: 1px solid #7fbf7f8f;
    color: #1b291b;
}

.qms-toast.qms-toast-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb8f;
    color: #721c24;
}

.qms-toast.qms-toast-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.qms-toast.qms-toast-warning {
    background-color: #f8f3d6;
    border: 1px solid #e7e3ce;
    color: #93723e;
}

.qms-toast .qms-toast-close {
    height: 5px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 12px;
    right: 12px;
    cursor: pointer;
}

#main-magnifyer {
    cursor: pointer;
}

@-webkit-keyframes slide-rtl {
    100% {
        transform: translateX(0px)
    }
}

@keyframes slide-rtl {
    100% {
        transform: translateX(0px)
    }
}

/* Fin toast messages */

.rechercheIndicateur .ui-menu-item {
    padding: 8px 12px;
    border-bottom: 1px solid #d9d2d2;
    cursor: pointer;
}

.rechercheIndicateur .ui-menu-item:hover {
    background-color: #e9ecef;
}

/* Fin affichage des <ul> dans les tables bootstrap */


/* 
    Les deux prochains sélecteurs corrigent le problème d'affichage de la quantité d'indicateurs par ligne.
    Du fait du petit espace entre les indicateurs, on doit ajuster la largeur max des indicateurs pour que
    cet espace ne fasse pas sauter le dernier indicateur à la ligne en dessous.
*/
.qms-indic-green {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.qms-indic-yellow {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeeba !important;
}

.qms-indic-blue {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

.qms-indic-red {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

.depth-counter {
    text-transform: uppercase;
    font-size: .6rem;
    color: #6e757d;
    font-weight: bold !important;
}

.hide,
.hide-increase-indiv,
.hide-increase-collective,
.hide-percent-envelop {
    display: none !important;
}

.qms-section-tag {
    font-weight: bold;
    font-size: .8rem;
    letter-spacing: 1px;
    color: var(--backgroundHover);
}

.qms-section-tag+p {
    display: inline-block;
    margin-bottom: 0;
}

/*
    Les règles ci-dessous permettent d'avoir un meilleur rendu visuel des tables, 
    en centrant les éléments et en ajustant le padding
*/
.indic-section-container>div:not(:last-of-type) {
    margin-top: 4rem !important;
}

.indic-section-container>.qms-btn-centered {
    margin: 2rem auto !important;
    display: block;
    width: fit-content;
}

.qms-sm-btn-container .btn {
    transform: translateY(-1px);
    width: 25px;
    height: 25px;
    padding: 0;
    position: relative;
    margin-right: 5px;
}

.qms-sm-btn-container>.btn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.qms-spaced-table td:not(.no-align) {
    text-align: center !important;
}

.qms-spaced-table td {
    vertical-align: middle !important;
    padding: .6rem !important;
}

.qms-spaced-table th {
    text-align: center;
    padding: .6rem .3rem;
    vertical-align: middle !important;
}

.qms-spaced-table th span {
    padding: 5px 0 !important;
    display: block;
}

.form-check-input-qms {
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    margin-left: -1.25rem !important;
}

.qms-text-danger {
    font-size: .8rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb8f;
    color: #721c24;
    padding: .2rem calc(.3rem + 23px);
    margin-top: 4px;
    border-radius: 3px;
    position: relative;
    min-height: 1.5rem;
}

.qms-text-danger::before {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-45%);
    content: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-exclamation-triangle\" viewBox=\"0 0 16 16\"><path d=\"M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z\"/><path d=\"M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z\"/></svg>");
}

.asterisk {
    color: red;
}

#produitSearchTable td p {
    background-color: transparent !important;
}

.qms-add-btn {
    color: var(--secondaryColor) !important;
    width: fit-content;
    font-size: 1.4em !important;
}

#indicRequete {
    user-select: all;
    white-space: pre-wrap;
}

#fm-toolbar-wrapper #fm-toolbar .fm-dropdown-content {
    position: relative;
}


.loadingVue img {
    text-align: center;
    vertical-align: middle;
    width: 150px;
    height: 150px;
}

.irpMediaForm {
    line-height: 25px;
}

.irpMediaForm label {
    font-size: 20px;
}

@media (max-width: 575.98px) {
    .irpMediaForm label {
        font-size: 16px;
    }
}

@media (max-width: 375.98px) {
    .irpMediaForm label {
        font-size: 12px;
    }
}

table.dataTable.display tbody tr:hover.selected,
table.dataTable tbody tr.selected>* {
    box-shadow: inset 0 0 0 9999px var(--dt-row-selected) !important;
}

table.dataTable>thead>tr>th.select-checkbox {
    position: relative;
    min-width: 18px !important;
}

table.dataTable>thead>tr>th.select-checkbox:before,
table.dataTable>thead>tr>th.select-checkbox:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    transform: translateX(0%);
}

table.dataTable>thead>tr>th.select-checkbox:before {
    content: " ";
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid black;
    border-radius: 3px;
}

table.dataTable th.select-checkbox.selected::after {
    content: "✓";
    font-size: 20px;
    margin-top: -18px !important;
    margin-left: -6px;
    text-align: center;
}

/** Datatable AdvancedSearch class de la div parente lorsque on a <select multiple="multiple ... 
* vh : Equal to 1% of the height of the initial containing block.
*/
.multiselect-container {
    max-height: 42vh;
    overflow: auto;
}

.annexe {
    margin-left: 30px !important;
    list-style-type: disc !important;
}

input#selectDateDiffusion:invalid {
    border-color: var(--dangerBackgroundColor);
    box-shadow: 0 0 1px var(--dangerBackgroundColor);
}

.default-dom div.dt-search {
    float: right;
    vertical-align: middle;
    margin-bottom: 0.5em;
}

.default-dom div.dt-length {
    float: left;
    margin-bottom: 0.5em;
}

.default-dom div.dt-info {
    float: left;
    margin-top: 0.8em;
}

.default-dom div.dt-paging {
    float: right;
    margin-top: 0.5em;
}

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}

.ui-autocomplete-dt-editor {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* DIV qui contient le text à scroller */
.scroll-container {
    border: 3px solid black;
    border-radius: 5px;
    overflow: hidden;
}

/* texte qui scroll */
.scrolling-text {
    text-align: right;

    /* animation properties */
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);

    -moz-animation: my-animation 10s linear infinite;
    -webkit-animation: my-animation 10s linear infinite;
    animation: my-animation 10s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
    from {
        -moz-transform: translateX(-100%);
    }

    to {
        -moz-transform: translateX(100%);
    }
}

/* for Chrome */
@-webkit-keyframes my-animation {
    from {
        -webkit-transform: translateX(-100%);
    }

    to {
        -webkit-transform: translateX(100%);
    }
}

@keyframes my-animation {
    from {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    to {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.admin-img-icones {
    max-height: 200px;
    height: auto;
    width: auto;
}

.produit-search-gallery-button {
    display: flex;
    align-items: center;
    border: solid 1px var(--infoBackgroundColor);
    border-radius: 8px;
    overflow: hidden;
    width: 85px;
    height: 40px;
    padding: 0;
}

.produit-search-gallery-button .icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.produit-search-gallery-button .current-icon {
    background-color: var(--infoBackgroundColor);
    color: var(--white);
    width: 50%;
    height: 100%;
}

.produit-search-gallery-button .secondary-icon {
    background-color: var(--white);
    color: var(--infoBackgroundColor);
    width: 50%;
    height: 100%;
}

/* Input type Password (remove the eye of edge) */

input[type="password"]::-ms-reveal,

input[type="password"]::-ms-clear {
        display: none;
    }

#togglePassword{
    position: absolute; 
    right: 10px; top: 50%; 
    transform: translateY(-50%); 
    cursor: pointer;
}

#togglePassword1, #togglePassword2{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); 
    cursor: pointer;
}

#password, #exampleInputPassword1, #password2{
    padding-right: 30px;
}

.password-container {
    position: relative;
}

.password-relative-eye {
    position: relative;
}

/** Editor Datatable  */

div.DTE_Body div.DTE_Body_Content div.DTE_Field:not(.block)>label {
    float: left;
    width: 40%;
}
 
div.DTE_Body div.DTE_Body_Content div.DTE_Field:not(.block)>div.DTE_Field_Input {
    float: right;
    width: 60%;
}

div.DTE_Body div.DTE_Body_Content div.DTE_Field.block>label {
    float: left;
    width: 100%;
}
 
div.DTE_Body div.DTE_Body_Content div.DTE_Field.block>div.DTE_Field_Input {
    float: left;
    width: 100%;
}

div.DTE_Body div.DTE_Body_Content div.DTE_Field.DTE_Field_Type_readonly,
div.DTE_Body div.DTE_Body_Content div.DTE_Field.DTE_Field_Type_readonly:hover,
div.DTE_Body div.DTE_Body_Content div.DTE_Field.DTE_Field_Type_readonly input {
    background-color: #d2d1d1;
}

/** END Editor Datatable  */

#displayOptionPdf label {
    cursor: pointer;
}


/** Fil d'Ariane/Breadcrumb */
.qms-breadcrumb {
    margin: 0px;
    padding: 0px;
    width: 100%;
    max-width: 100%;
    height: 100px;
    counter-reset: breadcrumb;
    position: relative;
}

.qms-breadcrumb:before {
    position: absolute;
    top: 23px;
    left: 12.5%;
    content: '';
    width: 75%;
    height: 4px;
    background: #E5E9F6;
}

.qms-breadcrumb .breadcrumb-step {
    float: left;
    padding-top: 60px;
    width: 25%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qms-breadcrumb .breadcrumb-step:after {
    counter-increment: breadcrumb;
    content: counter(breadcrumb);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    display: flex;
    top: 0px;
    left: calc(50% - 23px);
    color: #006587;
    font-weight: bold;
    background-color: #E5E9F6;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background-color 1s ease;
    transition: color 1s ease;
}

.qms-breadcrumb .completed:after {
    background-color: #006587;
    color: #E5E9F6;
}

.qms-breadcrumb .breadcrumb-step.current:after, .qms-breadcrumb .breadcrumb-step:hover:not(.current):after {
        border: 2px solid #006587;
        border-radius: 50%;
        color: #006587;
        background-color: white;
}

.qms-breadcrumb button{
    font-weight: 600;
    padding: 0;
    border: none;
    background: none;
}


/* Season Effect */
.snowflake, .leaf, .flower, .sun {
    position: absolute;
    top: -10px;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}