@media screen and (min-width:2100px) {
    :root {
         --roundchart-size: 200px;
         --map-height: 60%;
         --plot-height: 400px;
         --dash-row-space: 1em;
         --dash-row-height: 6.5em;
         --base-font-size: 1rem;
         --multigauge-cutout: 60;
    }
}

@media screen and not (min-width:2100px) {
    :root {
         --roundchart-size: 150px;
         --map-height: 60%;
         --plot-height: 300px;
         --dash-row-space: 0.5em;
         --dash-row-height: 4.5em;
         --base-font-size: 0.72rem;
         --multigauge-cutout: 45;
    }
}


h1 {
    font-size: calc(var(--base-font-size) * 2.5) !important;
}
h2 {
    font-size: calc(var(--base-font-size) * 2) !important;
}
h3 {
    font-size: calc(var(--base-font-size) * 1.75) !important;
}
h4 {
    font-size: calc(var(--base-font-size) * 1.5) !important;
}
h5 {
    font-size: calc(var(--base-font-size) * 1.25) !important;
}
h6 {
    font-size: calc(var(--base-font-size) * 1) !important;
}


#mainContent {

}

.station-col {
    min-height: var(--dash-row-height);
    height: var(--dash-row-height);
    outline: solid 2px;
}

.bigtable {
    border-collapse: separate;
    border-spacing:0 var(--dash-row-space);
}

.roundchart-container {
    height: var(--roundchart-size);
}

.roundlabel-container {
    position: absolute;
    width: 100%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.roundunit-container {
    position: absolute;
    width: 100%;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
}
.roundunit-container h4 {
    color: var(--bs-card-title-color);
}


.roundchart-zone {
    width: var(--roundchart-size);
    position: relative;
}

#combiplotHourly {
    filter: invert(1) hue-rotate(180deg);
    max-height: var(--plot-height);
    height: var(--plot-height);
}

#geomap {
    width: 100%;
    height: var(--map-height);
}

#geomap .leaflet-tile-pane {
    filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}


.slide-card {
    border: 0;
}

.slide-card-container {
    /*position: absolute;
    bottom: 0;*/
    overflow-y: hidden;
    /*overflow-x: scroll;*/
}

.leaflet-attribution-flag {
    display: none !important;
}

.footer {
    display: none !important;
}

.controls-overlay-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#overlay-hud {
    width: 600px;
    height: 300px;
    position: relative;
    /*background-color: rgba(255, 0, 0, 0.5);*/
    transform: translate(-50%, -50%);
    display: none;
}

#overlay-canvas {
    z-index: auto;
}