body { margin: 0; padding: 0; touch-action: pan-y; }
#map { position:absolute; top:0; bottom:0; width:100%; }

    .legend label,
    .legend span {
    display:block;
    float:left;
    height:15px;
    width:20%;
    text-align:center;
    font-size:9px;
    color:#808080;
    }
    .slider{
        position:relative;
        padding-left:30px;
        padding-right:30px;
    }    


    .legendoverlay{
        position:relative;
        padding-left:50px;
        padding-right:50px;
    }  


    .map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 100%;
    bottom:0;
    }
     
    .map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 0px;
    }
     
    .map-overlay h2 {
    line-height: 24px;
    display: block;
    margin: 0 0 10px;
    }
     

    .map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
    }
    
    .filter-group {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 600;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    border-radius: 3px;
    width: 120px;
    color: #fff;
    }
     
    .filter-group input[type='checkbox']:first-child + label {
    border-radius: 3px 3px 0 0;
    }
     
    .filter-group label:last-child {
    border-radius: 0 0 3px 3px;
    border: none;
    }
     
    .filter-group input[type='checkbox'] {
    display: none;
    }
     
    .filter-group input[type='checkbox'] + label {
    background-color: #3386c0;
    display: block;
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    }
     
    .filter-group input[type='checkbox'] + label {
    background-color: #3386c0;
    text-transform: capitalize;
    }
     
    .filter-group input[type='checkbox'] + label:hover,
    .filter-group input[type='checkbox']:checked + label {
    background-color: #4ea0da;
    }
     
    .filter-group input[type='checkbox']:checked + label:before {
    content: '✔';
    margin-right: 5px;
    }
    
    .rock {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        font-size: 8px;
        color: #111;
        text-align: center;
        background: rgba(23,128,251,0.5);
        display: inline-block;
        margin-left: 30px;
    }

    .electro {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        font-size: 8px;
        color: #111;
        text-align: center;
        background: rgba(40,124,18,0.5);
        display: inline-block;
        margin-left: 30px;
    }

    .jazz {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        font-size: 8px;
        color: #111;
        text-align: center;
        background: rgba(255,255,0,0.5);
        display: inline-block;
        margin-left: 30px;
    }
    .rap {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        font-size: 8px;
        color: #111;
        text-align: center;
        background: rgba(165,2,33,0.5);
        display: inline-block;
        margin-left: 30px;
    }
    .divers {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        font-size: 8px;
        color: #111;
        text-align: center;
        background: rgba(224,147,40,0.5);
        display: inline-block;
        margin-left: 30px;
    }
    

    .eventList-div {
        height: 25px; /* Fixed height */
        margin-left: 30px;
        margin-right: 30px;
        border: 1px; /* Optional border for styling */
        overflow: hidden; /* Hide overflowing content */
        white-space: nowrap; /* Prevent text from wrapping */
        text-overflow: ellipsis; /* Add an ellipsis (...) for long text */
    }

    .mapboxgl-ctrl-share {
        background: #fff;
        padding: 10px;
        border: 1px solid #ccc;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .modal {
        display: none; /* Initially hidden */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5); /* Transparent black overlay */
      }
      
      .modal-content {
        background-color: white;
        margin: 15% auto;
        padding: 20px;
        width: 50%;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
      }
      
      .close {
        color: red;
        float: right;
        font-size: 28px;
        cursor: pointer;
      }

      .modal button {
        color: black; /* Makes the text black */
        background-color: white; /* Ensures background isn't affecting the text color */
        border: 2px solid black; /* Optional: Adds a border for better contrast */
        font-weight: bold; /* Makes the text stand out */
    }
    
    #modal-link {
        display: none;
    }