:root{
  /* CSS HEX */
  --dim-grey: #676b6fff;
  --bg-color: #333;
  --pacific-blue: #19a1b3ff;
  --text-color: #ddd;
  --header-bg: #181818ff;
  
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-color);
  --bs-body-color: var(--text-color);

  --bs-link-color: var(--pacific-blue);
  --bs-link-hover-color: color-mix(in srgb, var(--pacific-blue) 80%, #000);
  --bs-link-color-rgb: 25, 161, 179;
  --bs-link-hover-color-rgb: 20, 129, 145;
}

.btn-primary {
  --__bg_color: var(--pacific-blue);
  --__hover_color: color-mix(in srgb, var(--__bg_color) 90%, #000);
  --__active_color: color-mix(in srgb, var(--__bg_color) 80%, #000);
  --__disabled_color: color-mix(in srgb, var(--__bg_color) 50%, #000);

  --bs-btn-color: #000;
  --bs-btn-bg: var(--__bg_color);
  --bs-btn-border-color: var(--__bg_color);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--__hover_color);
  --bs-btn-hover-border-color: var(--__hover_color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--__active_color);
  --bs-btn-active-border-color: var(--__active_color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--__disabled_color);
  --bs-btn-disabled-border-color: var(--__disabled_color);
}

  .btn-secondary {
  --__bg_color: #b9b6b9ff;
  --__hover_color: color-mix(in srgb, var(--__bg_color) 90%, #000);
  --__active_color: color-mix(in srgb, var(--__bg_color) 80%, #000);
  --__disabled_color: color-mix(in srgb, var(--__bg_color) 50%, #000);

  --bs-btn-color: #000;
  --bs-btn-bg: var(--__bg_color);
  --bs-btn-border-color: var(--__bg_color);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--__hover_color);
  --bs-btn-hover-border-color: var(--__hover_color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--__active_color);
  --bs-btn-active-border-color: var(--__active_color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--__disabled_color);
  --bs-btn-disabled-border-color: var(--__disabled_color);
}

.form-control,
.form-select {
  background-color: var(--dim-grey);
  color: var(--text-color);
  border-color: var(--dim-grey);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--dim-grey);
  color: var(--text-color);
  border-color: var(--pacific-blue);
  box-shadow: 0 0 0 0.25rem rgba(25, 161, 179, 0.5);
}

.clickable {
  cursor: pointer;
}

.modal-content {
  background-color: var(--bg-color);
}

.card {
  --bs-card-border-color : color-mix(in srgb, var(--header-bg) 50%, #fff);
}

.navbar {
  background-color: var(--header-bg); /*#230000*/
}


.table-dark {
  --bs-table-bg: color-mix(in srgb, var(--header-bg) 95%, #fff);
  --bs-table-color: var(--text-color);
}

.htmx-indicator {
  display:none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display:block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}