html {
    height: 100%;
}

.navbar a {
    white-space: nowrap;
}

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

.navbar-image {
    height: 30px;
}

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

.btn-account {
    width: 100%
}

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

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

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

.ogb-body {
    min-height: 100%;
    padding-top: 70px; /* overwrite with selector #ogb-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;
}

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

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

.ogb-click-menu .no-collapse .ogb-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: .25rem;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
}

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

/*
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-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;
}

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

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

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

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

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

.tag-editor {
    padding: .375rem .375rem !important;
    font: unset !important;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .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;
}