body {
  font-family: $default-font;
  -webkit-font-smoothing: antialiased;
}

// overall appearance (background color, font color, paragraphs, footer, etc.)
html {
  position: relative;
  min-height: 100%;
}
body {
  color: $default-font-color;
  background-color: $default-bg-color;
  letter-spacing: 0.1px;

  // always show a scrollbar not to flicker on tabs / long drop downs
  overflow-y: scroll;
}
[data-bs-theme='dark'] body {
  color: $default-font-color-dark;
  background-color: $default-bg-color-dark;
}

// don't underline links except on focus/hover
a {
  text-decoration: none;
}
a:focus, a:hover {
  text-decoration: underline;
}

// don't underline links at all on certain places
.nav-link {
  &:focus, &:hover {
    text-decoration: none;
  }
}
.dropdown-item {
  &:focus, &:hover {
    text-decoration: none;
  }
}
.page-link {
  &:focus, &:hover {
    text-decoration: none;
  }
}
.btn {
  &:focus, &:hover {
    text-decoration: none;
  }
}
@include media-breakpoint-up(md) {
  #content {
    padding-left: 40px;
    padding-right: 40px;
  }
}

// buttons
.btn i[class*="fa-"] + span {
  padding-left: 8px;
}
.btn-group-sm .btn.help_popover, .btn-sm.help_popover {
  padding-top: 6px;
}

// footer
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px;
  background-color: #f5f5f5;
}
[data-bs-theme='dark'] .footer {
  background-color: $default-bg-color-dark;
}
#footer-links {
  &.left {
    float: left;
  }
  &.right {
    float: right;
  }
  a {
    display: inline;
    margin-left: 15px;
    margin-right: 15px;
  }
}
body {
  // add some space between last elements and footer
  margin-bottom: 45px;
}

// paragraphs, links, misc
p {
  margin: 0 0 1em;
}
a {
  @include transition(all 0.2s);
}
[data-bs-theme='dark'] a:not(.btn) {
  color: $link-color-dark;
}
.links {
  text-align: left;
  padding-top: 0;
}

// headings
h1, .h1, h2, .h2 {
  margin-top: 18px;
  margin-bottom: 9px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.1;
  color: #444;
}
[data-bs-theme='dark'] {
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #bbb;
  }
}

// cards (former panels)
.card {
  margin-bottom: 15px;
}
[data-bs-theme='dark'] .card {
  background-color: $default-bg-color-dark;
  border: $table-border-color-dark solid 0.5px;
}

// colorful card headers (Bootstrap 4 only has colorful borders or fully colored cards)
.card.border-danger {
  border-color: #eed3d7;
  .card-header {
    color: #b94a48;
    background-color: #f2dede;
  }
}
[data-bs-theme='dark'] {
  .card.border-danger .card-header {
    color: #cf4644;
    background-color: #450202;
  }
}
.card.border-success {
  border-color: #d6e9c6;
  .card-header {
    color: #468847;
    background-color: #dff0d8;
  }
}
[data-bs-theme='dark'] {
  .card.border-success .card-header {
    color: #74f476;
    background-color: #144500;
  }
}
.card.border-warning {
  border-color: #fbeed5;
  .card-header {
    color: #c09853;
    background-color: #fcf8e3;
  }
}
[data-bs-theme='dark'] {
  .card.border-warning .card-header {
    color: #fdca71;
    background-color: #1d1800;
  }
}
.card.border-info {
  border-color: #bce8f1;
  .card-header {
    color: #3a87ad;
    background-color: #d9edf7;
  }
}
[data-bs-theme='dark'] {
  .card.border-info .card-header {
    color: #64cafd;
    background-color: #000;
  }
}

// big welcome box ("jumbtron")
.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #f9f9f9;
}
[data-bs-theme='dark'] .jumbotron {
  background-color: #111;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 200;
}

// tabs
.tab-content {
  padding-top: 15px;
}
.nav-tabs .nav-link {
  border: none;
  color: $default-font-color;
  &:hover, &:focus, &.active {
    border: none;
    box-shadow: inset 0 -2px 0 #446e9b;
    color: #446e9b;
  }
}
[data-bs-theme='dark'] {
  .nav-tabs .nav-link {
    color: $default-font-color-dark;
    &:hover, &:focus, &.active {
      box-shadow: inset 0 -2px 0 #6caef5;
      color: #6caef5;
      background-color: $default-bg-color-dark;
    }
  }
}

// popover
.help_popover {
  margin: 0 5px;
  &:focus, &:hover {
    outline: none;
    text-decoration: none;
  }
}
.popover code {
  word-break: break-all;
}
.popover .popover-header {
  word-break: break-all;
}

// tooltips
.tooltip .tooltip-inner {
  max-width: 400px;
  p {
    margin-bottom: 2px;
  }
  ul {
    padding-left: 1.2rem;
  }
  p, ul {
    text-align: left;
    word-break: break-word;
  }
}

// full screen mode
#content_fullscreen {
  min-width: 100%;
}

// Icon for copying job ID
.copy-jobid {
  margin-right: 5px;
}
[data-bs-theme='dark'] {
  .table {
    color: $default-font-color-dark;
    background-color: $default-bg-color-dark;
  }

  // All tests pagination
  .page-link, .page-item.disabled .page-link {
    background-color: $default-bg-color-dark;
    color: $default-font-color-dark;
    border: rgba(255, 255, 255, 30 / 100) solid 0.5px;
  }

  // All tests search field
  .chosen-container .chosen-drop, .chosen-container .chosen-results li, .chosen-container ul.chosen-choices {
    background-color: $default-bg-color-dark;
    background-image: none;
    color: $default-font-color-dark;
  }

  // All tests table rows
  .table td {
    border-top-color: rgba(255, 255, 255, 3 / 100);
  }
  .modal.show {
    background-color: lighten($default-bg-color-dark, 25%);
  }
  .modal-content {
    background-color: $default-bg-color-dark;
  }
  .modal-header, .modal-footer {
    border-top: none;
    border-bottom: none;
  }
  .container-fluid .btn-light:hover, .container-fluid .btn-light:active:hover {
    background-color: #101010;
    color: #cbc5bf;
  }
  .container-fluid .btn-light:active {
    background-color: #101010;
    background-image: radial-gradient(circle, lighten(#101010, 25%) 10%, #363636 11%);
  }
  input, textarea {
    background-color: $default-bg-color-dark;
    color: $default-font-color-dark;
    border: $table-border-color-dark solid 0.5px;
  }
}
