@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
:root{
    --bs-font-sans-serif: "Open Sans", sans-serif;
}

*, body, html {
    font-family: var(--bs-font-sans-serif);
}


#header-logo {
    max-height: 50px;
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px;
    }
}

.schoolYearSelector {
    float: left !important;
}

.schoolYearSelector > form {
    width: 100%;
}

.selectedProgramSelector {
    float: right !important;
}

.selectedProgramSelector > form {
    width: 100% !important;
}

.mapSelectorControls > form > label {
    font-weight: bold;
    width: 25% !important;
    min-width: 100px !important;
}

.map {
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    max-height:70dvh;
    min-height:400px;
}

.legend {
    line-height: 32px;
    color: #555;
    /* font-family: var(--bs-font-sans-serif); */
    font-weight: bold;
    font-size: 1.2rem;
    text-align: left;
    background: #fafaf8;
    padding: 10px;
}
.legend i {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 20px;
    opacity: 0.7;
}

.leaflet-control-layers {
    text-align: left;
}

@media only screen and (min-width: 30em) {
    form.oi-3a86ea {
        width: 100%;
    }
}

@media (max-width: 780px) {
    .legend {
        line-height: 16px;
        font-size: 0.8rem;
        padding: 4px;
    }
    .legend i {
        width: 12px;
        height: 12px;
        margin-right: 8px;
        opacity: 0.7;
    }
}