/* Main layout */
div#map {
    width: auto;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Menu bar */
#menu-bar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1001;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
}

#menu-bar .panel-btn {
    white-space: nowrap;
}

.menu-bar-button-label {
    padding-left: 0.3em;
}

/* Status bar */
#status-bar {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 999;
}

/* Floating panel cards */
.panel-card {
    position: fixed;
    top: 4rem;
    left: 1rem;
    width: 350px;
    max-height: 85vh;
    z-index: 1000;
    display: none;
}

.panel-card-body {
    overflow-y: auto;
    max-height: calc(85vh - 3.5rem);
}

div.indented-section {
    padding-left: 2em;
    padding-right: 1em;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

/* Bands panel card is special - full height and dynamically sized */
.panel-card-bands {
    width: 30em;
    height: calc(100vh - 5rem);
    max-height: none;
}

.panel-card-bands-body {
    height: calc(100% - 2.5rem);
    overflow: hidden;
    padding: 0 !important;
}

/* Bands panel inner layout */
div#bandsPanelInner {
    height: 100%;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
    display: flex;
    overscroll-behavior-x: none;
}

div.bandCol {
    height: 100%;
    min-width: 8em;
    display: flex;
    flex-flow: column;
    overflow-y: clip;
}

div.bandColHeader {
    flex: 0 1 auto;
}

div.bandColMiddle {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bandColMiddle {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior-y: none;
}

.bandColMiddle::-webkit-scrollbar {
    display: none;
}

div.bandColMiddle ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div.bandColMiddle ul li {
    display: table-row;
    line-height: 0.5em;
}

/*noinspection CssUnusedSymbol*/
div.bandColMiddle ul li.withSpots {
    line-height: 1em;
}

div.bandColMiddle ul li span {
    display: table-cell;
    vertical-align: middle;
}

.bandColorSample {
    display: inline-block;
    height: 1em;
    width: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

/* Leaflet features */
.wabSquareLabel, .wabSquareLabelLong {
    font-size: 80%;
}