:root {
    --bg: #fff;
    --bg-2: #eee;
    --bg-3: #eee;
    --bg-err: hwb(0 90% 7%);
    --txt: #333;
    --txt-2: #555;
    --fab: #333;
    --fab-grey-txt: #999;
    
    --l_buildings: #ddd;
    --l_green: rgb(196, 255, 153);
    --l_water: rgb(153, 240, 255);
    --l_forest: rgb(153, 255, 175);
    --l_land: rgb(255, 218, 153);
    --l_streets: rgb(196, 153, 255);
    --l_rails: rgb(255, 153, 185);
    --l_contours: rgb(153, 255, 207);
}

body{
    background: var(--bg);
    color: var(--txt);
}

a {
    color: var(--txt);
}

#burger_b svg {
    fill: var(--txt);
}

#search_b svg {
    fill: var(--txt);
}

#search_b.inactive svg {
    fill: var(--bg-3);
}

.fab, .fab_large, .fab_small {
    background: var(--fab);
    color: var(--bg);
}

.fab.inactive, .fab_large.inactive, .fab_small.inactive {
    background: var(--bg-3);
}

.fab.inactive svg, .fab_large.inactive svg, .fab_small.inactive svg {
    fill: var(--fab-grey-txt);
}

.fab svg, .fab_large svg , .fab_small svg {
    fill: var(--bg);
}

#map_p_b:hover {
    background-color: var(--l_buildings);
}

#search {
    color: var(--bg);
    border-color: var(--txt) !important;
}

#search:focus {
    color: var(--txt);
}

#search_l {
    background-color: var(--bg);
}

#layers label {
    border-color: var(--txt) !important;
}

#layers label svg {
    fill: var(--txt);
}

#menu {
    background-color: var(--bg-2);
}

#menu_scroll_cont{
    /* scroll-shadows */
    background:
      linear-gradient(
        var(--bg-2) 30%,
        rgba(255, 255, 255, 0)
      ) center top,
      linear-gradient(
        rgba(255, 255, 255, 0), 
        var(--bg-2) 70%
      ) center bottom,
      radial-gradient(
        farthest-side at 50% 0,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      ) center top,
      radial-gradient(
        farthest-side at 50% 100%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      ) center bottom;
}

/* Layer colors */
#l_buildings:checked + label {
    background-color: var(--l_buildings);
}
#l_green:checked + label {
    background-color: var(--l_green);
}
#l_water:checked + label{
    background-color: var(--l_water);
}
#l_forest:checked + label{
    background-color: var(--l_forest);
}
#l_land:checked + label{
    background-color: var(--l_land);
}
#l_rails:checked + label{
    background-color: var(--l_rails);
}
#l_streets:checked + label{
    background-color: var(--l_streets);
}
#l_contours:checked + label{
    background-color: var(--l_contours);
}

.dialog {
    background-color: var(--bg-2);
}
.dialog svg {
    fill: var(--txt);
}
#dl_bar{
    border-color: var(--txt);
}
#dl_bar div {
    background-color: var(--txt);
}

.dialog_b {
    color: var(--txt-2);
}

#dl_err {
    background-color: var(--bg-err);
}

@media (hover: hover) {

    .menu_item:hover {
        background-color: var(--bg-3);
    }

    /* Layer colors */
    #l_buildings + label:hover, #l_buildings:checked + label {
        background-color: var(--l_buildings);
    }
    #l_green + label:hover, #l_green:checked + label {
        background-color: var(--l_green);
    }
    #l_water + label:hover, #l_water:checked + label{
        background-color: var(--l_water);
    }
    #l_forest + label:hover, #l_forest:checked + label{
        background-color: var(--l_forest);
    }
    #l_land + label:hover, #l_land:checked + label{
        background-color: var(--l_land);
    }
    #l_rails + label:hover, #l_rails:checked + label{
        background-color: var(--l_rails);
    }
    #l_streets + label:hover, #l_streets:checked + label{
        background-color: var(--l_streets);
    }
    #l_contours + label:hover, #l_contours:checked + label{
        background-color: var(--l_contours);
    }
}