@import "node_modules/bootstrap/scss/functions.scss";
@import "node_modules/bootstrap/scss/variables.scss";

// Bootstrap customization, where we're supposed to
$enable-rounded: false;
$enable-print-styles: false;

$body-bg: $black;
$body-color: $gray-100;
$link-color: $gray-100;
$link-decoration: underline;
$link-hover-color: $gray-500;
$link-hover-decoration: underline;

$theme-colors: map-merge(
  $theme-colors,
  (
    primary: $white
  )
);

$list-group-bg: $black;
$list-group-border-color: $gray-300;

$table-border-color: $gray-900;

$modal-content-bg: $black;
$modal-header-border-width: 0;
$modal-footer-border-width: 0;

$close-color: $white;
$close-text-shadow: none;

@import "node_modules/bootstrap/scss/bootstrap.scss";

// Bootstrap customization, where we're not supposed to

// Fix hover color being white
@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value, $black);
  }
}

html,
body,
#root {
  height: 100%;
  color: #f8f9fa;
}

a:hover {
  color: #adb5bd;
}

.navbar-text,
.navbar-text a,
.nav-link {
  color: #f8f9fa;
}

.nav-link:focus {
  color: #adb5bd !important;
}

.navbar-text a:focus,
.navbar-text a:active,
.navbar-text a:hover,
.nav-link:hover {
  color: #adb5bd;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  flex-direction: row;
}

.navbar-expand {
  padding-left: 16px;
  padding-right: 16px;
}

.nav-link {
  text-decoration: none;
}

.list-group-item {
  text-decoration: none;
  color: #f8f9fa;
}

.list-group-item:hover {
  text-decoration: none;
}

.table thead th {
  border-bottom: 2px solid white;
  border-top: none;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #212529;
}

.close {
  opacity: 1;
}

img.controller-icon {
  width: 40px;
  height: 40px;
  margin-top: -20px;
}

h1 {
  font-size: 2.5rem;
}
