html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;    
    font-size: 16px;
}

#map {
    height: 100%;
    width: 100%;
    image-rendering: pixelated;
}

.mouseposition {
    background-color: white;
    padding: 3px;
    text-align: right;
}

.mousepositioncoord {
    min-width: 40px;
    display: inline-block;
}

div.ol-mouse-position {
    background-color: white;
    padding: 6px;
    border-radius: 3px;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}

.ol-ctx-menu-container {
    font-size: 16px;
}

.ol-scale-step-text {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: white;
    text-shadow:
        1px 0 0 black,
        0 1px 0 black,
        -1px 0 0 black,
        0 -1px 0 black;
    0px 0px 8px black;
}

.ol-scale-singlebar-odd {
    background: #ddd;
}

.ol-scale-singlebar-even {
    background: #444;
}

.toastify {
    color: black;
    background: yellow;
}

.ol-ctx-menu-container li {
    padding-left: 20px;
}

.menuitem-checked::before {
    content: '☑';
    width: 20px;
    display: inline-block;
    margin-left: -20px;
}

.menuitem-unchecked::before {
    content: '☐';
    width: 20px;
    display: inline-block;
    margin-left: -20px;
}

.worldboyz-back,.worldboyz-hint{position:fixed;z-index:10001;border:3px solid #171717;outline:2px solid #aaa;background:linear-gradient(#737373,#555);box-shadow:inset 0 3px rgba(255,255,255,.25),inset 0 -4px rgba(0,0,0,.3),3px 3px #000;color:#fff;font:700 14px ui-monospace,"Courier New",monospace;text-shadow:2px 2px #222;text-decoration:none}
.worldboyz-back{left:16px;top:16px;padding:10px 14px}
.worldboyz-3d{position:fixed;z-index:10001;left:16px;top:70px;border:3px solid #171717;outline:2px solid #b8ffbf;background:linear-gradient(#4d9757,#357b41);box-shadow:inset 0 3px rgba(255,255,255,.25),inset 0 -4px rgba(0,0,0,.3),3px 3px #000;color:#fff;padding:10px 14px;font:700 14px ui-monospace,"Courier New",monospace;text-shadow:2px 2px #222;text-decoration:none}
.worldboyz-back:hover{outline-color:#b8ffbf;background:linear-gradient(#4d9757,#357b41)}
.worldboyz-hint{right:16px;top:16px;padding:10px 14px;pointer-events:none}
@media(max-width:620px){.worldboyz-back{left:10px;top:10px;padding:9px 11px}.worldboyz-3d{left:10px;top:62px;padding:9px 11px;font-size:12px}.worldboyz-hint{left:10px;right:10px;top:auto;bottom:15px;text-align:center;font-size:11px}}
.location-popup{position:fixed;z-index:20000;left:50%;bottom:28px;transform:translateX(-50%);display:grid;grid-template-columns:150px minmax(240px,420px);width:min(620px,calc(100vw - 28px));color:#f5f5f5;background:#08120def;border:3px solid #171717;outline:2px solid #aeb8ae;box-shadow:8px 8px #0008;font-family:ui-monospace,Consolas,monospace}.location-popup.hidden{display:none}.location-popup>button{position:absolute;right:7px;top:5px;border:0;background:none;color:#fff;font-size:28px;cursor:pointer}.location-popup>img{width:150px;height:100%;min-height:170px;object-fit:cover;background:#162019}.location-popup>div{padding:17px 38px 17px 18px}.location-popup span{font-size:11px;letter-spacing:2px;color:#70ef83;text-transform:uppercase}.location-popup h2{margin:6px 0 8px;font-size:22px}.location-popup p{margin:0 0 10px;color:#ccd4cd;line-height:1.45}.location-popup b,.location-popup small{display:block;margin-top:7px}.location-popup a{display:inline-block;margin-top:13px;padding:7px 10px;color:#fff;background:#3f8549;border:2px solid #111;outline:1px solid #aef0b6;text-decoration:none}.location-popup.no-image{grid-template-columns:1fr}.location-popup.no-image>img{display:none}@media(max-width:620px){.location-popup{bottom:70px;grid-template-columns:95px 1fr}.location-popup>img{width:95px;min-height:150px}.location-popup>div{padding:14px 30px 14px 12px}.location-popup h2{font-size:18px}.location-popup p{font-size:12px}}