html {
  height: 100%;
}

.navbar a {
  white-space: nowrap;
}

.navbar-padding {
  padding: 0 0.5rem;
}

.navbar-image {
  height: 30px;
}

#navbarDropdown {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.btn-account {
  width: 100%;
}

@font-face {
  font-family: arxFont;
  src: url(/static/global/fonts/SansSerifFLF/sansserifbldflf.otf);
}

@media (max-width: 576px) {
  #arx-logo-text {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html {
    overflow-x: hidden !important;
  }
  
  body {
    overflow-x: hidden;
    padding-top: 60px !important;
  }

  .navbar {
    padding: 5px !important;
    min-height: 56px;
    align-items: center;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  .navbar-brand img {
    width: 70px !important;
  }

  .btn-nav,
  .btn-nav-width {
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem !important;
    margin: 0.1rem !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
  }

  .dropdown-menu {
    position: absolute !important;
    transform: translateX(-80%) !important;
    left: 80% !important;
    max-width: 90vw;
    min-width: 200px !important;
    white-space: nowrap;
  }

  .sidenav {
    max-width: 100vw !important;
  }

  .sidenav[style*="width: 500px"] {
    width: 100% !important;
  }
}

.svg-invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.arx-body {
  min-height: 100%;
  padding-top: 70px; /* overwrite with selector #arx-body */
}

.is-invalid {
  border: 1px solid red !important;
}

#context-menu .context-menu-icon-annotation {
  margin: 0 0 0 0;
}

.black-links a {
  color: black;
}

.white-links a {
  color: white;
}

.arx-tag.pathway {
  background-color: rgb(35, 0, 187);
  color: white;
}

.arx-click-menu .no-collapse p {
  margin-bottom: 0;
  white-space: unset;
}

.arx-click-menu .no-collapse .arx-tag {
  white-space: break-spaces;
  width: unset;
}

.read-only-div {
  max-height: 13rem;
  min-height: 1rem;
  resize: vertical;
  overflow: auto;
  padding: 6px 6px 6px 6px;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}

.read-only-div[style*="height"] {
  max-height: unset;
}

.mono-div {
  white-space: pre;
  font-family: monospace, monospace;
  overflow: scroll;
  max-height: 15rem;
  background-color: #e9ecef;
  padding: 6px;
  border-radius: 0.25rem;
}

/*
inspired by "2019 answer": https://stackoverflow.com/questions/22252472/change-svg-color
convert hex (e.g. #2980b9) to filter: https://codepen.io/sosuke/pen/Pjoqqp
 */
.context-menu-icon-table::before {
  background-image: url("/static/global/ionicons/md-list-box.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-copy::before {
  background-image: url("/static/global/ionicons/md-copy.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-pathway::before {
  background-image: url("/static/global/ionicons/ios-git-branch.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-organism::before {
  background-image: url("/static/global/ionicons/md-bug.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-tree::before {
  background-image: url("/static/global/customicons/upsidedown-tree.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-world::before {
  background-image: url("/static/global/ionicons/ios-globe.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-annotation::before {
  background-image: url("/static/global/ionicons/md-pricetag.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-annotations::before {
  background-image: url("/static/global/ionicons/md-pricetags.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-flower-plot::before {
  background-image: url("/static/global/customicons/flower-plot.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-gene-trait-matching::before {
  background-image: url("/static/global/ionicons/ios-star-half.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-blast::before {
  background-image: url("/static/global/customicons/blast.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-downloader::before {
  background-image: url("/static/global/ionicons/ios-download.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-taxid::before {
  background-image: url("/static/global/customicons/taxid.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-gene::before {
  background-image: url("/static/global/customicons/gene.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-genes::before {
  background-image: url("/static/global/customicons/genes.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-gene-comparison::before {
  background-image: url("/static/global/customicons/gene-comparison.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-dotplot::before {
  background-image: url("/static/global/customicons/dotplot.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-help::before {
  background-image: url("/static/global/ionicons/md-help.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-feedback::before {
  background-image: url("/static/global/ionicons/md-mail.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-hyperlink::before {
  background-image: url("/static/global/ionicons/md-link.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-select-all::before {
  background-image: url("/static/global/ionicons/md-radio-button-on.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon-select-none::before {
  background-image: url("/static/global/ionicons/md-radio-button-off.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon::before {
  background-size: 23px 23px;
  width: 24px;
  height: 24px;
  content: "";
  position: absolute;
  left: 0.5em;
}

.dropdown-item.context-menu-icon {
  padding-left: 2.2em !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #86b4e6 !important;
}

.arx-click-menu .dropdown-header {
  white-space: unset;
}

.arx-click-menu .many-genomes {
  background: #ebf5ff;
}

.arx-click-menu .many-genes {
  background: #ffecec;
}

.arx-click-menu .many-annotations {
  background: #ecfff3;
}

.context-menu-header {
  font-weight: bold;
}

.tag-editor {
  padding: 0.375rem 0.375rem !important;
  font: unset !important;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  /* limit height, enable scroll */
  height: 8rem;
  resize: vertical;
  overflow-y: scroll !important;
}

.form-group label {
  margin-top: 0.2rem;
}

.form-group .tag-editor .tag-editor-tag {
  color: red;
  background: black;
}

.form-group .tag-editor .tag-editor-delete {
  color: red;
  background: black;
}

.form-group .tag-editor .tag-editor-delete i::before {
  color: white;
}

/*
 * secondary navbar / breadcrumb-push
*/

.body-push {
  /* push body down */
  height: 55px;
}

.breadcrumb-push {
  /* push breadcrumb down */
  margin-top: 55px;
}

.breadcrumb-fixed {
  /* keep breadcrumb on top of page */
  position: fixed;
  z-index: 20;
  width: 100%;
  margin-top: -69px;
}

.breadcrumb a {
  color: #343a40;
}

.breadcrumb-fixed .breadcrumb {
  border-radius: unset;
}

.btn-nav {
  background-color: #6b8cfe !important;
  color: #fff !important;
  font-weight: 500 !important;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.btn-nav:hover {
  background-color: #5680e8 !important;
}

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

.btn-nav-width {
  background-color: #6b8cfe !important;
  color: #fff !important;
  font-weight: 500 !important;
  min-width: 80px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.btn-nav-width:hover {
  background-color: #5680e8 !important;
}

.btn-nav-outline {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    font-weight: 400 !important;
}
.btn-nav-outline:hover {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
}