body {
  background-color: #262626;
  background-color: #111;
  color: #FFF;
  height: 100%;
}

/* .panel {
    background-color:#202020;
    color:#FFF;
  } */

select,
select:active,
input,
input:active,
input:focus,
.jumbotron,
.form-control,
.form-control:active,
.form-control:focus,
.form-select,
.form-select:active,
.form-select:focus {
  /* background-color:#303030; */
  /* color:#FFF; */
  max-width: 500px;
}

.description {
  color: #888;
}

li.active {
  background-color: #303030;
}

footer {
  color: grey;
  background-color: rgb(0, 0, 0, 70%);
  text-align: center;
  position: fixed;
  width: 100%;
  margin-top: 100%;
  bottom: 0px;
}

.container-fluid, .container {
  margin-bottom: 100px;
  padding-bottom: 100px;  
  /* NOTE: Avoid scrollbar pushing navbar */
  position: absolute;
  top: 100px;
  bottom: 0;
  overflow-y: scroll;
  left: 50%;
  transform: translateX(-50%);
}

.content {
  display: none;
}

.output,
.card {
  margin: 15px;
}

.card-body {
  padding: 15px;
  margin: 15px;
}

/* Can be scrolled */
.code {
  height: auto;
  min-height: 300px;
  overflow: auto;
  /* white-space: nowrap; Allows textarea to scroll horizontally */
  font-family: monospace;
}

.tablehead,
td.tablehead,
th.tablehead,
.tablehead td,
.tablehead th {
  text-align: center;
  background-color: var(--tblr-green-lt);
  color: var(--tblr-green-dk);
}

.modal-backdrop {
  opacity: 0.9 !important;
  background-color: #111;
}

.box {
  border: 1px solid #444;
  padding: 10px;
  margin: 10px 0;
  background-color: #1e1e1e;
}