:root {
  --bs-link-color-rgb: 0, 128, 2;
  --bs-link-color: rgb(var(--bs-link-color-rgb));
  --bs-link-hover-color-rgb: 95, 153, 96;
  --bs-link-hover-color: rgb(var(--bs-link-hover-color-rgb));
  --bs-link-focus-color: rgb(73, 116, 73);
  --bs-secondary-color: #6c757d;
  --sidebar-width: 180px;
  --scroll-bar-width: 16px;
}

@media (max-width: 575.98px) {
  body {
    font-size: 14px;
  }

  .run-table .run-button,
  .run-table .run-date,
  .run-table .run-user,
  .run-table .run-view,
  .run-table .run-notification,
  .run-table .run-diff,
  .run-table .run-elo,
  .run-table .run-live,
  .run-table .run-info {
    display: inline-flex;
    width: unset !important;
    border-top: 0 !important;
    background: 0 !important;
    box-shadow: none !important;
  }

  .run-table .run-elo {
    display: block;
  }

  .run-table > tbody > tr:nth-of-type(odd) {
    background-color: var(--bs-table-striped-bg);
  }
}

@media (min-width: 992px) {
  section {
    max-width: calc(
      100vw - var(--sidebar-width) - var(--bs-gutter-x) -
        var(--scroll-bar-width)
    );
  }

  .layout {
    display: grid;
    grid-template-areas: "sidebar main";
    grid-template-columns: var(--sidebar-width) auto;
  }

  .mainnavbar {
    position: -webkit-sticky;
    position: sticky;
    top: 3.5rem;
    display: block !important;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
  }

  .run-info,
  .user-repo {
    word-break: break-word;
  }
}

@media (max-width: 991.98px) {
  header .nav-item > * {
    display: flex;
    align-items: center;
  }

  header .nav-item > * i {
    text-align: center;
    width: 24px;
  }

  .links-nav {
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
  }

  .links-nav .links-group {
    -moz-column-break-inside: avoid;
    break-inside: avoid;
  }

  .links-nav .links-group > .list-unstyled {
    font-size: 1em;
  }

  .links-nav .links-group .links-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .offcanvas-body::-webkit-scrollbar {
    display: none;
  }

  .card-lg-sm {
    --bs-card-spacer-y: 0.5rem;
    --bs-card-spacer-x: 0.5rem;
    --bs-card-cap-padding-y: 0.25rem;
    --bs-card-cap-padding-x: 0.5rem;
  }
}

.main {
  grid-area: main;
}

::-webkit-scrollbar {
  width: var(--scroll-bar-width);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  min-height: 50px;
  border-radius: 20px;
  background-color: #adadad;
  border: 4px solid var(--bs-white);
}

.sticky-top {
  background: var(--bs-body-bg);
}

.btn.btn-sm.btn-light {
  min-width: 53px;
}

.bg-light-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bs-primary);
}

.bg-light-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 0.15);
  color: var(--bs-secondary);
}

code {
  white-space: pre-wrap;
  word-break: break-word !important;
}

/* Confirm deny button */
.run-deny .dropdown-menu.show {
  min-width: 0;
  padding: 0;
  background-color: transparent;
  border: none;
}

.dropdown-menu {
  max-height: 10em;
  overflow: auto;
}

a {
  text-decoration: none;
}

a:focus {
  color: var(--bs-link-focus-color);
}

.alert .alert-link {
  text-decoration: underline;
}

.main .default-net {
  background-color: palegreen !important;
}

.main .default-net a {
  color: black;
}

h2,
h3,
h4 {
  font-weight: bold;
}

legend {
  padding-bottom: 5px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

.elo-results {
  background: #f5f5f5;
  font-size: 12px;
  margin: 2px;
  padding: 1px;
  line-height: 13px;
  padding: 3px;
}

.elo-results-top {
  display: inline-block;
}

.elo-results-top .rounded.elo-results {
  font-size: 14px;
  line-height: normal;
}

.results-pre {
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.ltc-highlight {
  color: var(--bs-link-color);
}

.time-odds {
  border: medium solid Pink;
}

.checkbox.inline {
  margin-left: 20px;
  margin-right: 0;
}

#non_default-button {
  margin-bottom: 8px;
}

.run-date,
.run-diff {
  text-align: center;
}

/* Left navigation */
.mainnavbar {
  background-color: var(--bs-gray-300);
  grid-area: sidebar;
}

.mainnavbar::-webkit-scrollbar {
  width: 8px;
}

.mainnavbar::-webkit-scrollbar-thumb {
  border: 2px solid var(--bs-gray-300);
}

.mainnavbar::-webkit-scrollbar-track {
  background-color: var(--bs-gray-300);
}

.main::-webkit-scrollbar-thumb {
  border: 4px solid var(--bs-body-bg);
}

.main::-webkit-scrollbar-track {
  background-color: var(--bs-body-bg);
}

#change-color-theme:hover {
  cursor: pointer;
}

/* Icons */
.mainnavbar a::before,
#diff-num-comments + a::before,
#copy-diff::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  width: 18px;
  text-align: center;
  margin-right: 4px;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
}

.mainnavbar [href="/tests"]::before {
  content: "\f00b";
}

.mainnavbar [href="/tests/finished?success_only=1"]::before {
  content: "\f14a";
}

.mainnavbar [href="/tests/finished?yellow_only=1"]::before {
  content: "\f3fd";
}

.mainnavbar [href="/tests/finished?ltc_only=1"]::before {
  content: "\f017";
}

.mainnavbar [href^="/tests/user/"]::before {
  content: "\f0c3";
}

.mainnavbar [href="/tests/run"]::before {
  content: "\f067";
}

.mainnavbar [href="/upload"]::before {
  content: "\f093";
}

.mainnavbar [href="/contributors"]::before {
  content: "\f0c0";
}

.mainnavbar [href="/contributors/monthly"]::before {
  content: "\f091";
}

.mainnavbar [href="/actions"]::before {
  content: "\f46d";
}

.mainnavbar [href="/nns"]::before {
  content: "\f5dc";
}

.mainnavbar [href^="/sprt_calc"]::before {
  content: "\f1ec";
}

.mainnavbar [href="https://github.com/official-monty/montytest"]::before
{
  content: "\f441";
}

.mainnavbar [href="https://github.com/official-monty/Monty/tree/master/train"]::before
{
  content: "\f3e2";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.mainnavbar [href="https://huggingface.co/datasets/Viren6/MontyBooks"]::before
{
  content: "\f02d";
}

.mainnavbar .monty-repo::before {
  content: "\f578";
}

.mainnavbar .wiki::before {
  content: "\f266";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.mainnavbar .regression::before {
  content: "\f201";
}

.mainnavbar .release::before {
  content: "\f019";
}

.mainnavbar .get-involved::before {
  content: "\f4c4";
}

.mainnavbar .discord::before {
  content: "\f392";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.mainnavbar [href="/signup"]::before {
  content: "\f234";
}

.mainnavbar [href="/login"]::before {
  content: "\f2f6";
}

.mainnavbar [href="/user"]::before {
  content: "\f007";
}

.mainnavbar [href="/logout"]::before {
  content: "\f2f5";
}

.mainnavbar [href="/user_management"]::before {
  content: "\f4fd";
}

.mainnavbar [href="/workers/show"]::before {
  content: "\f502";
}

.mainnavbar #change-color-theme #sun::before {
  content: "\f185";
}

.mainnavbar #change-color-theme #moon::before {
  content: "\f186";
}

.details-table td:last-child {
  word-break: break-word;
}

.statistics-table td {
  width: 20%;
}

.sprt-calc-chart {
  height: 500px;
}

@media (min-width: 768px) {
  .form-control.number {
    width: 6em;
  }
}

.form-control.number {
  text-align: right;
}

#sprt-calc-description ul {
  word-break: break-word;
}

#diff-num-comments + a::before {
  content: "\f09b";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

#copy-diff::before {
  content: "\f328";
}

#div_spsa_preload {
  background-image: url("/img/preload.gif");
  height: 32px;
  display: none;
}

/* Header */
header.navbar {
  background-color: var(--bs-light);
  z-index: 1030;
}

.brand-logo {
  background-image: url(../img/monty.png);
  background-position: center;
  background-size: cover;
  height: 40px;
  width: 40px;
}

/* Links in the left navigation */
.links-heading {
  color: #2e2e2e;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 0.5rem;
}

.links-group .links-link {
  display: flex;
  color: var(--bs-gray-800);
  text-decoration: none;
  padding: 4px 4px 4px 12px;
  border-radius: 0.25rem;
}

.links-group .links-link:hover {
  background: var(--bs-light);
  color: var(--bs-body-color);
}

th {
  cursor: pointer;
}

td {
  border-color: transparent;
  vertical-align: middle;
}

.run-view {
  word-break: break-word;
  min-width: 100px;
}

/* tests_view page */
.spsa-param-row td:first-child {
  text-align: left;
}

#diff-contents {
  max-height: 70vh;
  margin-bottom: 0 !important;
}

#tasks {
  max-height: 60vh;
  margin-bottom: 12px;
}

/* Background colors for running tasks on test run pages */
.table tbody tr.info > td {
  background-color: #cff4fc;
}

/* Background colors for a highlighted task */
.table tbody tr.highlight > td {
  background-color: #ffbbff;
}

/* Pagination links */
.pagination {
  --bs-pagination-color: var(--bs-body-color);

  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem
    rgba(var(--bs-link-color-rgb), 0.25);

  --bs-pagination-active-bg: var(--bs-link-hover-color);
  --bs-pagination-active-border-color: var(--bs-link-color);

  --bs-pagination-disabled-color: var(--bs-gray-500);
}

option.grayedoutoption {
  background-color: LightGray;
}

.mw-xxl {
  max-width: 1320px;
}

.col-limited-size {
  max-width: 450px;
  margin: 0 auto 30px auto;
}

.monospace {
  font-family: var(--bs-font-monospace);
}

.form-control[readonly] {
  background: var(--bs-gray-300);
}

input[type="checkbox"],
.form-check-label {
  cursor: pointer;
}

.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.no-arrows {
  -moz-appearance: textfield;
}

.list-group-checkable .list-group-item {
  cursor: pointer;
}

.list-group-item-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.list-group-item-check:hover + .list-group-item {
  background-color: var(--bs-list-group-border-color);
}

.list-group-item-check:checked + .list-group-item {
  color: #fff;
  background-color: var(--bs-link-focus-color);
}

.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
  pointer-events: none;
  opacity: 0.5;
}

.greyed {
  pointer-events: none;
  opacity: 0.5;
  color: #aaa; /* Lighter text color */
  cursor: not-allowed; /* Change cursor to indicate it's disabled */
}

#machines {
  max-height: 41vh;
}

#machines td {
  height: 37px;
}

#machines th {
  padding-bottom: 1.1vh;
  white-space: nowrap !important;
}

/* Override the background color of the Skeleton wrapper*/
.ssc-wrapper {
  background-color: transparent !important;
}

#machines .ssc-wrapper {
  padding: 0.9vh 0vh 0vh 0vh !important;
}

#machines .ssc-head-line {
  height: 3.4vh !important;
  margin-bottom: 2vh !important;
}

/* Override bootstrap colors since v5.3.0 */
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: inherit !important;
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: inherit !important;
  opacity: 0.65;
}

.dropdown-item {
  cursor: pointer;
}