<div class="filter-area">
    <div class="filter-line">
        <div class="filter-display">
            <div data-ui="time-frame-label" class="set-filter-info">ZEITRAUM:</div>
            <div data-ui="start-date" class="set-filter-info">XX.XX.XXXX YY:YY:YY</div>
            <div class="set-filter-info"> - </div>
            <div data-ui="end-date" class="set-filter-info">XX.XX.XXXX YY:YY:YY</div>
        </div>
        <div data-ui="reset-button" class="reset-button">
            <div data-ui="reset-button-label" class="reset-button-label">X</div>
        </div>

        <div data-ui="filter-button" class="filter-toggle button">
            <div data-ui="filter-label" class="button-label">SET TIME FILTER LABEL</div>
            <!--<img src="pics/system/controls/alarm-history/filter.svg" class="filter-icon"/>-->
        </div>
    </div>
    <div data-ui="filter-overlay" class="filter-click-overlay"></div>
    <div class="filter-settings">
        <div class="triangle"></div>
        <div data-ui="from-label" class="from-label">FROM:</div>
        <div data-ui="from-anchor" class="from-anchor">
            <!-- select-date control -->
            <!-- select-time control -->
        </div>
        <hr/>
        <div data-ui="to-label" class="to-label">TO:</div>
        <div data-ui="to-anchor" class="to-anchor">
            <!-- select-date control -->
            <!-- select-time control -->
        </div>
    </div>
</div>
<div data-ui="table-anchor" class="table-anchor">
    <!-- complex-table2 control -->
    <!-- ct2 responsive css-classes: "layout-std" > 700px, "layout-compact" <= 700px -->
</div>
