body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-size: 12px; /* Taille de police ajust?e */
  }
  
  
 .container {
  display: flex;
  flex-wrap: nowrap; /* Emp?che les colonnes de passer ? la ligne suivante */
  height: calc(100vh - 40px);
  overflow-x: auto; /* Permet le d?filement horizontal si n?cessaire */
}
  
.left-column ul, .brand-detail ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.left-column button {
  cursor: pointer; /* Change le curseur en pointeur */
  padding: 2px 6px; /* Ajuste le padding */
  margin: 10px 0; /* Ajoute un espace vertical au-dessus et en dessous du bouton */
}
  .left-column, .right-column {
    padding: 20px;
  }
  
  .left-column {
    width: 250px;
    background-color: #f0f0f0; /* Couleur de fond de la colonne de gauche (un peu plus fonc?e) */
    border-right: 2px solid #666; /* S?parateur vertical plus fonc? et plus ?pais */
    border-left: 2px solid #666; /* Bordure ? gauche de la colonne de droite (m?me ?paisseur) */
    overflow-y: auto;
    padding: 20px 0; /* Enlever le padding ici pour que les ?l?ments de la liste s'?tendent compl?tement */
    text-align: center; /* Centre le contenu textuel et les ?l?ments inline/inline-block */
  }

  
  .left-column {
    width: 250px;
    background-color: #f0f0f0; /* Couleur de fond de la colonne de gauche (un peu plus foncée) */
    border-right: 2px solid #666; /* Séparateur vertical plus foncé et plus épais */
    border-left: 2px solid #666; /* Bordure à gauche de la colonne de droite (même épaisseur) */
    overflow-y: auto;
    padding: 20px 0; /* Enlever le padding ici pour que les éléments de la liste s'étendent complètement */
    text-align: center; /* Centre le contenu textuel et les éléments inline/inline-block */
  }
  
  .left-column ul {
    list-style-type: none;
    margin: 0;
    padding: 0; /* Enlever le padding pour que les liens s'étendent jusqu'aux bords */
    background-color: #f0f0f0; /* Assurez-vous que cela correspond au fond de .left-column pour l'uniformité */
    border-top: 1px solid #000000; /* Bordure en haut du premier élément de la liste */
  }
  
  .left-column ul li {
    cursor: pointer;
    padding: 4px 6px; /* Ajustez selon vos besoins pour l'espace intérieur */
    border-bottom: 1px solid #000000; /* Bordure en bas de chaque élément */
    background-color: #fff; /* Fond blanc pour chaque élément */
    color: #000;
    display: block; /* Assurez-vous que les li prennent toute la largeur */
  }
  
  .left-column ul li:hover {
    background-color: #e5e5e5; /* Légèrement plus foncé au survol */
    color: #000;
  }
  
  .left-column ul li.selected {
    background-color: #0078d7; /* Bleu pour l'élément sélectionné */
    color: white;
    border-left: 3px solid #0078d7; /* Bordure gauche pour indiquer la sélection */
    padding-left: 7px; /* Ajuster le padding pour compenser l'espace de la bordure */
  }
  
  
  
  .middle-column {
    width: 250px;
    background-color: #ffffff; /* Couleur de fond de la colonne (un peu plus foncée) */
    border-right: 2px solid #666; /* Séparateur vertical plus foncé et plus épais */
    overflow-y: auto;
    padding: 20px 0; /* Enlever le padding ici pour que les éléments de la liste s'étendent complètement */
    text-align: center; /* Centre le contenu textuel et les éléments inline/inline-block */
    display: none; /* Initialement caché, sera affiché via JavaScript */
  }
  
  .middle-column ul {
    list-style-type: none; /* Supprimer les puces de liste pour une apparence plus nette */
    margin: 0; /* Supprimer les marges par défaut */
    padding: 0; /* Supprimer le padding par défaut */
    border-top: 1px solid #000000; /* Bordure en haut du premier élément */
  }
  
  .middle-column ul li a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: #000; /* Définit la couleur du texte des liens en noir */
  }
  
  .middle-column ul li:hover a {
    color: white; /* Change la couleur du texte en blanc lors du survol */
  }
  
  .middle-column ul li {
    cursor: pointer;
    padding: 4px 6px; /* Espace pour chaque élément */
    border-bottom: 1px solid #000000; /* Bordure en bas pour chaque élément */
    background-color: #fff; /* Fond blanc pour chaque élément */
    color: #000; /* Couleur de texte */
    display: block; /* Assure la pleine largeur */
  }
  
  .middle-column ul li:hover, .middle-column ul li.selected {
    background-color: #0078d7; /* Bleu pour l'effet de survol ou sélection */
    color: white; /* Texte blanc pour le contraste */
  }
  
  .middle-column ul li.selected {
    background-color: #0078d7; /* Bleu pour l'élément sélectionné */
    padding-left: 7px; /* Ajuster le padding pour compenser l'espace de la bordure */
    color: white; /* Texte blanc pour l'élément sélectionné */
  }
  
  .middle-column ul li.selected a {
    color: white; /* Texte blanc pour l'élément sélectionné */
  }
  
  



  .right-column {
    flex-grow: 1; /* Permet à la colonne de croître et d'utiliser l'espace disponible */
    background-color: #ffffff;
    overflow-y: auto;
    padding: 20px 0; /* Padding vertical uniquement */
    text-align: center;
    display: none; /* Supposons que vous voulez la montrer via JS */
  }
  
  .right-column.empty {
    background-color: #ffffff; /* Fond blanc lorsque la colonne est vide */
  }
  
  .right-column ul {
    list-style-type: none;
    margin: 0;
    padding: 0; /* Aucun padding pour permettre aux <li> de s'étendre pleinement */
    border-top: 1px solid #000000; /* Bordure en haut de la première <li> pour compléter le haut */
  }
  
  .right-column ul li {
    cursor: pointer;
    padding: 4px 6px; /* Espace pour chaque élément */
    border-bottom: 1px solid #000000; /* Bordure en bas pour chaque élément */
    background-color: #fff; /* Fond blanc pour chaque élément */
    color: #000; /* Couleur de texte */
    display: block; /* Assure la pleine largeur */
  }
  
  .right-column ul li a {
    text-decoration: none;
    color: #000;
    display: block; /* Assure que les liens remplissent l'espace des <li> */
  }
  
  /* Ajout pour changer la couleur du texte en blanc au survol et quand sélectionné */
  .right-column ul li:hover a, .right-column ul li.selected a {
    color: white; /* Change la couleur du texte des liens en blanc */
  }
  
  .right-column ul li:hover, .right-column ul li.selected {
    background-color: #0078d7;
    color: white;
  }
  
  .right-column ul li.selected {
    border-left: 3px solid #0078d7;
    padding-left: 7px; /* Ajustement pour compenser l'espace de la bordure, rendu uniforme */
  }
  




  
  .brand-detail {
    display: none;
  }
  
  .brand-detail.active {
    display: block;
  }
  
  .brand-detail ul li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
  }
  
  .brand-detail ul li a {
    color: black; /* Couleur noire pour les liens */
    text-decoration: none; /* Supprimer la soulignement par d?faut */
  }
  
  .brand-detail ul li a:hover {
    text-decoration: underline; /* Souligner le lien au survol */
  }
  
  
  .middle-column {
  display: none; /* Cache ces colonnes par d?faut */
}

.title-vehicle {
  font-size: 12px;
  color: #000000;
  text-align: center;
  /* Pas besoin d'ajouter une bordure ici directement si on gère la bordure avec le premier li */
  padding-bottom: 10px; /* Espacement pour le design */
  display: block; /* S'assure que le bloc s'étend horizontalement */
}

/* Appliquez un style au titre pour inclure la bordure inférieure */
.title-brand {
  font-size: 12px;
  color: #000000;
  text-align: center;
  /* Pas besoin d'ajouter une bordure ici directement si on gère la bordure avec le premier li */
  padding-bottom: 10px; /* Espacement pour le design */
  display: block; /* S'assure que le bloc s'étend horizontalement */
}


.title-model {
  font-size: 12px;
  color: #000000;
  text-align: center;
  /* Pas besoin d'ajouter une bordure ici directement si on gère la bordure avec le premier li */
  padding-bottom: 10px; /* Espacement pour le design */
  display: block; /* S'assure que le bloc s'étend horizontalement */
}

.salutation-info {
    position: fixed;
    top: 10px;
    left: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
}

.salutation-text, .username, .license-key {
    color: white;
}

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

  .top-banner {
      background-color: #000;
      color: #fff;
      padding: 5px 20px; /* R?duction de l'espacement vertical pour diminuer la hauteur */
      display: flex;
      justify-content: flex-end;
  }
  
  .logo-container img {
      height: 32px; /* Ajustement de la hauteur du logo si n?cessaire */
  }
  .bottom-band {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #000; /* Fond noir pour le bandeau */
      padding: 5px 0; /* Padding vertical pour un peu d'espacement */
      box-sizing: border-box; /* S'assure que le padding est inclus dans la hauteur */
      display: flex;
      justify-content: space-between; /* S?pare les ?l?ments aux extr?mit?s */
      align-items: center; /* Centre les ?l?ments verticalement */
  }
  
  .datetime-info, .license-info {
      color: white; /* Texte blanc pour contraster avec le fond noir */
      font-family: 'Roboto', sans-serif; /* Utilisation de Roboto */
      font-size: 13px; /* Taille de police r?duite ? 10 pixels */
      font-weight: 300; /* Utilisation d'un poids l?g?rement plus fin que normal */
      margin: 0 10px; /* Marge horizontale */
  }
  
  
  .button-like {
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    background-color: #0078d7;
    color: #fff;
    text-align: center;
    border: none;
    user-select: none; /* Empêche la sélection du texte pour améliorer l'apparence du bouton */
    border-radius: 5px; /* Optionnel: pour les boutons avec des coins arrondis */
}

.button-like:hover {
    background-color: #0056b3; /* Un peu plus foncé pour l'effet de survol */
}

  
  .license-key {
      color: white; /* Assure que la cl? de
  
  
  }