styles.css

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    .map-overlay.bottom-left {
        font:
            12px/20px 'Helvetica Neue',
            Arial,
            Helvetica,
            sans-serif;
        position: absolute;
        width: 20%;
        bottom: 3%;
        left: 2%;
        padding: 10px;
    }

    .map-overlay.top-right {
        font:
            12px/20px 'Helvetica Neue',
            Arial,
            Helvetica,
            sans-serif;
        position: absolute;
        width: 20%;
        top: 3%;
        right: 2%;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #ffffff93;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
        text-align: center;
    }

    .map-overlay h2 {
        line-height: 24px;
        display: block;
        margin: 10px 10px 10px;
    }

    .map-overlay.legend {
        font:
            12px/20px 'Helvetica Neue',
            Arial,
            Helvetica,
            sans-serif;
        position: absolute;
        width: 10%;
        top: 8%;
        right: 5%;
        padding: 10px;
    }

    .map-overlay-transparent {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center
    }

    .map-overlay .map-overlay-transparent .legend {
        display: grid;
        grid-template-columns: auto auto;
        gap: 10px;
        text-align: center;
    }

    .color-box {
        width: 40px;
        height: 40px;
        margin: 20px;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 10px;
        background-size: auto;
    }

    .color-circle {
        width: 40px;
        height: 40px;
        margin: 20px;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 50%;
    }

    .color-group {
        margin: 0px;
    }

    .map-overlay input {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0;
        cursor: ew-resize;
    }

    .mapboxgl-popup {
        width: 20%;
      }
      
      .mapboxgl-popup .mapboxgl-popup-content {
        background-color: #333;
        color: #fff;
        padding: 5px;
        text-align: center;
        border-radius: 10px;

      }
      
      .mapboxgl-popup .mapboxgl-popup-tip {
        border-top-color: #333;
      }