div.modal-content.modal-body p {
  padding: 5px;
  margin: 5px;
}

/* positioned like the custom-control of Bootstrap 4 (offsets with top in the templates) */
div.form-check {
  position: relative;
  margin-top: 1px;
}

/* unchecked boxes as visible as in Bootstrap 4 */
.form-check-input {
  border-color: #adb5bd;
}

/* columns are positioning parents (Bootstrap 4), e.g. for the "More" button of a box */
.row > [class*="col"] {
  position: relative;
}

p.gray, span.gray {
  color: #666;
}

button.btn-collapse {
  position: absolute;
  right: 5%;
  bottom: 0;
}

div.container.boxed {
  border: 1px #eee solid;
  border-radius: 8px;
}

div.row.row-top-spacer {
  margin-top: 15px;
}

div.container {
   max-width: 1280px;
}

/* upload fields (gui-builder/upload.html.twig): both labels open the file dialog */
div.upload-field label {
  cursor: pointer;
  margin-bottom: 0;
}

div.upload-field.genome .upload-button {
  background-color: #218838;
  border-color: #1e7e34;
  color: #fff;
}

div.upload-field.adds .upload-button {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff;
}

/* popover of missing files, the arrow follows the variables */
.popover-danger {
  --bs-popover-bg: #d9534f;
  --bs-popover-border-color: #d43f3a;
  --bs-popover-body-color: #fff;
  opacity: 0.8;
}

div.container.status {
  max-width: 1248px;
  width: 95%;
}

div.container.status .row {
  background-color: #ebebeb;
  border: 1px solid #777;
  border-radius: calc(.25rem - 1px);
}

div.container.status .row .col-sm.ls,
div.container.status .row .col-md.ls {
  background-color: #ddd;
  border-right: 1px solid #ccc;
}

div.container.status .row .col-sm.rs,
div.container.status .row .col-md.rs {
  border-right: 1px solid #777;
}

div.container.status .row .col-sm {
  padding: 7px;
}

button.btn-collapse-ac {
  font-size: 17pt;
}

a.btn.distance {
  margin: 5px;
}

/* header (the jumbotron of Bootstrap 4) */
.jumbotron {
  padding: 2rem 2rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
}

.jumbotron h1 {
    font-size: 3.5rem;
    letter-spacing: 1.38rem;
    margin-left: 0.7rem;
}

.jumbotron.text-center h1 a {
  font-weight: bold;
  color: #000;
}
.jumbotron.text-center h1 a:hover {
  text-decoration: none;
}

img#full-logo {
  width: 22%;
  min-width: 350px;
  max-width: 800px;
}

*:focus {
    outline: none;
}

.settigsrow {
  margin-top: 25px;
}

div#version_box {
  left: 0;
  top: 0;
  position: absolute;
  z-index: 10;
  line-height: 9pt;
  font-size: 9pt;
  color: #555;
}

div#version_box span a {
  color: #222;
}

pre#gene_sequence {
  font-family: monospace;
  font-size: 9pt;
  text-align: left;
}

form#megablast {
  display:inline;
  margin:0px;
  padding:0px;
}

.container.gprofiler {
  width: 99%;
  max-width: 1920px;
}

table#gprofiler {
  width: 100%;
  margin: 0 auto;
}

div.mt5px {
  margin-top:5px;
}

button.mr1rem {
  margin-right: 1rem;
}

div.modal-dialog.modal-dialog-centered.pipegraph {
  max-width: 1600px;
  width: 75%;
}

div.modal-dialog.modal-dialog-centered.pipegraph div.modal-content div.modal-body img {
  filter: grayscale(100%);
}

div.form-check.priorty_form {
  margin-left: 0.75rem;
  border-bottom: 1px solid #555;
}

li.icon.arrow_both {
  background-image: url("../../images/arrow-both.svg");
  background-repeat: no-repeat;
  background-position: 15px center;
}

li.icon span.txt {
  margin-left: 15px;
  padding-left: 8px;
  border-left: 1px solid #aaa;
}

ul li.sortable-dragging {
  background-color: #ccc;
}

ul li.sortable-placeholder {
  list-style-type: none;
}

.mono {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  font-size: 0.8rem;
}

img.orcid {
  height: 1rem;
}

div#host div.container div.host {
  display: block;
}

.form-check-input.inline {
  display: inline;
}

input.taxonomy, select.taxonomy {
  font-style: italic;
}

div.unit_type {
  display: none;
}
div#vecscreen p, div#vecscreen dl {
  text-align: justify;
}

/* genome boxes of the comparative upload */
div.upload-box {
  padding: 2.5px 5px;
}

div.upload-box .upload-name, div.upload-box hr, div.upload-box .form-check {
  margin: 2.5px 10px;
}

div.upload-box .progress {
  width: 100%;
  height: 5px;
}

/* species suggestions */
div.species-suggestions {
  max-height: 20rem;
  overflow-y: auto;
}

span.achi {
  background-color: #e9f4ff;
  color: #000;
  font-weight: bold;
}

div#log-names-list a.list-group-item {
  border-radius: 0.15rem;
}

pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 20px;
}

div#sidebar button.btn, div#sidebar a.btn {
  margin-bottom: 0.4em;
}

/* one sidebar button per line, right aligned */
div#sidebar .btn {
  display: block;
  width: fit-content;
  margin-left: auto;
}

/* links underlined only on hover, as in Bootstrap 4 */
a, .btn-link {
  text-decoration: none;
}

a:hover, .btn-link:hover {
  text-decoration: underline;
}

a.buildlink {
  color: #000;
}

#x-wrapper {
  position: fixed;
  right: 0;
  bottom: 0;
}

#x-wrapper .x-logo {
  width: 5vw;
  height: auto;
  margin-right: 1pt;
  margin-bottom: 1pt;
  max-width: 40px;
}

img.logo.heiderlab, img.logo.imi {
  width: 190px;
  float: right;
  margin-left:15px;
  margin-bottom: 15px;
}

img.logo.mosga {
  width: 128px;
  float: left;
  margin-right:15px;
  margin-bottom: 15px;
}

/* feature overview of the About tab */
div.features {
  clear: both;      /* start below the floated MOSGA/IMI logos of the intro */
  margin-top: 1.5rem;
}

div.features .feature {
  padding: 1rem;
  border: 1px solid #e3e6ea;
  border-radius: 0.5rem;
  background: #f8f9fa;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

div.features .feature:hover {
  border-color: #c7e6d0;
  box-shadow: 0 0.125rem 0.5rem rgba(33, 136, 56, 0.12);
}

span.feature-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  background: #e8f5ec;
}

svg.feature-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #218838;
}

/* Mobile phones */
@media only screen and (max-width: 768px) {
  .nav-link {
     padding: 0.3rem 0.4rem;
     font-size: 0.9rem;
  }

  .btn {
    padding: 0.2rem 0.15rem;
    font-size: 0.9rem;
  }

  .table td, .table th {
    padding: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.0;
  }

  .hidemobile {
    display: none;
  }

  img.logo.heiderlab, img.logo.imi {
    width: 6rem;
    margin-left: 0.3rem;
    margin-bottom: 0.3rem;
  }

  img.logo.mosga {
    width: 5rem;
    margin-left: 0.3rem;
    margin-bottom: 0.3rem;
  }

}