body {
  font-family: Arial, sans-serif;
  /*margin: 20px; */
}

#top-container {
  height: 45vh;  /* 70% de la hauteur de l'écran */
  overflow-y: auto;
}

#table-container {
  height: 50vh;  /* 70% de la hauteur de l'écran */
  overflow-y: auto;
  border: 1px solid #ccc;
}

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

#table-container tr:nth-child(odd) td{
 background: rgba(214, 204, 254, .4);
 /*color: Grey;*/
 padding-left: 10px;
 padding-right: 10px;
}
#table-container tr:nth-child(even) td{
 background: rgba(214, 204, 254, .1);
 /*color: Grey;*/
 padding-left: 10px;
 padding-right: 10px;
}

#table-container thead th{
 background: rgba(214, 204, 254);
 border: 1px solid #ccc;
 position: sticky;
 top: 0;
 z-index: 1; /* Pour rester au-dessus des lignes */
}

#active.active-yes {
  color: green;
}

#active.active-no {
  color: red;
}

th, td {
/*  padding: 8px; */
  border: 1px solid #ccc;
}

.loading-cell {
  text-align: center;
  padding: 16px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}