:root {
  --bg_h: #1d2021;
  --bg: #282828;
  --bg_s: #32302f;
  --bg1: #3c3836;
  --bg2: #504945;
  --bg3: #665c54;
  --bg4: #7c6f64;

  --fg: #fbf1c7;
  --fg1: #ebdbb2;
  --fg2: #d5c4a1;
  --fg3: #bdae93;
  --fg4: #a89984;

  --red: #fb4934;
  --green: #b8bb26;
  --yellow: #fabd2f;
  --blue: #83a598;
  --purple: #d3869b;
  --aqua: #8ec07c;
  --gray: #928374;
  --orange: #fe8019;

  --red-dim: #cc2412;
  --green-dim: #98971a;
  --yellow-dim: #d79921;
  --blue-dim: #458588;
  --purple-dim: #b16286;
  --aqua-dim: #689d6a;
  --gray-dim: #a89984;
  --orange-dim: #d65d0e;
}

/* Normal Colors */

.red {
  color: var(--red);
}

.green {
  color: var(--green);
}

.yellow {
  color: var(--yellow);
}

.blue {
  color: var(--blue);
}

.purple {
  color: var(--purple);
}

.aqua {
  color: var(--aqua);
}

.gray {
  color: var(--gray);
}

.orange {
  color: var(--orange);
}

/* Dim Colors */

.red-dim {
  color: var(--red-dim);
}

.green-dim {
  color: var(--green-dim);
}

.yellow-dim {
  color: var(--yellow-dim);
}

.blue-dim {
  color: var(--blue-dim);
}

.purple-dim {
  color: var(--purple-dim);
}

.aqua-dim {
  color: var(--aqua-dim);
}

.gray-dim {
  color: var(--gray-dim);
}

.orange-dim {
  color: var(--orange-dim);
}

/* Foreground Colors */

.fg {
  color: var(--fg);
}

.fg1 {
  color: var(--fg1);
}

.fg2 {
  color: var(--fg2);
}

.fg3 {
  color: var(--fg3);
}

.fg4 {
  color: var(--fg4);
}

/* Background Colors */

.bg-hard {
  color: var(--bg_h);
}

.bg {
  color: var(--bg);
}

.bg-soft {
  color: var(--bg_s);
}

.bg1 {
  color: var(--bg1);
}

.bg2 {
  color: var(--bg2);
}

.bg3 {
  color: var(--bg3);
}

.bg4 {
  color: var(--bg4);
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

a {
  color: var(--purple);
}

a:hover {
  color: var(--aqua);
}

/* Update Button Styles */

table#issues-table.dataTable tbody tr a.btn.btn-custom-update {
  background-color: var(--green-dim) !important;
  color: var(--bg) !important;
  border-color: var(--green) !important;
}

table#issues-table.dataTable tbody tr a.btn.btn-custom-update:hover {
  background-color: var(--blue) !important;
  color: var(--bg) !important;
  border-color: var(--blue) !important;
}

/* DataTables Overrides */

table.dataTable thead th,
table.dataTable thead td {
  border-color: 1px solid var(--orange);
  color: var(--red);
}

table.dataTable.no-footer {
  border-bottom: 1px solid var(--bg2);
}

table#issues-table.dataTable tbody tr {
  color: var(--fg);
}

table#issues-table.dataTable tbody tr.highlighted-row {
  color: var(--fg);
  background-color: var(--bg2) !important;
}

table#issues-table.dataTable tbody tr:not(.highlighted-row) {
  background-color: var(--bg) !important;
}

table#issues-table.dataTable tbody tr:not(.highlighted-row):hover {
  background-color: var(--bg3) !important;
  color: var(--fg);
}

table#issues-table.dataTable tbody tr td {
  border-color: var(--orange);
}

.table tbody tr a {
  color: var(--blue);
}

table#issues-table.dataTable tbody tr a {
  color: var(--blue) !important; /* Change the hyperlink text color */
}

table#issues-table.dataTable tbody tr a:hover {
  color: var(--aqua) !important; /* Change the hyperlink text color on hover */
}

.dataTables_wrapper .dataTables_filter {
  color: var(--fg) !important; /* Change the text color next to the search box */
}

.dataTables_wrapper .dataTables_filter input {
  background-color: var(--fg) !important; /* Change the search box background color */
  color: var(--bg1) !important; /* Change the search box text color */
  border-color: var(--orange); !important /* Change the search box border color */
}

.form-control {
  background-color: var(--fg2);
  color: var(--bg);
}
.form-control:focus {
  background-color: var(--fg2);
  outline: none;
  color: var(--bg);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logout-link {
  text-decoration: none;
  color: var(--purple) !important;
  border-color: var(--purple) !important;
}

.logout-link:hover {
  text-decoration: none;
  color: var(--blue) !important;
  background-color: var(--bg) !important;
  border-color: var(--blue) !important;
}