:root{
    --popover-bg-primary: #cfe2ff;
    --popover-border-primary: #084298;
    --popover-text-primary: #084298;
    --popover-bg-secondary: #e2e3e5;
    --popover-border-secondary: #41464b;
    --popover-text-secondary: #41464b;
    --popover-bg-success: #d1e7dd;
    --popover-border-success: #0f5132;
    --popover-text-success: #0f5132;
    --popover-bg-info: #cff4fc;
    --popover-border-info: #055160;
    --popover-text-info: #055160;
    --popover-bg-warning: #fff3cd;
    --popover-border-warning: #664d03;
    --popover-text-warning: #664d03;
    --popover-bg-danger: #f8d7da;
    --popover-border-danger: #842029;
    --popover-text-danger: #842029;
    --popover-bg-light: #fefefe;
    --popover-border-light: #636464;
    --popover-text-light: #636464;
    --popover-bg-dark: #d3d3d4;
    --popover-border-dark: #141619;
    --popover-text-dark: #141619;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/Rubik-Regular.ttf");
}

html {
    font-size: 90%;
}
html.pictured-html {
    background-image: url("/static/imgs/zebrabase_homepage.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
html.pictured-html body {
    background: transparent;
}

body {
    font-family: 'Rubik', sans-serif;
}

.new-version {
    background-color: #ffb623;
    color: #a00808;
}

.navbar .btn {
    white-space: nowrap;
}

.anchor-highlight {
    border-left: 5px solid var(--bs-danger) !important;
}

/*.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}*/

.btn-block {
    display: block;
    width: 100%;
}
.alert {
    padding: .75rem 1.25rem;
}
.navbar {
    padding: 0.5rem 1rem;
}
.badge {
    padding: .25em .4em;
}
.table > tbody:not(:first-child) {
    border-top-color: var(--bs-gray-b2);
}
.table tr:last-child td,
.table > tr:last-child th,
.table tbody tr:last-child th {
    border: none;
}
.form-row {
    /*margin-bottom: 1rem;*/
    align-items: baseline;
}
.form-group {
    margin-bottom: 1rem;
}
.form-row label {
    margin-bottom: .25rem;
}

.btn.disabled img {
    opacity: .5;
}

.smaller {
    font-size: .75rem;
}

.bigger {
    font-size: 110%;
}

.dynamic-multiselect-wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.table-sm > :not(caption) > * > * {
    padding: 0.3rem;
}

.clear {
    clear: both;
}

.icon {
    width: 2.8em; display: inline-block; text-align: center;
}

.btn .icon {
    width: 1.5rem;
}

.line-through {
    text-decoration: line-through;
}

.btn-bg-white {
    background-color: white;
}

.bg-light-blue {
    background-color: #6eb8ff;
}

.text-justify {
    text-align: justify;
}

.narrow-content {
    max-width: 800px;
    margin: auto;
}

.main-button:hover {
    opacity: 0.8;
}
.main-button {
    width: 30%;
    min-width: 200px;
    max-width: 250px;
    border-radius: 5px;
    background-color: #e5e5e5;
}
.main-button.disabled {
    filter: grayscale(1);
}
.main-button h4 {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.main-button hr {
    margin: 4px 0 0 0;
    border-top-color: var(--bs-secondary);
}
.main-button small {
    font-size: 0.8rem;
}
.main-button img {
    width: 150px;
    height: 150px;
}

.rating-stars .star-s {
    display: none;
}
.rating-stars:not(:hover) .star-selected > .star-s {
    display: inline-block !important;
}
.rating-stars:not(:hover) .star-selected > .star-r {
    display: none !important;
}
.rating-stars div {
    display: inline-block;
}
.rating-stars:hover .star-s {
    display: inline-block;
}
.rating-stars:hover .star-r {
    display: none;
}
.rating-stars div:not(:hover) .star-s {
    display: none;
}
.rating-stars div:not(:hover) .star-r {
    display: inline-block;
}

.btn-instance {
    background-color: #e2e2e2;
    text-align: left;
    font-weight: bold;
    color: black;
    border-color: #ccc;
}

.btn-instance:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}

ul.ui-menu.ui-autocomplete {
    z-index: 1200;
    max-width: 1000px;
}

.ui-autocomplete-category {
    font-weight: bold;
    font-size: 105%;
    color: #555555;
    padding-top: .2rem;
    padding-left: 3px;
    background-color: #dddddd;
}

.ui-autocomplete-error {
    font-weight: bold;
    font-size: 105%;
    color: #856404;
    padding-top: .2rem;
    padding-left: 3px;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.accordion .ui-state-active,
.accordion .ui-widget-content .ui-state-active,
.accordion .ui-widget-header .ui-state-active,
.accordion a.ui-button:active,
.accordion .ui-button:active,
.accordion .ui-button.ui-state-active:hover {
    border-color: var(--bs-dark);
    background-color: var(--bs-secondary);
}

td.ui-datepicker-warning > a.ui-state-default:not(.ui-state-active),
div.datepicker-legend-warning {
    border: 1px solid #f1c699;
    background: #fdeadf;
    color: #5f3f3f;
}

.detail-side-table {
    /*max-height: 350px;
    overflow-y: auto;*/
}

.ui-autocomplete-loading {
    background: white url("/static/imgs/loading-simple.gif") right 5px center no-repeat;
    background-size: 28px;
}
.dynamic-multiselect-wrapper ul.ui-autocomplete-loading {
    background-position: center center;
    background-size: 64px;
}

.ui-datepicker {
    z-index: 1100 !important;
}

.markdown {
    max-height: 16rem;
    overflow: auto;
}

#instanceTitle {
    color: #c2c2c2;
    font-weight: bold;
    padding-left: 0.5rem;
    border-left: solid var(--bs-danger);
    font-size: 1rem;
}

.navbar-brand #instanceTitle{
    border-left: none;
    padding-left: 0rem;
}

.footer {
    padding: 1rem 0;
    color: #b0b0b0;
    text-align: center;
    border-top: .05rem solid #f0f0f0; /*#2eb634;*/
    margin-top: 6.5rem;
    font-size: 90%;
    z-index: 2;
    position: relative;
    background: white;
}

.footer img {
    height: 1rem;
}

.footer a {
    text-decoration: none;
}

.alert > .closing-x {
    float: right;
    font-size: 110%;
    position: relative;
    cursor: pointer;
}

.wide-container, main > .container{
    padding: 1.2rem 1rem 1rem 1rem;
}

.detail-actions .btn-lg,
.detail-actions .btn-group-lg .btn {
    padding: .2rem .6rem;
    font-size: 1.75rem;
}

.color-true {
    color: #00cf00;
}

.color-false {
    color: #f60000;
}

tr.highlight {
    background-color: rgba(79, 147, 211, 0.35) !important;
}

tr.item-active-false {
    background-color: rgba(246, 0, 0, 0.3) !important;
}

.table-horizontal th {
    border-top: none;
}

.table-vertical tr:first-child td, .table-vertical tr:first-child th {
    border-top: none;
}

.split-row-header {
    padding: 4px 8px;
    margin-bottom: 8px;
    background-color: #f8f8f8;
    border: 1px solid #dee2e6;
}
.split-row-header .form-control,
.split-row-header .input-group{
    width: auto !important;
}

.split-row-body {
    padding: 0 8px;
}


.tank-width-img {
  font-size: 90%;
  line-height: 0.75em;
}
.tank-width-img.tank-width-img-2::before {
  content: "▢▢";
}
.tank-width-img.tank-width-img-3::before {
  content: "▢▢▢";
}
.tank-width-img.tank-width-img-4::before {
  content: "▢▢▢▢";
}



.substock-statusbar .btn:not(.zb-status-default) {
    color: white !important;
}

/*.zb-status {
    background-color: rgb(255, 217, 102) !important;
}*/

/* Default status class for diet, light etc. in substock list */
.zb-status-default,
.zb-status-status-default {
    background-color: #e2e2e2 !important;
    color: #7d7d7d !important;
}
/* END */

.zb-status-productive,
.zb-status-status-productive {
    background-color: var(--bs-status-green) !important;
    color: black !important;
}

.zb-status-retired,
.zb-status-status-retired {
    background-color: var(--bs-status-red) !important;
    color: black !important;
}

.zb-status-unproductive,
.zb-status-status-unproductive {
    background-color: var(--bs-light) !important;
    color: black !important;
}

.zb-badge.zb-status-unproductive {
    background-color: var(--bs-gray-d2) !important;
    color: black !important;
}

.zb-status-dead,
.zb-status-status-dead,
.zb-status-split,
.zb-status-💀-split,
.zb-status-status-💀-split,
.zb-status-status-split,
.zb-status-merged,
.zb-status-💀-merged,
.zb-status-status-💀-merged,
.zb-status-status-merged {
    background-color: var(--bs-darker) !important;
    color: white !important;
}

.badge.zb-badge {
    padding: 5px 8px;
    white-space: inherit;

    /* fallback color */
 /*   background-color: #ffd966;*/
}

.zb-inputs{
    max-height: 300px;
    overflow-y: auto;
}

.zb-input {
    clear: both;
    border-top: 1px solid #dee2e6;
}

.zb-input-header {
    padding: .3rem;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zb-input-active-false .zb-input-type {
    text-decoration: line-through;
}

.zb-input-hint-color-box {
    min-width: 1rem;
    min-height: 1rem;
    margin-right: 5px;
    padding: 0 3px;
    color: black;
    display: inline-block;
}

.zb-input-target-not-me {
    background-color: var(--bs-gray-d2);
}

.zb-input-body {
    padding: .3rem;
}
.zb-input-body-details {
    max-height: 15rem;
    overflow: auto;
}

.bookmark-wrapper {
    color: var(--bs-darker);
    float: right;
    padding: 0 .2rem;
}

.tag-wrapper {
    display: inline;
    float: right;
    padding: 0 .2rem;
    font-size: 0;
    line-height: 0;
}
.zb-mini-tag {
    width: 8px;
    height: 16px;
    border: 1px solid var(--bs-secondary);
    display: inline-block;
    margin: 0;
    margin-right: 1px;
}

.tank .facility-view-substock .tag-wrapper {
    padding-top: .2rem;
    margin-left: -5px;
    float: left;
}
.tank .facility-view-substock .tag-wrapper .zb-mini-tag {
    margin-bottom: 1px;
    display: block;
}

.tank .facility-view-substock .bookmark-wrapper {
    /*padding-top: .2rem;*/
    margin-right: -5px;
    float: right;
    font-size: .85rem;
}

.tank .facility-view-substock:not(.on-shelf) .bookmark-wrapper,
.fv-ss-label:not(.on-shelf) .bookmark-wrapper {
    display: none;
}

.modal .modal-header {
    border-radius: 0;
    padding: .3rem 1rem;
    background-color: var(--bs-darker); /*#343a40;*/
    color: white;
    border-bottom: none;
}

.modal .modal-header button {
    color: white !important;
}

.popover {
    max-width: 350px;
}
.popover.popover-wide {
    max-width: 600px;
}
.popover .popover-header {
    background-color: var(--bs-dark);
    color: white;
}

.popover .btn-close {
    position: relative;
    font-size: 65%;
    border-radius: 50%;
    background-color: white;
    padding: 5px;
    float: right;
    right: -.65rem;
    top: -.65rem;
    opacity: 1;
    border: solid 1px var(--bs-dark);
}

.form-switch .form-check-input {
    font-size: 110%;
    margin-top: .12em;
}

/***** GENERATED POPOVERS *******/
.popover.popover-primary {
    background-color: var(--popover-bg-primary);
    border-color: var(--popover-border-primary);
}
.popover.popover-primary .popover-body {
    color: var(--popover-text-primary);
}
.popover.popover-primary.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-primary.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-primary);
}
.popover.popover-primary.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-primary.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-primary);
}

.popover.popover-primary.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-primary.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-primary);
}
.popover.popover-primary.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-primary.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-primary);
}

.popover.popover-primary.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-primary.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-primary);
}
.popover.popover-primary.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-primary.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-primary);
}

.popover.popover-primary.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-primary.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-primary);
}
.popover.popover-primary.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-primary.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-primary);
}


.popover.popover-secondary {
    background-color: var(--popover-bg-secondary);
    border-color: var(--popover-border-secondary);
}
.popover.popover-secondary .popover-body {
    color: var(--popover-text-secondary);
}
.popover.popover-secondary.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-secondary.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-secondary);
}
.popover.popover-secondary.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-secondary.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-secondary);
}

.popover.popover-secondary.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-secondary.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-secondary);
}
.popover.popover-secondary.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-secondary.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-secondary);
}

.popover.popover-secondary.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-secondary.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-secondary);
}
.popover.popover-secondary.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-secondary.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-secondary);
}

.popover.popover-secondary.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-secondary.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-secondary);
}
.popover.popover-secondary.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-secondary.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-secondary);
}


.popover.popover-success {
    background-color: var(--popover-bg-success);
    border-color: var(--popover-border-success);
}
.popover.popover-success .popover-body {
    color: var(--popover-text-success);
}
.popover.popover-success.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-success.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-success);
}
.popover.popover-success.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-success.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-success);
}

.popover.popover-success.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-success.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-success);
}
.popover.popover-success.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-success.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-success);
}

.popover.popover-success.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-success.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-success);
}
.popover.popover-success.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-success.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-success);
}

.popover.popover-success.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-success.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-success);
}
.popover.popover-success.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-success.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-success);
}


.popover.popover-info {
    background-color: var(--popover-bg-info);
    border-color: var(--popover-border-info);
}
.popover.popover-info .popover-body {
    color: var(--popover-text-info);
}
.popover.popover-info.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-info.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-info);
}
.popover.popover-info.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-info.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-info);
}

.popover.popover-info.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-info.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-info);
}
.popover.popover-info.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-info.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-info);
}

.popover.popover-info.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-info.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-info);
}
.popover.popover-info.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-info.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-info);
}

.popover.popover-info.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-info.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-info);
}
.popover.popover-info.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-info.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-info);
}


.popover.popover-warning {
    background-color: var(--popover-bg-warning);
    border-color: var(--popover-border-warning);
}
.popover.popover-warning .popover-body {
    color: var(--popover-text-warning);
}
.popover.popover-warning.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-warning.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-warning);
}
.popover.popover-warning.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-warning.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-warning);
}

.popover.popover-warning.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-warning.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-warning);
}
.popover.popover-warning.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-warning.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-warning);
}

.popover.popover-warning.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-warning.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-warning);
}
.popover.popover-warning.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-warning.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-warning);
}

.popover.popover-warning.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-warning.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-warning);
}
.popover.popover-warning.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-warning.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-warning);
}


.popover.popover-danger {
    background-color: var(--popover-bg-danger);
    border-color: var(--popover-border-danger);
}
.popover.popover-danger .popover-body {
    color: var(--popover-text-danger);
}
.popover.popover-danger.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-danger.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-danger);
}
.popover.popover-danger.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-danger.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-danger);
}

.popover.popover-danger.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-danger.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-danger);
}
.popover.popover-danger.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-danger.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-danger);
}

.popover.popover-danger.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-danger.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-danger);
}
.popover.popover-danger.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-danger.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-danger);
}

.popover.popover-danger.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-danger.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-danger);
}
.popover.popover-danger.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-danger.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-danger);
}


.popover.popover-light {
    background-color: var(--popover-bg-light);
    border-color: var(--popover-border-light);
}
.popover.popover-light .popover-body {
    color: var(--popover-text-light);
}
.popover.popover-light.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-light.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-light);
}
.popover.popover-light.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-light.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-light);
}

.popover.popover-light.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-light.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-light);
}
.popover.popover-light.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-light.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-light);
}

.popover.popover-light.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-light.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-light);
}
.popover.popover-light.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-light.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-light);
}

.popover.popover-light.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-light.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-light);
}
.popover.popover-light.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-light.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-light);
}


.popover.popover-dark {
    background-color: var(--popover-bg-dark);
    border-color: var(--popover-border-dark);
}
.popover.popover-dark .popover-body {
    color: var(--popover-text-dark);
}
.popover.popover-dark.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.popover-dark.bs-popover-end > .popover-arrow::after {
    border-right-color: var(--popover-bg-dark);
}
.popover.popover-dark.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before,
.popover.popover-dark.bs-popover-end > .popover-arrow::before {
    border-right-color: var(--popover-border-dark);
}

.popover.popover-dark.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.popover-dark.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--popover-bg-dark);
}
.popover.popover-dark.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover.popover-dark.bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--popover-border-dark);
}

.popover.popover-dark.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.popover-dark.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--popover-bg-dark);
}
.popover.popover-dark.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before,
.popover.popover-dark.bs-popover-top > .popover-arrow::before {
    border-top-color: var(--popover-border-dark);
}

.popover.popover-dark.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.popover-dark.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--popover-bg-dark);
}
.popover.popover-dark.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before,
.popover.popover-dark.bs-popover-left > .popover-arrow::before {
    border-left-color: var(--popover-border-dark);
}
/***** END OF POPOVERS *******/

/*
.modal-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.6);
    z-index: 100;
    padding-top: 2rem;
    text-align: center;
}*/

.dashboard-number-xl {
    font-size: 7rem;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

#pedigree .btn-instance {
    min-width: 150px;
    max-width: 250px;
}

.pedigree-input {
    display: inline-block;
    vertical-align: top;
}
.pedigree-input .btn {
    padding: 0 2px;
    font-size: 1.25rem;
}

.pedigree-parents {
    display: inline-block;
}

#filters {
    border-bottom: 2px solid #444444;
}

tr.message-new {
    background-color: var(--bs-green-ll) !important;
    font-weight: bold;
}

.ac-label .d-ac-label-none {
    display: none !important;
}

.nowrap {
    white-space: nowrap;
}


/****************** ATTACHMENTS ********************/
.btn.btn-show-attachment {
    display: none;
}

.btn.btn-show-attachment[data-mime^="image"],
.btn.btn-show-attachment[data-mime^="text"],
.btn.btn-show-attachment[data-mime="application/pdf"] {
    display: inline-block;
}

.tooltip-inner img.thumbnail-True {
    max-width: 100%;
    display: block;
    margin-bottom: .6rem;
}
.tooltip-inner img.thumbnail-False {
    display: none;
}


/****************** WIZARD *********************/
#wizard-panel {
    height: 230px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 8px;
    z-index: 100;
}

#wizard-panel .wizard-text {
    overflow: auto;
}


/****************** NAVBARS ********************/

#logout a{
    font-size:  1.25rem;
}

.nav-text {
    display: inline-block;
    padding: .5rem;
}

.main-navbar .icon{
    width: 1.25rem;
    height: 1.25rem;
}

.main-navbar .nav-item {
    margin-right: 10px;
}

.main-navbar .nav-link {
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: 1.1rem;
}

.main-navbar .nav-item .nav-link {
    color: rgb(220, 220, 220);
}

.main-navbar .menu-item-active .nav-link {
    font-weight: bold;
    color: /*#e31e24*/ white !important;
}

.subnavbar-1 {
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--bs-gray-d2);
}

.subnavbar-1 .navbar-nav, .subnavbar-2{
    flex-wrap: wrap;
}

.subnavbar-1 .nav-text, .subnavbar-1 .nav-link {
    padding-top: .2rem;
    padding-bottom: .2rem;
    border-radius: 2px;
    white-space: nowrap;
}

.subnavbar-1 .nav-item{
    margin: 3px 1rem 3px 0;
    font-size: 1.1rem;
}

.subnavbar-1 .menu-item-active a.nav-link {
    background-color: var(--bs-darker);
    /* font-weight: bold; */
    padding-right: 20px;
    padding-left: 20px;
    color: white;
    font-size: 1.2rem;
}

.subnavbar-1 .menu-item-active a.nav-link:hover {
    background-color: #333;
    color: white;
    transition: .5s;
}

.subnavbar-2 {
    border-bottom: solid var(--bs-gray-d2) 1px;
    /*padding-top: .2rem;
    padding-bottom: .2rem;*/
}

.navbar-separator {
    border-left: 1px solid silver;
    height: 1.8rem;
    display: inline-block;
}

.tooltip{
    font-family: "Rubik", sans-serif;
}

.tooltip-section {
    padding: 4px 0;
}
.tooltip-section:not(:last-child) {
    border-bottom: 1px dashed white;
}

.tutorial-allowed-False {
    opacity: .4;
}
.tutorial-allowed-False .btn-start-tutorial {
    display: none;
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        width: 1200px;
        max-width: 90%;
    }
}

/******************* multi-col dropdown *******************/
.dropdown-menu-cols-2 {
    min-width: 30rem;
}

/******************* SMALL **********************/

@media (max-width: 990px) {
    .main-button img {
        height: 100px;
        width: 100px;
    }
    .main-button {
        width: 45%;
        min-width: 150px;
        max-width: 250px;
        border-radius: 5px;
    }
    .main-button h4 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }
    .main-button hr {
        margin: 4px 0 0 0;
        border-top-color: gray;
    }

    .page-navbars {
        position: unset !important;
    }
}


.nav-tabs .nav-link.active {
    background-color: var(--bs-darker);
    color: white;
}


table [data-key='list_name_gen'],
table [data-key='name_gen'],
table [data-key='name'] {
    width: 350px;
    max-width: 350px;
    min-width: 150px;
    word-break: break-word;
}
table [data-key='label'] {
    width: 500px;
    max-width: 500px;
    min-width: 250px;
    word-break: break-word;
}

table [data-key='list_name_gen'] a,
table [data-key='name_gen'] a,
table [data-key='name'] a,
table [data-key='label'] a {
    font-size: 0.9rem;
}

table td{
    vertical-align: middle !important;
}

.message-details {
    font-size: 90%;
    overflow-y: auto;
    max-height: 8rem;
    margin-top: .3rem;
}


.project-table-counttypetype-sub:before {
    content: "- ️";
}
.project-table-counttypetype-sub {
    color: var(--bs-red);
}
.project-table-counttypetype-no {
    color: var(--bs-secondary);
}

.project-table-severity-level-0 {
    color: var(--bs-green);
}
.project-table-severity-level-1 {
    color: var(--bs-green-l);
}
.project-table-severity-level-2 {
    color: var(--bs-warning);
}
.project-table-severity-level-3 {
    color: var(--bs-red-l);
}
.project-table-severity-level-4 {
    color: var(--bs-red);
}

.project-table-severity-level-exceeded {
    border-left: 8px solid var(--bs-danger) !important;
}

.project-table-youngling {
    background-color: var(--bs-light);
}

.bg-striped {
    background: repeating-linear-gradient(
        135deg,
        #343a40,
        #343a40 20px,
        #650f13 20px,
        #650f13 40px
    );
}
.bg-striped #instanceTitle {
    border-color: white !important;
}
.bg-striped .navbar-brand img {
    filter: brightness(10);
}

.filter-badge .filter {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.col-1  { width:   8.3%; }
td.col-2  { width:  16.6%; }
td.col-3  { width:  25.0%; }
td.col-4  { width:  33.3%; }
td.col-5  { width:  41.6%; }
td.col-6  { width:  50.0%; }
td.col-7  { width:  58.3%; }
td.col-8  { width:  66.6%; }
td.col-9  { width:  75.0%; }
td.col-10 { width:  83.3%; }
td.col-11 { width:  91.6%; }
td.col-12 { width: 100.0%; }