* {
		margin:0;
		padding:0;
		border:0;
		outline:none;
		box-sizing:border-box;
	}
	
	html {
		font-family:sans-serif;
        background:#8bc;
        background:#fff;
        background:linear-gradient(180deg, #fff 80%, #8bc 80%);
        font-size:14px;
        font-family:sans-serif;
        line-height:1.5rem;
	}

    body {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        font-size:1rem;
        line-height:1.5rem;
        padding:0.5rem 1rem 1rem;
    }

    main {
        order:3;
        width:calc(100% - 20rem);
    }

    aside {
        order:2;
        width:20rem;
    }

    header {
        order:1;
        width:100%;
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        padding:0 0 0.5rem;
    }

    h1 {
        font-size:1.5rem;
        line-height:2rem;
        color:#8bc;
        margin:0;
    }

    h1 a {
        text-decoration:none;
        color:inherit;
    }

    h1 strong {
        color:#8bc;
        font-weight:700;
        transition:100ms;
    }

    h1 a:hover strong {
        color:#3f7f94;
    }

    h1 span {
        color:#667780;
        font-weight:400;
    }

    h2 {
        margin:0 0 1rem;
        color:#489;
    }

    #mapcontainer {
		position:relative;
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
		top:0;
		left:0;
		width:100%;
		height:calc(100vh - 4rem);
        border-radius:2rem;
        border-radius:1rem;
        overflow:hidden;
    }

    #blackout {
        display:block;
        position:absolute;
        width:100%;
        height:100%;
        background:rgba(160,200,210,0.5);
        background:rgba(0,0,0,0.2);
        content:'';
        top:0;
        left:0;
        transition:250ms;
        z-index:10;
        opacity:0;
        pointer-events:none;
    }

    #blackout.active {
        display:block;
        opacity:1;
        backdrop-filter:blur(2px);
        pointer-events:inherit;
    }

    /*
    .maplibregl-ctrl-geocoder {
    }
    
    .maplibregl-ctrl-geocoder--input {
    }
    */

    .maplibregl-ctrl-geocoder--input:focus {
        outline:none!important;
    }

    .osmi-ctrls {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        width:calc(100% - 1rem);
        margin:0 0 0.5rem;
    }

    #dropdown {
        display:block;
        width:calc(100% - 3rem);
        background:#8bc;
        padding:0.5rem;
        border-radius:0.25rem;
        margin:0 0 0.5rem;
    }

    #check {
        text-decoration:none;
        color:#fff;
        font-size:1.5rem;
        line-height:2rem;
        font-weight:600;
        font-family:serif;
        background:#8bc;
        background:#3f7f94;
        width:2rem;
        height:2rem;
        text-align:center;
        border-radius:2rem;
        transition:100ms;
    }

    #check:hover {
        background:#8bc;
    }

    /*
    #check span {
        background:url(https://www.geofabrik.de/img/gG72-white.png) center center no-repeat;
        background-size:contain;

        font-size:0;

        display:block;
        transition:1s;
        transform:rotate(0deg);
    }

    #check span:hover {
        animation-name:turn;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
        animation-duration:200s;
    }

    @keyframes turn {
        0% { transform:rotate(0deg); }
        100% { transform:rotate(-36000deg); }
    }
    */

    .bttn {
        display:inline-block;
        padding:0.2rem 0.4rem;
        border:1px solid rgba(102,119,128,0.5);
        background:rgba(102,119,128,0.1);
        border-radius:0.25rem;
        font-size:0.8rem;
        line-height:1rem;
        font-weight:600;
        color:rgb(102,119,128);
        transition:100ms;
    }

    .bttn:hover {
        border:1px solid rgba(102,119,128,0.8);
        background:#fff;
        color:rgb(102,119,128);
        cursor:pointer;
    }

    .bttn:active {
        color:#334450;
    }

    #slider {
        width:10rem;
    }

    #slider-value {
        display:block;
        width:2.5rem;
    }

    .features {
        position:absolute;
        font-size:0.8rem;
        line-height:1rem;
        padding:1rem 3rem 1rem 1rem;
        left:0;
        bottom:1rem;
        width:23rem;
        overflow:auto;
        backdrop-filter:blur(10px);
        pointer-events:none;
    }

    #info {
        margin:0 0 1rem;
    }

    #popup {
        position:absolute;
        top:1rem;
        left:0;
        right:10rem;
        margin:auto;
        width:600px;
        min-height:200px;
        background:#fff;
        background:rgba(255,255,255,0.8);
        backdrop-filter:blur(0.5rem);
        padding:1rem;
        border-radius:1rem;
        z-index:11;
        display:none;
    }

    #popup.active {
        display:block;
    }

    #popup > div {
        display:block;
        position:relative;
        overflow:auto;
        max-height:70vh;
        overflow:auto;
        width:100%;
    }

    #popup h2 {
        display:block;
        margin:0 0 1rem;
        color:#3f7f94;
        border-top-left-radius:1rem;
        border-top-right-radius:1rem;
    }

    #popx {
        display:block;
        position:absolute;
        top:0.25rem;
        right:0.5rem;
        color:#8bc;
        font-weight:200;
        font-size:4rem;
        line-height:3rem;
        transform:rotate(45deg);
        z-index:1;
        user-select:none;
    }

    #popx:hover {
        color:#489;
        cursor:pointer;
    }

    #popdata table {
        width:100%;
        border-collapse:collapse;
    }

    #popdata tr:nth-of-type(2n) {
        background:rgba(0,0,0,0.05);
        background:rgba(255,255,255,0.5);
    }

    #popdata th {
        padding:0.5rem 0.5rem;
        text-align:left;
        background:#3f7f94;
        color:#fff;
    }

    #popdata td {
        padding:0.25rem 0.5rem;
    }

    #popdata td:first-of-type {
        font-weight:500;
    }

    #popdata a {
        display:inline-block;
        background:#334450;
        color:#fff;
        text-decoration:none;
        border-radius:0.2rem;
        padding:0.25rem 0.25rem;
        font-size:0.8rem;
        line-height:1rem;
        font-size:0;
        line-height:0;
        transition:100ms;
    }

    #popdata a:hover {
        background:#3f7f94;
    }

    #popdata a img {
        display:block;
        width:1.5rem;
        height:auto;
        margin:auto;
    }

    /*
    #filter {
        margin:0;
        padding:0 1rem 0 0;
    }

    #filter li {
        display:block;
        margin:0;
        padding:0.1rem;
    }

    #filter li {
        display:block;
        padding:0.3rem 0.6rem;
        border-radius:0.25rem;
        transition:100ms;
        margin:0 0 0.1rem;
        word-wrap:anywhere;
    }

    #filter li:hover {
        cursor:pointer;
        background:rgba(50,100,150,0.1);
    }

    #filter li.active {
        background:rgba(0,140,200,0.2);
        color:#257;
    }

    #filter li {
        position:relative;
        padding:0.3rem 0.6rem 0.3rem 2rem;
    }

    #filter li:before {
        position:absolute;
        top:0.5rem;
        left:0.6rem;
        width:1rem;
        height:1rem;
        background:#fff;
        border:1px solid #666;
        content:''
    }

    #filter li.active:after {
        position:absolute;
        top:1rem;
        left:0.65rem;
        content:'+';
        font-size:2rem;
        line-height:0rem;
        transform:rotate(45deg);
    }

    #layers {
        display:flex;
        flex-wrap:wrap;
    }

    #layers a {
        display:inline-block;
        padding:0.25rem;
        line-height:1rem;
        border-radius:0.25rem;
        border:1px solid #8bc;
        color:#8bc;
        text-decoration:none;
        margin:0.1rem;
    }

    #layers a.active {
        border:1px solid #257;
        color:#257;
    }
    */

    #legend {
        background:#fff;
        margin:0 0 -1rem -1rem;
        padding:0.5rem 1rem 1rem 1rem;
        max-height:calc(100vh - 10rem);
        /*
        overflow:auto;
        */
    }

    #legend p {
        position:relative;
        padding:0.2rem 0.2rem 0.2rem 3rem;
        margin:0 0 0.2rem;
        border-radius:0.5rem;
        background:rgba(240,230,220,0.25);
        background:rgba(220,230,240,0.25);
        font-weight:500;
        cursor:pointer;
        font-size:0.9rem;
        line-height:1.2rem;
    }

    #legend p strong {
        position:relative;
        display:inline-block;
        overflow:hidden;
        text-overflow:ellipsis;
        width:calc(100% - 2rem);
        font-weight:inherit;
    }

    #legend p.inactive {
        font-weight:400;
        color:#667780;
        background:none;
    }

    #legend p:hover {
        background:rgba(240,170,140,0.25);
        background:rgba(240,170,140,0.25);
        background:rgba(240,140,170,0.25);
        color:inherit;
    }

    #legend p.inactive:hover {
        background:rgba(140,170,240,0.25);
    }

    #legend p span {
        position:absolute;
        display:inline-block;
        left:0.5rem;
        top:0.5rem;
        text-align:center;
        width:2rem;
    }

    #legend p span.leg_line {
        font-size:1.5rem;
        line-height:1rem;
        font-weight:700;

        top:0.9rem;
        left:0.75rem;
        width:1.5rem;
        height:0.2rem;
        font-size:0;
    }

    #legend p span.leg_circle {
        font-size:2.5rem;
        line-height:1rem;
        font-weight:700;

        left:1rem;
        width:1rem;
        height:1rem;
        border-radius:1rem;
        font-size:0;
    }

    #legend p span.leg_fill {
        font-size:2rem;
        line-height:1rem;
        font-weight:700;

        left:1rem;
        width:1rem;
        height:1rem;
        transform:skew(-20deg);
        font-size:0;
    }

    #legend p span.leg_symbol {
        font-size:2rem;
        line-height:1rem;
        font-weight:700;

        left:0.9rem;
        width:1.2rem;
        height:1.2rem;
        font-size:1rem;
        font-weight:700;
        line-height:1rem;
        background:#fff;
        font-family:serif;
        border:1px solid rgba(0,0,0,0.1);
        top:0.25rem;
    }

    #legend p small {
        font-size:0.8rem;
        line-height:1.5rem;
        opacity:0.5;
        position:absolute;
        right:0.25rem;
        top:0.2rem;
    }

    #legend p[data-description]:after {
        content:attr(data-description);
        position:absolute;
        bottom:2.5rem;
        left:0.5rem;
        max-width:calc(100% + 3rem);
        padding:1rem;
        background:#ffc;
        border:1px solid rgba(0,0,0,0.2);
        box-shadow:0 0.05rem 0.1rem rgba(0,0,0,0.2);
        z-index:10;
        display:none;
        font-weight:400;
        pointer-events:none;
        opacity:0;
        display:block;

        left:20.5rem;
        width:20rem;
        top:-0.5rem;
        bottom:inherit;
    }

    #legend p[data-description]:before {
        content:' ';
        position:absolute;
        bottom:2rem;
        left:-1rem;
        width:1rem;
        height:1rem;
        border:0.5rem solid transparent;
        border-right:0.5rem solid #cca;
        z-index:9;
        opacity:0;
        display:block;
        pointer-events:none;

        width:0;
        height:0;
        left:19.5rem;
        top:0.5rem;
        bottom:inherit;
    }

    #legend p:hover:before,
    #legend p:hover:after {
        display:block;
        opacity:1;
    }

    /*


Empty tag value

Nodes that have a tag with empty value.

Source: OSM

Zoom: 6–22

Label: key (12-22)

Queryable: yes


    */

	#map {
		position:relative;
        width:100%;
		height:100%;
	}

    #navi {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        list-style:none;
    }

    #navi a {
        display:block;
        padding:0.25rem 0.5rem;
        color:#489;
        font-weight:600;
        text-decoration:none;
        text-underline-offset:4px;
    }

    #navi a:hover {
        text-underline-offset:4px;
        text-decoration:underline;
    }

    #navi a.active {
        color:#e40;
    }