:root {
    --font-size-small: 14px;
    --action-button-width: 44px;
    --toggle-button-width: 38px;
}

/*
 *  responsive visibility
 */

.variant-mobile {
    @media (min-width: 660px) {
        display: none;
    }
}

.variant-tablet {
    @media (max-width: 659px) {
        display: none;
    }
}

.variant-desktop {
    @media (max-width: 959px) {
        display: none;
    }
}

.variant-widescreen {
    @media (max-width: 1199px) {
        display: none;
    }
}

.variant-vertical {
    @media (max-height: 399px) {
        display: none;
    }
}

/*
 *  basics
 */

.hidden {
    display: none;
}

a.row {
    text-decoration: none;
    color: inherit;
}

/*
 *  modals
 */

.layout-modal {
    width: 100%;
    height: 100dvh;
    padding: 0.5rem;
}

.modal-content .button-line {
    margin-top: 1.25rem;
}

@media (min-width: 768px) {
    .layout-modal {
        padding: 2rem;
    }
}

.modal-content {
    position: relative;
    max-width: 740px;
    margin: auto;
    border-radius: 1rem;
}

.modal-content form {
    position: absolute;
    top: 3rem;
    left: .5rem;
    right: .5rem;
    height: 80vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.layout-modal .form-label {
    font-size: var(--font-size-small);
    margin-bottom: 0.15rem;
}

/*
 *  body and main
 */

body {
    position: relative;
    width: 100%;
    height: 100%;
}

body .offcanvas.offcanvas-end {
    width: 260px;
}

.layout-main {
    padding-top: 56px;
    @media (max-height: 399px) {
        padding-top: 0;
    }
}

.content-main {
    padding: 0.75rem;
}

.sticky-secondary {
    top: 56px;
    @media (max-height: 399px) {
        top: 0;
    }
}

.hidden-tertiary {
    @media (max-height: 399px) {
        display: none;
    }
}

#secondaryNav {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
}

#historyTable {
    margin-top: 38px;
    @media (max-height: 399px) {
        margin-top: 0;
    }
}

.navbar-toggler {
    width: var(--action-button-width);
    padding: 3px 5px;
}

.navbar .container-fluid {
    flex-wrap: nowrap;
}

.navbar .layout-subnav {
    height: 38px;
}

.navbar .navbar-brand {
    max-width: 70vh;
    padding: 4px 0 6px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.navbar input.form-control {
    max-width: 9.5rem;
}

.navbar .btn.menu,
.navbar .btn.toggle {
    padding: 6px;
    white-space: nowrap;
    text-align: center;
}

.navbar .btn.menu {
    width: var(--action-button-width);
}

.navbar .btn.toggle {
    width: var(--toggle-button-width);
}

.navbar .btn.menu.open-order {
    padding: 6px 3px 6px 5px;
}

.navbar .nav-link .fa.larger,
.navbar .btn.menu .fa.larger {
    line-height: 23px;
}

.navbar .nav-link .fa.larger {
    font-size: 20px;
}

.navbar .btn.menu .fa.larger {
    font-size: 23px;
    vertical-align: bottom;
}

.navbar .btn.menu .fa.fa-database {
    font-size: 18px;
    line-height: 20px;
}

.navbar .nav-link .fa {
    padding: 0 0.5rem;
}

.navbar .offcanvas-body .nav-link .fa {
    padding-left: 0;
}

@media (max-width: 659px) {
    .navbar .chat-link .nav-link .fa {
        padding: 0 0.75rem;
        font-size: 20px;
    }
}

.navbar .page-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar .layout-subnav .btn-close {
    margin-left: -7px;
    margin-right: 4px;
    padding: 11px;
}

div.layers {
    position: relative;
    z-index: 2;
}

div.layers .background {
    position: absolute;
    bottom: 1px;
    right: -0.5rem;
    height: 8px;
    z-index: -1;
}

div.layers .background.score-bar {
    bottom: -2px;
}

.empty-item,
td.number.group,
td.number.weight,
td.number.score-bar,
.number.weight {
    font-size: var(--font-size-small);
}

.empty-item {
    font-style: italic;
}