.mapboxgl-legend-list
{
    display: none;
}

.mapboxgl-legend-list{
    overflow-y:scroll;
    max-height: calc(100vh * 0.7);
}

.mapboxgl-ctrl-group .mapboxgl-legend-list button
{
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    /* padding: 8px 8px 6px; */
    /* text-align: right; */
    /* width: 100%; */
    height: auto;
}

.mapboxgl-legend-list button.active
{
    font-weight: bold;
}

.mapboxgl-legend-list button:hover
{
    background-color: rgba(0, 0, 0, 0.05);
}

.mapboxgl-legend-list button + button
{
    border-top: 1px solid #ddd;
}

.mapboxgl-legend-switcher
{ 
    background: url('data:image/svg+xml;charset=UTF-8,<svg height="512pt" viewBox="0 0 512 512.0005" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m220 0h-200c-11.046875 0-20 8.953125-20 20v200c0 11.046875 8.953125 20 20 20h200c11.046875 0 20-8.953125 20-20v-200c0-11.046875-8.953125-20-20-20zm-20 200h-160v-160h160zm299.65625 73.523438c-7.472656-3.097657-16.078125-1.386719-21.796875 4.332031l-200 200c-5.722656 5.722656-7.433594 14.324219-4.335937 21.796875 3.097656 7.476562 10.386718 12.347656 18.476562 12.347656h200c11.046875 0 20-8.953125 20-20v-200c0-8.089844-4.871094-15.382812-12.34375-18.476562zm-27.65625 198.476562h-131.714844l131.714844-131.714844zm-80-232c66.167969 0 120-53.832031 120-120s-53.832031-120-120-120-120 53.832031-120 120 53.832031 120 120 120zm0-200c44.113281 0 80 35.886719 80 80s-35.886719 80-80 80-80-35.886719-80-80 35.886719-80 80-80zm-157.859375 266.144531-85.855469 85.855469 85.855469 85.855469c7.8125 7.8125 7.8125 20.476562 0 28.285156-7.808594 7.808594-20.472656 7.8125-28.28125 0l-85.859375-85.855469-85.859375 85.859375c-7.808594 7.808594-20.472656 7.808594-28.28125 0-7.8125-7.8125-7.8125-20.476562 0-28.285156l85.855469-85.859375-85.855469-85.855469c-7.8125-7.8125-7.8125-20.476562 0-28.285156 7.808594-7.8125 20.472656-7.8125 28.28125 0l85.859375 85.855469 85.859375-85.859375c7.808594-7.808594 20.472656-7.808594 28.28125 0 7.8125 7.8125 7.8125 20.476562 0 28.289062zm0 0"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}

table.legend-table{
    border-collapse:collapse;
    margin:0 auto;
    }
td.legend-table-td,th.legend-table-th{
    border:1px solid #ffffff;
    margin: 10px;
    padding:2px;
    text-align: left;
}

.mapboxgl-legend-close-button{
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
    border-radius: 0 3px 0 0;
    cursor: pointer;
    background-color: transparent;
    font-size: 13px;
    padding-top: 5px;
    padding-right: 5px;
}

.mapboxgl-legend-title-label{
    font-size: 14px; 
    font-weight: bold; 
    margin: 5px;
}

.mapboxgl-legend-onlyRendered-checkbox{
    margin: 5px;
}

.mapboxgl-legend-onlyRendered-label{
    font-size: 14px; 
    margin: 5px;
}

td.legend-table-td > svg{
    height: 17px;
}