/*--- Toutes les pages ---*/
@font-face {
    font-family: Helvetica_YTP;
    src: url(../media/font/Helvetica_Roman.ttf);
 }

html,body {
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* font-family: Helvetica_YTP; */
    font-family: 'Open Sans', sans-serif;
    background-color: #cdcdcd;
}

.input-patternStyle:invalid {
    /* background-image: url('../media/icon_invalide.png');
    background-repeat: no-repeat;
    background-position: right; */
    background-color : #ee8a8a;
}

.input-patternStyle:valid{
    /* background-image: url('../media/icon_valide.png');
    background-repeat: no-repeat;
    background-position: right; */
    background-color : #b3f2b3;
}

.input-patternStyleSimple:invalid {
    /* background-image: url('../media/icon_invalide.png');
    background-repeat: no-repeat;
    background-position: right; */
    background-color : #ee8a8a;
}

.style-bouton {
    border: 1px solid black;
    /* background-color: #d5cfe4; */
    background-color: #7979C7;
    color: white;
    text-decoration: none;
    padding: 5px 40px;
    font-size: 17px;
    border-radius: 4px;
    transition-duration: 0.4s;
    cursor: pointer;
    font-weight: bold;
}

.style-boutonPetit {
    padding: 5px 40px;
}

.style-boutonAjout {
    padding: 0px 10px;
}

.style-bouton:hover {
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16);
}

.style-bouton:disabled {
    color: white;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    transition-duration: 0s;
}

.table-ListePrincipal {
    border-collapse: separate;
    width: max-content;
    min-width: 100%;
    border-spacing: 0;
}

.tr-entete {
    color: white;
    background-color: #4C4B78;
    font-weight: normal;
    position: sticky;
    top: 0;
    z-index: 2;
}
/* --- TODO --- */
.tr-composant {
    background-color:#E2E1E1;
    padding: 5px;
}

/* .tr-composant1 {
    background-color:#e2e2e2;
    padding: 5px;
}

.tr-composant4 {
    background-color:#cfcfcf;
    padding: 5px;
}

.tr-composant2 {
    background-color:#bbbbbb;
    padding: 5px;
}

.tr-composant3 {
    background-color:#a1a1a1;
    padding: 5px;
} */

.tr-composant1 {
    background-color:rgba(255,246,157,0.15);
    padding: 5px;
}

.tr-composant4 {
    background-color:rgba(204,255,141,0.15);
    padding: 5px;
}

.tr-composant2 {
    background-color:rgba(200,255,251,0.15);
    padding: 5px;
}

.tr-composant3 {
    background-color:rgba(159,157,255,0.15);
    padding: 5px;
}

.td-Modif {
    width: 10%;
}

.td-entete {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    background-color: inherit;
    padding: 5px;
}
.td-composant {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    background-color: inherit;
    padding: 5px;
}

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

table th:first-child,
table td:first-child {
  border-left: 1px solid black;
}

.td-entetePetit {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    background-color: inherit;
    padding: 5px;
    height: 20px;
    width: 25px;
}

.td-composantPetit {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    background-color: inherit;
    padding: 5px;
    height: 20px;
    width: 25px;
}

.th-CheckBox, .th-QT {
    text-align: center;
}

.td-composant {
    background-color: inherit;
}

.div-NouvelleAjout {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.Erreur {
    color: #D8000C;
    background-color: #FFBABA;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    background-image: url('../media/error_logo.png');
    border: 1px solid;
    padding: 10px 10px 10px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 5px;
}

.Valide {
    color: #4F8A10;
    background-color: #DFF2BF;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    background-image: url('../media/valid_logo.png');
    border: 1px solid;
    padding: 10px 10px 10px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 5px;
}

.button_messageCroixErreur {
    background-color: #fdcdcd;
    border: 1px solid #D8000C;
    border-radius: 5px;
    color: #D8000C;
    font-size: 17px;
}

.button_messageCroixValide {
    background-color: #e5f3ce;
    border: 1px solid #4F8A10;
    border-radius: 5px;
    color: #4F8A10;
    font-size: 17px;
}

.FormatText {
    font-family: inherit;
    color: black;
    font-size: 17px;
    text-decoration: none;
}

.div-scroll {
    overflow-y: scroll;
}

.cb-CheckBoxListe {
    width: 15px;
    height: 15px;
}

.cb-CheckBoxListe:checked {
    background: #4C4B78;
}
/*--- Toutes les pages avec des listes ---*/

.div-ListeGenerique {
    display: flex;
    height: 100%;
    overflow: hidden;
    color: black;
    font-family: inherit;
    font-size: 17px;
}

.div-SelectionGenerique {
    width: 40%;
    padding: 20px;
    font-size: 17px;
    color: black;
    font-family: inherit;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.div-InfoGenerique {
    width: 60%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.div-Recherche {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.input-Recherche {
    font-size: 17px;
    height: 26px;
    width: 98%;
}

.checkbox-Recherche {
    height: 26px;
    width: 26px;
}

.select-Recherche {
    font-size: 17px;
    height: 32px;
    width: 100%;
}

.boutonTrierPlus {
    /* margin-left: 10px; */
    width: 50%;
    display: flex;
    justify-content: center;
}

.boutonTrier {
    padding: 5px 20px;
    width: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.div-triCase {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.div-boutonListePagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.div-pagination {
    /* width: 50%; */
    display: flex;
    align-items: center;
    border: 1px solid black;
    background-color: #7979C7;
    color: white;
    text-decoration: none;
    font-size: 17px;
    border-radius: 4px;
    font-weight: bold;
}

.but-pagination {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
}

.but-pagination:disabled {
    background: none;
    border: none;
    font-size: 24px;
    color: #cdcdcd;
}

.span-pagination {
    font-size: 20px;
    padding-left: 3px;
    padding-right: 5px;
}

/*--- Liste Composant ---*/
.gridRechercheComposantBase {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.gridRechercheComposant {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.div1Base { grid-area: 1 / 1 / 2 / 3;}
.div2Base { grid-area: 1 / 3 / 2 / 7;}
.div3Base { grid-area: 1 / 7 / 2 / 10;}
.div4Base { grid-area: 1 / 10 / 2 / 11;}
.div5Base { grid-area: 1 / 1 / 1 / 1;}
.div6Base { grid-area: 1 / 1 / 1 / 1;}
.div7Base { grid-area: 1 / 1 / 1 / 1;}
.div8Base { grid-area: 1 / 1 / 1 / 1;}
.div9Base { grid-area: 1 / 1 / 1 / 1;}
.div10Base { grid-area: 1 / 1 / 1 / 1;}
.div11Base { grid-area: 1 / 1 / 1 / 1;}
.div12Base { grid-area: 1 / 1 / 1 / 1;}
.div13Base { grid-area: 1 / 1 / 1 / 1;}
.div14Base { grid-area: 1 / 1 / 1 / 1;}
.div15Base { grid-area: 1 / 1 / 1 / 1;}
.div16Base { grid-area: 1 / 1 / 1 / 1;}
    
.div1 { grid-area: 1 / 1 / 2 / 4; }
.div2 { grid-area: 1 / 5 / 2 / 10; }
.div3 { grid-area: 8 / 9 / 8 / 11; }
.div4 { grid-area: 1 / 10 / 2 / 11; }
.div5 { grid-area: 2 / 1 / 3 / 4; }
.div6 { grid-area: 2 / 5 / 3 / 10; }
.div7 { grid-area: 3 / 1 / 4 / 4; }
.div8 { grid-area: 3 / 5 / 4 / 10; }
.div9 { grid-area: 4 / 1 / 5 / 4; }
.div10 { grid-area: 4 / 5 / 5 / 10; }
.div11 { grid-area: 5 / 1 / 6 / 5; }
.div12 { grid-area: 5 / 6 / 6 / 10; }
.div13 { grid-area: 6 / 1 / 7 / 5;}
.div14 { grid-area: 6 / 6 / 7 / 10;}
.div15 { grid-area: 7 / 1 / 7 / 5;}
.div16 { grid-area: 7 / 6 / 7 / 10;}

/*--- Liste Produit ---*/
.gridRechercheProduitBase {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.gridRechercheProduit {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.div1PBase { grid-area: 1 / 1 / 2 / 3;}
.div2PBase { grid-area: 1 / 3 / 2 / 7;}
.div3PBase { grid-area: 1 / 7 / 2 / 10;}
.div4PBase { grid-area: 1 / 10 / 2 / 11;}
.div5PBase { grid-area: 1 / 1 / 1 / 1;}
.div6PBase { grid-area: 1 / 1 / 1 / 1;}
.div7PBase { grid-area: 1 / 1 / 1 / 1;}
.div8PBase { grid-area: 1 / 1 / 1 / 1;}
.div9PBase { grid-area: 1 / 1 / 1 / 1;}
.div10PBase { grid-area: 1 / 1 / 1 / 1;}
.div11PBase { grid-area: 1 / 1 / 1 / 1;}
.div12PBase { grid-area: 1 / 1 / 1 / 1;}
.div13PBase { grid-area: 1 / 1 / 1 / 1;}
.div14PBase { grid-area: 1 / 1 / 1 / 1;}
.div15PBase { grid-area: 1 / 1 / 1 / 1;}
.div16PBase { grid-area: 1 / 1 / 1 / 1;}

.div1P { grid-area: 1 / 1 / 2 / 4; }
.div2P { grid-area: 1 / 5 / 2 / 10; }
.div3P { grid-area: 8 / 9 / 8 / 11; }
.div4P { grid-area: 1 / 10 / 2 / 11; }
.div5P { grid-area: 2 / 1 / 3 / 4; }
.div6P { grid-area: 2 / 5 / 3 / 10; }
.div7P { grid-area: 3 / 1 / 4 / 5; }
.div8P { grid-area: 3 / 5 / 4 / 10; }
.div9P { grid-area: 4 / 1 / 5 / 5; }
.div10P { grid-area: 4 / 6 / 5 / 10; }
.div11P { grid-area: 5 / 1 / 6 / 5; }
.div12P { grid-area: 5 / 6 / 6 / 10; }
.div13P { grid-area: 6 / 1 / 7 / 5;}
.div14P { grid-area: 6 / 6 / 7 / 10;}
.div15P { grid-area: 7 / 1 / 8 / 5;}
.div16P { grid-area: 7 / 6 / 8 / 10;}

/*--- Liste Nouveau/Modif Produit ---*/

.gridRechercheModifProduitBase {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.gridRechercheModifProduit {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.div1MPBase { grid-area: 1 / 1 / 2 / 3;}
.div2MPBase { grid-area: 1 / 3 / 2 / 7;}
.div3MPBase { grid-area: 1 / 7 / 2 / 10;}
.div4MPBase { grid-area: 1 / 10 / 2 / 11;}
.div5MPBase { grid-area: 1 / 1 / 1 / 1;}
.div6MPBase { grid-area: 1 / 1 / 1 / 1;}
.div7MPBase { grid-area: 1 / 1 / 1 / 1;}
.div8MPBase { grid-area: 1 / 1 / 1 / 1;}
.div9MPBase { grid-area: 1 / 1 / 1 / 1;}
.div10MPBase { grid-area: 1 / 1 / 1 / 1;}
.div11MPBase { grid-area: 1 / 1 / 1 / 1;}
.div12MPBase { grid-area: 1 / 1 / 1 / 1;}
.div13MPBase { grid-area: 1 / 1 / 1 / 1;}
.div14MPBase { grid-area: 1 / 1 / 1 / 1;}
.div15MPBase { grid-area: 1 / 1 / 1 / 1;}
.div16MPBase { grid-area: 1 / 1 / 1 / 1;}
.div17MPBase { grid-area: 1 / 1 / 1 / 1;}

.div1MP { grid-area: 1 / 1 / 2 / 4; }
.div2MP { grid-area: 1 / 5 / 2 / 10; }
.div3MP { grid-area: 8 / 9 / 8 / 11; }
.div4MP { grid-area: 1 / 10 / 2 / 11; }
.div5MP { grid-area: 2 / 1 / 3 / 4; }
.div6MP { grid-area: 2 / 5 / 3 / 10; }
.div7MP { grid-area: 3 / 1 / 3 / 4; }
.div8MP { grid-area: 3 / 5 / 4 / 10; }
.div9MP { grid-area: 4 / 1 / 5 / 4; }
.div10MP { grid-area: 4 / 4 / 5 / 7; }
.div11MP { grid-area: 4 / 7 / 5 / 10; }
.div12MP { grid-area: 5 / 1 / 6 / 5; }
.div13MP { grid-area: 5 / 6 / 6 / 10; }
.div14MP { grid-area: 6 / 1 / 7 / 5;}
.div15MP { grid-area: 6 / 6 / 7 / 10;}
.div16MP { grid-area: 7 / 1 / 8 / 5;}
.div17MP { grid-area: 7 / 6 / 8 / 10;}

/*--- Liste Devis ---*/

.select-ListeDeviseur {
    margin-top: 35px;
    margin-left: 15px;
    width: 30%;
    height: 30px;
    font-size: 20px;
}

.Date-DateDevis {
    margin-left: 15px;
    width: 30%;
    height: 25px;
    font-size: 18px;
}

.c-dialog__boxListeDevis {
    flex: 1;
    max-width: 40%;
    max-height: 90%;
    width: 40%;
    height: 25%;
    margin: auto;
    padding: 2.4rem;
    background-color: lightsteelblue;
    border-radius: 30px;
    border: 1px solid grey;
}

.modal-ContenuListeDevis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.modal-ListeDevis {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
}

.modal-CorpsListeDevis {
    display: flex;
    flex-direction: column;
    height: 65%;
}

.modal-CorpsListeDevisDiv {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.modal-boutonValidationListeDevis {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 10%;
    flex-direction: row-reverse;
}

/*--- Liste Modif Contenue Devis ---*/

.gridRechercheDevisBase {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.gridRechercheDevis {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.div1DBase { grid-area: 1 / 1 / 2 / 11; }
.div2DBase { grid-area: 2 / 1 / 3 / 3; }
.div3DBase { grid-area: 2 / 3 / 3 / 8; }
.div4DBase { grid-area: 2 / 8 / 3 / 10; }
.div5DBase { grid-area: 2 / 10 / 3 / 11; }
.div6DBase { grid-area: 1 / 1 / 1 / 1; }
.div7DBase { grid-area: 1 / 1 / 1 / 1; }
.div8DBase { grid-area: 1 / 1 / 1 / 1; }
.div9DBase { grid-area: 1 / 1 / 1 / 1; }
.div10DBase { grid-area: 1 / 1 / 1 / 1; }
.div11DBase { grid-area: 1 / 1 / 1 / 1; }
.div12DBase { grid-area: 1 / 1 / 1 / 1; }
.div13DBase { grid-area: 1 / 1 / 1 / 1; }
.div14DBase { grid-area: 1 / 1 / 1 / 1; }
.div15DBase { grid-area: 1 / 1 / 1 / 1; }
.div16DBase { grid-area: 1 / 1 / 1 / 1; }
.div17DBase { grid-area: 1 / 1 / 1 / 1; }
.div18DBase { grid-area: 1 / 1 / 1 / 1; }
.div19DBase { grid-area: 1 / 1 / 1 / 1; }
    
.div1D { grid-area: 1 / 1 / 2 / 11; }
.div2D { grid-area: 2 / 1 / 3 / 4; }
.div3D { grid-area: 2 / 4 / 3 / 10; }
.div4D { grid-area: 10 / 8 / 11 / 11; }
.div5D { grid-area: 2 / 10 / 3 / 11; }
.div6D { grid-area: 3 / 1 / 4 / 4; }
.div7D { grid-area: 3 / 4 / 4 / 10; }
.div8D { grid-area: 4 / 1 / 5 / 4; }
.div9D { grid-area: 4 / 4 / 5 / 10; }
.div10D { grid-area: 5 / 1 / 6 / 5; }
.div11D { grid-area: 5 / 6 / 6 / 10; }
.div12D { grid-area: 6 / 1 / 7 / 5; }
.div13D { grid-area: 6 / 6 / 7 / 10; }
.div14D { grid-area: 7 / 1 / 8 / 5; }
.div15D { grid-area: 7 / 6 / 8 / 10; }
.div16D { grid-area: 8 / 1 / 9 / 5; }
.div17D { grid-area: 8 / 6 / 9 / 10; }
.div18D { grid-area: 9 / 1 / 10 / 5; }
.div19D { grid-area: 9 / 6 / 10 / 10; }

/*--- Liste Modif Contenue Devis ---*/
.gridListeDevisBase {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.gridListeDevis {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.div1LDBase { grid-area: 1 / 1 / 2 / 8; }
.div2LDBase { grid-area: 1 / 8 / 2 / 10; }
.div3LDBase { grid-area: 1 / 10 / 2 / 11; }
.div4LDBase { grid-area: 1 / 1 / 1 / 1; }
.div5LDBase { grid-area: 1 / 1 / 1 / 1; }
.div6LDBase { grid-area: 1 / 1 / 1 / 1; }
.div7LDBase { grid-area: 1 / 1 / 1 / 1; }
.div8LDBase { grid-area: 1 / 1 / 1 / 1; }
.div9LDBase { grid-area: 1 / 1 / 1 / 1; }
.div10LDBase { grid-area: 1 / 1 / 1 / 1; }
.div11LDBase { grid-area: 1 / 1 / 1 / 1; }

.div1LD { grid-area: 1 / 1 / 2 / 10; }
.div2LD { grid-area: 6 / 8 / 7 / 11; }
.div3LD { grid-area: 1 / 10 / 2 / 11; }
.div4LD { grid-area: 2 / 1 / 3 / 4; }
.div5LD { grid-area: 2 / 4 / 3 / 10; }
.div6LD { grid-area: 3 / 1 / 4 / 4; }
.div7LD { grid-area: 3 / 4 / 4 / 10; }
.div8LD { grid-area: 4 / 1 / 5 / 4; }
.div9LD { grid-area: 4 / 4 / 5 / 10; }
.div10LD { grid-area: 5 / 1 / 6 / 4; }
.div11LD { grid-area: 5 / 4 / 6 / 10; }

/* Conteneur du dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Bouton qui ouvre/ferme la liste */
.dropdown-toggle {
    padding: 8px 12px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contenu déroulant (initialement masqué) */
.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Afficher quand actif */
.dropdown.open .dropdown-content {
    display: block;
}

/* Chaque option avec case à cocher */
.dropdown-content label {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    cursor: pointer;
}

.dropdown-content label:last-child {
    margin-bottom: 0;
}

.dropdown-content input[type="checkbox"] {
    margin-right: 8px;
}

/*--- Liste Modif Contenue Devis Ensemble---*/

.gridRechercheDevisEnsembleBase {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.gridRechercheDevisEnsemble {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
    
.div1DE { grid-area: 1 / 1 / 2 / 4; }
.div2DE { grid-area: 1 / 4 / 2 / 10; }
.div3DE { grid-area: 9 / 8 / 10 / 11; }
.div4DE { grid-area: 1 / 10 / 2 / 11; }
.div5DE { grid-area: 2 / 1 / 3 / 4; }
.div6DE { grid-area: 2 / 4 / 3 / 10; }
.div7DE { grid-area: 3 / 1 / 4 / 4; }
.div8DE { grid-area: 3 / 4 / 4 / 10; }
.div9DE { grid-area: 4 / 1 / 5 / 5; }
.div10DE { grid-area: 4 / 6 / 5 / 10; }
.div11DE { grid-area: 5 / 1 / 6 / 5; }
.div12DE { grid-area: 5 / 6 / 6 / 10; }
.div13DE { grid-area: 6 / 1 / 7 / 5; }
.div14DE { grid-area: 6 / 6 / 7 / 10; }
.div15DE { grid-area: 7 / 1 / 8 / 5; }
.div16DE { grid-area: 7 / 6 / 8 / 10; }
.div17DE { grid-area: 8 / 1 / 9 / 5; }
.div18DE { grid-area: 8 / 6 / 9 / 10; }

.div1DEBase { grid-area: 1 / 1 / 2 / 3; }
.div2DEBase { grid-area: 1 / 3 / 2 / 7; }
.div3DEBase { grid-area: 1 / 7 / 2 / 10; }
.div4DEBase { grid-area: 1 / 10 / 2 / 11; }
.div5DEBase { grid-area: 1 / 1 / 1 / 1; }
.div6DEBase { grid-area: 1 / 1 / 1 / 1; }
.div7DEBase { grid-area: 1 / 1 / 1 / 1; }
.div8DEBase { grid-area: 1 / 1 / 1 / 1; }
.div9DEBase { grid-area: 1 / 1 / 1 / 1; }
.div10DEBase { grid-area: 1 / 1 / 1 / 1; }
.div11DEBase { grid-area: 1 / 1 / 1 / 1; }
.div12DEBase { grid-area: 1 / 1 / 1 / 1; }
.div13DEBase { grid-area: 1 / 1 / 1 / 1; }
.div14DEBase { grid-area: 1 / 1 / 1 / 1; }
.div15DEBase { grid-area: 1 / 1 / 1 / 1; }
.div16DEBase { grid-area: 1 / 1 / 1 / 1; }
.div17DEBase { grid-area: 1 / 1 / 1 / 1; }
.div18DEBase { grid-area: 1 / 1 / 1 / 1; }
    
    

/*--- Liste tri basique ---*/

.gridRechercheSimple {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.div1S { grid-area: 1 / 1 / 2 / 3;}
.div2S { grid-area: 1 / 3 / 2 / 8;}
.div3S { grid-area: 1 / 8 / 2 / 11;}

/*--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/

.img_gear {
    width: 20px;
}

.div-boutonListe {
    display: flex;
    justify-content: flex-end;
}

.div-boutonListeMessage {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.lab-RechercherGenerique {
    text-align: center;
}

.div-ListePrincipal {
    width: 100%;
    height: 92%;
    max-height: 92%;
    /* min-height: 50%; */
    overflow-y: scroll;
    overflow-x: scroll;
}

.div-ListeSecondaire {
    width: 100%;
    height: 40%;
    overflow-y: scroll;
    overflow-x: scroll;
}

.div-Info {
    display: flex;
    flex-direction: row;
    padding: 10px;
    padding-left: 0px;
}

.table-ListeInfoGenerique {
    width: 100%;
    border-collapse: collapse;
}

.tr-ListeInfoGenerique {
    background-color: inherit;
}

.td-Libelle {
    background-color: #4C4B78;
    color: white;
    border: 1px solid black;
    width: 20%;
    padding: 10px;
}

.td-Titre {
    background-color: #4C4B78;
    color: white;
    border: 1px solid black;
    font-weight: bold;
    width: 20%;
    padding: 10px;
    font-size: 25px;
}

.td-Valeur {
    background-color:#E2E1E1;
    color: black;
    border: 1px solid black;
    width: 30%;
    font-weight: bold;
    color: #303030;
    padding: 10px;
}

.td-LibelleAnnexe {
    background-color: #4C4B78;
    color: white;
    border: 1px solid black;
    width: 50%;
    padding: 10px;
    text-align: center;
}

.td-ValeurAnnexe {
    background-color:#E2E1E1;
    color: black;
    border: 1px solid black;
    width: 50%;
    /* font-weight: bold;
    color: #303030; */
    font-weight: lighter;
    padding: 10px;
    vertical-align: text-top;
}

.td-RefProduit, .td-NomSociete, .td-NumDevis, .td-NomEntreprise, .td-QTProduit, .td-SectionAffichageDevis, .td-SousSectionAffichageDevis, .td-PrixSection, .td-PrixSousSection, .td-QuantiteSection, .td-Ensemble {
    font-weight: bold;
    color: #303030;
}

.td-SectionAffichageDevis {
    padding-left: 10px;
    background-color: #8d89a2;
}

.td-SousSectionAffichageDevis {
    padding-left: 50px;
    background-color: #d2cfdc;
}

.td-Ensemble {
    background-color: #e5e6e7;
}

.td-ComposantEnsemble {
    background-color: #f8f9fa;
}

.td-QuantiteSection {
    background-color: #d2cfdc;
}

.td-PrixSection {
    background-color: #8d89a2;
    text-align: right;
}

.td-PrixSousSection {
    background-color: #d2cfdc;
    text-align: right;
}

.td-LibellePrix {
    /* background-color: #8d89a2;
    font-weight: bold;
    color: #303030; */
    background-color: #4C4B78;
    /* font-weight: bold; */
    color: white;
}

.td-DonneePrix {
    font-weight: bold;
    color: #303030;
}

.div-BoutonMultiple {
    display: flex;
    flex-direction: column;
}

.style-boutonMultiple {
    width: 30%;
    text-align: center;
    padding: 5px 0px;
}

.div-BoutonMultipleInter {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 10px;
    width: 100%;
}

.div-BoutonDoubleInter {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 10px;
    width: 100%;
}

.textarea_InfoDisplay {
    width: 100%;
    height: 600px;
    vertical-align: text-top;
    background-color: #E2E1E1;
    border: none;
    resize: none;
    color: black;
    font-size: 17px;
    font-weight: lighter;
    font-family: inherit;
    cursor: text;
}
/*--- navbar principal ---*/
.navbar {
    position:sticky;
    top: 0px;
    z-index: 99;
    width: 100%;
}

.navbar-principal {
    background-color: #4C4B78;
    font-family: inherit;
}

.navbar-principal-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
}

.navbar-principal .navbar-principal-span {
    color: white;
    font-size: 17px;
    padding: 14px 16px;
    text-decoration: none;
}
.lienUtilisateur {
    text-decoration: none;
}

.lienDeconnexion,
.lienInfoCompte {
    float: right;
    display: flex;
    text-decoration: none;
}

.navbar-img-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-logo {
    width: 120px;
}

/* --- navbar secondaire --- */

.navbar-secondaire {
    background-color: #E2E1E1;
    font-family: inherit;
    width: 100%;
    height: 45px;
}

.navbar-secondaire-content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    height: 100%;
}

.dropdownC { grid-area: 1 / 1 / 2 / 2; }
.dropdownP { grid-area: 1 / 2 / 2 / 3; }
.dropdownD { grid-area: 1 / 3 / 2 / 4; }
.dropdownCL { grid-area: 1 / 4 / 2 / 5; }
.dropdownF { grid-area: 1 / 5 / 2 / 6; }
.dropdownA { grid-area: 1 / 6 / 2 / 7; }

.navbar-secondaire-span, .navbar-secondaire-content a {
    font-size: 17px;
    color: black;
    text-align: center;
    text-decoration: none;
}

.dropdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.dropdown .dropbutton {
    font-size: 17px;
    border: none;
    outline: none;
    color: black;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown:hover, .navbar-secondaire-span:hover {
    background-color: #8d89a2;
}

.dropbutton {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.dropdownSelection {
    background-color: #8d89a2; 
}

/* --- Page Authentification --- */
.page-authentification {
    background-color: #4C4B78;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-auth {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.img-logo-auth {
    width: 25%;
}

.div-Identifiant {
    margin-top: 20px;
}

.div-Identifiant, .div-Mdp {
    color: white;
    font-size: 16px;
    padding: 14px 16px;
    text-decoration: none;
    width: 200px;
}

.bouton-auth {
    font-size: 16px;
    color: black;
    text-align: center;
    padding: 2px 16px;
    margin-left: 15px;
}

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

/* --- Page acceuil --- */

.div-accueil {
    display: flex;
    height: 100vh;
}

.div-photo {
    width: 60%;
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.div-textDesciptif {
    width: 40%;
    padding: 20px;
    font-size: 20px;
    color: black;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.div-photo-1ligne {
    padding-bottom: 10px;
    padding-top: 10px;
    display: flex;
    align-items: center;
}

.div-photo-2ligne {
    padding-top: 10px;
}

.photo-labo-1 {
    width:500px;
    padding-right: 70px;
}

.photo-labo-2 {
    width: 250px;
}

.photo-labo-3 {
    width: 250px;
    padding-right: 70px;
    padding-top: -50px;
}

.photo-labo-4 {
    width: 400px;
}

.div-lien-accueil {
    display: flex;
    justify-content: space-between;
}

/* --- Page Liste Composant --- */

.div-Option {
    overflow-y: scroll;
    height: 150px;
}

.table-ListeOption {
    border-collapse: collapse;
    width: 100%;
}

.div-Fournisseur {
    overflow-y: scroll;
    height: 150px;
}

.table-Fournisseur {
    border-collapse: collapse;
    width: 100%;
}
/* --- Page Creation Composant --- */

.div-colone1 {
    display: flex;
    width: 33%;
    flex-direction: column;
    padding: 20px;
}

.div-colone2 {
    display: flex;
    width: 33%;
    flex-direction: column;
    padding: 20px;
}

.div-colone3 {
    display: flex;
    width: 33%;
    flex-direction: column;
    padding: 20px;
}

.label {
    padding-top: 8px;
    font-size: 20px;
    color: black;
    font-family: inherit;
}

.label-placeholder {
    padding-top: 8px;
    font-size: 20px;
    color: rgb(78, 78, 78);
    font-family: inherit;
}

.span-rouge {
    color: red;
}

.input-TextSimple {
    width: 70%;
    height: 30px;
    font-size: 17px;
}

.input-TextLong {
    width: 70%;
    /* height: 90px; */
    font-size: 17px;
}

.input-Date {
    width: 70%;
    height: 30px;
    font-size: 16px;
    color: black;
    font-family: inherit;
}

.menuDeroulant {
    width: 70%;
    height: 30px;
    font-size: 17px;
    color: black;
    font-family: inherit;
}

.menuDeroulantCreationProduit {
    width: 100%;
}

.div-checkbox .label{
    padding-top: 0px;
}

.div-checkbox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70%;
    padding-top: 10px;
}

.input-Checkbox {
    height: 20px;
    width: 20px;
    margin: 5px;
}

.div-input {
    display: flex;
    flex-direction: column;
}

.div-ListeInput {
    display: flex;
    flex-direction: row;
}

.div-BoutonValidation {
    display: flex;
    justify-content: flex-end;
    padding-right: 1%;
    padding-bottom: 1%;
}

.div-BoutonValidationMultiple {
    display: flex;
    justify-content: space-between;
    padding-right: 1%;
    padding-left: 1%;
    padding-bottom: 1%;
}

/* --- Page Liste Produit --- */

.div-ListeComposantPoduit {
    overflow-y: scroll;
    height: 150px;
}

.div-PrixProduit {
    overflow-y: scroll;
    height: 150px;
}

.table-ListeComposantPoduit {
    border-collapse: collapse;
    width: 100%;
}

.table-PrixProduit {
    border-collapse: collapse;
    width: 100%;
}

/* --- Page Nouveau Produit --- */

.labelPetit {
    font-size: 17px;
    color: black;
    font-family: inherit;
}

.input-TextSimplePetit {
    width: available;
    height: 20px;
    font-size: 17px;
}

.input-TextLongPetit {
    width: available;
    height: 60px;
    font-size: 17px;
}

.menuDeroulantPetit {
    width: available;
    height: 30px;
    font-size: 17px;
    color: black;
    font-family: inherit;
}

.div-checkboxPetit {
    display: flex;
    width: available;
    justify-content: space-between;
}

.div-NouveauProduit {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.div-TabListeComposant {
    width: 40%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.div-TabNouveauProduit {
    width: 55%;
    display: flex;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    
    justify-content: space-between;
    flex-direction: column;
}

.div-ChampsCreationProduit {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    height: 50%;
}

.div-ChampsCreationProduit-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 33%;
    height: 95%;
    padding: 5px;
}
.div-ChampsCreationProduit-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 34%;
    height: 95%;
    padding: 5px;
}

.div-BoutonFleche {
    height: 100%;
    width: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.bouton-Fleche {
    padding: 10px;
    margin: 10px;
    background-color: #d2cfdc;
    border: 1px solid grey;
}

.bouton-Fleche:disabled {
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    cursor: not-allowed;
    opacity: 0.6;
}

.img-fleche {
    width: 20px;
}

.button-case {
    width: 100%;
    background-color: inherit;
    padding: 0px;
    border: 0px;
    text-align: start;
}

/* --- Page Liste Devis --- */
.div-SelectionGeneriqueDevis {
    width: 53%;
    padding: 1%;
    font-size: 17px;
    color: black;
    font-family: inherit;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.div-InfoGeneriqueDevis {
    width: 43%;
    padding: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.td-LibelleDevis {
    background-color: #4C4B78;
    color: white;
    border: 1px solid black;
    width: 15%;
    padding: 10px;
}

.td-ValeurDevis {
    background-color: #E2E1E1;
    color: black;
    border: 1px solid black;
    width: 30%;
    font-weight: bold;
    padding: 10px;
}

/* --- Page Nouveau Devis --- */

.div-ModificationDevis {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.div-bouton-creerDevis {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.div-SelectAdresse {
    display: flex;
    flex-direction: column;
}
/* --- Page Modification Devis --- */

.affichageModifEnsemble {
    display: flex;
    flex-direction: row;
}

.c-dialogAjoutModificateur {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    /* padding: 2.4rem; */
    /* overflow-y: scroll; */
    /* -webkit-overflow-scrolling: touch; */
    transition-duration: 0.4s;
    backdrop-filter: blur(2px);
}

.c-dialog__boxAjoutModificateur {
    flex: 1;
    max-width: 50%;
    max-height: 45%;
    width: 40%;
    height: 45%;
    margin: auto;
    padding: 2.4rem;
    background-color: lightsteelblue;
    border-radius: 30px;
    border: 1px solid grey;

}

.modal-TitreAjoutModificateur {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
}

.modal-CorpsAjoutModificateur {
    display: flex;
    flex-direction: row;
    height: 85%;
    margin-left: 30px;
    margin-top: 15px;
}

.modal-CorpsModificateur {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.input-AjoutModificateur {
    width: 80%;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
    font-family: inherit;
}

.textarea-AjoutModificateur {
    width: 80%;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
    font-family: inherit;
}

.select-ChoixModificateur {
    /* margin-top: 40px;
    margin-left: 15px; */
    width: 30%;
    height: 30px;
    font-size: 20px;
}

.modal-boutonValidationAjoutModificateur {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 10%;
    flex-direction: row-reverse;
}

.boutonRetour {
    /* margin: 10px; */
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    border: 1px solid grey;
    transition-duration: 0.4s;
    cursor: pointer;
    color: black;
}

.boutonRetour:hover {
    background-color: #D8000C;
    color: white;
}

.div-Affichage-Info-Devis {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.label-ModifDevis {
    padding-top: 8px;
    font-size: 16px;
    color: black;
    font-family: inherit;
}

.input-ModifDevis {
    width: 60px;
    height: 20px;
}

.div-SectionActuel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.menuDeroulant-ModifDevis {
    /* width: 25%; */
    height: 25px;
    font-size: 16px;
    color: black;
    font-family: inherit;
    margin-left: 5px;
}

.div-BoutonValidationSection {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 5px;
    padding-top: 5px;
}

.div-TabModifDevis {
    width: 55%;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.div-ListeSection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.div-AjoutSection {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.div-TableListeSection {
    margin-top: 20px;
    height: 85%;
    background-color: #E2E1E1;
    overflow-y: scroll;
    overflow-x:hidden;
}

.affichageSection {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

.affichageSousSection {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid black;
}

.table-ListeSection {
    width: 100%;
    border-collapse: collapse;
}

.table-ListeSection ul:first-child,
.table-ListeSection ul:first-child {
    border-left: 1px solid black;
    border-top: 1px solid black;
}

.listeFS {
    background-color: #aca7c2;
    min-height: 30px;
    display: flex;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.listeFSLibelle {
    background-color: #aca7c2;
    width: 80%;
    max-width: 80%;
    height: auto;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #303030;
    white-space: pre-wrap;
    word-break: break-word;
    border-right: 1px solid black;
}

.listeFSPrix {
    background-color: #aca7c2;
    width: 20%;
    max-width: 20%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: bold;
    color: #303030;
    white-space: pre-wrap;
    word-break: break-all;
}

.span-listeFSPrix {
    margin: 0;
    padding-right: 10px;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.ul-listeSection {
    width: 100%;
    max-width:100%;
    background-color: #8D89A2;
    padding-left: 0px;
    margin: 0px;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.td-listeSection {
    width: 65%;
    max-width: 65%;
    height: 100%;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #303030;
    white-space: pre-wrap;
    word-break: break-all;
    border-right: 1px solid black;
}

.li-listeSousSection {
    width: 100%;
    max-width:100%;
    background-color: #D2CFDC;
    border-bottom: 1px solid black;
}

.ListeSousSection li:last-child,
.ListeSousSection li:last-child{
    border-bottom: none;
}

.td-listeSousSectionLibelle {
    width: 65%;
    max-width: 65%;
    height: 100%;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #303030;
    white-space: pre-wrap;
    word-break: break-all;
    border-right: 1px solid black;
}
.p-text {
    margin: 0px;
}
.td-listeSectionPrix {
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 4px;
    font-weight: bold;
    color: #303030;
    border-right: 1px solid black;
}

.td-listeSousSectionPrix {
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 4px;
    font-weight: bold;
    color: #303030;
    border-right: 1px solid black;
}

.td-listeSectionBouton {
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.td-listeSousSectionBouton {
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.span-CreationSection {
    display: flex;
    align-items: center;
    font-size: 100px;
    height: 100%;
    width: 100%;
    text-align: center;
}

.bouton-Section {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #E2E1E1;
}

.img-boutonSection {
    width: 20px;
}

.load-Section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.div-ValidationSection {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}

.div-ModifSection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.div-ListeModif {
    margin-top: 20px;
    height: 85%;
    background-color: #E2E1E1;
    overflow-y: scroll;
}

.table-ListeProduitSection {
    width: 100%
}

.tr-composantSection {
    width: 100%;
    min-height: 60px;
    padding: 0px;
    display: flex;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

/* .td-Wrap {
    white-space: pre-wrap;
    word-break: break-all;
} */

.td-Wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.cb-ProduitSeul {
    width: 20px;
    height: 20px;
}

.tr-enteteListeProduit {
    width: 100%;
    color: white;
    background-color: #4C4B78;
    font-weight: normal;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

.tr-CheckBoxSection {
    width: 7%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    padding-left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.tr-TextSection {
    width: 5%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    padding-left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.tr-RefProduitSection {
    width: 13%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    padding-left: 2px;
    border-right: 1px solid black;
}

.tr-DesignationSection {
    width: 20%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    padding-left: 2px;
    border-right: 1px solid black;
}

.tr-InformationAnnexeSection {
    width: 42%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    padding-left: 2px;
    border-right: 1px solid black;
}

.tr-PrixVenteSection {
    width: 12%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 2px;
    padding-left: 2px;
}

.td-boutonModifSection {
    width: 7%;
    padding: 2px;
    display: flex;
    align-items: center;
    border-right: 1px solid black;
}

.td-CheckBoxSection {
    text-align: center;
    width: 7%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.td-TextSection {
    text-align: center;
    width: 5%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.td-RefProduitSection {
    width: 13%;
    max-width: 13%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.td-DesignationSection {
    width: 20%;
    max-width: 20%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.td-InformationAnnexeSection {
    width: 42%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid black;
}

.td-PrixVenteSection {
    width: 12%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div-ListeModif {
    height: 100%;
}

.div-AffichageComplet {
    height: 100%;
}

.div-bouttonDevis {
    display: flex;
    flex-direction: column;
    height: 20%;
    justify-content: space-around;
}

.div-boutonSection {
    display: flex;
    flex-direction: row;
}

.div-bouttonDevis-modif {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.div-QuantiteSection {
    width: fit-content;
}

.div-choixSection {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.div-menuDeroulantSection {
    padding-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.div-bouttonDevis-excel {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.img-gear {
    width: 35%;
    max-width: 50%;
    margin-top: 2px;
    margin-bottom: 2px;
}

.style-bouton-ModifEnsemble {
    border: 1px solid grey;
    /* background-color: #d5cfe4; */
    /* background-color: #d2cfdc; */
    color: black;
    text-decoration: none;
    border-radius: 4px;
    transition-duration: 0.4s;
    cursor: pointer;
    width: 100%;
}

.style-bouton-ModifAutre {
    border: 1px solid grey;
    /* background-color: #d5cfe4; */
    /* background-color: #d2cfdc; */
    color: black;
    text-decoration: none;
    border-radius: 4px;
    transition-duration: 0.4s;
    cursor: pointer;
    width: 100%;
}

.div-textSectionActuel {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.div-spanSectionActuel {
    display: flex;
    flex-direction: row;
    text-overflow: ellipsis;
    align-items: baseline;
}

.span-SectionActuel {
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px;
    overflow-x:hidden;
}

.div-boutonAjoutEnsemble {
    width: 30%;
    display: flex;
    flex-direction: row-reverse;
}

/* --- Page Nouvelle Ajout --- */

.TitrePrincipal {
    font-size: 25px;
    text-align: center;
    margin-bottom: 20px;
}

.div-formNouvelleAjout {
    display: flex;
    flex-direction: column;
}

.div-formNouvelleAjoutBouton {
    padding-top: 10px;
}

/* --- Page Liste Client --- */

.div-ListeContact {
    overflow-y: scroll;
    height: 150px;
}

.table-ListeContact {
    border-collapse: collapse;
    width: 100%;
}

/* --- Fenêtre modal --- */

.c-dialog {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    /* padding: 2.4rem; */
    /* overflow-y: scroll; */
    /* -webkit-overflow-scrolling: touch; */
    transition-duration: 0.4s;
    backdrop-filter: blur(2px);
}

.c-dialog__box {
    flex: 1;
    max-width: 40%;
    max-height: 90%;
    width: 40%;
    height: 30%;
    margin: auto;
    padding: 2.4rem;
    background-color: lightsteelblue;
    border-radius: 30px;
    border: 1px solid grey;
}

.modal-boutonFermer {
    margin: 10px;
    padding: 8px;
    border: 1px solid grey;
    transition-duration: 0.4s;
    cursor: pointer;
}

.modal-boutonFermer:hover {
    background-color: #D8000C;
    color: white;
}

.modal-Contenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.modal-Titre {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-TitrePrincipal {
    font-size: 25px;
    text-align: center;
}

.modal-Champs {
    margin-top: 20px;
    margin-left: 20px;
}

.modal-boutonValidation {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

.c-dialogEnsemble {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    /* padding: 2.4rem; */
    /* overflow-y: scroll; */
    /* -webkit-overflow-scrolling: touch; */
    transition-duration: 0.4s;
    backdrop-filter: blur(2px);
}

.c-dialog__boxEnsemble {
    flex: 1;
    max-width: 80%;
    max-height: 80%;
    width: 40%;
    height: 80%;
    margin: auto;
    padding: 2.4rem;
    background-color: lightsteelblue;
    border-radius: 30px;
    border: 1px solid grey;
}
.modal-TitreEnsemble
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
}

.modal-CorpsEnsemble {
    display: flex;
    flex-direction: row;
    height: 83%;
}

.modal-CorpsAdresse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80%;
}

.modal-ChampsAdresse {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-left: 30px;
}

.modal-CorpsContact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 80%;
}

.modal-DoubleCorpsContact {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    width: 100%;
}

.modal-ChampsContact {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-left: 30px;
}

.modal-CorpsEnsembleLibelle {
    display: flex;
    flex-direction: column;
    height: 80%;
}

.modal-Parametre {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.select-ListeEnsemble {
    margin-top: 20px;
    width: auto;
    max-width: 100%;
    height: 30px;
    font-size: 20px;
}

.select-ListeSection {
    margin-top: 20px;
    width: 50%;
    max-width: 100%;
    height: 30px;
    font-size: 20px;
}

.modal-selectionEnsembleClone {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-colone1 {
    width: 40%;
    height: 100%;
}

.tableModable {
    width: 100%;
    overflow-y: scroll;
    overflow-x: scroll;
}

.modal-colone2 {
    width: 6%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.modal-colone3 {
    width: 54%;
    overflow-y: scroll;
    overflow-x: scroll;
}

.modal-boutonValidationEnsemble {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row-reverse;
}

.c-dialogAjoutSection {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    /* padding: 2.4rem; */
    /* overflow-y: scroll; */
    /* -webkit-overflow-scrolling: touch; */
    transition-duration: 0.4s;
    backdrop-filter: blur(2px);
}

.c-dialog__boxAjoutSection {
    flex: 1;
    max-width: 50%;
    max-height: 30%;
    width: 40%;
    height: 30%;
    margin: auto;
    padding: 2.4rem;
    background-color: lightsteelblue;
    border-radius: 30px;
    border: 1px solid grey;

}

.modal-TitreAjoutSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
}

.modal-CorpsAjoutSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 85%;
    margin-left: 30px;
}

.div-AjoutSectionChamps {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-AjoutSection {
    width: 45%;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.modal-boutonValidationAjoutSection {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 10%;
    flex-direction: row-reverse;
}


.c-dialogDemande {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    /* padding: 2.4rem; */
    /* overflow-y: scroll; */
    /* -webkit-overflow-scrolling: touch; */
    transition-duration: 0.4s;
    backdrop-filter: blur(2px);
}

.c-dialog__boxDemande {
    flex: 1;
    max-width: 30%;
    max-height: 20%;
    width: 25%;
    height: 20%;
    margin: auto;
    padding: 2.4rem;
    background-color: lightsteelblue;
    border-radius: 30px;
    border: 1px solid grey;
}

.modal-ContenuDemande {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.modal-ValidationMessageDemande {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.modal-TitreDemande {
    font-size: 25px;
}

.modal-CorpsCodeEnsemble {
    display: flex;
    flex-direction: column;
    height: 85%;
    margin-left: 30px;
}

.input-AjoutCodeEnsemble {
    width: 60%;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
}
/* --- Gestion Excel --- */

.div-ExportImport {
    /* width: 100%; */
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.div-ChoixExportImport {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 20px;
}

.select-ImportExport {
    font-size: 20px;
    height: 40px;
    width: 150px;
    margin-left: 30px;
}

.div-export {
    width: 46%;
    height: 65%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.div1E { grid-area: 1 / 1 / 2 / 6; }
.div2E { grid-area: 2 / 1 / 3 / 4; }
.div3E { grid-area: 2 / 5 / 3 / 10; }
.div4E { grid-area: 3 / 1 / 4 / 4; }
.div5E { grid-area: 3 / 5 / 4 / 10; }
.div6E { grid-area: 4 / 1 / 5 / 5; }
.div7E { grid-area: 4 / 6 / 5 / 10; }
.div8E { grid-area: 5 / 1 / 6 / 5; }
.div9E { grid-area: 5 / 6 / 6 / 10; }
.div10E { grid-area: 6 / 1 / 7 / 5; }
.div11E { grid-area: 6 / 6 / 7 / 10; }
.div12E { grid-area: 7 / 1 / 8 / 5; }
.div13E { grid-area: 7 / 6 / 8 / 10; }
.div14E { grid-area: 8 / 1 / 9 / 5; }
.div15E { grid-area: 8 / 6 / 9 / 10; }
.div16E { grid-area: 9 / 8 / 10 / 11; }

.div-import {
    width: 46%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.div-importContenu {
    height: 100%;
}

.span-TitreGestionExcel {
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-decoration: none;
}

.span-ContenuGestionExcel {
    font-size: 20px;
    margin-bottom: 20px;
    text-decoration: none;
}

.listeProduitImporter {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    margin-top: 10px;
}

.listeProduitRefuser {
    color: #D8000C;
    background-color: #FFBABA;
    text-decoration: none;
    font-size: 16px;
    border: 1px solid;
    padding: 10px;
    border-radius: 5px;
    width: 50%;
    height: 100%;
    overflow-y: scroll;
}

.listeProduitValider {
    color: #4F8A10;
    background-color: #DFF2BF;
    text-decoration: none;
    font-size: 16px;
    border: 1px solid;
    padding: 10px;
    border-radius: 5px;
    width: 50%;
    height: 100%;
    overflow-y: scroll;
}

.logValide {
    display: flex;
    max-height: 80%;
    justify-content: space-between;
    color: #4F8A10;
    background-color: #DFF2BF;
    font-size: 20px;
    background-image: url('../media/valid_logo.png');
    border: 1px solid;
    padding: 10px 10px 10px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 5px;
    overflow-y: scroll;
}

.logErreur {
    display: flex;
    justify-content: space-between;
    color: #D8000C;
    background-color: #FFBABA;
    font-size: 20px;
    background-image: url('../media/error_logo.png');
    border: 1px solid;
    padding: 10px 10px 10px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 5px;
}

.div-validationImport {
    margin-top: 20px;
}

.logUpload {
    text-decoration: none;
    font-size: 16px;
    width: 100%;
    height: 80%;
    white-space: pre-wrap;
    margin-top: 10px;
}

.p-titreMessage {
    text-align: center;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: default;
}

.tooltip .tooltiptext {
    visibility: hidden;
    padding: 0.25em 0.5em;
    background-color: black;
    color: #ffffff;
    border-radius: 0.25em;
    white-space: nowrap;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    /* top: 100%;
    left: 100%; */
    transition-property: visibility;
    transition-delay: 0s;
}
  
.tooltip:hover .tooltiptext {
    visibility: visible;
    transition-delay: 0.3s;
}

 /*--- Autre ---*/

.formAutre {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------------------------- */

.div-ModifProduit {
    display: flex;
}

.span-rouge {
    color: red;
}

.background-blue {
    background-color: #b4e7ff;
}