:root{--border:#aab6c1;--header-bg:#F5F5F5;}
body{font-family: 'Roboto', sans-serif;height: 100%;}
.container{width: 95vw;height: 86vh;overflow: auto;align-items: center;}
table[data-role='dtable'] {border-collapse: separate;border-spacing: 0px;}
table[data-role='dtable'] thead {height: 2em;}
table[data-role='dtable'] thead th {border-top: .001em solid var(--border);}
table[data-role='dtable'] thead, table thead * {background-color: var(--header-bg);position: sticky;top:0px;}
table[data-role='dtable'] thead th:first-child, table tbody td:first-child {border-left: .001em solid var(--border);}
table[data-role='dtable'] thead th, table tbody td {border-bottom: .001em solid var(--border);border-right: .001em solid var(--border);}
table[data-role='dtable'] th input:active {border-color: transparent;outline-color: transparent;}
table[data-role='dtable'] th span[data-role="search"], table th span[data-role="sort"] {cursor: pointer;}
table[data-role='dtable'] th span[data-role="search"]{float: left;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24' width='1.2em' height='1.2em' style='aspect-ratio: attr(width)/attr(height);'><path d='M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z'/></svg>");
    content: '';background-repeat: no-repeat;width: 1.2em;height: 1.3em;margin-left: .3em;background-size: 1.2em 1.2em;}
table[data-role='dtable'] th span[data-role="sort"]{float: right;padding-right: .3em;}
table[data-role='dtable'] tbody td {padding: 8px;}
table[data-role='dtable'] input[data-role="d-search"] {background-color: var(--header-bg);border-color: var(--header-bg);outline: none}