html, body {
    height: 100%;
    margin: 0;
}
.map {
    height: 100%;
    width: 100%;
}
.ol-control.layer-toggles {
    top: 0.5em;
    right: 0.5em;
    background-color: rgba(70, 115, 164, 0.7);
    color: #eee;
    white-space: nowrap;
    max-height: calc(100vh - 1em);
    overflow-y: auto;
}
.layer-toggles > div {
    margin: 0.5em;
    margin-right: 1em;
}
.ol-control.layer-toggles:hover {
    background-color: rgba(0,60,136,0.7);
}
.layer-toggles > div > label {
    display: block;
}
.expand {
    display: none;
}
.expand + span::before {
    content: '\25B6';
}
.expand:checked + span::before {
    content: '\25BC';
}
.expand ~ .collapsible-content {
    display: none;
}
.expand:checked ~ .collapsible-content {
    display: block;
}
.collapsible-content {
    margin-left: 0.8em;
}
.collapsible-content > label {
    display: block;
}