body {
  background-color: #282020;
}

body > nav:nth-of-type(2) {
  background-color: #181010;
}

.bg-dark {
  background-color: #434 !important;
}

.text-light {
  color: #eee !important;
}

.text-dark {
  color: #322 !important;
}

.text-light a {
  /* Increase link contrast with our background */
  color: #8ee;
}

.text-dark a {
/*  color: #21a; */ /* in case link color is hard to read*/
}

code {
  /*color: #aea;*/
  font-weight: 600;
}

.alert-dark {
  background-color: #434;
  border-color: #ff8;
}

.alert-dark.text-dark {
  color: #eee !important;
}

.nav-tabs {
  border-color: #7d623c;
  border-bottom-width: 2px;
}

.nav-tabs .nav-link:hover {
  border-color: #7d623c;
}

.nav-tabs .nav-link.active {
  background-color: #383030;
  border-color: #7d623c;
  color: #eee;
}

h1, h2, h3, h4, h5, h6 {
  /*
    When scrolling to a header (eg by clicking an #anchor link), scroll 3.5rem
    above to account for the nav bar.
    Too bad we can't just say "the height of x". But 3.5rem matches the height
    of the nav bar.
  */
  scroll-margin-top: 3.5rem;
}

.category-image {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.text-outline-black-1 {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pixel-art {
  /* Firefox */
  image-rendering: -moz-crisp-edges;
  /* Chrome */
  image-rendering: pixelated;
}

.banner-tier-1 {
  border-style: dashed;
  padding: 1px;
  margin: 2px;
}

.banner-tier-2 {
  border-style: dotted;
  padding: 1px;
  margin: 2px;
}

.banner-tier-3 {
  border-style: solid;
  padding: 1px;
  margin: 2px;
}

/* Make sticky column background dark. Without this, the columns assume Bootstrap light colour */
table.DTFC_Cloned th, table.DTFC_Cloned td {
  background-color: #303030;
}

div.banner img {
  max-width: 180px;
  /* Required in Chrome to preserve aspect ratio, but not in Firefox. */
  object-fit: contain;
}

hr {
  /* Slightly lighter <hr>s, to suit our dark background. */
  border-top: 2px solid #7d623c;
}

.table-dark thead tr, .table-dark tbody tr, .table-dark.table-striped tbody tr {
  background-color: #303030;
}

.table-dark.table-striped tbody tr:nth-of-type(2n+1) {
  background-color: #404040;
}

.table-dark.table-hover tbody tr:hover > td, .table-dark.table-hover tbody tr:hover > th {
  background-color: #505050;
}

.table-secondary > td {
  background-color: #606;
}

.table-striped .table-secondary:nth-child(2n) > td {
  background-color: #4d004d;
}

.table-dark.table-hover .table-secondary:hover > td {
  background-color: #909;
}

.table-secondary > th {
  background-color: #7d623c;
}

.table-dark.table-hover .table-secondary:hover > th {
  background-color: #7d623c;
}

.table-dark td, .table-dark th, .table-dark thead th {
  border-color: #7d623c;
}

/* XX hack workaround, restore the bootstrap styling (otherwise table-dark
   doesn't render right with datatables) */
table.dataTable tbody tr {
  background-color: #343a40;
}

.lr-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.lr-flex > div {
  width: 48%;
}

.form-control, .custom-select, .custom-select:focus {
  background-color: #303030;
  color: #eee;
  border-color: #7d623c;
}

.form-control:focus {
  background-color: #202020;
  color: #eee;
}

input {
  background-color: #101010;
  color: #eee;
}

.page-link {
  background-color: #303030;
  color: #eee;
  border-color: #7d623c;
}

.page-link:hover {
  background-color: #434;
  color: #eee;
  border-color: #7d623c;
}

.page-item.disabled .page-link {
  background-color: #282020;
  border-color: #7d623c;
}

.page-item.active .page-link {
  background-color: #757;
  border-color: #7d623c;
}

.pagination {
  border-color: #000;
}

#player-search-div {
  width:100%;
}

#player-search {
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#clan-search {
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

.search-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.search-list li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  padding: 12px;
  text-decoration: none;
  display: block;
}

.search-list li a:hover {
  background-color: #434;
}