#NewRemoteForm_1007_client {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background-color: rgb(var(--background-color));
  color: rgb(255, 255, 255);
  border-radius: 0px;
  border: none;
  height: 234px;
  width: 624px;
}

/* Conteneur de la timeline avec défilement horizontal */
.timeline-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow-x: scroll; /* Forcer l'affichage du scroll */
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: auto; /* Pour Firefox - toujours afficher le scrollbar */
  scrollbar-color: #1666df #ffffff; /* Couleur du scrollbar pour Firefox */
}

/* Custom scrollbar pour WebKit (Chrome, Safari) */
.timeline-container::-webkit-scrollbar {
  height: 12px; /* Augmente la taille de la scrollbar */
}

.timeline-container::-webkit-scrollbar-track {
  background: #ffffff; /* Couleur de l'arrière-plan de la scrollbar */
}

.timeline-container::-webkit-scrollbar-thumb {
  background-color: #1666df; /* Couleur du pouce du scrollbar */
  border-radius: 6px; /* Bordures arrondies du pouce */
}

/* Style général pour la timeline */
.timeline.hori-timeline {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-end; /* Aligner les éléments en bas */
  width: auto; /* Ajusté pour s'ajuster dynamiquement */
}

/* Ligne horizontale continue au milieu */
.timeline.hori-timeline .horizontal-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px; /* Épaisseur de la ligne */
  background-color: #1666df;
  z-index: 0; /* Derrière les éléments de la timeline */
}

/* Éléments de la liste */
.timeline ul.events {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 2; /* Assurez-vous que les éléments soient au-dessus de la ligne */
}

/* Style pour chaque élément de la timeline */
.timeline .event-list {
  flex: 0 0 auto;
  max-width: 220px; /* Ajusté pour correspondre à la largeur calculée dans le script */
  margin: 10px;
  text-align: center;
  padding: 10px;
  position: relative;
  font-size: 9px;
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Légère couleur de fond pour mieux visualiser les éléments */
  border-radius: 5px; /* Coins arrondis pour un meilleur look */
  box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur et la hauteur */
}
.timeline .event-date {
  display: inline-block;
  font-size: 0.9em;
  color: #4d74cf;
  margin-bottom: 5px;
  height: auto;
  line-height: 20px;
  background-color: #e0e0e000;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #efeeee;
  border-top-color: rgb(239, 238, 238);
  border-right-color: rgb(239, 238, 238);
  border-bottom-color: rgb(239, 238, 238);
  border-left-color: rgb(239, 238, 238);
  border-color: #999dbf;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  position: relative;
  bottom: 0;
}

/* Ligne verticale connectant la date à la ligne horizontale */
.timeline .event-date::before {
  content: "";
  position: absolute;
  bottom: -30px; /* Part de 30px en dessous de la date */
  left: 50%; /* Centre la ligne par rapport à la date */
  width: 2px; /* Épaisseur de la ligne */
  height: 30px; /* Hauteur de la ligne pour relier la date à la ligne horizontale */
  background-color: #108ed7; /* Couleur de la ligne */
  transform: translateX(-50%); /* Assure que la ligne est bien centrée */
}

/* Style pour le titre des événements */
.timeline .event-list h4.title {
  font-size: 1.2em; /* Taille de la police pour le titre */
  margin: 5px 0; /* Espacement au-dessus et au-dessous du titre */
  color: #1077d1; /* Couleur du titre */
  position: relative;
  bottom: 10px; /* Ajustement de la position en bas */
  top: 25px;
}

/* Style pour la description des événements */
.timeline .event-list p.description {
  font-size: 1.1em; /* Taille de la police pour la description */
  color: #070707; /* Couleur de la description */
  margin: 10px 0; /* Espacement au-dessus et au-dessous de la description */
  height: 40px; /* Hauteur fixe pour la description */
  overflow: hidden; /* Masquer le texte qui dépasse */
  text-overflow: ellipsis; /* Ajouter des points de suspension pour le texte trop long */
  position: relative;
  bottom: 10px; /* Ajustement de la position en bas */
  top: 30px;
}

/* Boutons de défilement avec taille augmentée */
.scroll-btn {
  position: absolute;
  background-color: #1666df; /* Couleur de fond des boutons */
  color: rgb(9, 240, 240); /* Couleur du texte des boutons */
  border: none;
  border-radius: 8px; /* Coins arrondis */
  width: 50px; /* Largeur des boutons */
  height: 50px; /* Hauteur des boutons */
  cursor: pointer;
  z-index: 3; /* Au-dessus de la timeline */
  display: flex; /* Pour centrer le texte */
  align-items: center; /* Centrer verticalement le texte */
  justify-content: center; /* Centrer horizontalement le texte */
  font-size: 24px; /* Taille de la flèche */
}

/* Bouton gauche */
.scroll-btn.left {
  left: -5px; /* Position du bouton gauche */
  top: 50%;

  transform: translateY(-50%);
}

/* Bouton droit */
.scroll-btn.right {
  right: -28px; /* Position du bouton droit */
  top: 48%;
  transform: translateY(-50%);
}

/* Styles pour les icônes de flèches */
.scroll-btn.left::before {
  content: "←"; /* Utilisez un caractère pour la flèche gauche */
}

.scroll-btn.right::before {
  content: "→"; /* Utilisez un caractère pour la flèche droite */
}

.scroll-btn {
  position: absolute;
  background-color: #ffffff; /* Fond blanc */
  color: #1666df; /* Couleur de l'icône bleue */
  border: 2px solid #1666df; /* Bordure bleue */
  border-radius: 50%; /* Bouton circulaire */
  width: 29px; /* Largeur ajustée pour un bouton circulaire */
  height: 30px; /* Hauteur ajustée pour un bouton circulaire */
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; /* Taille de l'icône */
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s, transform 0.3s; /* Effets de transition pour hover */
}

/* Effet de hover */
.scroll-btn:hover {
  background-color: #1666df; /* Fond bleu au survol */
  color: #ffffff; /* Icône blanche au survol */
  transform: translateY(-50%) scale(1.1); /* Léger agrandissement au survol */
}

/* Bouton gauche avec une nouvelle icône (flèche vers la gauche) */
.scroll-btn.left::before {
  content: "❮"; /* Utilisation de la flèche chevron gauche */
}

/* Bouton droit avec une nouvelle icône (flèche vers la droite) */
.scroll-btn.right::before {
  content: "❯"; /* Utilisation de la flèche chevron droite */
}