.feature-attr{
    svg{
        margin: 0 auto;
    }
    .data-layer{
        display: flex;
        padding: 1rem;

        .layer-update{
            cursor: pointer;
        }
    }
    .data-filter{
        display: flex;
        padding: 0.5rem;

        select{
            cursor: pointer;
        }

        .selection-type{
            flex-grow: 1;
            display: flex;

            .select-row,
            .select-by-geom,
            .clear-selection{
                border: 0.1rem solid #9f9898;
                width: 2rem;
                height: 2rem;
                display: flex;
                align-items: center;
                text-align: center;
                margin: 0 0.1rem;
                cursor: pointer;              
            }
            .select-row:hover,
            .select-by-geom:hover,
            .clear-selection:hover{
                background-color: #d5d5d5;
            }
            .select-row.selected,
            .select-by-geom.selected,
            .clear-selection.selected{
                background-color: #b1b0b0;
            }
        }
    }
    .data-filter-list{
        display: flex;
        padding: 0.5rem;

        select{
            cursor: pointer;
        }

        select.filter-list{
            min-width: 6rem;
        }

        .features-download{
            border: 0.1rem solid #9f9898;
            text-align: center;
            margin: 0 0.1rem;
            cursor: pointer;            
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
        }
        .features-download:hover{
            background-color: #d5d5d5;
        }
        .table-mode{
            border: 0.1rem solid #9f9898;
            text-align: center;
            margin: 0 0.1rem;
            cursor: pointer;            
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
        }
        .table-mode.selected{
            background-color: #b1b0b0;
        }
        .table-mode:hover{
            background-color: #d5d5d5;
        }
        .time-mode{
            border: 0.1rem solid #9f9898;
            text-align: center;
            margin: 0 0.1rem;
            cursor: pointer;            
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
        }
        .time-mode[hidden]{
            display: none;
        }
        .time-mode.selected{
            background-color: #b1b0b0;
        }
        .time-mode:hover{
            background-color: #d5d5d5;
        }
    }
    .data-filter-list.remove-download{
        .features-download{
            display: none;
        }
    }
    .data-rows{
        overflow: scroll;
        max-height: 26rem;
        border-top: 0.1rem solid #bfbfbf;
        border-bottom: 0.1rem solid #bfbfbf;
        
        table{
            border-collapse: collapse;
            width: 100%;

            thead{
                position: sticky;
                top: 0;
                background-color: #fff;
                z-index: 1;
            }

            td,th{
                border: 0.1rem solid #ddd;
                padding: 0.3rem;
            }
            td.feature-toggle,
            td.feature-goto{
                cursor: pointer;
                text-align: center;
            }
            th.data-show-all{
                cursor: pointer;
            }
            th[data-show-all=true],
            td.feature-toggle.selected{
                color: #ff0000;
            }
            tr:nth-child(even){
                background-color: #f2f2f2;
            }
            tr:hover{
                background-color: #ddd;
            }
            tr.selected{
                outline: 0.1rem solid #04aeff;
                background-color: #a8e1fb;
            }
            th {
                /*padding: 0.125rem;
                padding-bottom: 0.125rem;
                text-align: left;
                background-color: #0e5d92;
                color: white;*/

                >div{
                    display: flex;
                    pointer-events: none;

                    span.value{
                        flex-grow: 1;
                    }
                    span:not(.value){
                        cursor: pointer;
                        pointer-events: all;
                        padding: 0.1rem 0.3rem;
                        padding-top: 0.2rem;
                        line-height: 0.8rem;
                    }
                    span.asc:hover,
                    span.desc:hover{
                        background-color: yellow;
                    }
                    span.asc.selected,
                    span.desc.selected{
                        background-color: red;
                    }
                }
            }
        }
        table.only-selected{
            th{
                >div{
                    span.asc,
                    span.desc{
                        display: none;
                    }
                }
            }
        }
    }
    .data-paginator{
        .paginator-container{
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: fit-content;
            padding: 1rem;

            > div:not(.paginator-total){
                border: 0.1rem solid #9f9898;
                cursor: pointer;
                margin: 0 0.2rem;
                width: 2rem;
                height: 2rem;
                display: flex;
                align-items: center;
            }
            > div:not(.paginator-total):hover{
                background-color: #d5d5d5;
            }
        }
    }
    button{
        cursor: pointer;
    }
    .empty-space{
        flex-grow: 1;
    }
}