:root {
  --primary-color: #3498db; /* Main theme color */
/*  --secondary-color: #; /* Secondary theme color */
/*  --secondary-color: #2ecc71;*/
  --secondary-color: #f1c40f;
  --secondary-dark-color: #d89a00;

  --background-color: #f9f9f9; /* Background color */
  --background-dark-color: #333; /* Dark background for overlays or menus */

  --text-color: #333; /* Main text color */
  --text-light-color: #fff; /* Light text color for contrast */

  --success-color: #2ecc71; /* Color for positive actions */
  --success-dark-color: #29b866; /* darker shade of --success-color */

  --error-color: #e74c3c; /* Color for error messages */
  --warning-color: #f7dc6f; /* Color for warning messages */

  --danger-color: #e74c3c; /* Color for destructive actions */
  --danger-dark-color: #c0392b; /* darker shade of --danger-color */

}

.button-secondary {
  background-color: var(--secondary-color);
  border: var(--secondary-color);
  color: var(--text-light-color);
}

.button-secondary:hover {
  background-color: var(--secondary-dark-color);
  color: var(--text-light-color);
}

.button-edit {
  background-color: var(--success-color);
  color: var(--text-light-color);
}

.button-edit:hover {
  background-color: var(--success-dark-color);
  color: var(--text-light-color);
}

.button-delete {
  background-color: var(--danger-color);
  color: var(--text-light-color);
}

.button-delete:hover {
  background-color: var(--danger-dark-color);
  color: var(--text-light-color);
}

.errors {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--danger-color);
}

.errors li {
  background-color: #ffe6e6;
  border: 1px solid #fcc;
  padding: 5px;
  margin-bottom: 5px;
}

.errors li:before {
  content: "\26A0"; /* warning symbol */
  margin-right: 5px;
}

.active {
  background-color: #f2f2f2;
/*  background-color: var(--background-dark-color);*/
/*  color: var(--text-light-color);*/
}

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/*table tr:nth-child(even) {
  background-color: ;
}

table tr:nth-child(odd) {
  background-color: #ffffff;
}*/

.scrollable-table {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 500px; /* adjust this value as needed */
  margin: 0 auto;
}

/* Loading spinner */

.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator{
  opacity: 1;
}

.htmx-request.htmx-indicator{
  opacity: 1;
}