html, body {
    height: 100%;
    margin: 0;
}
.leaflet-container {
    height: 400px;
    width: 600px;
    max-width: 100%;
    max-height: 100%;
}
.review {
    font-family: "Monaspace Krypton", "Monaco", monospace;
    margin-bottom: 1px;
}
.location {
    margin-bottom: 2px;
    border-top: 2px solid #00b000;
    border-bottom: 2px solid #00b000;
}
.selectedMarker path {
    stroke: #00c000;
}
.centerpopup {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-color-scheme: light) {
    .info { padding: 6px 8px; font: 14px/16px sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 0px rgba(0,0,0,0.2); border-radius: 0px; border: thick double #000000; align: right; max-width: 400px ; overflow:auto; max-height:300px;}
    .benignButton, .dangerousButton {
        padding: 4px 8px;
        cursor: pointer;
        position: relative;
        background-color: #ffffff;
        box-shadow: none;
        border-radius: 0px;
        font-weight: bold;
    }
    .benignButton {
        color: #00b000;
        border: 2px solid #00b000;
    }
    .dangerousButton {
        color: #b00000;
        border: 2px solid #b00000;
    }
    .info input, .info textarea, .info select {
        position: relative;
        font-weight: bold;
        background-color: #ffffff;
        color: #000000;
        box-shadow: none;
        border-radius: 0px;
        border: 2px solid #000000;
    }
    .review {
        border-top: 2px solid #000000;
    }
}

div[class~="marker-0"],
div[class~="marker-1"],
div[class~="marker-2"],
div[class~="marker-3"],
div[class~="marker-4"],
div[class~="marker-5"] {
    display: none;
}

:has(#show-0:checked):has(#show-price-1:checked) div.marker-0.price-1 { display: block; }
:has(#show-1:checked):has(#show-price-1:checked) div.marker-1.price-1 { display: block; }
:has(#show-2:checked):has(#show-price-1:checked) div.marker-2.price-1 { display: block; }
:has(#show-3:checked):has(#show-price-1:checked) div.marker-3.price-1 { display: block; }
:has(#show-4:checked):has(#show-price-1:checked) div.marker-4.price-1 { display: block; }
:has(#show-5:checked):has(#show-price-1:checked) div.marker-5.price-1 { display: block; }
:has(#show-0:checked):has(#show-price-2:checked) div.marker-0.price-2 { display: block; }
:has(#show-1:checked):has(#show-price-2:checked) div.marker-1.price-2 { display: block; }
:has(#show-2:checked):has(#show-price-2:checked) div.marker-2.price-2 { display: block; }
:has(#show-3:checked):has(#show-price-2:checked) div.marker-3.price-2 { display: block; }
:has(#show-4:checked):has(#show-price-2:checked) div.marker-4.price-2 { display: block; }
:has(#show-5:checked):has(#show-price-2:checked) div.marker-5.price-2 { display: block; }
:has(#show-0:checked):has(#show-price-3:checked) div.marker-0.price-3 { display: block; }
:has(#show-1:checked):has(#show-price-3:checked) div.marker-1.price-3 { display: block; }
:has(#show-2:checked):has(#show-price-3:checked) div.marker-2.price-3 { display: block; }
:has(#show-3:checked):has(#show-price-3:checked) div.marker-3.price-3 { display: block; }
:has(#show-4:checked):has(#show-price-3:checked) div.marker-4.price-3 { display: block; }
:has(#show-5:checked):has(#show-price-3:checked) div.marker-5.price-3 { display: block; }
:has(#show-0:checked):has(#show-price-4:checked) div.marker-0.price-4 { display: block; }
:has(#show-1:checked):has(#show-price-4:checked) div.marker-1.price-4 { display: block; }
:has(#show-2:checked):has(#show-price-4:checked) div.marker-2.price-4 { display: block; }
:has(#show-3:checked):has(#show-price-4:checked) div.marker-3.price-4 { display: block; }
:has(#show-4:checked):has(#show-price-4:checked) div.marker-4.price-4 { display: block; }
:has(#show-5:checked):has(#show-price-4:checked) div.marker-5.price-4 { display: block; }

div.hiddenMarker { display: none !important; }

@media (prefers-color-scheme: dark) {
    body {
        background: #000000;
    }
    .leaflet-control-locate {
        --locate-control-icon-color: #fff;
    }
    .info { padding: 6px 8px; font: 14px/16px sans-serif; color: #c0c0c0; background: black; background: rgba(0,0,0,0.8); box-shadow: 0 0 0px rgba(0,0,0,0.2); border-radius: 0px; border: thick double #c07000; align: right; max-width: 400px ; overflow:auto; max-height:300px;}
    .benignButton, .dangerousButton {
        padding: 4px 8px;
        cursor: pointer;
        position: relative;
        background-color: #000000;
        box-shadow: none;
        border-radius: 0px;
        font-weight: bold;
    }
    .benignButton {
        color: #00b000;
        border: 2px solid #00b000;
    }
    .dangerousButton {
        color: #b00000;
        border: 2px solid #b00000;
    }
    .info input, .info textarea, .info select {
        position: relative;
        font-weight: bold;
        background-color: #000000;
        color: #c07000;
        box-shadow: none;
        border-radius: 0px;
        border: 2px solid #00b000;
    }
    .review {
        border-top: 2px solid #c07000;
    }
    .leaflet-container {
        background: #000000;
    }
    .leaflet-layer,
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out,
    .leaflet-control-attribution {
        filter: invert(100%) hue-rotate(180deg);
    }
    .leaflet-bar a,
    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
        background-color: #3a3a3a !important;
        color: #fff !important;
    }
}

body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }