.legend-content {
    overflow-x: auto;
    overflow-y: auto;
    transition: height 0.1s;
    position: relative;
    scroll-snap-type: y mandatory;
}


.legend-table {
    margin: 0;
    border-collapse: collapse;
    line-height: 1;

    table-layout: fixed;
}

    .legend-table tr {
        scroll-snap-align: start;
    }

    .legend-table th,
    .legend-table td
    {
        border-width: 1px;
        border-style: solid;
    }


    .legend-table thead tr th {
        white-space: nowrap;
        overflow: hidden;
        font-weight: normal;
        text-overflow: ellipsis;
        padding-top: 0;
        padding-bottom: 0;
        position: sticky;
        top: -0.3px;
        background-clip: padding-box; /* rozwiązuje problem w firefox, jeśli jest position:sticky to nie jest widoczny border */
    }


    .legend-table tbody tr td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 0;
        padding-bottom: 0;
    }


    .legend-table thead tr th {
        border-top: none;
    }


    .legend-table th {
        font-weight: normal;
    }


.legend-column-symbol {
    width: 42px;    /* wartość użyta w LegendColumnMover.razor*/
    min-width: 42px;
    max-width: 42px;
    color: var(--bs-secondary-color);
    text-align: center;
    vertical-align: middle;
}

.legend-column-selector {
    width: 30px;    /* wartość użyta w LegendColumnMover.razor*/
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    vertical-align: middle;
}


.legend-column-tool {
    width: 30px;    /* wartość użyta w LegendColumnMover.razor*/
    min-width: 30px;
    max-width: 30px;
    color: var(--bs-secondary-color);
    text-align: center;
    vertical-align: middle;
}