.select2-container--default .select2-selection--multiple {
    border: solid var(--primary) 1px !important;
    margin-bottom: 1rem !important;
    outline: none;
    height: 3.5rem;
    border-radius: 1rem;
    overflow-y: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--rgba-primary-1) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 1rem;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 15px;
    padding: 5 15px;
}

.select2-container--default .select2-selection--single {
    border: solid var(--primary) 1px !important;
    margin-bottom: 1rem !important;
    outline: none;
    height: 3.5rem;
    border-radius: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__choice {
    background-color: var(--rgba-primary-1) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 1rem;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 15px;
    padding: 5 15px;
}

.select2-container--default .selection {
    margin: 0;
}

.table-sm td,
.table-sm th {
    padding: 0.15rem !important;
    font-size: 0.85rem !important;
}

.btn-xs {
    padding: 0.3rem 0.5rem !important;
}

.dropdown-menu {
    min-width: 15rem !important;
}

.bg-pylones {
    background-image: url("../img/pylones.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.error {
    font-weight: bold;
    color: red;
}

textarea.error,
select.error,
input.error {
    background: rgb(251, 227, 228);
    border: 1px solid #fbc2c4;
    color: red;
}

textarea {
    min-height: 5rem !important;
}

.minicolors-swatch {
    margin-top: 10px;
    margin-inline-start: 10px;
}

#loader-spin {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: none;
}

#loader-spin::after {
    content: "";
    display: block;
    position: absolute;
    left: 48%;
    top: 40%;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: black;
    border-top-color: transparent;
    border-width: 4px;
    border-radius: 50%;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
}

.text-accent {
    color: rgb(18, 18, 175) !important;
}

.asColorPicker-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 100%;
}

.ck-content ul,
.ck-content ol {
    list-style-position: initial;
}

.ck-content li {
    list-style-type: initial;
    padding-inline-start: 1em;
}

.ck-content li::marker {
    padding-inline-start: 1em;
}

.kanban-board,
.kanban-item {
    border-radius: 1rem;
}

/* Commenté car casse le layout de FullCalendar */
/* table th,
.table td {
    padding: 0.325rem 0.625rem !important;
} */

.fc-event,
.external-event {
    text-align: left !important;
}

.fc-event-bdt {
    opacity: 0.9;
}

.bg-medium-green {
    background-color: #24bb85 !important;
}

.btn-clear-z {
    z-index: unset !important;
}

/* FAncy Tree */

table.fancytree-ext-table tbody tr.fancytree-active {
    background-color: #c2cdee !important;
}

.btn-bdt-INITIALISATION {
    background-color: #ff7f27;
    color: #fff;
}

.btn-bdt-PREPARATION {
    background-color: #ffc90e;
    color: #000;
}

.btn-bdt-PROGRAMME {
    background-color: #fff200;
    color: #000;
}

.btn-bdt-SIGNE {
    background-color: #9ef700;
    color: #000;
}

.btn-bdt-RECEPTION {
    background-color: #2bb400;
    color: #000;
}

.btn-bdt-EN-COURS {
    background-color: #186500;
    color: #fff;
}

.btn-bdt-SOLDE {
    background-color: #2359fa;
    color: #fff;
}

.btn-bdt-CLOTURE {
    background-color: #173799;
    color: #fff;
}

.btn-bdt-outline-INITIALISATION {
    background-color: transparent;
    border-color: #ff7f27;
}

.btn-bdt-outline-PREPARATION {
    background-color: transparent;
    border-color: #ffc90e;
}

.btn-bdt-outline-PROGRAMME {
    background-color: transparent;
    border-color: #fff200;
}

.btn-bdt-outline-SIGNE {
    background-color: transparent;
    border-color: #9ef700;
}

.btn-bdt-outline-RECEPTION {
    background-color: transparent;
    border-color: #2bb400;
}

.btn-bdt-outline-EN-COURS {
    background-color: transparent;
    border-color: #186500;
}

.btn-bdt-outline-SOLDE {
    background-color: transparent;
    border-color: #2359fa;
}

.btn-bdt-outline-CLOTURE {
    background-color: transparent;
    border-color: #173799;
}

.dataTables_wrapper .dataTables_filter input[type*="search"] {
    border: solid #e6e8ed;
    border-radius: 15px 15px 15px 15px;
}

input[type="checkbox"][tri-state]:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20512%22%3E%3C!--!Font%20Awesome%20Free%206.5.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202024%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M242.7%20256l100.1-100.1c12.3-12.3%2012.3-32.2%200-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5%200L176%20189.3%2075.9%2089.2c-12.3-12.3-32.2-12.3-44.5%200L9.2%20111.5c-12.3%2012.3-12.3%2032.2%200%2044.5L109.3%20256%209.2%20356.1c-12.3%2012.3-12.3%2032.2%200%2044.5l22.2%2022.2c12.3%2012.3%2032.2%2012.3%2044.5%200L176%20322.7l100.1%20100.1c12.3%2012.3%2032.2%2012.3%2044.5%200l22.2-22.2c12.3-12.3%2012.3-32.2%200-44.5L242.7%20256z%22%2F%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

.gm-style-iw-chr {
    position: absolute;
    right: 0;
    z-index: 1;
}

.gm-style .gm-style-iw-c {
    padding: 0;
}

/* FORM-1 - Legende style */
.form-1-box {
    padding-top: 30px;
    text-align: left;
}

.form-1-box legend {
    font-size: 1.5rem;
    line-height: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #555;
    float: none !important;
}

.form-1-box .form-check-label {
    line-height: 1.5;
    vertical-align: top;
}

.form-1-box input[type="text"],
.form-1-box input[type="email"],
.form-1-box input[type="password"] {
    background: none;
    border: 1px solid #ddd;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #888;
    box-shadow: none;
}

.form-1-box input[type="text"]:focus,
.form-1-box input[type="email"]:focus,
.form-1-box input[type="password"]:focus {
    outline: 0;
    background: none;
    border: 1px solid #db5d50;
    box-shadow: none;
}

.form-1-box input[type="text"]::-moz-placeholder,
.form-1-box input[type="email"]::-moz-placeholder,
.form-1-box input[type="password"]::-moz-placeholder {
    color: #bbb;
    font-style: italic;
}

.form-1-box input[type="text"]:-ms-input-placeholder,
.form-1-box input[type="email"]:-ms-input-placeholder,
.form-1-box input[type="password"]:-ms-input-placeholder {
    color: #bbb;
    font-style: italic;
}

.form-1-box input[type="text"]::-webkit-input-placeholder,
.form-1-box input[type="email"]::-webkit-input-placeholder,
.form-1-box input[type="password"]::-webkit-input-placeholder {
    color: #bbb;
    font-style: italic;
}

.form-1-box button.btn-customized {
    margin-top: 1rem;
    padding: .75rem 1.5rem;
    background: #db5d50;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    box-shadow: none;
}

.form-1-box button.btn-customized:hover,
.form-1-box button.btn-customized:active,
.form-1-box button.btn-customized:focus,
.form-1-box button.btn-customized:active:focus,
.form-1-box button.btn-customized.active:focus,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active,
.form-1-box button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    background: #ca594d;
    border: 0;
    color: #fff;
    box-shadow: none;
}

/* ''Required'' */
label:has(.form-control[required])::after,
label:has(+.form-control[required])::after {
    content: '*';
    color: red;
    margin-left: 5px;
}

.table-hover-custom tbody tr:hover {
    cursor: pointer;
    background-color: #0f448b !important;
    color: white !important;
    font-weight: bold;
}

/* ******************
    Loader spinner
******************* */
.spinner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner::after {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: black;
    border-top-color: transparent;
    border-width: 4px;
    border-radius: 50%;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.modal-xxl {
    width: 95vw;
    max-width: none;
}

/*
 * Menu horizontal : il reste à sa place dans la page et défile avec elle.
 *
 * Le thème (`xhtml/js/custom.js`) ajoute `.fixed` au menu dès qu'on dépasse
 * l'en-tête : en `position: fixed`, le menu sortait du flux, le contenu remontait
 * d'autant et passait dessous. Sur une page à peine plus haute que l'écran, la
 * page raccourcie repassait sous le seuil, le menu redevenait normal, la page
 * rallongeait... et l'écran vibrait. `.fixed` est désormais sans effet.
 */
[data-sidebar-position="fixed"][data-layout="horizontal"] .dlabnav,
[data-sidebar-position="fixed"][data-layout="horizontal"] .dlabnav.fixed {
    position: relative;
    top: auto;
    left: auto;
    padding: 0;
    /* Ses sous-menus s'ouvrent au-dessus du contenu (le thème le laissait à 2, à
       égalité avec des cartes qui passaient devant)... */
    z-index: 10;
}

/* ...mais sous l'en-tête, dont le menu du profil s'ouvre par-dessus, et sous le
   logo, posé sur l'en-tête. */
[data-sidebar-position="fixed"][data-layout="horizontal"] .header {
    z-index: 11;
}

[data-sidebar-position="fixed"][data-layout="horizontal"] .nav-header {
    z-index: 12;
}

/*
 * Hauteur du contenu.
 *
 * Le thème (`xhtml/js/custom.js`, `handleMinHeight`) pose en style en ligne
 * `min-height: <hauteur de la fenêtre du navigateur> + 60px` sur `.content-body` :
 * toute page dépassait l'écran, se laissait défiler dans le vide et déclenchait le
 * menu collé. Le pied de page reste en bas par une colonne flexible, sans hauteur
 * forcée.
 *
 * `overflow: clip` (le thème pose `hidden`) : il coupe pareil sans créer de
 * conteneur de défilement, ce qui laisse fonctionner les éléments collés des
 * écrans (panneau de droite des incidents).
 */
#main-wrapper {
    overflow: clip;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-wrapper > .content-body {
    flex: 1 0 auto;
    /* Le thème lui donne `z-index: 0`, sans effet tant qu'il n'était pas positionné.
       Élément flex, il en ferait un contexte d'empilement : les modales du contenu
       (z-index 1003) passeraient sous le fond grisé (1002), rattaché à `body`. */
    z-index: auto;
}

.content-body {
    min-height: 0 !important;
}

/*
 * Menu en barre latérale (écrans de moins de 1024 px, où le thème passe le menu en
 * vertical : `manageResponsiveSidebar`, dans `xhtml/js/custom.min.js`).
 */

/* Les gabarits imbriquent deux `.content-body` (le cadre et le `<main>` de l'écran) :
   le thème décalait chacun de la largeur de la barre latérale, soit un vide de
   cette largeur entre la barre et le contenu. Seul le cadre se décale. */
.content-body .content-body {
    margin-left: 0;
}

/* Le logo garde la largeur de son cadre, réduit à la barre latérale. */
.nav-header .brand-logo img {
    max-width: 100%;
    height: auto;
}

/* Le profil est déjà dans l'en-tête : celui de la barre latérale faisait doublon. */
.dlabnav .header-profile2 {
    display: none;
}

/* Le bouton du menu est sur le bandeau bleu : ses traits (noirs, puis bleu foncé
   une fois le menu ouvert) s'y voyaient mal ou disparaissaient, et rien
   n'indiquait comment refermer le menu. */
.nav-header .hamburger .line {
    /* `!important` : le thème le pose lui-même en mode réduit. */
    background-color: #fff !important;
}

/* Menu en surimpression (moins de 768 px) : assez large pour que les libellés
   (« Préparation Consignation & Travaux ») tiennent sur une ligne. */
[data-sidebar-style="overlay"] .dlabnav {
    width: min(20rem, 85vw);
}

/* Menu vertical : un libellé sur deux lignes revenait sous l'icône. L'icône et le
   texte côte à côte, le texte garde son retrait (la flèche reste à sa place, elle
   est positionnée par le thème). */
[data-layout="vertical"] .dlabnav .metismenu > li > a {
    display: flex;
    align-items: center;
}

[data-layout="vertical"] .dlabnav .metismenu > li > a > .nav-text {
    padding-right: 1.25rem;
}

/* Barre réduite (768 à 1023 px) : elle restait en `absolute` sur toute la hauteur
   de la page et défilait avec elle ; en bas de page, plus moyen d'atteindre les
   premières entrées. Collée sous le logo (lui-même fixe), elle reste à l'écran.
   Pas de défilement propre : il couperait les sous-menus qui s'ouvrent à droite
   au survol. Les entrées sont donc resserrées pour tenir sur un écran de portable
   (13 entrées en 650 px environ). */
[data-layout="vertical"][data-sidebar-style="mini"] .dlabnav {
    /* `!important` : le thème y pose `position: absolute !important`. */
    position: fixed !important;
    top: 0;
    /* Sous le logo : hauteur du bandeau du thème dans ce mode. */
    padding-top: 5.5rem;
    height: 100vh;
}

[data-layout="vertical"][data-sidebar-style="mini"] .dlabnav .metismenu > li > a {
    justify-content: center;
    padding: 0.625rem 0.875rem;
}

/* Le logo, à la largeur de la barre en mode vertical, touchait ses bords. */
[data-layout="vertical"] .nav-header .brand-logo {
    padding: 0 0.75rem;
}

/* Téléphone (moins de 768 px) : le menu ne s'ouvre que par le bouton du bandeau.
   Le logo et ce bouton restent fixés en haut, mais le bandeau bleu défilait : le
   bouton blanc se retrouvait sur le fond blanc de la page. Le bandeau reste donc
   collé en haut sur ce format seulement. */
[data-layout="vertical"][data-sidebar-style="overlay"] .header {
    position: sticky;
    top: 0;
}

/* ...et les en-têtes de tableau que DataTables colle en haut au défilement
   (FixedHeader, `top: 0` posé en ligne) passent sous ce bandeau au lieu de le
   recouvrir. */
[data-layout="vertical"][data-sidebar-style="overlay"] .dtfh-floatingparent-head {
    /* Hauteur du bandeau du thème dans ce mode. */
    top: 5rem !important;
}