body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
  /* overflow-x: hidden */
}

/* Conteneur du tableau */
.table-container {
  width: 100%; /* Assure que le conteneur prend toute la largeur disponible */
  overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */
}

/* Styles de base pour le tableau */
#customers {
  width: 100%; /* Le tableau prend toute la largeur disponible */
  font-size: 16px;
  text-align: left;
  padding: 2em;
  padding-top: 0em;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.contenu{
  padding: 2em;

}
table#customers{
  padding: 2em;
  padding-top: 0em;
}
/* Styles pour les en-têtes de tableau */
#customers thead th {
  background-color: #f8f9fa; /* Fond gris clair */
  color: #495057; /* Texte gris foncé */
  border-bottom: 2px solid #dee2e6; /* Bordure plus épaisse pour les en-têtes */
  padding: 10px;
}

/* Styles pour le corps du tableau */
#customers tbody td {
  border-bottom: 1px solid #dee2e6; /* Bordure fine pour séparer les lignes */
  padding: 8px;
}

/* Styles pour les lignes impaires */
#customers tbody tr:nth-child(odd) {
  background-color: #ffffff; /* Fond blanc pour les lignes impaires */
}

/* Styles pour les lignes paires */
#customers tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Fond gris clair pour les lignes paires */
}

/* Styles pour les sous-tables */
#customers tbody td table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* Styles pour les cellules des sous-tables */
#customers tbody td table td {
  border: 1px solid #dee2e6; /* Bordure fine pour les sous-tables */
  padding: 8px;
}

/* Suppression de l'effet de survol des lignes */
#customers tbody tr:hover {
  background-color: transparent; /* Aucun effet de survol */
}

/* Style spécifique pour les cellules "taskToDo" */
.task-to-do {
  background-color: #e0f7fa; /* Couleur de fond claire pour mettre en évidence */
  font-weight: bold; /* Texte en gras */
  cursor: pointer; /* Curseur main pour indiquer que c'est cliquable */
}

/* Effet au survol des cellules "taskToDo" (désactivé) */
.task-to-do:hover {
  background-color: #b2ebf2; /* Couleur de fond plus sombre au survol */
}

button {
  margin: 5px;
  padding: 10px;
  background-color: #39abed; /* Green */
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #2799db;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 1em;
}

/* Conteneur de la barre en haut */
.header {
  position: fixed; /* Fixe la position en haut de la page */
  top: 0;
  right: 0;
  display: flex;
  align-items: right;
  justify-content: flex-end;
  background: #ffffff; /* Fond blanc pour la barre */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère pour la barre */
  z-index: 1001; /* Assure que la barre est au-dessus des autres éléments */
}

/* Conteneur pour le texte utilisateur et le bouton de profil */
.header-content {
  display: flex;
  align-items: right;
  float:right;
  padding: 10px;
  gap: 5px; /* Réduit l'espace entre le texte utilisateur et le bouton de profil */
  transition: transform 0.3s ease; /* Transition pour le déplacement du conteneur */
}

/* Style pour le texte utilisateur connecté */
#pUserConnected {
  color: #333; /* Couleur du texte (ajustez selon vos besoins) */
  white-space: nowrap; /* Empêche le texte de se casser en plusieurs lignes */
  font-weight: bold;
}

/* Style pour le bouton de profil */
#btnProfile {
  position: relative; /* Position relative pour que l'élément de la transition soit relatif à celui-ci */
  padding: 0; /* Enlève le padding pour que le bouton ajuste parfaitement l'image */
  background-color: transparent; /* Assure que le fond du bouton est transparent */
  border: none; /* Enlève la bordure du bouton */
  cursor: pointer;
  z-index: 1001;
  transition: right 0.3s ease; /* Ajoute une transition pour un effet de glissement */
}

#btnProfile img {
  width: 30px; /* Taille d'image ajustée pour le bouton de profil */
  height: 30px; /* Taille d'image ajustée pour le bouton de profil */
}

/* Déplace le conteneur du texte utilisateur et du bouton de profil lorsque l'overlay est ouvert */
.header-content.shifted {
  transform: translateX(-250px); /* Ajuste le déplacement du conteneur vers la gauche */
}

/* Style pour l'overlay */
.overlay {
  position: fixed;
  right: -250px; /* Position initiale hors de l'écran */
  top: 0;
  height: 100%;
  width: 250px;
  background-color: #333333;
  color: white;
  transition: right 0.3s ease; /* Animation pour glisser */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  padding-top: 60px;
  z-index: 1000; /* Assure que l'overlay est au-dessus des autres éléments */
}

/* Liste dans l'overlay */
.overlay ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Élément de liste dans l'overlay */
.overlay ul li {
  padding: 15px 20px;
  border-bottom: 1px solid #444;
}

/* Liens dans l'overlay */
.overlay ul li a {
  color: white;
  text-decoration: none;
  display: block;
}

/* Effet au survol des liens dans l'overlay */
.overlay ul li a:hover {
  background-color: #575757;
}

/* Classe pour afficher l'overlay */
.overlay.active {
  right: 0;
}

textarea {
  width: 100%; /* Occupe toute la largeur disponible du conteneur */
  height: 150px; /* Ajuste la hauteur de la zone de texte */
  padding: 10px; /* Espace intérieur autour du texte */
  border: 2px solid #333; /* Bordure solide de 2px */
  border-radius: 5px; /* Coins arrondis */
  font-size: 16px; /* Taille de la police du texte */
  box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
  resize: vertical; /* Permet de redimensionner verticalement uniquement */
}

.form-row {
  margin-bottom: 15px; /* Espace entre les lignes du formulaire */
}

/* CSS pour griser le textarea en mode affichage */
.textarea-disabled {
  background-color: #f0f0f0; /* Couleur de fond grise */
  color: black; /* Couleur du texte grise */
  border: 1px solid #d0d0d0; /* Bordure grise */
  resize: none; /* Désactiver le redimensionnement */
  width: 100%; /* S'assurer que le textarea prend toute la largeur */
  box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
}

/* Style global du formulaire de connexion */
#loginDiv {
  max-width: 400px; /* Largeur maximale du formulaire */
  margin: 50px auto; /* Centrage horizontal et espacement supérieur */
  padding: 20px; /* Espacement intérieur */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  background-color: #ffffff; /* Fond blanc */
  border: 1px solid #ddd; /* Bordure légère */
}

#loginDiv h3#welcome {
  margin-bottom: 20px; /* Espacement inférieur */
  font-size: 24px; /* Taille de la police */
  color: #333; /* Couleur du texte */
  text-align: center; /* Centrage du texte */
}

.form-row {
  margin-bottom: 15px; /* Espacement inférieur */
}

.form-row label {
  display: block; /* Affichage en bloc pour aligner correctement avec les champs */
  font-weight: bold; /* Texte en gras */
  margin-bottom: 5px; /* Espacement inférieur */
  color: #555; /* Couleur du texte */
}

.form-row input[type="text"],
.form-row input[type="password"] {
  width: 100%; /* Largeur totale */
  padding: 10px; /* Espacement intérieur */
  border: 1px solid #ccc; /* Bordure légère */
  border-radius: 5px; /* Coins arrondis */
  box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
  font-size: 16px; /* Taille de la police */
}

/* Style spécifique pour le bouton de connexion */
#btnLogIn {
  display: block; /* Affichage en bloc pour occuper toute la largeur disponible */
  width: 100%; /* Largeur totale */
  padding: 12px; /* Espacement intérieur */
  border: none; /* Enlève la bordure */
  border-radius: 5px; /* Coins arrondis */
  color: #fff; /* Couleur du texte */
  font-size: 16px; /* Taille de la police */
  cursor: pointer; /* Curseur main */
  background-color: #007bff; /* Couleur de fond principale */
  margin-top: 10px; /* Espacement supérieur */
  transition: background-color 0.3s ease; /* Transition douce pour le changement de couleur */
}

#btnLogIn:hover {
  background-color: #0056b3; /* Couleur de fond au survol */
}

/* Style spécifique pour le bouton d'inscription */
#btnSignUp {
  display: block; /* Affichage en bloc pour occuper toute la largeur disponible */
  width: 100%; /* Largeur totale */
  padding: 12px; /* Espacement intérieur */
  border: none; /* Enlève la bordure */
  border-radius: 5px; /* Coins arrondis */
  color: #fff; /* Couleur du texte */
  font-size: 16px; /* Taille de la police */
  cursor: pointer; /* Curseur main */
  background-color: #28a745; /* Couleur de fond pour le bouton d'inscription */
  margin-top: 10px; /* Espacement supérieur */
  transition: background-color 0.3s ease; /* Transition douce pour le changement de couleur */
}

#btnSignUp:hover {
  background-color: #218838; /* Couleur de fond au survol pour le bouton d'inscription */
}

/* Style spécifique pour le bouton de confirmation d'inscription */
#btnConfirmSignUp {
  display: block; /* Affichage en bloc pour occuper toute la largeur disponible */
  width: 100%; /* Largeur totale */
  padding: 12px; /* Espacement intérieur */
  border: none; /* Enlève la bordure */
  border-radius: 5px; /* Coins arrondis */
  color: #fff; /* Couleur du texte */
  font-size: 16px; /* Taille de la police */
  cursor: pointer; /* Curseur main */
  background-color: #28a745; /* Couleur de fond pour le bouton d'inscription */
  margin-top: 10px; /* Espacement supérieur */
  transition: background-color 0.3s ease; /* Transition douce pour le changement de couleur */
}

#btnConfirmSignUp:hover {
  background-color: #218838; /* Couleur de fond au survol pour le bouton d'inscription */
}

/* Style spécifique pour le bouton de redirection vers la connexion */
#btnGoToLogin {
  display: block; /* Affichage en bloc pour occuper toute la largeur disponible */
  width: 100%; /* Largeur totale */
  padding: 12px; /* Espacement intérieur */
  border: none; /* Enlève la bordure */
  border-radius: 5px; /* Coins arrondis */
  color: #007bff; /* Couleur du texte pour correspondre à la couleur de connexion */
  font-size: 16px; /* Taille de la police */
  cursor: pointer; /* Curseur main */
  background-color: #f8f9fa; /* Fond clair pour le bouton de redirection */
  margin-top: 10px; /* Espacement supérieur */
  transition: background-color 0.3s ease; /* Transition douce pour le changement de couleur */
}

#btnGoToLogin:hover {
  background-color: #e2e6ea; /* Couleur de fond au survol pour le bouton de redirection */
}
nav {
  background-color: #fff;
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav button, nav select {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

nav button:hover, nav select:hover {
  background-color: #f0f0f0;
}

nav select {
  flex-grow: 1;
}
#tasksContainer {
  padding: 20px;
}

.tasks-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tasks-table thead {
  background-color: #4a90e2;
  color: #fff;
}

.tasks-table th, .tasks-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.tasks-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
  margin-bottom: 10px; /* Ajoute un espace de 10px sous chaque ligne */
  display: block; /* Nécessaire pour que la marge soit appliquée */
}

.tasks-table tbody tr:hover {
  background-color: #f1f1f1;
}

.tasks-table th {
  font-weight: bold;
}

.tasks-table td button {
  padding: 5px 10px;
  margin-right: 5px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tasks-table td button.delete {
  background-color: #e74c3c;
  color: #fff;
}

.tasks-table td button.delete:hover {
  background-color: #c0392b;
}

.tasks-table td button.validate {
  background-color: #2ecc71;
  color: #fff;
}

.tasks-table td button.validate:hover {
  background-color: #27ae60;
}
#btnPlus {
  font-size: 18px;
}

#btnListCategory, #btnValidatedTaskHistory, #btnShowInCalendar {
  flex-grow: 1;
}

#btnListCategory, #btnValidatedTaskHistory, #btnShowInCalendar, #btnPlus {
  background-color: #4a90e2;
  color: #fff;
}

#btnListCategory:hover, #btnValidatedTaskHistory:hover, #btnShowInCalendar:hover, #btnPlus:hover {
  background-color: #357ab8;
}

#btnPlus img{
  width: 30px; /* Taille d'image ajustée pour le bouton de profil */
  height: 30px; /* Taille d'image ajustée pour le bouton de profil */
  
}
#btnPlus {
  background-color: white;
}
#btnPlus:hover {
  background-color: green;
}

.entete{
  padding: 2em;
  background-repeat: repeat; /* Répète le fond nuageux */
  background-size: cover; /* Couvre toute la div */
  border-radius: 8px; /* Ajoute des coins arrondis */
}

#addTaskDiv {
  position: relative;
  max-width: 900px; /* Largeur maximale du formulaire */
  margin: 50px auto; /* Centrage horizontal et espacement supérieur */
  padding: 20px; /* Espacement intérieur */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  background-color: #ffffff; /* Fond blanc */
  border: 1px solid #ddd; /* Bordure légère */
}
.contenuSettings{
  position: relative;
  max-width: 900px; /* Largeur maximale du formulaire */
  margin: 50px auto; /* Centrage horizontal et espacement supérieur */
  padding: 20px; /* Espacement intérieur */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  background-color: #ffffff; /* Fond blanc */
  border: 1px solid #ddd; /* Bordure légère */
  
}


#addTaskDiv h3#welcome {
  margin-bottom: 20px; /* Espacement inférieur */
  font-size: 24px; /* Taille de la police */
  color: #333; /* Couleur du texte */
  text-align: center; /* Centrage du texte */
}

#addTaskDiv button {
  position: absolute; /* Positionnement absolu par rapport au conteneur */
  bottom: 10px; /* Position à 10px du bas du conteneur */
  right: 10px; /* Position à 10px de la droite du conteneur */
  padding: 10px 15px;
}
/* .aligned-center{
  display: flex;
  justify-content: center;
  align-items: left;
  height: 100%;
} */

/* Style pour le tableau avec l'ID "customersValidated" */
#customersValidated {
  width: 100%; /* Le tableau prend toute la largeur disponible */
  padding: 2em;
  padding-top: 0em;
  font-size: 16px; /* Taille de la police du texte */
  text-align: left; /* Aligne le texte à gauche */
}

/* Style pour les en-têtes du tableau */
#customersValidated thead th {
  background-color: #4a90e2; /* Fond bleu clair pour les en-têtes */
  color: #fff; /* Texte blanc */
  border-bottom: 2px solid #333; /* Bordure inférieure sombre */
  padding: 10px; /* Espacement intérieur */
  font-weight: bold; /* Texte en gras */
}

/* Style pour les cellules du tableau */
#customersValidated tbody td {
  border-bottom: 1px solid #ddd; /* Bordure inférieure claire */
  padding: 10px; /* Espacement intérieur */
}

/* Style pour les lignes paires du tableau */
#customersValidated tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Fond gris clair */
}

/* Style pour les lignes impaires du tableau */
#customersValidated tbody tr:nth-child(odd) {
  background-color: #ffffff; /* Fond blanc */
}

/* Style pour les lignes du tableau au survol */
#customersValidated tbody tr:hover {
  background-color: #f1f1f1; /* Fond gris clair au survol */
}

/* Style pour les sous-tableaux à l'intérieur des cellules */
#customersValidated tbody td table {
  width: 100%; /* Le sous-tableau prend toute la largeur disponible */
  border-collapse: collapse; /* Assure que les bordures sont fusionnées */
}

/* Style pour les cellules des sous-tableaux */
#customersValidated tbody td table td {
  border: 1px solid #ddd; /* Bordure fine pour les cellules du sous-tableau */
  padding: 8px; /* Espacement intérieur */
  width: 20%;
}


/* Style pour les boutons dans les cellules du tableau */
#customersValidated tbody td button {
  padding: 5px 10px; /* Espacement intérieur pour les boutons */
  margin-right: 5px; /* Marge droite entre les boutons */
  border: none; /* Enlève la bordure des boutons */
  border-radius: 5px; /* Coins arrondis */
  cursor: pointer; /* Curseur main pour indiquer cliquable */
  transition: background-color 0.3s; /* Transition douce pour la couleur de fond */
}

/* Style pour les boutons de suppression */
#customersValidated tbody td button.delete {
  background-color: #e74c3c; /* Couleur de fond rouge pour la suppression */
  color: #fff; /* Texte blanc */
}

#customersValidated tbody td button.delete:hover {
  background-color: #c0392b; /* Couleur de fond rouge foncé au survol */
}

/* Style pour les boutons de validation */
#customersValidated tbody td button.validate {
  background-color: #2ecc71; /* Couleur de fond verte pour la validation */
  color: #fff; /* Texte blanc */
}

#customersValidated tbody td button.validate:hover {
  background-color: #27ae60; /* Couleur de fond verte foncée au survol */
}

/* Assurer une bonne largeur pour les colonnes du tableau */
#customersValidated td, #customersValidated th {
  text-align: left; /* Aligne le texte à gauche dans les cellules */
  vertical-align: top; /* Aligne le texte en haut des cellules */
}

#popup-ok {
  background-color: #28a745; /* Vert */
  color: white;
}

#popup-ok:hover {
  background-color: #218838; /* Vert foncé au survol */
}

/* Style spécifique pour le bouton "Cancel" */
#popup-cancel {
  background-color: #dc3545; /* Rouge */
  color: white;
}

#popup-cancel:hover {
  background-color: #c82333; /* Rouge foncé au survol */
}
#ToDoIcon{
  width: 3em; /* Taille d'image ajustée pour le bouton de profil */
  height: 3em; /* Taille d'image ajustée pour le bouton de profil */
  margin-right: 1em;
}