@import 'variables.css';
@import 'statut.css';

* {
    /* font-family: 'Roboto', sans-serif !important; */
    font-family: 'Lexend Deca', sans-serif !important;
}

body {
    user-select: none;
    background-color: #f5f0f4;
}

input,
textarea {
    user-select: all;
}

hr {
    color: #8080802b;
    border-style: solid;
    width: 100%;
    height: 0;
}

pre {
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
}

.detailPaiementCoTitulaire {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.svg-hover:nth-child(1):hover {
    filter: invert(15%) sepia(89%) saturate(4483%) hue-rotate(325deg) brightness(81%) contrast(100%);
}

.svg-hover:nth-child(2):hover {
    filter: invert(15%) sepia(89%) saturate(4483%) hue-rotate(325deg) brightness(81%) contrast(100%);
}

.svg-hover:nth-child(3):hover {
    filter: invert(15%) sepia(89%) saturate(4483%) hue-rotate(325deg) brightness(81%) contrast(100%);
}

/** Début : Bandeau opérateur */

.relativeBandeauOperateur {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 50px 50px 0 50px;
    border-radius: 7px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
    justify-content: space-between;
    padding: 0 30px;
    background: #fff;
}

.stickyBandeauOperateur {
    position: sticky;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 50px 30px 0 50px;
    box-shadow: 0 4px 2px -2px rgb(0 0 0 / 30%);
    justify-content: space-between;
    padding: 0 30px;
    background: #fff;
    top: 154px;
    margin: 0;
    z-index: 12;
}

@media screen and (max-width: 1611px) {
    .stickyBandeauOperateur {
        top: 200px;
    }
}

#titre-statut {
    display: flex;
    align-items: center;
}

#titreBandeauOperateur {
    display: flex;
    align-items: center;
}

.flexEnd {
    display: flex;
    justify-content: center;
}

.bouton-ajoutDoc {
    cursor: pointer;
}

.formulaireBouton {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
}

.div-tableau {
    display: flex;
    gap: 20px;
    padding: 50px;
    width: 100%;
}

.colonne1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    width: 50%;
}

.colonne2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    width: 50%;
}

.colonne3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail {
    display: flex;
    gap: 20px;
}

.detailPartenairePlaque,
.detailCarteGriseOption {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.div-commentaires {
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin: 50px;
    display: none;
}

.boutonsEnteteCommentaire {
    background: var(--gris-clair-color);
    border-radius: 8px 0;
    width: 150px;
    height: 50px;
    font-family: 'Lexend Deca', sans-serif;
    font-style: normal;
    font-weight: 900;
    line-height: 26px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.025em;
    text-transform: capitalize;
    color: var(--blanc-color);
    justify-content: center;
    margin-bottom: 20px;
    cursor: pointer;
}

.boutonsEnteteCommentaireSelected {
    background: var(--rose-color);
}

.boutonsEnteteCommentaire:hover {
    background: #2f2f2f;
    animation: 2s;
}

.boutonsEnteteCommentaireSelected:hover {
    background: var(--rose-color);
}

.boutonsCommentaire {
    background: var(--blanc-color);
    border: 2px solid rgba(76, 76, 76, 0.5);
    box-sizing: border-box;
    color: var(--gris-clair-color);
    font-size: 11px;
    font-weight: bold;
    height: 32px;
    line-height: 12px;
    letter-spacing: 0.025em;
}

.boutonsCommentaire:hover {
    border: 2px solid rgba(76, 76, 76, 0.7);
    transition: all 0.2s ease-out;
}

.boutonsCommentaireDefaut {
    background: rgba(255, 220, 137, 1);
    border: 2px solid #ffb300;
}

.boutonsCommentaireSelected {
    border: 2.2px solid var(--rose-color);
}

.boutonsCommentaireSelected:hover {
    border: 2.2px solid var(--rose-color);
}

.titreCommentaires {
    font-weight: bold;
}

.pulseDefaut {
    background-color: rgb(255, 110, 20);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    transform: scale(1);
    animation: pulseDefaut 2s infinite;
}

.pulseDefaut:hover {
    background-color: rgb(209, 92, 19);
}

#croixDefaut {
    color: #ff6e14;
    cursor: pointer;
}

/* #bouton-switchCommentaires:hover[class~='pulseDefaut'] {
    background-color: rgb(255, 110, 20);
} */

#commentaireClient {
    width: 100%;
}

#textareaCommentaireClientContainer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

#containerGaucheCommentaire {
    padding: 8px 0;
}

#containerDroiteCommentaire {
    padding-right: 0;
}

#bandeauTitreCommentaire {
    padding: 0 0 14px 0;
}

.bandeauTitreCommentaire {
    display: flex;
    justify-content: space-between;
}

#blockEnvoiDocCommentaire {
    display: flex;
    gap: 10px;
    align-items: center;
}

#textareaCommentaireClient {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#labelUploadFileClient {
    display: flex;
    align-items: center;
    gap: 4px;
}

.boutonGris {
    text-transform: uppercase;
    color: white;
    background: var(--gris-clair-color);
    font-size: 13px;
    border: none;
    padding: 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.boutonGris:hover {
    background: #2f2f2f;
}

#iconeCommentaireClient {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#textAreaResumeInterne {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/*.titre-tableau h4 {
    padding-left: 10px;
}*/

#submitUploadDossierTraitement,
#submitUploadDossierANTS {
    background-color: #f0ad4e;
}

#id-boutonValider {
    background-color: #5cb85c;
}

#groupeBoutonsClassiques button {
    cursor: pointer;
}

#detailOptions {
    height: fit-content;
    justify-content: center;
}

#detailPaiement {
    width: 100%;
}

#infoCommande {
    height: fit-content;
}

#infoClient {
    height: fit-content;
}

#totalPaiement {
    height: fit-content;
}

#switchCommentaire {
    justify-content: center;
    cursor: pointer;
    height: 100%;
}

#listePaiements {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#svg {
    display: flex;
}

#boutons {
    display: flex;
    justify-content: space-between;
    padding: 30px 50px 30px 50px;
    gap: 15px;
}

#optionsCommentaireInterne {
    display: grid;
    grid-template-columns: 30px 30px;
    grid-template-rows: repeat(auto-fit, 35px);
    column-gap: 5px;
    padding-left: 8px;
    flex: 2;
}

#optionsCommentaireInterne > * {
    align-self: center;
    justify-self: center;
}

#groupeCommentaires {
    margin-top: 40px;
    display: flex;
    width: 100%;
}

#groupeCommentaireInterne {
    display: flex;
    justify-content: space-between;
}

#groupeCommentaireInterne > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#groupeCommentaireInterne > div > input[src*="delete"] {
    padding-left: 12px;
    align-self: flex-start;
}

.textAreaCommentaire {
    box-shadow: inset 0 4px 5px rgb(0 0 0 / 10%);
    border: none;
    background: var(--blanc-color);
}

/* #groupesBoutons{
    display: flex;
    flex-direction: column;
} */

#groupeBoutonsClassiques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    grid-auto-flow: dense;
    gap: 10px;
}

#gestionCommentaireDefautSelect {
    grid-column: -3 / -1;
}

#gestionCommentaireDefaut ul,
#gestionCommentaireDefaut div,
#contenuCommentaire ul,
#contenuCommentaire div {
    padding-left: 0;
}

#gestionCommentaireDefaut label {
    padding-bottom: 10px;
}

#gestionCommentaireDefaut li {
    overflow-x: auto;
    width: 205%;
    height: 50px;
    margin-bottom: 8px;
}

#gestionCommentaireDefaut p,
#contenuCommentaire p {
    font-weight: bold;
}

#gestionCommentaireDefaut label {
    padding-left: 6px;
}

#gestionCommentaireDefaut input[type='text'] {
    height: 100%;
    border: none;
    background: var(--blanc-color);
    padding: 6px;
    font-size: 14px;
    max-width: 620%;
}

#gestionCommentaireDefaut input[type='checkbox'] {
    cursor: pointer;
}

#gestionCommentaireDefaut input:not([type='checkbox']):not(:disabled),
#texteIntroductionM:not([type='checkbox']):not(:disabled),
#texteIntroductionE:not([type='checkbox']):not(:disabled),
#texteIntroductionME1:not([type='checkbox']):not(:disabled),
#texteIntroductionME2:not([type='checkbox']):not(:disabled),
#texteConclusion:not([type='checkbox']):not(:disabled) {
    cursor: text;
    box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.1);
}

#gestionCommentaireDefaut input:not([type='radio']):disabled,
#texteIntroductionM:not([type='radio']):disabled,
#texteIntroductionE:not([type='radio']):disabled,
#texteIntroductionME1:not([type='radio']):disabled,
#texteIntroductionME2:not([type='radio']):disabled,
#texteConclusion:not([type='radio']):disabled {
    cursor: not-allowed;
}

#containerCommentaireIntro {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

#divIntroduction,
#divIntroductionTransmission,
#divIntroductionTxt {
    width: 100%;
}

#contenuCommentaire {
    width: 100%;
    margin-left: 20px;
}

#boutons-droite {
    display: flex;
    align-items: center;
    gap: 15px;
}

#boutons-gauches {
    display: flex;
}

#bouton-reprendreDossier,
#bouton-rembourserDossier {
    display: none;
    background-color: #5cb85c;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

#bouton-reprendreDossier:hover,
#bouton-rembourserDossier:hover {
    background-color: #4a994a;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

#bouton-abandonnerDossier,
#bouton-annulerRemboursement {
    display: none;
    background-color: rgb(255, 86, 86);
    cursor: pointer;
    transition: all 0.1s ease-out;
}

#bouton-abandonnerDossier:hover,
#bouton-annulerRemboursement:hover {
    background-color: rgb(184, 62, 62);
    cursor: pointer;
    transition: all 0.1s ease-out;
}

#bouton-accederDemarche {
    display: none;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

#bouton-abandonnerEtRembourserDossier {
    display: none;
    background-color: rgb(255, 86, 86);
    cursor: pointer;
    transition: all 0.1s ease-out;
}

#bouton-abandonnerEtRembourserDossier:hover {
    display: none;
    background-color: rgb(184, 62, 62);
    cursor: pointer;
    transition: all 0.1s ease-out;
}

#bandeauStatutCommande {
    margin: 0 50px 0 50px;
}

#boutons-gauche {
    display: flex;
    gap: 15px;
}

#inputTexteCommentaire {
    width: 100%;
}

/* DETAIL PAIEMENT */

.boutonSuivi {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background-color: var(--rose-color);
    color: white;
    gap: 10px;
    border-radius: 4px;
    margin-top: 30px;
    cursor: pointer;
    transition: ease-in-out 0.2s;
    align-items: center;
}

.boutonSuivi:hover {
    transition: ease-in-out 0.2s;
    background-color: #b4074f;
}

.texte-detailPaiement {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.texteGauche-detailPaiement {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

/* DETAIL PLAQUE */

.tableau-titreLigne {
    font-weight: bold;
}

.ligne-tableau-select {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    font-size: 13px;
}

.tableau-select {
    border: none;
    background: inherit;
    font-family: inherit;
    color: inherit;
    text-align-last: right;
    width: 80%;
}

.div-tableau-select {
    display: flex;
    width: 100%;
    gap: 15px;
    margin: 10px 0 10px 0;
}

.bg-gris {
    background-color: #f7f7f7;
}

.tableau-detailPlaques {
    display: flex;
    flex-direction: column;
}

.tableau-soustitreLigne {
    display: flex;
    justify-content: space-between;
}

.tableau-ligne {
    display: flex;
    justify-content: space-between;
}

/* ----------- ACCORDEON ------------ */

.accordion button {
    padding: 0;
}

.accordion .accordion-item button[aria-expanded='true'] {
    border-bottom: 1px solid #cf0b5d;
}

.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    border: none;
    background: none;
    outline: none;
}

.accordion-prix {
    font-weight: normal;
}

.accordion button:hover,
.accordion button:focus {
    cursor: pointer;
}

.accordion button:hover::after,
.accordion button:focus::after {
    cursor: pointer;
}

.accordion button .icon {
    display: inline-block;
    /* position: absolute; */
    position: inherit;
    top: 22px;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 22px;
}

.accordion button[aria-expanded='true'] .icon::after {
    width: 0;
}

.accordion button[aria-expanded='true'] + .accordion-content {
    opacity: 1;
    max-height: 100%;
    transition: all 200ms linear;
    will-change: opacity, max-height;
}

#accordion-button-1[aria-expanded='true'] + .accordion-content {
    display: flex;
}

#player {
    width: 40%;
}

.accordion-titlePrix:last-child {
    margin-bottom: 10px;
}

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}

.accordion .accordion-content p {
    font-size: 1rem;
    font-weight: 300;
    margin: 2em 0;
}

.accordion-content {
    display: flex;
    flex-direction: column;
}

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

#accordion-button-1,
#accordion-button-2,
#accordion-button-3,
#accordion-button-4,
#accordion-button-5 {
    border-radius: 0 !important;
}

@keyframes pulseDefaut {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255, 110, 20);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 5px 10px rgba(199, 26, 93, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(199, 26, 93, 0);
    }
}

/* Liste document telechargé */

#modalListeDoc {
    position: absolute;
    background: var(--blanc-color);
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    margin-left: -160px;
    position: absolute;
    width: 24rem;
    height: 133px;
    z-index: 9;
    border-radius: 8px;
    padding: 10px 16px;
}

/* Texte en défaut */

#texteEtape3Defaut {
    color: var(--rose-color);
}

.inputModele {
    border: none;
    border-bottom: 2px solid var(--rose-color);
    border-radius: 0 !important;
}

#modalDocumentEnvoye {
    flex-direction: row-reverse;
}

#modalElement {
    display: flex;
    gap: 15px;
}

.containerUploadFichier {
    position: relative;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }

    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: scale(1.25);
    }
}

.bulleNotif {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--rose-color);
    border-radius: 999px;
    position: absolute;
    left: -3px;
    top: -3px;
    animation: 1.25s infinite alternate pulse;
}

#embedPdf::-webkit-scrollbar {
    display: none;
}

#nextArea {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}

.inputNextSearch {
    background-color: #f5f5f5;
    border: 1px solid #e1e1e1;
}

#containerBandeauRecherche {
    display: flex;
    gap: 20px;
}

#plaqueBandeau {
    font-weight: bold;
    font-size: 23px;
    text-align: center;
}

.infoDetailCommande {
    margin-left: 10px;
}

@media screen and (max-width: 1780px) {
    .div-tableau,
    .colonne1,
    .colonne2,
    .colonne3,
    .detailPartenairePlaque,
    .detailCarteGriseOption,
    .detail,
    #listePaiements {
        gap: 10px;
    }

    .div-tableau {
        padding: 10px;
    }

    .relativeBandeauOperateur {
        margin: 10px 10px 0 10px;
    }

    #bandeauStatutCommande {
        margin: 0 10px 0 10px;
    }

    .colonne3,
    .colonne2 {
        width: 100%;
    }
}

@media screen and (max-width: 1710px) {
    .detail {
        flex-direction: column;
    }

    .colonne1 {
        width: 100%;
    }
}

@media screen and (max-width: 1112px) {
    #boutons {
        flex-direction: column-reverse;
        gap: 10px;
    }

    #boutons-gauche {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
    }

    #boutons-droite {
        justify-content: space-between;
    }
}

@media screen and (max-width: 960px) {
    .boutons {
        justify-content: center;
    }

    .div-tableau {
        flex-direction: column;
    }
}

@media screen and (max-width: 796px) {
    #boutons-droite {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    #bandeauOperateur {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
}

@media screen and (max-width: 670px) {
    #div-titreBlockDoc {
        flex-direction: column;
    }
}

@media screen and (max-width: 1112px) {
    .boutons {
        justify-content: center;
    }

    #groupeCommentaires {
        align-items: center;
        flex-direction: column;
    }

    .tableau-ligne {
        flex-direction: column;
        align-items: center;
    }

    #containerBandeauRecherche > div:first-child {
        display: none;
    }

    #bottomBarSearchContainer {
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    #containerBandeauRecherche {
        justify-content: center !important;
        width: 90%;
    }

    .inputNextSearch {
        width: 90%;
    }
}

#bandeauStatutCommande,
#bandeauOperateur,
#infoCommande,
#infoClient,
#infoVehicule,
#detailPartenaire,
#detailCarteGrise,
#detailCoTitulaire,
#detailPlaques,
#detailOptions,
#detail-paiement,
.tabPaiements,
#divCommentaires {
    /* box-shadow: 0 0 0 0; */
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    background-color: white;
}

.div-statut {
    border-radius: 20px;
    background-color: white;
}

.etapeBloquee {
    background-color: red !important;
}

.etapeBloquee:hover {
    background-color: rgb(172, 0, 0);
}

h4 {
    text-transform: none !important;
}

#dossierAncien {
    z-index: 10;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
}

#typeEnvoiDossier {
    z-index: 10;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
}

#dossierAncien .wrapper {
    position: relative;
    bottom: 0;
    left: 0;
	background-color: white;
}

#typeEnvoiDossier .wrapper {
    position: relative;
    bottom: 0;
    left: 0;
    min-height: unset !important;
    max-width: unset !important;
}

#dossierAncien #close {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    margin: 5px;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

#typeEnvoiDossier #close {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    margin: 5px;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

#dossierAncien .tex {
    margin-top: 15px;
    height: 18%;
    display: flex;
    flex-flow: column nowrap;
    font-size: 16px;
}

#typeEnvoiDossier .tex {
    margin-top: 15px;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    font-size: 16px;
}

#dossierAncien .tex :not(.titre *) {
    text-align: center;
}

#typeEnvoiDossier .tex :not(.titre *) {
    text-align: center;
}

#dossierAncien .titre {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    font-size: 20px;
    color: #de1166;
    text-decoration: underline;
}

#typeEnvoiDossier .titre {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    font-size: 20px;
    color: #de1166;
}


#dossierAncien .titre p {
    text-justify: distribute;
    width: 69%;
}

#typeEnvoiDossier .titre p {
    text-justify: distribute;
    width: 69%;
}

#dossierAncien #buttonsPopup {
    display: flex;
}

#typeEnvoiDossier #buttonsPopupED {
    display: flex;
}

#dossierAncien button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    width: 100%;
    height: 70px;
    border: solid 1px rgba(0, 0, 0, 0.12);
    font-weight: bold;
    border-bottom: none;
    cursor: pointer;
    color: var(--rose-color);
}

#typeEnvoiDossier button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    width: 100%;
    height: 70px;
    border: solid 1px rgba(0, 0, 0, 0.12);
    font-weight: bold;
    border-bottom: none;
    cursor: pointer;
    color: var(--rose-color);
}

#dossierAncien .btnLeft {
    border-radius: 0 0 0 15px !important;
}

#dossierAncien .btnRight {
    border-radius: 0 0 15px 0 !important;
}

#typeEnvoiDossier .btnLeft {
    border-radius: 0 0 0 15px !important;
}

#typeEnvoiDossier .btnRight {
    border-radius: 0 0 15px 0 !important;
}

#tableOptions {
    width: 100%;
}

#popUpRechercheSociete {
    width: 30%;
    height: 50%;
    padding: 2% 0;
    border-radius: 20px;
    background-color: white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

#popUpRechercheSociete form {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 5%;
}

#popUpRechercheSociete form button {
    width: 80%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#popUpRechercheSociete #rechercheSociete {
    width: 100%;
    line-height: 3rem;
    padding: 2%;
}

#popUpRechercheSociete #typeSocieteWrapper input {
    display: none;
}

#popUpRechercheSociete fieldset {
    border-bottom: rgba(0, 0, 0, 0.25) solid 1px;
    padding-bottom: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: max-content;
    gap: 10px;
}

#popUpRechercheSociete #typeSocieteWrapper label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
}

#popUpRechercheSociete #typeSocieteWrapper span {
    width: 100%;
    height: 80%;
    padding: 5% 10%;
    cursor: pointer;
    border: #cf0b5d solid 1px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

#popUpRechercheSociete #typeSocieteWrapper input:checked + span {
    background-color: #cf0b5d !important;
    color: white;
}

#popUpRechercheSociete #typeSocieteWrapper label:hover span {
    background-color: #cf0b5da0;
    color: white;
}

.noDocs:hover {
    text-decoration: underline;
    color: #014c8c;
    cursor: pointer;
}

.warningRIB {
    color: red;
    font-weight: bold;
    position: relative;
}

.warningRIB th {
    display: flex;
    width: 80%;
}

.warningRIB th::after {
    content: '';
    background-image: url('/images/warning.svg');
    display: inline-block;
    height: 100%;
    aspect-ratio: 1;
    vertical-align: middle;
    margin-left: 3%;
}

.popupWarningRIB {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(-50%);
    display: grid;
    pointer-events: none;
    place-items: center;
    box-sizing: border-box;
    height: 50px;
    padding: 10px;
    opacity: 0;
    border-radius: 5px;
    font-weight: normal;
    background-color: #f5f5f5;
    color: black;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    transition: opacity 0.1s ease-in-out;
}

.warningRIB th:hover .popupWarningRIB {
    opacity: 1;
    pointer-events: all;
}

#ouvrirBandeauDocumentLateral {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    z-index: 50;
    transform: rotate(-90deg);

    border-left: 3px solid var(--rose-color);
    border-right: 3px solid var(--rose-color);
    border-bottom: 3px solid var(--rose-color);
    top: 53%;

    width: 300px;
    height: 40px;

    margin-left: 15px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 0 0 20px 20px;
    background-color: white;
    transform-origin: left;
    font-size: 1.4rem;
    transition: all 0.4s ease-in-out;
}

#ouvrirBandeauDocumentLateral:hover {
    margin-left: 20px;
    cursor: pointer;
}

#ouvrirBandeauDocumentLateral svg {
    transform: rotate(90deg);
}

#bandeauDocumentLateral {
    background-color: white;
    color: black;
    border-top: 3px solid var(--rose-color);
    border-right: 3px solid var(--rose-color);
    border-bottom: 3px solid var(--rose-color);
    width: 800px;
    margin-left: -800px;
    height: 100%;
    z-index: 49;
    position: fixed;
    top: 0;
    text-align: left;
    border-radius: 0 35px 35px 0;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease-in-out;
}

#allDivDocuments {
    display: flex;
    flex-direction: column;

    padding: 0 10px 10px 10px;

    overflow-x: hidden;
    height: 100%;
}

#allDivDocuments div.etatDocumentLateral {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-height: 25%;
}

.titleBandeauDocuments {
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titleBandeauDocuments .btn {
    height: 25px;
    gap: 10px;
    align-items: center;
    margin: 0;
    margin-right: 25px;
    justify-content: space-between;
    color: #000;
}

.lineBasTitleBandeauDocuments {
    width: 98%;
    height: 2px;
    background-color: #000;
}

.itemDocumentLateral {
    /* display: flex; */
    display: none;
    justify-content: space-between;
    align-items: center;

    margin-left: 0.2%;

    width: 97.8%;
    height: 30px;

    background-color: rgba(238, 238, 238, 0.93);
    border-radius: 8px;
}

.itemDocumentLateral .buttonItemDocumentLateral {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5px;
    margin-right: 8px;
    height: 30px;
}

.contenuDocumentsBandeauLateral {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: auto;
    overflow-x: hidden;
}

/* Styles pour la barre de défilement */
.contenuDocumentsBandeauLateral::-webkit-scrollbar {
    width: 10px;
    /* Largeur de la barre de défilement */
}

.contenuDocumentsBandeauLateral::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Couleur de fond de la piste de défilement */
}

.contenuDocumentsBandeauLateral::-webkit-scrollbar-thumb {
    background-color: var(--rose-color);
    /* Couleur de la poignée de défilement */
    border-radius: 10px;
}

.contenuDocumentsBandeauLateral::-webkit-scrollbar-thumb:hover {
    background-color: #780032;
    /* Couleur de la poignée de défilement au survol */
}

.buttonItemDocumentLateral .btn {
    display: flex;
    justify-content: center;
    align-items: center;

    color: #000;
    height: 25px;

    margin-left: 0px !important;
    margin-top: 0px !important;
    padding: 1px 6px;
    border-radius: 8px !important;
}

.buttonItemDocumentLateral .btn svg {
    margin-right: 10px;
}

.grisFonceItemDocument {
    background-color: #d9d9d9;
}

.grisClairItemDocument {
    background-color: rgba(238, 238, 238, 0.93);
}

#divDocumentsRecus button.btn.btn-danger {
    display: none;
}

#divDocumentsNonRecus button.btn.btn-warning {
    display: none;
}

#divDocumentsInvalides button.btn.btn-warning {
    display: none;
}

#divDocumentsRecus button.btn.btn-info {
    display: none;
}

#divDocumentsInvalides button.btn.btn-info {
    display: none;
}

#divDocumentsNonRecus button.btn.btn-success {
    display: none;
}

#divDocumentsRecus .documentValidee {
    background-color: #5cb85c;
}

#divDocumentsRecus .documentValidee button.btn.btn-success {
    display: none;
}

#divDocumentsRecus .documentValidee svg.svgValideeDocument path,
#divDocumentsRecus .documentValidee svg.svgErreurDocument path,
#divDocumentsRecus .documentValidee svg.svgInvalideeDocument path {
    fill: black;
}

.itemDocumentLateral svg.svgValideeDocument,
.itemDocumentLateral svg.svgErreurDocument,
.itemDocumentLateral svg.svgInvalideeDocument {
    margin-left: 10px;
}

#divDocumentsRecus svg.svgErreurDocument,
#divDocumentsRecus svg.svgInvalideeDocument {
    display: none;
}

#divDocumentsNonRecus svg.svgValideeDocument,
#divDocumentsNonRecus svg.svgInvalideeDocument {
    display: none;
}

#divDocumentsInvalides svg.svgValideeDocument,
#divDocumentsInvalides svg.svgErreurDocument {
    display: none;
}

#divDocumentsAutres svg.svgErreurDocument path {
    fill: black;
}

.titleItemDocumentLateral {
    display: flex;
    align-items: center;
    gap: 5px;
}

#divSelectDocumentBandeau {
    display: flex;
    align-items: center;

    height: 30px;
    gap: 20px;
}

#divDocumentsAutres .itemDocumentLateral {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-left: 0.2%;

    width: 97.8%;
    height: 30px;

    background-color: rgba(238, 238, 238, 0.93);
    border-radius: 8px;
}

#divSelectDocumentBandeau select,
#divSelectDocumentBandeau .btn {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 30px;

    border-radius: 5px;
    background-color: rgba(238, 238, 238, 0.93);
    border: 0;
}

#divSelectDocumentBandeau select {
    width: 265px;
    cursor: pointer;
}

#divSelectDocumentBandeau select option {
    border-radius: 0;
}

#divSelectDocumentBandeau .btn svg {
    margin-right: 13px;
}

#modalInvalidation {
    background-color: #fff;
    padding: 10px;
    width: 300px;
    height: 70px;
    display: flex;
    visibility: hidden;
    z-index: 100;
    gap: 5px;
    border-radius: 6px;
    align-items: center;
    box-shadow: 8px 11px 13px 0px rgba(0, 0, 0, 0.25);
}

#modalInvalidation select {
    flex: 5;
    height: 100%;
    border-radius: 3px;
    border: 1px solid #b9b9b9;
}

#modalInvalidation button {
    flex: 1;
    height: 100%;
    border-radius: 3px;
    aspect-ratio: 1;
    background-color: #acacac;
    border: none;
    cursor: not-allowed;
}

#modalInvalidation button svg {
    width: 80%;
    aspect-ratio: 1;
}

#modalInvalidation button.valide {
    background-color: #72d476;
    cursor: pointer;
}

#modalDocaAjouter {
    background-color: #fff;
    padding: 10px;
    width: 300px;
    height: 70px;
    display: flex;
    visibility: hidden;
    z-index: 100;
    gap: 5px;
    border-radius: 6px;
    align-items: center;
    box-shadow: 8px 11px 13px 0px rgba(0, 0, 0, 0.25);
}

#modalDocaAjouter select {
    flex: 5;
    height: 100%;
    border-radius: 3px;
    border: 1px solid #b9b9b9;
}

#modalDocaAjouter button {
    flex: 1;
    height: 100%;
    border-radius: 3px;
    aspect-ratio: 1;
    background-color: #acacac;
    border: none;
    cursor: not-allowed;
}

#modalDocaAjouter button svg {
    width: 80%;
    aspect-ratio: 1;
}

#modalDocaAjouter button.valide {
    background-color: #72d476;
    cursor: pointer;
}

#modalClasserDoc {
    background-color: #fff;
    padding: 10px;
    width: 300px;
    height: 70px;
    display: flex;
    visibility: hidden;
    z-index: 100;
    gap: 5px;
    border-radius: 6px;
    align-items: center;
    box-shadow: 8px 11px 13px 0px rgba(0, 0, 0, 0.25);
}

#modalClasserDoc select {
    flex: 5;
    height: 100%;
    border-radius: 3px;
    border: 1px solid #b9b9b9;
}

#modalClasserDoc button {
    flex: 1;
    height: 100%;
    border-radius: 3px;
    aspect-ratio: 1;
    background-color: #acacac;
    border: none;
    cursor: not-allowed;
}

#modalClasserDoc button svg {
    width: 80%;
    aspect-ratio: 1;
}

#modalClasserDoc button.valide {
    background-color: #72d476;
    cursor: pointer;
}

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

.tableVoitureTR {
    display: flex;
    justify-content: space-between;
    flex: 0 0 50%;
}

.tableVoitureTR td,
.tableVoitureTR td > * {
    width: 100%;
    padding-left: 10px;
    padding-right: 5px;
}

.tableVoitureTR th {
    width: 0%;
}

/* Erreur MAIS CA MARCHE */
table#tableVehicule tbody :nth-child(4n + 1 of tr:not(.invisibleTrTableau)),
table#tableVehicule tbody :nth-child(4n + 2 of tr:not(.invisibleTrTableau)) {
    background-color: #f5f5f5;
    /* background-color: #00FFFF !important; */
}

/* Erreur MAIS CA MARCHE */
table#tableVehicule tbody :nth-child(4n + 3 of tr:not(.invisibleTrTableau)),
table#tableVehicule tbody :nth-child(4n + 4 of tr:not(.invisibleTrTableau)) {
    /* background-color: #F5F5F5; */
    background-color: #fff;
}

.invisibleTrTableau {
    display: none !important;
}

table tbody tr {
    display: flex;
}

table tbody :nth-child(2n + 1 of tr:not(.invisibleTrTableau)) {
    background-color: #f5f5f5;
    /* background-color: #00FFFF !important; */
}

table tbody tr:hover {
    background: #ededed !important;
}

tr:has(input[value='']) th {
    color: var(--rose-color);
}

input[disabled] {
    color: #676767;
}

/*! Bandeau statut commande */

.bouton-statutOff {
    background-color: #8c8c8c;
    border: 1px solid #8c8c8c;
    cursor: not-allowed;
    pointer-events: none;
}

.bouton-statutOrange {
    background-color: #ff6e14;
    border: 1px solid #ff6e14;
    cursor: pointer;
}

/*! Bandeau statut commande */