html {
  height: 100%;
  background-color: var(--color-off-white);
}

body {
  margin: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
}

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

  body {
    overflow-x: hidden;
    padding-top: 0 !important;
  }
}

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

.arx-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.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-tag::before {
  background-image: url("/static/global/ionicons/ios-at.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-file::before {
  background-image: url("/static/global/ionicons/md-document.svg");
  filter: invert(39%) sepia(80%) saturate(459%) hue-rotate(160deg)
    brightness(96%) contrast(93%); /* #2980b9 */
}

.context-menu-icon::before {
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  content: "";
}

.dropdown-item.context-menu-icon {
  position: relative;
  padding-left: 2.5em !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;
}

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

.btn {
  font-family: var(--font-headline) !important;
}

/* partials/help_icon */
.help-wrapper {
  position: relative;
  display: inline-block;
}
.help-icon {
  width: 1.1rem;
  height: 1.1rem;
  cursor: help;
}
.help-tooltip {
  display: none;
  position: absolute;
  top: 1.4rem;
  left: 0;
  background: var(--color-off-white);
  border: 1px solid var(--color-light-grey);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  white-space: normal;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 999;
  width: max-content;
  min-width: 200px;
  max-width: 600px;
}
.help-wrapper:hover .help-tooltip {
  display: block;
}