h4 {
    margin: 0;
}

.map-region {
    display: flex;
    width: 100vw;
    height: 100%;
    overflow: hidden;
}

.side-panel {
    width: 20vw;
    background-color: var(--ui-color-dark);
    display: flex;
    flex-direction: column;
    /*    height: 90vh;*/
}

::-webkit-scrollbar {
    width: 1vw;
    background-color: #00000000;
}

::-webkit-scrollbar-thumb {
    background-color: var(--ui-color-light);
    border-radius: 0.5vw;
}

::-webkit-scrollbar-button {
    border-style: solid;
    height: 1vw;
    width: 1vw;
}

    ::-webkit-scrollbar-button:vertical:increment {
        border-width: 1vw 0.5vw 0 0.5vw;
        border-color: var(--ui-color-light) transparent transparent transparent;
    }

    ::-webkit-scrollbar-button:vertical:decrement {
        border-width: 0 0.5vw 1vw 0.5vw;
        border-color: transparent transparent var(--ui-color-light) transparent;
    }

.map-menu-spacer {
    height: 10vh;
}

.site-list-tools {
    height: 10vh;
    padding: 2vh 0 0 2vh;
    color: #ffffff;
}

    .site-list-tools svg[data-action] {
        float: left;
    }

.site-list {
    flex-grow: 1;
    height: 70vh;
    overflow-y: scroll;
    width: 19.75vw;
    position: relative;
}

.map-menu {
    height: 10vh;
    position: absolute;
    top: 10vh;
    left: 0;
    width: 25vw;
    display: flex;
}

    .map-menu svg {
        padding: 1.25vh;
        margin: 2.5vh 0 0 2.5vh;
    }

.map-menu-left {
    background-color: var(--ui-color-med);
    flex-grow: 1
}

.map-menu-right {
    width: 4vh;
    position: relative;
}

.map-menu-right-fill {
    background-color: var(--ui-color-med);
    width: 100%;
    height: 6vh;
    position: absolute;
}

.map-menu-curve {
    background-color: var(--ui-color-med);
    height: 4vh;
    width: 4vh;
    position: absolute;
    top: 6vh;
    border-bottom-right-radius: 100%;
}

[data-basemap-select] {
    display: block;
    float: left;
    border: .1vh solid #ffffff;
    height: 7vh;
    aspect-ratio: 2;
    background-size: cover;
    margin: 1vh 0 0 1vh;
    cursor: pointer;
    position: relative;
}

    [data-basemap-select] .thumb-label {
        color: #000000;
        text-shadow: 0 0 0.4vh #ffffff;
        position: absolute;
        bottom: 0;
        font-size: 1.8vh;
        font-weight: bold;
        text-align: center;
        width: 100%;
        display: none;
    }

    [data-basemap-select]:hover .thumb-label {
        display: block;
    }

    [data-basemap-select] .thumb-label.light {
        color: #ffffff;
        text-shadow: 0 0 0.4vh #000000;
    }

#map {
    flex-grow: 1;
    height: 100%;
    position: relative;
}

.site-list-item {
    background-color: var(--ui-color-grey);
    border-radius: 1vw;
    width: 18vw;
    /*    min-height: 26vw;*/
    margin-bottom: 1vh;
    margin-left: 0.5vw;
}

    .site-list-item .list-thumbnail {
        aspect-ratio: 2;
        background-color: var(--ui-color-light);
        border-radius: 1vw 1vw 2vw 0;
        background-size: contain;
    }

    .site-list-item .list-info {
        color: #ffffff;
        padding: .5vw;
        line-height: 1.5rem;
    }

    .site-list-item .list-footer {
        background-color: var(--ui-color-light);
        height: 4vw;
        border-radius: 2vw 0 1vw 1vw;
        padding: 1vw 0 0 1vw;
        position: relative;
    }

/*    .site-list-item*/
svg.item-tool {
    height: 2vw;
    cursor: pointer;
    fill: var(--ui-color-dark);
    border-radius: 0.5vw;
}

    /*        .site-list-item*/
    svg.item-tool:hover {
        background-color: var(--ui-color-dark);
        fill: var(--ui-color-light);
    }

/*    .site-list-item .list-footer*/
.upload-count {
    position: absolute;
    background-color: var(--ui-color-dark);
    color: #ffffff;
    font-size: .8vw;
    padding: 0.03vw 0.4vw;
    border-radius: 0.5vw;
    left: 2.3vw;
    top: 2.1vw;
    height: 1vw;
    display: none;
}

    /*        .site-list-item .list-footer*/
    .upload-count.active {
        display: block;
    }

#uploads .file-list table {
    width: 100%;
}

    #uploads .file-list table tr {
        cursor: pointer;
    }

        #uploads .file-list table tr:hover {
            background-color: var(--ui-color-dark);
            color: #ffffff;
        }

            #uploads .file-list table tr:hover svg {
                fill: #ffffff;
            }

    #uploads .file-list table th {
        background-color: #333333;
        border: 1px solid #000000;
        color: #ffffff;
    }

        #uploads .file-list table th:nth-child(1), #uploads .file-list table th:nth-child(2) {
            width: 2vw;
        }

        #uploads .file-list table th:last-child {
            width: 12vw;
        }

    #uploads .file-list table td:last-child {
        text-align: right;
    }

    #uploads .file-list table svg {
        height: 3vh;
    }

button {
    border: .1vh solid var(--ui-color-dark);
    border-radius: .3vw;
}

.modal-backdrop {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: #000000c0;
    display: none;
}

.dialog {
    position: absolute;
    border-radius: .5vw;
    background-color: #ccc;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2vh;
    display: none;
}

.dialog-header {
    background-color: #888;
    height: 4vh;
    width: 100%;
    border-bottom: .2vh solid #000000;
    border-radius: .5vw 0.5vw 0 0;
    padding: 1vh;
}

    .dialog-header svg {
        float: right;
        height: 2vh;
        cursor: pointer;
        border-radius: .2vh;
    }

        .dialog-header svg:hover {
            background-color: #202020;
            fill: #ffffff;
        }

.dialog-footer {
    background-color: #888;
    height: 4vh;
    width: 100%;
    border-top: .2vh solid #000000;
    border-radius: 0 0 .5vw 0.5vw;
    padding: 0.5vh 1vh 0 1vh;
    position: absolute;
    bottom: 0;
}

.dialog .dialog-content {
    /*    height: 46vh;*/
    overflow: hidden;
}

.input-error {
    height: 3vh;
    width: 40vh;
    position: relative;
    overflow: hidden;
}

    .input-error .input-error-content {
        background-color: #ff8888;
        font-size: 2vh;
        font-weight: bold;
        height: 100%;
        padding: 0.5vh 0.5vh 0 0.5vh;
        top: -3vh;
        position: absolute;
    }

.dialog-error {
    background-color: #ff8888;
    font-size: 2vh;
    height: 6vh;
    width: 26vh;
    position: absolute;
    bottom: -6vh;
    padding: 0.5vh 0.5vh 0 0.5vh;
    font-weight: bold;
}

.loading-spinner {
    width: 16vh;
    /*    height: 16vh;*/
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

    .loading-spinner div {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        top: 0;
    }

    .loading-spinner .spinner-background {
        background-color: #ffffff;
    }

    .loading-spinner .spinner-border {
        border: solid var(--ui-color-med) 0.5vh;
    }

    .loading-spinner .spinner-vanes {
        border: solid var(--ui-color-med) 8vh;
        border-top-color: transparent;
        border-bottom-color: transparent;
        animation: spinner-vanes 1s linear infinite;
    }

@keyframes spinner-vanes {
    to {
        transform: rotate(360deg)
    }
}

#legend {
    position: absolute;
    height: 30vh;
    aspect-ratio: 3 / 4;
    opacity: 0.6;
    background-color: var(--ui-color-light);
    overflow: hidden;
    font-size: 1.3vh;
    border-radius: 1.8vh;
    display: none;
}

    #legend ::-webkit-scrollbar-thumb {
        background-color: var(--ui-color-dark);
    }

    #legend ::-webkit-scrollbar-button:vertical:increment {
        border-color: var(--ui-color-dark) transparent transparent transparent;
    }

    #legend ::-webkit-scrollbar-button:vertical:decrement {
        border-color: transparent transparent var(--ui-color-dark) transparent;
    }

    #legend .legend-title {
        color: var(--ui-color-light);
        text-align: center;
    }

    #legend:hover .legend-title {
        display: none;
    }

    #legend:hover, #legend.pinned {
        height: 50vh;
        border-radius: 3vh;
        opacity: 1;
        font-size: calc(1.3vh * 5 / 3);
    }

.legend-corner-picker {
    position: absolute;
    background-color: #00000080;
    height: 30vh;
    width: 30vh;
    border-radius: 1.8vh;
    cursor: pointer;
    display: none;
}

    .legend-corner-picker:hover {
        background-color: #ffffff80;
    }

    #legend.top, .legend-corner-picker.top {
        top: 2vh;
        bottom: auto;
    }

    #legend.bottom, .legend-corner-picker.bottom {
        top: auto;
        bottom: 2vh;
    }

    #legend.left, .legend-corner-picker.left {
        left: 2vh;
        right: auto;
    }

    #legend.right, .legend-corner-picker.right {
        right: 2vh;
        left: auto;
    }

#legend svg[data-action] {
    height: 3vh;
    aspect-ratio: 1;
    display: none;
    float: right;
    cursor: pointer;
    fill: var(--ui-color-light);
    margin-right: .5vh;
}

#legend:hover svg[data-action] {
    display: block;
}

#legend .header, #legend .footer {
    height: 15%;
    background-color: var(--ui-color-dark);
    padding: 1.2vh;
}

#legend .header {
    border-radius: 1.8vh 1.8vh 1.8vh 0;
}

#legend:hover .header, #legend.pinned .header {
    padding: 2vh;
    border-radius: 3vh 3vh 3vh 0;
}

#legend .header svg[data-action] {
    background-color: var(--ui-color-light);
    fill: var(--ui-color-dark);
}

    #legend .header svg[data-action]:hover {
        background-color: var(--ui-color-dark);
        fill: var(--ui-color-light);
        border: 0.25vh solid var(--ui-color-light);
    }

#legend .header select {
    background-color: var(--ui-color-dark);
    color: var(--ui-color-light);
    border: none;
    width: 60%;
    display: none;
}

#legend:hover .header select {
    display: inline;
}

#legend .footer {
    border-radius: 0 1vw 1vw 1vw;
    display: none;
}

    #legend .footer svg[data-action]:hover {
        background-color: var(--ui-color-light);
        fill: var(--ui-color-dark);
    }

#legend:hover .footer {
    padding: 2vh;
    border-radius: 3vh 0 3vh 3vh;
    display: block;
}

#legend .symbols {
    height: 85%;
    padding: 1vh 0 0 1vh;
    overflow-y: scroll;
}

#legend:hover .symbols {
    height: 70%;
}

#legend:hover .symbols, #legend.pinned .symbols {
    padding: 1.67vh 0 0 1.67vh;
}

#legend input[data-layer-filter] {
    display: none;
}

#legend:hover input[data-layer-filter] {
    display: inline;
    margin-right: 0.3vh;
}

#legend .symbol-swatch {
    height: 1.3vh;
    aspect-ratio: 1;
    display: inline-block;
    vertical-align: middle;
    border-width: 0.05vh;
    border-style: solid;
}

#legend tr.inactive td.class-label {
    text-decoration: line-through;
    color: #808080;
}

#legend:hover .symbol-swatch, #legend.pinned .symbol-swatch {
    height: calc(1.3vh * 5 / 3);
}

#map_popup {
    position: absolute;
    background-color: var(--ui-color-med);
    border-radius: 1vw;
    width: 20vw;
    margin-bottom: 1vh;
    min-height: 20vw;
    top: 5vw;
    left: 5vw;
    opacity: 0.95;
    color: #ffffff;
    box-shadow: 0.5vw 0.5vw 0.5vw #00000020;
    display: none;
}

    #map_popup .header {
        height: 3vw;
        background-color: var(--ui-color-dark);
        border-radius: 1vw 1vw 1vw 0;
    }

        #map_popup .header #popup_site_id {
            display: block;
            margin: 0.75vw 0 0 0.75vw;
            float: left;
        }

        #map_popup .header div[data-action] {
            height: 1.5vw;
            width: 1.5vw;
            background-color: var(--ui-color-light);
            border-radius: 0.25vw;
            float: right;
            margin: 0.75vw 0.75vw 0 0;
            cursor: pointer;
        }

            #map_popup .header div[data-action] svg {
                height: 1vw;
                margin: 0.25vw 0 0 0.25vw;
                fill: var(--ui-color-grey);
            }

    #map_popup .content {
        padding: .25vw 0 0 .25vw;
    }

    #map_popup .footer {
        height: 6vw;
        background-color: var(--ui-color-light);
        border-radius: 1vw 0 1vw 1vw;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 1vw 0 0 1vw;
    }

.bg-rank-50 {
    background-color: #00AD0E;
}

.bg-rank-45 {
    background-color: #3FC10A;
}

.bg-rank-40 {
    background-color: #7FD607;
}

.bg-rank-35 {
    background-color: #BFEA03;
}

.bg-rank-30 {
    background-color: #FFFF00;
}

.bg-rank-25 {
    background-color: #FFC304;
}

.bg-rank-20 {
    background-color: #FF8708;
}

.bg-rank-15 {
    background-color: #FF4B0C;
}

.bg-rank-10 {
    background-color: #FF1010;
}