body {
  /* Mobile margin for footer */
  margin-bottom: 12em;
}

@media (min-width: 768px) {
  body {
    /* Desktop margin for footer */
    margin-bottom: 6em;
  }
}

html {
  position: relative;
  min-height: 100%;
  color-scheme: light;
}

a {
  text-decoration: none;
  color: var(--bs-black)
}
a:hover {
  text-decoration: underline;
  color: #00a6fb;
}

h3 > a {
  text-decoration: none;
  color: var(--bs-black);
}

h3 > a:hover {
  text-decoration: underline;
  color: #00a6fb;
}

code {
  white-space: nowrap;
}

header {
  z-index: 99;
  background-color: var(--bs-body-bg);
}

.nav-link.active {
  text-decoration: underline;
}

.bg-primary, .bg-danger {
  /*
    boostrap using the body color is not great because this text
    has a different background than the rest of the body
  */
  color: #fff;
}

/*
  light theme is default bootstrap variables
  dark theme (media query or data on html root element)

  I could have written JavaScript to accomplish this,
  but I don't think that simply changing all *-light to *-dark
  would have completely transformed this application to dark mode
  and would have had a flash of light before the JavaScript would
  be able to run.
*/
html.dark {
  color-scheme: dark;
  --bs-body-bg: #1d1d1d;
  --bs-body-bg-rgb: 29, 29, 29;
  --bs-body-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  
  --bs-black: #fff;
  --bs-white: #000;
  --bs-light: #212529;
  --bs-dark: #f8f9fa;
  --bs-dark-rgb: 248, 249, 250;
  --bs-light-rgb: 33, 37, 41;
  --bs-black-rgb: 255, 255, 255;
  --bs-white-rgb: 0, 0, 0;

  --bs-border-color: #eee;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.175);
  
  --bs-heading-color: #fff;
  
  --hover-bg: #333;
}

html.dark .navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html.dark .navbar-light .nav-link {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .navbar-light .nav-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

html.dark .navbar-light .nav-link.active {
  color: var(--bs-black);
}

html.dark .table {
  color: #fff;
  --bs-table-bg: #444;
  --bs-table-striped-bg: #333;
  --bs-table-striped-color: #fff;
  --bs-table-accent-bg: #444;
  --bs-table-accent-color: #fff;
  --bs-table-hover-color: #fff;
}


/* using light class because original light class adds
    variables that overwrite root variables */
html.dark .table-light {
  --bs-table-bg: #212529;
  --bs-table-accent-bg: #212529;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: var(--bs-black);
  border-color: var(--bs-table-active-bg);
}

html.dark .form-control, .form-control:focus {
  background-color: var(--bs-light);
  color: var(--bs-black);
}

html.dark .form-control:disabled {
  background-color: #7c7d7e;
}

html.dark .modal-content {
  background-color: var(--bs-body-bg);
}

html.dark .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

html.dark .card {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

html.dark .text-muted {
  color: var(--bs-border-color) !important;
}

html.dark .list-group-item {
  color: var(--bs-black);
  background: var(--bs-light);
}

html.dark .list-group-item-action:hover {
  background: var(--hover-bg);
}

html.dark .accordion-item {
  color: var(--bs-black);
  background: var(--bs-light);
}

html.dark .accordion-button {
  color: var(--bs-black);
  background: var(--bs-light);
}

html.dark .accordion-button::after {
  filter: invert();
}

html.dark .accordion-button:not(.collapsed)::after {
  filter: none;
}

.unit-display-div{
  height: 1.5rem;
  width: 1.5rem;
  color: white;
}

.flame{
  height: 1.5rem;
  width: 1.5rem;
  background-image: url("../flame.svg");
  background-size: cover;
  background-repeat: no-repeat;
}