/* Create for each Index a color variable acording to it */
    :root {
        --good: #009966;
        /* 0-50 AQI */
        --moderate: #ad982d;
        /* 51-100 AQI */
        --sensitive: #d37e2a;
        /* 101-150 AQI */
        --unhealthy: #CC0033;
        /* 151-200 AQI */
        --veryUnhealthy: #660099;
        /* 201-300 AQI */
        --hazardous: #7E0023;
        /* 300+ AQI */
        --undefined: rgb(181, 181, 181);
    }

    .good {
        fill: var(--good);
    }

    .moderate {
        fill: var(--moderate);
    }

    .sensitive {
        fill: var(--sensitive);
    }

    .unhealthy {
        fill: var(--unhealthy);
    }

    .veryUnhealthy {
        fill: var(--veryUnhealthy);
    }

    .hazardous {
        fill: var(--hazardous);
    }

    .undefined {
        fill: var(--undefined);
    }

    .undefinedLegend {
        background-color: var(--undefined);
        color: white;
    }

    /*All districts will have a small black stroke*/
    .d {
        stroke: rgb(52, 46, 46);
        stroke-width: 1.5;
    }

    /* Style the MAP */
    html,
    body {
        height: 100%;
        margin: 0;
    }

    .leaflet-container {
        height: 400px;
        width: 600px;
        max-width: 100%;
        max-height: 100%;
    }

    .leaflet-container {
        height: 400px;
        width: 600px;
        max-width: 100%;
        max-height: 100%;
    }

    .btn-custom-class {
        background-color: orange;
    }

    .btn-custom1-class {
        background-color: purple;
        color: white;
    }

    .btn-custom2-class {
        background-color: darkred;
        color: white;
    }

    /*  Style each district as wanted:
    .d1 {
        stroke: var(--good);
        fill: var(--good);
    }

    .d10 {
        stroke: var(--hazardous);
        fill: var(--hazardous);
    }

    .d16 {
        stroke: var(--sensitive);
        fill: var(--sensitive);
    } */