/* // HOWTO css spécifiques à l'application. C'est ici qu'on surcharge les styles d'adminlte entre autres. */

body {
    --bleuioda: #064ACB;
    --bleuhoverioda: #0544b7;
    --bleuclairioda: #c3dcff; /* #E8F1FE;*/
    --bleuclairaccueilioda: #E8F1FE;
    --bleufondinputioda: #E6EFFF;
    --bleutertiareioda: #ecf2fe;
    --bleusecondaireioda: #c3dcff;
    --grisioda: #b0b4bf;
    --grisiodadisabled: #f2f2f4;
    --orangeioda: #fa793a;
    --orangesecondaireioda: #ffedd5;
    --orangeseconctionssecondairesioda: #FFE8C7;
    --orangetertiareioda: #fff8ee;
    --orangehoverioda: #de682e;
    --orangedisabledioda: #fdd7c3;
    --rougeioda: #FF0002;
    --rougehoverioda: #C50002;
    --vertioda: #00b050;
    --couleur-nav-header: #A2A6B4;
    --couleur-net-ou-brut: red;
    --fond-couleur-bouton-checklist-fond-blanc: #c3dcff;
    font-family: "Poppins", sans-serif;
    color: var(--bleuioda);
}

/* // HOWTO Changements quand l'utilisateur clique sur le bouton "Contraste élevé" (Accessibilité) */
.high-contrast {
    --orangeioda: black;
    --orangesecondaireioda: #404040;
    --orangehoverioda: #404040;
    --couleur-nav-header: black;
    --couleur-net-ou-brut: black;
    --vertioda: black;
    --grisioda: black;
    --fond-couleur-bouton-checklist-fond-blanc: #606060;
}

.high-contrast a {
    /*color: yellow !important;*/
}

.high-contrast button {
    /*background-color: yellow !important;
    color: black !important;*/
}

a {
    color: var(--orangeioda);
}

a:hover {
    color: var(--orangehoverioda);
}

/*
    Evite que la couleur de fond des champs de login disparaisse quand les champs sont pré-remplis par chrome.
    Les mystères du web....
    https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied
*/
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

/* Permet d'afficher correctement les autocomplete dans les popup modales (voir T2P consommation) */
.ui-autocomplete {
    z-index: 2147483647;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none;
}

#loading-overlay .spinner-border {
    width: 7rem;
    height: 7rem;
    animation: spinner-border 1.5s linear infinite;
}

.row {
    margin-left: 0;
}

.form-control {
    border: none;
    border-radius: 15px;
    height: calc(2.95rem + 2px);
    text-indent: 10px;
}

.content-wrapper {
    background: linear-gradient(#EDF3FE, #E3EEFF);
}

.main-footer {
    background-color: #E3EEFF;
    color: var(--couleur-nav-header);
    border: none;
}

.fond-login-droit {
    background: linear-gradient(#4A87FA, #064ACB);
}

.nav-header {
    font-weight: 600;
    color: var(--couleur-nav-header) !important;
}

.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--bleufondinputioda);
    border: none;
}

.nav-icon {
    color: var(--bleuioda);
}

.nav-link:hover {
    background-color: #f3f8ff !important;
}

/* Celle là était particulièrement vicieuse ! */
.nav-sidebar > .nav-item:hover > .nav-link {
    background-color: #f3f8ff !important;
    color: var(--bleuioda) !important;
}

.nav-link.active {
    box-shadow: none !important;
}

.bottom-menu {
    bottom: 0;
    position: fixed;
    padding-bottom: 10px;
    border-top: 1px solid #dee2e6;
}

.nav-icon-home {
    width: 17px;
    height: 23px;
    display: inline-block;
    margin-bottom: -5px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/home.svg) no-repeat center / contain;
    mask: url(/img/home.svg) no-repeat center / contain;
}

.nav-icon-users {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-bottom: -1px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/users.svg) no-repeat center / contain;
    mask: url(/img/users.svg) no-repeat center / contain;
}

.nav-icon-msg-accueil {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-bottom: -1px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/stickynote.svg) no-repeat center / contain;
    mask: url(/img/stickynote.svg) no-repeat center / contain;
}

.nav-icon-msg-declaration-supplementaire {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-bottom: -1px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/message-tick.svg) no-repeat center / contain;
    mask: url(/img/message-tick.svg) no-repeat center / contain;
}

.nav-icon-import {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-bottom: -1px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/download.svg) no-repeat center / contain;
    mask: url(/img/download.svg) no-repeat center / contain;
}

.nav-icon-email {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-bottom: -1px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/sms.svg) no-repeat center / contain;
    mask: url(/img/sms.svg) no-repeat center / contain;
}

.nav-icon-profil {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-bottom: -10px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/profil.svg) no-repeat center / contain;
    mask: url(/img/profil.svg) no-repeat center / contain;
}

.nav-icon-aide {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-bottom: -10px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/question-circle.svg) no-repeat center / contain;
    mask: url(/img/question-circle.svg) no-repeat center / contain;
}

.nav-icon-deconnexion {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-bottom: -10px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/deconnexion.svg) no-repeat center / contain;
    mask: url(/img/deconnexion.svg) no-repeat center / contain;
}

.nav-icon-passee {
    width: 20px;
    height: 30px;
    display: inline-block;
    margin-bottom: -10px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/document-past.svg) no-repeat center / contain;
    mask: url(/img/document-past.svg) no-repeat center / contain;
}

.nav-icon-prevue {
    width: 20px;
    height: 30px;
    display: inline-block;
    margin-bottom: -10px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/document-future.svg) no-repeat center / contain;
    mask: url(/img/document-future.svg) no-repeat center / contain;
}

.nav-icon-supplementaire {
    width: 20px;
    height: 30px;
    display: inline-block;
    margin-bottom: -10px;
    background-color: var(--bleuioda);
    -webkit-mask: url(/img/document-plus.svg) no-repeat center / contain;
    mask: url(/img/document-plus.svg) no-repeat center / contain;
}

.icon-trash {
    color:black;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangeioda);
    -webkit-mask: url(/img/trash.svg) no-repeat center / contain;
    mask: url(/img/trash.svg) no-repeat center / contain;
}

.icon-trash:hover {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/trash.svg) no-repeat center / contain;
    mask: url(/img/trash.svg) no-repeat center / contain;
}

.icon-trash:disabled {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/trash.svg) no-repeat center / contain;
    mask: url(/img/trash.svg) no-repeat center / contain;
}

.icon-more-vertical {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangeioda);
    -webkit-mask: url(/img/more-vertical.svg) no-repeat center / contain;
    mask: url(/img/more-vertical.svg) no-repeat center / contain;
}

.icon-more-vertical:hover {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/more-vertical.svg) no-repeat center / contain;
    mask: url(/img/more-vertical.svg) no-repeat center / contain;
}

.icon-more-vertical:disabled {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/more-vertical.svg) no-repeat center / contain;
    mask: url(/img/more-vertical.svg) no-repeat center / contain;
}

.icon-sms {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangeioda);
    -webkit-mask: url(/img/sms.svg) no-repeat center / contain;
    mask: url(/img/sms.svg) no-repeat center / contain;
    vertical-align: sub;
}

.icon-sms:hover {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/sms.svg) no-repeat center / contain;
    mask: url(/img/sms.svg) no-repeat center / contain;
}

.icon-sms:disabled {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/sms.svg) no-repeat center / contain;
    mask: url(/img/sms.svg) no-repeat center / contain;
}

.icon-modifier {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangeioda);
    -webkit-mask: url(/img/modifier.svg) no-repeat center / contain;
    mask: url(/img/modifier.svg) no-repeat center / contain;
    vertical-align: sub;
}

.icon-modifier:hover {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/modifier.svg) no-repeat center / contain;
    mask: url(/img/modifier.svg) no-repeat center / contain;
}

.icon-modifier:disabled {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/modifier.svg) no-repeat center / contain;
    mask: url(/img/modifier.svg) no-repeat center / contain;
}

.icon-telecharger {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangeioda);
    -webkit-mask: url(/img/download.svg) no-repeat center / contain;
    mask: url(/img/download.svg) no-repeat center / contain;
    vertical-align: sub;
}

.icon-telecharger:hover {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/download.svg) no-repeat center / contain;
    mask: url(/img/download.svg) no-repeat center / contain;
}

.icon-telecharger:disabled {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--orangehoverioda);
    -webkit-mask: url(/img/download.svg) no-repeat center / contain;
    mask: url(/img/download.svg) no-repeat center / contain;
}

.btn-primary {
    background-color: var(--orangeioda);
    border: none;
    border-radius: 5px;
}

.btn-primary:hover {
    background-color: var(--orangehoverioda);
}

.btn-primary:focus {
    background-color: var(--orangehoverioda);
}

.btn-primary:active {
    background-color: var(--orangehoverioda) !important;
}

.btn-primary:disabled {
    background-color: var(--orangedisabledioda);
}

.btn-primary-pulse {
    border: none;
    border-radius: 5px;
    animation: pulse-btn-primary 2s infinite;
}

@keyframes pulse-btn-primary {
    0%, 100% {
        background-color: var(--orangeioda);
    }

    50% {
        background-color: var(--orangehoverioda);
    }
}

/* Datatable Ioda */

#tableIoda {
    border: none;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

#tableIoda tbody {
    margin-top: 20px;
}

#tableIoda th {
    border: none;
}

#tableIoda td {
    border: none;
    border-top: 1px solid rgb(222, 226, 230);
}

#tableIoda th.sorting::before {
    color: var(--grisioda);
}

#tableIoda th.sorting {
    color: var(--grisioda);
}

.dataTables_filter input {
    border: none;
    border-radius: 10px;
}

#tableIoda_filter input[type="search"] {
    padding: 13px 4px 13px 40px;
    height: 48px;
    border-radius: 15px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' fill='grey'  viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}

#wrap-tableIoda {
    width: 100%;
}

.entete {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.pull-left {
    margin-top: auto;
    margin-bottom: 23px;
    float: left;
}

.pull-right {
    margin-top: auto;
    margin-bottom: 15px;
    float: right;
}

.page-item > a {
    color: var(--grisioda);
    font-weight: 500;
    background-color: rgb(255 255 255 / 0%); /* transparent */
    border: none;
    border-radius: 4px;
}

.previous > a {
    padding-top: 6px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: rgb(255 255 255 / 0%) !important; /* transparent */
    color: var(--bleuioda);
}

.page-item.active > a {
    background-color: var(--bleuioda) !important;
    color: white !important;
}

.previous {
    font-size: 20px;
    background-color: rgb(255 255 255 / 0%); /* transparent */
}

.next {
    font-size: 20px;
    background-color: rgb(255 255 255 / 0%); /* transparent */
}

.next > a {
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: rgb(255 255 255 / 0%) !important; /* transparent */
    color: var(--bleuioda);
}

.page-item.disabled .page-link {
    color: var(--grisioda);
}

.page-link:hover {
    background-color: rgb(255 255 255 / 0%); /* transparent */
}

.page-link:focus {
    box-shadow: none;
}

.infos-table-ioda {
    float: left;
    display: inline-block;
}

.dataTables_info{
    float: left;
}

.dataTables_length {
    float: left;
    padding-top: .9em;
    padding-left: 15px;
}

#tableIoda_paginate {
    padding-top: .8em;
}

#tableIoda_length{
    font-weight: 600 !important;
}

.custom-select {
    width: 75px !important;
    border: none;
    height: 28px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    color: var(--bleuioda);
    margin-top: -13px;
}

.ligneSelectionnable:hover{
    background-color: #E8F1FE;
    cursor: pointer;
}

.bouton_ajouter {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    border: none;
}

.bouton_ajouter_texte {
    margin-right: 32px;
    text-align: left;
    font: normal normal medium 20px/30px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.bouton_ajouter_icone {
    width: 20px;
    height: 20px;
    margin: 14px 10px 14px 32px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/plus.svg) no-repeat center / contain;
    mask: url(/img/plus.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_ajouter:hover {
    background: var(--orangehoverioda) 0% 0% no-repeat padding-box;
    cursor: pointer;
}

.bouton_ajouter_disabled {
    background: var(--orangedisabledioda) 0% 0% no-repeat padding-box;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    opacity: 1;
    border: none;
}

.bouton_ajouter_disabled:hover {
    background: var(--orangedisabledioda) 0% 0% no-repeat padding-box;
    cursor: not-allowed;
}

.bouton_ajouter_secondaire {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.bouton_ajouter_secondaire_texte {
    margin-right: 32px;
    text-align: left;
    font: normal normal medium 20px/30px Poppins;
    letter-spacing: 0px;
    color: var(--orangeioda);
    opacity: 1;
}

.bouton_ajouter_secondaire_icone {
    width: 20px;
    height: 20px;
    margin: 14px 10px 14px 0;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/plus.svg) no-repeat center / contain;
    mask: url(/img/plus.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_ajouter_secondaire:hover .bouton_ajouter_secondaire_icone {
    background: var(--orangehoverioda) 0% 0% no-repeat padding-box;
}

.bouton_ajouter_secondaire:hover .bouton_ajouter_secondaire {
    cursor: pointer;
}

.bouton_ajouter_secondaire:hover .bouton_ajouter_secondaire_texte {
    color: var(--orangehoverioda);
}

.bouton_ajouter_secondaire_texte_disabled {
    color: var(--grisioda);
}

.bouton_ajouter_secondaire_disabled {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.bouton_ajouter_secondaire_disabled:hover {
    color: var(--grisioda);
    cursor: not-allowed;
}

.bouton_ajouter_secondaire_icone_disabled {
    width: 20px;
    height: 20px;
    margin: 14px 10px 14px 0;
    background: var(--grisioda) 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/plus.svg) no-repeat center / contain;
    mask: url(/img/plus.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_valider_primaire {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-top: auto;
    margin-right: 24px;
    padding-right: 24px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 5px;
    color: white;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.bouton_valider_primaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 8px 8px 24px;
    background: white 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/check.svg) no-repeat center / contain;
    mask: url(/img/check.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_valider_primaire:hover {
    color: white;
    cursor: pointer;
    background-color: var(--orangehoverioda);
    vertical-align: bottom;
}

.bouton_annuler_secondaire {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    padding-right: 24px;
    border: 1px solid var(--bleuioda);
    border-radius: 5px;
    color: var(--bleuioda);
    opacity: 1;
}

.bouton_annuler_secondaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 10px 8px 24px;
    background: var(--bleuioda) 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/cross.svg) no-repeat center / contain;
    mask: url(/img/cross.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_annuler_secondaire:hover {
    color: var(--bleuhoverioda) !important;
    cursor: pointer;
}

.bouton_valide_secondaire {
    background-color: transparent;
    color: var(--vertioda);
    margin-right: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.bouton_valide_secondaire_icone {
    font-size: 10px;
    color: white;
    background: var(--vertioda) 0% 0% no-repeat padding-box;
    padding: 6px 4.7px 4px 5px;
    margin-right: 8px;
    border-radius: 10px;
}

.bouton_modifier_primaire {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-top: auto;
    height: 40px;
    margin-right: 25px;
    padding-right: 24px;
    border-radius: 5px;
    color: white;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.bouton_modifier_primaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 10px 8px 24px;
    background: white 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/modifier.svg) no-repeat center / contain;
    mask: url(/img/modifier.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_modifier_primaire:hover {
    color: white;
    cursor: pointer;
    background-color: var(--orangehoverioda);
    vertical-align: bottom;
}

.bouton_telecharger_primaire {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 40px;
    margin-right: 25px;
    padding-right: 24px;
    border-radius: 5px;
    color: white;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.bouton_telecharger_primaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 10px 8px 24px;
    background: white 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/download.svg) no-repeat center / contain;
    mask: url(/img/download.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_telecharger_primaire:hover {
    color: white;
    cursor: pointer;
    background-color: var(--orangehoverioda);
    vertical-align: bottom;
}

.bouton_supprimer_primaire {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-top: auto;
    height: 40px;
    margin-right: 25px;
    padding-right: 24px;
    border-radius: 5px;
    color: white;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.bouton_supprimer_primaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 10px 8px 24px;
    background: white 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/trash.svg) no-repeat center / contain;
    mask: url(/img/trash.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_supprimer_primaire:hover {
    color: white;
    cursor: pointer;
    background-color: var(--orangehoverioda);
    vertical-align: bottom;
}


.bouton_supprimer_secondaire {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    padding-right: 24px;
    height: 40px;
    margin-top: auto;
    border: 1px solid var(--bleuioda);
    border-radius: 5px;
    color: var(--bleuioda);
    opacity: 1;
}

.bouton_supprimer_secondaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 10px 8px 24px;
    background: var(--bleuioda) 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/trash.svg) no-repeat center / contain;
    mask: url(/img/trash.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_supprimer_secondaire:hover {
    color: var(--bleuhoverioda) !important;
    cursor: pointer;
}

.bouton_telecharger_secondaire {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    padding-right: 24px;
    border: 1px solid var(--bleuioda);
    border-radius: 5px;
    color: var(--bleuioda);
    opacity: 1;
}

.bouton_telecharger_secondaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 10px 8px 24px;
    background: var(--bleuioda) 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/download.svg) no-repeat center / contain;
    mask: url(/img/download.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_telecharger_secondaire:hover {
    color: var(--bleuhoverioda) !important;
    cursor: pointer;
}

.bouton_charger_secondaire {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    padding-right: 24px;
    border: 1px solid var(--bleuioda);
    border-radius: 5px;
    color: var(--bleuioda);
    opacity: 1;
}

.bouton_charger_secondaire_icone {
    width: 20px;
    height: 16px;
    margin: 8px 10px 8px 24px;
    background: var(--bleuioda) 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/upload.svg) no-repeat center / contain;
    mask: url(/img/upload.svg) no-repeat center / contain;
    opacity: 1;
}

.bouton_charger_secondaire:hover {
    color: var(--bleuhoverioda) !important;
    cursor: pointer;
}

.bouton {
    margin-bottom: 10px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    opacity: 1;
    border: none;
}

.bouton > div {
    text-align: center;
    font: normal normal medium 20px Poppins;
    font-size: 20px;
    padding: 15px 30px;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.bouton:hover {
    background: var(--orangehoverioda) 0% 0% no-repeat padding-box;
}

.bouton_disabled {
    background: var(--orangedisabledioda) 0% 0% no-repeat padding-box;
}

.checkbox-role {
    margin-left: 15px;
}

.entete_profil {
    display: flex;
    margin-bottom: 25px;
}

.groupe_onglets_profil {
    width: 100%;
    display: flex;
    overflow: auto;
    border-bottom: 2px solid var(--bleuioda);
}

.icone_onglet_profil {
    margin: 7px
}

.onglet_profil {
    font-weight: 600;
    padding: 9px 22px 2px 15px;
}
.groupe_onglets_profil a {
    color: var(--bleuioda);
}

.groupe_onglets_profil a:hover {
    background-color: #e4ebf9;
    border-radius: 15px 15px 0px 0px;
    cursor: pointer;
}

.onglet_profil_selectionne {
    font-weight: 400;
    color: white;
    background-color: var(--bleuioda);
    border-radius: 15px 15px 0px 0px;
    padding: 9px 22px 5px 15px;
}


.card-utilisateur {
    margin-bottom: 30px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}

.titre-card {
    color: var(--bleuioda);
    font: normal normal 600 20px/25px Poppins;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.card-ligne {
    margin-top: 10px;
    display: flex;
}

.card-colonne-tiers {
    width: 33.333334%;
    margin: 4px 20px 4px 0;
    padding-left: 5px;
}

.card-colonne-2-tiers {
    width: 66.666665%;
    margin: 4px 20px 4px 0;
    padding-left: 5px;
}

.card-colonne-3-tiers {
    width: 100%;
    margin: 4px 20px 4px 0;
    padding-left: 5px;
}

.input-fond-blanc {
    margin-top: 4px;
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #C6C6C6;
    padding: 8px 16px;
    border-radius: 11px;
    opacity: 1;
}

.input-fond-blanc:hover {
    background: var(--bleufondinputioda) 0% 0% no-repeat padding-box;
    border: 1px solid var(--bleuioda);
    border-radius: 11px;
    opacity: 1;
}

.input-fond-blanc:disabled {
    background: var(--grisiodadisabled) 0% 0% no-repeat padding-box;
    border: 1px solid var(--grisioda);
    border-radius: 11px;
}

.input-fond-blanc:read-only {
    background: var(--grisiodadisabled) 0% 0% no-repeat padding-box;
    border: 1px solid var(--grisioda);
    border-radius: 11px;
}

.input-date {
    border: 1px solid #C6C6C6;
    border-radius: 11px;
    height: calc(2.95rem - 5px);
    margin-top: 4px;
}

.select-fond-blanc {
    margin-top: 4px;
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #C6C6C6;
    padding: 8px 34px 8px 16px;
    border-radius: 11px;
    padding: 8px 30px 8px 16px; /* Evite que le texte passe en dessous de la flèche */
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*-webkit-appearance: menulist; 
    -moz-appearance: menulist;
    appearance: menulist;*/
    background: url(/img/arrow-orange.svg) calc(100% - 12px) 14.5px no-repeat white;
    background-size: 15px;
}

.select-fond-blanc:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

.select-fond-blanc:hover {
    background-color: var(--bleufondinputioda);
    border: 1px solid var(--bleuioda);
    border-radius: 11px;
    opacity: 1;
}

.premier_onglet {
    margin-left: 2px;
}

.message-accueil-industriel {
    padding: 15px 25px;
    color: var(--orangeioda);
    background-color: var(--orangesecondaireioda);
    border-radius: 20px;
}

.intro-profil {
    margin-top: 20px;
    color: white;
    text-align: center;
    border-radius: 15px;
    background: linear-gradient(#4a87fa, var(--bleuioda));
    padding: 63px 0 25px 0;
}

.intro-profil-titre {
    color: white;
    font-weight: 600;
    font-size: 44px;
}

.intro-profil-details {
    font-size: 24px;
    font-weight: 200;
}

.bouton-declarer {
    width: 34%;
}

.bouton-declarer > div:hover {
    background-color: var(--grisioda);
}

.bouton-declarer > div {
    background-color: white;
    border-radius: 15px;
    color: var(--bleuioda);
    font-size: 32px;
    padding: 10px 10px;
}

.icone-declarer {
    background: transparent linear-gradient(144deg, #4A87FA 0%, #064ACB 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    display: inline-block;
    padding: 0 14px 5px 16px;
    margin-right: 15px;
}

.ligne-titre-et-boutons-confidentialite {
    width: 100%;
}

.titre-avec-confidentialite {
    float: left;
}

.bouton-confidentialite {
    float: right;
    color: var(--orangeioda);
    background-color: var(--orangesecondaireioda);
    font-size: 16px;
    font-weight: 600;
    padding: 0 6px;
    border-radius: 12px;
    margin-left: 5px;
}

.bouton-confidentialite:hover {
    color: white;
    background-color: var(--orangehoverioda);
    cursor: pointer;
}

.bouton-confidentialite-selectionne {
    color: white;
    background-color: var(--orangehoverioda);
    cursor: pointer;
}

.boutons-comme-radio {
    display: flex;
}

.boutons-comme-radio > div {
    font-weight: 600;
    background-color: var(--bleutertiareioda);
    margin-right: 5px;
    margin-top: 12px;
    border-radius: 12px;
    padding: 0 20px;
}

.boutons-comme-radio > div:hover {
    color: white;
    background-color: var(--bleuioda);
    cursor: pointer;
}

.boutons-comme-radio-selectionne {
    color: white;
    background-color: var(--bleuioda) !important;
    cursor: pointer;
}

.boutons-comme-checklist {
    display: flex;
}

.boutons-comme-checklist > div {
    font-weight: 600;
    background-color: white;
    margin-right: 5px;
    margin-top: 12px;
    border-radius: 12px;
    padding: 0 20px;
    border: 1px solid transparent;
}

.boutons-comme-checklist > div:hover {
    cursor: pointer;
    border: 1px solid var(--bleuioda);
}

.boutons-comme-checklist-selectionne {
    color: white;
    background-color: var(--bleuioda) !important;
    cursor: pointer;
}

.btns-tableaux > div {
    background-color: var(--bleutertiareioda);
    margin-bottom: 20px;
}

.desactive {
    color: var(--grisioda);
    background-color: var(--grisiodadisabled) !important;
}

.desactive:hover {
    cursor: default !important;
    border: 1px solid transparent  !important;
}

.recherche {
    padding-left: 40px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' fill='grey'  viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}

.recherche:hover {
    padding-left: 40px;
    background: var(--bleutertiareioda) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' fill='grey'  viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}

.groupes-selection {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.groupe-selectionne {
    display: none;
    margin: 6px 8px 6px 0;
    height: 33px;
    padding: 5px 12px 0px 12px;
    font-weight: 400;
    font-size: 16px;
    color: white;
    background-color: var(--orangeioda);
    border-radius: 15px;
    white-space: nowrap;
}

.groupe-selectionne-libelle {
    float: left;
}

.groupe-selectionne-croix {
    float: right;
    display: inline-block;
    margin-left: 3px;
}

.groupe-selectionne-croix:hover {
    cursor: pointer;
}

.retour-liste-referentiels {
    margin-bottom: 20px;
}

.retour-liste {
    margin-bottom: 15px;
}

.enregistrer-profil {
    margin-left: auto;
    border-radius: 10px;
}

.champs-adresse input, .champs-adresse select {
    margin-bottom: 15px;
}

.section-tableau {
    width: 100%;
}

.section-tableau-entete {
    display: flex;
    width: 100%;
    color: var(--bleuioda);
    background-color: var(--bleuclairioda);
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 10px 15px;
    font-weight: 700;
}

.section-tableau-entete:hover {
    color: var(--bleuioda);
    border: 1px solid var(--bleuioda);
}

.non-clickable:hover {
    color: var(--bleuioda);
    border: 1px solid transparent;
}

.section-tableau-entete-deplier {
    background-color: var(--bleuioda);
    padding: 0 8px 2px 8px;
    border-radius: 5px;
    max-height: 26px
}

.section-tableau-entete-deplier:hover {
    background-color: var(--bleuhoverioda);
    cursor: pointer;
}

.section-tableau-entete-deplier img {
    width: 10px;
}

.section-tableau-entete-replier {
    background-color: var(--orangeioda);
    padding: 0 8px 2px 8px;
    border-radius: 5px;
    max-height: 26px
}

.section-tableau-entete-replier:hover {
    background-color: var(--orangehoverioda);
    cursor: pointer;
}

.section-tableau-entete-replier img {
    width: 10px;
    margin-bottom: 1px;
    /* Retourne l'image */
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.section-tableau-contenu {
    display: flex;
    margin-top: 15px;
}

.section-tableau-produit {
    margin-top: 15px;
    background-color: var(--bleutertiareioda);
    border-radius: 5px;
}

.section-tableau-produit-entete {
    display: flex;
    width: 100%;
    color: var(--bleuioda);
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 10px 15px;
}

.section-tableau-produit-entete:hover {
    color: var(--bleuioda);
    border: 1px solid var(--bleuioda);
}

.section-tableau-produit-partie-haute {
    display: flex;
    width: 100%;
    color: var(--bleuioda);
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 10px 15px;
}

.section-tableau-produit-corps {
    padding: 0px 15px;
}

.section-tableau-produit-titre {
    font-weight: 600;
}

.section-tableau-activite {
    margin: 15px 6px 0px 6px;
    background-color: var(--bleusecondaireioda);
    border-radius: 5px;
}

.section-tableau-activite-entete {
    color: var(--bleuioda);
    display: flex;
    padding: 10px 10px 10px 12px;
    border: 1px solid transparent;
    border-radius: 5px;
}

.section-tableau-activite-haut {
    display: flex;
    padding: 10px 10px 10px 12px;
}

.section-tableau-activite-corps {
    padding: 10px 16px 10px 12px;
}

.section-tableau-activite-entete:hover {
    color: var(--bleuioda);
    border: 1px solid var(--bleuioda);
    border-radius: 5px;
}

.section-tableau-activite-titre {
    font-weight: 600;
}

.caler-a-droite {
    display: flex;
    margin-left: auto;
}

.select-usine {
    display: block;
    width: 282.725px !important;
}

.validation-quantite {
    display: block;
    width: 175px;
}

.lien-pdf {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
}

.lien-pdf:hover {
    cursor: pointer;
}

.btn-valider-declaration {
    margin-right : 20px;
    margin-top: 6px;
    margin-bottom: auto;
}

.champs-industriel {
    display: none;
}

.a-valider {
    color: var(--orangeioda);
    margin-bottom: 3px;
    margin-right: 30px;
    font-weight: 600;
}

.formulaire-signature {
    display: flex;
    justify-content: center;
}

.boutons-signature {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.ligne-uside {
    display: flex;
    width: 100%;
}

.marge-bas-produit {
    height: 7px;
}

.btn-lg {
    padding-left: 50px;
    padding-right: 50px;
}

.fa-eye {
    color: #a19ba2;
}

.fa-eye-slash {
    color: #a19ba2;
}

.caler-en-bas {
    margin-top: auto;
}

.align-bottom .col-md-4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns the input at the bottom */
}

.flex-en-colonne-cale-en-bas {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns the input at the bottom */
}

.a-valider-PCOD {
    margin-top: 7px;
}

.masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 20px;
}

.masonry-item {
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
    border: 1px solid transparent;
}

.masonry-item:hover {
    border: 1px solid var(--bleuioda);
    cursor: pointer;
}

.bouton_supprimer_uside_consommation {
    float: right;
    margin-bottom: auto;
    margin-top: 29px;
}

.techmod_grid {
    display: grid;
    grid-template-columns: 2fr 3fr 4fr 1fr; /* Ajustez les proportions selon l'image */
    gap: 10px;
    margin-top: 10px;
}

.techmod_header {
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center; 
    align-items: flex-end; 
}

.filtres-tableau-de-bord {
    border-radius: 15px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: repeat(3, auto);
    gap: 10px;
    padding: 15px 30px;
    background-color: white;
    border: none;
    width: fit-content;
    margin: 23px 0;
}

.industriels-sans-decla {
    border-radius: 15px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    padding: 15px 30px;
    background-color: white;
    border: none;
    width: fit-content;
}

.encart-industriels-connectes {
    justify-self: end;
    align-self: start;
    border-radius: 15px;
    display: block;
    padding: 15px 30px;
    background-color: white;
    border: none;
    width: fit-content;
    margin: 23px 0;
}

.liste-industriels-connectes {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
}

.label-tdb {
    display: flex;
    align-items: center;
    font-weight: 600 !important;
}

.btn-rechercher-tdb {
    margin: 0 5px -3px 20px;
    padding-right: 30px;
    padding-left: 30px;
}

.dropdown-item.active, .dropdown-item:active {
    color: black;
    text-decoration: none;
    background-color: white;
}

.btn-relancer {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--orangeioda) 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    border: none;
}

.btn-relancer_texte {
    margin-right: 32px;
    text-align: left;
    font: normal normal medium 20px/30px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.btn-relancer_icone {
    width: 20px;
    height: 20px;
    margin: 14px 10px 14px 32px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/sms.svg) no-repeat center / contain;
    mask: url(/img/sms.svg) no-repeat center / contain;
    opacity: 1;
}

.btn-relancer:hover {
    background: var(--orangehoverioda) 0% 0% no-repeat padding-box;
    cursor: pointer;
}

.btn-relancer_disabled {
    background: var(--orangedisabledioda) 0% 0% no-repeat padding-box;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    opacity: 1;
    border: none;
}

.btn-relancer_disabled:hover {
    background: var(--orangedisabledioda) 0% 0% no-repeat padding-box;
    cursor: not-allowed;
}

.relancer-lien {
    display: flex;
    justify-content: center;
}

.btn-visualiser_icone {
    width: 20px;
    height: 20px;
    margin: 14px 10px 14px 32px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    -webkit-mask: url(/img/screenmirroring.svg) no-repeat center / contain;
    mask: url(/img/screenmirroring.svg) no-repeat center / contain;
    opacity: 1;
}

.mr-icon-menu-tdb {
    margin-right: 10px;
}

.lien-page-accueil {
    /*border-bottom: 1px solid var(--orangeioda);*/
    text-decoration: underline;
}

.lien-page-accueil:hover {
    /*border-bottom: 1px solid var(--orangeioda);*/
    text-decoration: underline;
}

.lien-initialiser-compte {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.usides-grid {
    display: grid;
    grid-template-columns: 2fr 3fr 6fr 3fr 1fr 1fr;
    gap: 10px;
}

.uside-lib {
    color: black;
}

.partenaires-pays-grid {
    display: grid;
    grid-template-columns: 4fr 2fr 2fr 1fr 1fr;
    gap: 10px;
}

.usides-fabrication-T1P-grid {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 3fr 1fr 1fr;
    gap: 10px;
}

.usides-fabrication-T2P-grid {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 3fr 3fr 1fr 1fr;
    gap: 10px;
}

.boutons-comme-checklist-fond-blanc > div {
    color: white;
    background-color: var(--fond-couleur-bouton-checklist-fond-blanc);
}

.boutons-msg-accueil {
    display: flex;
    margin-top: 10px;
}

.editeur-quill-msg-accueil {

}

.ql-container {
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 0px;
    padding-top: 0px;
}

.ql-editor {
    line-height: 37px;
}

.quantite-globale-popup{
    margin-bottom: 20px;
}

.periodes-popup {
    margin-bottom: 20px;
}

.bloc-message-decla-suppl {
    margin-top: 20px;
    margin-bottom: 20px;
}

.div-lecture-seule {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent; 
    z-index: 9999; 
}

.grille-filtre-visualisation {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.libelle-industriel-connecte {
    margin-top: 5px;
}

.bouton-visualiser {
    margin-left: auto;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.net-ou-brut {
    color: var(--couleur-net-ou-brut);
    font-weight: 600;
}
.aria-hidden-label {
    display: inline-flex;
    visibility: hidden;
    width: 0px;
    height: 0px;
}

.force-focus {
    /* Inherit the browser's default :focus-visible styles */
    outline: revert;
    outline-offset: revert;
}

/*
    Permet à un champ de demander à être le prochain à avoir le focus. Facilite la navigation au clavier. Désactivé pour la navigation ARIA.
*/
.request-focus-next {
}

.profil-titre-tableau {
    font-size: 1.75rem; 
    font-weight: 500;
    margin: 0 0 10px;
    padding: 0;
}

.ioda-pushmenu {
    display: none;
    position: fixed; /* stay fixed on scroll */
    top: 0; /* 20px down from the top of the viewport */
    left: 0; /* flush to the left edge */
    width: 20px;
    height: 40px;
    z-index: 9999; /* ensure it’s on top of other content */
}

.ioda-pushmenu-top {
    position: absolute;
    left: 0;
    top: 0.7px;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-bottom: 1px solid grey;
    border-bottom-left-radius: 5px;
    box-shadow: -5px 1px 0 white;
    z-index: 10;
}

.ioda-pushmenu-center {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 10px;
    width: 20px;
    height: 40px;
    background-color: white;
    border: 1px solid grey;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.ioda-pushmenu-bottom {
    position: absolute;
    left: 0;
    top: 49.5px;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-top: 1px solid grey;
    border-top-left-radius: 5px;
    box-shadow: -5px -1px 0 white;
    z-index: 10;
}

.ReferenceBatStruct {
    color: grey;
}