:root {
    --sidebar-width: 300px;
}

body { margin: 0; padding: 0; display: flex; font-family: "Open Sans", sans-serif; font-weight: 300; }

input, textarea, select, button { font-family:inherit; }
button { border: 2px solid #666; border-radius: 4px; background: #ccc; cursor: pointer; }
h1,h2,h3,h4 { font-weight: 600; }

#side-bar { width: var(--sidebar-width); padding: 10px; height: 100vh; overflow-y: scroll; box-sizing: border-box; }
#controls { margin-bottom: 10px; }
#mat-list { font-size: .9em; }
#mat-list label { display: block; margin-bottom: 10px; background: color-mix(in srgb, var(--mat-color), transparent 70%); border: 2px solid var(--mat-color); padding: 5px; border-radius: 4px; cursor: pointer;} 
#map { height: 100vh; width:  calc(100vw - var(--sidebar-width)); }

.leaflet-popup-content-wrapper { border-radius: 4px; }
.school-popup h4 { margin-bottom: .5em;}
.school-popup__mat-link {background: color-mix(in srgb, var(--mat-color), transparent 70%); border: 2px solid var(--mat-color); margin-top: .5em; }

.leaflet-container { font-family: unset; }
#sources { font-size: .8em; }