/*----------------------------------------home ---------------------------------------*/
body{
    background-color:white!important;
}
#fournisseur{
    background-color:rgb(17, 17, 17);
    border: 0;
    
}
#categories{
    background-color:rgb(17, 17, 17);
    border: 0;
    
}
#mappage{
    background-color:rgb(17, 17, 17);
    border: 0;
    
}

.logo-home{
    width:300px;
   margin-top:50px;
}

.containHome{
   
    display: flex;
     justify-content: center;
      align-items: center;
      
}
.connexion{
    text-align:center;
    color:white;
    margin-top: 100px;
}
.sub{
    text-align: center;
    margin-top: 20px;
}

.logo{
    width:100px;
}
.sub button{
    color: black;
    background-color: white;
    font-weight: 700;
    border:0;
    border-radius: 5px;
    margin-top:20px;
    font-family: 'Roboto', sans-serif;

}
.sub button:hover{
    color: black;
    background-color: rgb(201, 199, 199);
    font-weight: 700;
    border:0;
    
}

#inputEmail{
    margin-top: 10px;
    border-radius: 5px;
    border:0;
}
input:focus {
    outline: none;
  }
label{
    color: lightgray;
    
    font-family: 'Roboto', sans-serif;
}
#inputPassword{
    margin-top: 10px;
    border-radius: 5px;
    border:0;
}


.nav-lin{
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-left: 20px;
    text-decoration: none;
}
.nav-lin .active{
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;

}
.nav-lin:hover{
    color: rgb(194, 192, 192);
}
.back{
    color:grey;
    float:right;
    margin:20px;
}
input{
    width:100%;
}


body {
    font-family: 'Roboto', sans-serif;
}

.content {
    margin-left: 250px;
    padding: 0px 30px 30px 30px;
}

.contient {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0px 20px 00px 20px;
    border-radius: 8px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 20px;
}
.contient {
    
    overflow: auto;
   
}
 thead{
    background-color:white;
    position: sticky;
    top: 0px;
    z-index: 100;
    padding-top:20px;
}
.filtre{

    
    background-color:white;
    z-index: 1;
}
h1{
    font-size:30px;
    padding:20px 0px;
}
.header {
    display: flex;
    align-items: center;

}

h1 {
    color: #000000;
    margin: 0;
    padding-right: 30px;
}

.title-line {
    flex-grow: 1;
    height: 2px;
    opacity:1!important;
    background-color: #000000;
}

.sommaire{
    background-color: lightgrey;
    margin-top: 20px;
    margin-bottom:20px;
}

td {
 
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    max-width: 150px; /* Définir une taille maximale pour les cellules de tableau */
    
    overflow: hidden;
    text-overflow: ellipsis;
}

th,td {
    text-align:center;
}
.filtre th{
    padding-top: 20px;
    padding-bottom:20px;
}
.sommaire th{
    padding:10px 0px;
}
.align-right {
    text-align: right;
    padding-right: 10px; /* Ajoutez du padding pour aligner les boutons complètement à droite */
}

.btnBleu{

    background-color:#3171D1;
    color:white;
    border:0;
    padding:3px 10px;
}


.input-wrapper {
    position: relative;
    display: inline-block;
}
.input-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Styles pour l'input */
.input-field3 {
    padding-right: 1.5em; /* Espace pour le suffixe */
    text-align: right;
    box-sizing: border-box;
}

/* Style pour le suffixe (€, %) */
.input-suffix {
    position: absolute;
    right: 8px;
    font-weight: bold;
    color: #000;
    pointer-events: none; /* Ignore les clics pour éviter les interférences */
}



/* Style pour afficher le symbole € */
.input-currency::after {
    content: "€";
    position: absolute;
    right: 10px;
    top: 50%;

    font-weight: bold;
    color: #000;
}

/* Style pour afficher le symbole % */
.input-percentage::after {
    content: "%";
    position: absolute;
    right: 10px;
    top: 50%;

    font-weight: bold;
    color: #000;
}
.btnGris{

    background-color:#E8E8E8;
    color:black;
    border:0;
    padding:3px 10px;
}
.selection{
    height:30px;
}
/*-------------------------------------PAge detail devis---------------------------------------------------*/


.status-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    
    border-radius: 5px;
    
}

/* Status text */
.status-container th, .status-container td {
    margin-right: 20px;
}

/* Button container */
.button-container {
    display: flex;
    gap: 10px;
}

/* Styles for buttons */
.status-btn {
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.option-test{
    width:100%;padding:10px;    border: 1px solid #000;
    border-radius: 4px;
}

.btn-secondary{
    background-color:#989fa7;
    border-color: #989fa7;
}
.status-btn:hover {
    opacity: 0.8;
}

.input-vert{
    border:2px solid!important;

    border-color:rgb(82, 154, 82)!important;
}
.input-rouge{
    border:2px solid!important;
    border-color:rgb(177, 74, 74)!important;
}

.edit-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 24px;
}

.edit-icon i {
    color: #007bff;
}

.edit-icon i:hover {
    color: #0056b3;
}

/* Styles pour les informations du client */
.info-item {
    
    
    margin-bottom: 10px;
}
.contientForm{
    display:flex;
    width:100%;
    justify-content: space-between;
    margin-bottom:30px;
}

.label {
    font-weight: bold;
    margin-right: 10px;
}

.value {
    flex-grow: 1;
}

.input-field {
    width: 100%;
    padding: 8px;
    border: 1px solid #000000;
    border-radius: 4px;
}

.input-field2 {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.input-field3 {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
h4{
    margin-top:10px;
}
.prodList{
    width:100%;
}
td{
    padding:5px;padding-top:15px;padding-bottom:15px;
}


/*** new style ***/


.card{
    border: 1px solid black;
}

.vertical-menu {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 240px;             /* largeur de ton choix */
    background-color: #fff;   /* ou autre couleur */
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    overflow-y: auto;
    padding: 1rem 0;
    font-family: 'Roboto', sans-serif;
    z-index: 100;
  }
  
  /* Liens */
  .vertical-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
  }
  
  /* Hover */
  .vertical-menu a:hover {
    background-color: #f0f4ff;
    color: #1e3a8a;
  }
  
  /* Page active */
  .vertical-menu a.active {
    background-color: #1e3a8a;
    color: #fff;
    font-weight: 500;
  }
  
  /* Décaler le contenu principal */
  .content {
    margin-left: 240px; /* doit correspondre à .vertical-menu width */
    padding: 1.5rem;
    background-color: #f9fafb;
    min-height: 100vh;
  }