#wrapper {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto; /* header, map+panel+sidebar, footer */
    grid-template-columns: 1fr auto;
}

.header {
    grid-column: 1 / 4;
    grid-row: 1;
}

.header img {
    display: block;
    margin-left: 50%;
    translate: -25px;
}

.footer {
    grid-column: 1 / 4;
    grid-row: 3;
    display: flex;
    align-items: center;
}

.map {
    grid-column: 1;
    grid-row: 2;
}

.panel {
    grid-column: 2;
    grid-row: 2;
    max-width: 480px;
    overflow-y: auto;
}

.right-sidebar {
    grid-column: 3;
    grid-row: 2;
    display: grid;
    padding-top: 0.5rem;
    margin-left: 2px;
    margin-right: 2px;
    background-color: AliceBlue;
    grid-row-gap: 12px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    border-left: 1px solid rgb(95, 151, 204);
}

/* put panel on top on small screens */
@media screen and (max-width: 600px) {
    #wrapper {
        grid-template-rows: auto auto 1fr auto; /* header, panel, map+sidebar, footer */
        grid-template-columns: 1fr auto;
        height: unset;
    }
    .header {
        grid-column: 1 / 3;
    }
    .header img {
        display: none;
    }
    .panel {
        grid-column: 1 / 3;
        grid-row: 2;
        padding-top: 0px;
        max-width: unset;
        border-bottom: 1px solid rgb(95, 151, 204);
    }
    .map {
        grid-column: 1;
        grid-row: 3;
    }
    .right-sidebar {
        grid-column: 2;
        grid-row: 3;
    }
    .footer {
        grid-column: 1 / 3;
        grid-row: 4;
    }
}

/* right sidebar is split into two parts, one aligned start, the other aligned end */
.right-start {
    display: grid;
    margin-top: 1rem;
    grid-row: 1/2;
    grid-column: 1;
    grid-row-gap: 12px;
    align-self: start;
    align-items: start;
    justify-items: center;
}

.right-end {
    display: grid;
    grid-row: 2/3;
    grid-column: 1;
    grid-row-gap: 12px;
    align-self: end;
    align-items: end;
    justify-items: center;
}

.panel .close {
    color: rgb(95, 151, 204);
    float: right;
    margin-top: 0.25rem;
}

.panel-icon {
    height: 1.5rem;
}

.panel-item {
    margin: 0.5rem 1rem;
    display: none;
}

.panel-item div.alert {
    padding: 0.5rem;
}

[class$="sidebar"] img {
    height: 24px;
}

[class$="sidebar"] .item {
    color: rgb(95, 151, 204);
    justify-self: center;
}

[class$="sidebar"] .start {
    align-self: start; 
 }

 [class$="sidebar"] .end {
    align-self: end; 
 }
  
/* entry in layer list */
.layer {
    padding: .5rem;
    overflow: auto;
}

/* status icons in layer list */
[id^="status"] {
    float: right;
}

/* legend dropdown buttons in layer list */
.legend-button {
    float: right;
    padding: 0.25rem 0.5rem;
}

/* collapsible legends */
.legend {
    background-color: white;
    max-width: 100%;
    padding: 0.25rem 1rem;
}

.leaflet-container {
    background: white;
}

/* make leaflet layers control a little smaller */
.leaflet-touch .leaflet-control-layers-toggle {
    width: 30px;
    height: 30px;
}

.leaflet-retina .leaflet-control-layers-toggle {
    background-size: 20px 20px;
}