table.dat tbody td:first-child {text-align: left !important }

td:nth-child(n+6) {
  font-weight: bold;
  font-style: italic;
}

/* <table class="data"> */
table.dat { border-spacing: 0; font-size: 0.85rem; margin-bottom: 2vw; min-width: 100%; text-align:center; border-radius: var(--radius-general); overflow: hidden}
table.dat > thead > tr { background-color: #E2F1F8;}
table.dat > thead > tr > th { padding: 0.5rem; border-bottom: 2px solid var(--table-border-color); }
table.dat > thead > tr > th.primary { text-decoration: underline; }
table.dat > tbody { border-top: 1px solid var(--table-border-color); }
table.dat > tbody > tr { border-bottom: 1px solid var(--table-border-color); }
table.dat > tbody > tr:nth-child(odd) { background-color: var(--td-bg-color-odd); }
table.dat > tbody > tr:nth-child(even) { background-color: var(--td-bg-color-even); }
table.dat > tbody > tr:hover { background-color: var(--td-bg-color-hover); }
table.dat > tbody > tr > td { padding: 0.5rem; border-bottom: 2px solid var(--table-border-color); }

table.dat > tbody > tr > td:nth-child(-n+3) {text-align: left}
table.dat > tbody > tr > td:first-child:has(span) {opacity: 0.5}

table.dat > tbody > tr > td:before  { font-family: 'Font Awesome 6 Brands'; font-weight: var(--fa-style, 300); display: inline-block; font-size: 1em; vertical-align: 0; min-width: 1.3em; text-align: center; margin-right: 0.1em; opacity: 0.2 }
table.dat > tbody > tr > td:nth-child(2):before { content: "\f791"; }
table.dat > tbody > tr > td:nth-child(2)[class*="win"]:before  { content: "\f17a" }
table.dat > tbody > tr > td:nth-child(2)[class*="ios"]:before,
table.dat > tbody > tr > td:nth-child(2)[class*="ipados"]:before,
table.dat > tbody > tr > td:nth-child(2)[class*="macos"]:before  { content: "\f179" }
table.dat > tbody > tr > td:nth-child(2)[class*="android"]:before  { content: "\f17b" }
table.dat > tbody > tr > td:nth-child(2)[class*="linux"]:before  { content: "\f17c" }

table.dat > tbody > tr > td:nth-child(3):before { content: "\f791" }
table.dat > tbody > tr > td:nth-child(3)[class*="chrome"]:before  { content: "\f268" }
table.dat > tbody > tr > td:nth-child(3)[class*="firefox"]:before  { content: "\f269" }
table.dat > tbody > tr > td:nth-child(3)[class*="edge"]:before  { content: "\f282" }
table.dat > tbody > tr > td:nth-child(3)[class*="opera"]:before  { content: "\f26a" }
table.dat > tbody > tr > td:nth-child(3)[class*="safari"]:before  { content: "\f267" }

table.dat > * > tr > *:nth-child(2),
table.dat > * > tr > *:nth-child(3) { display: none}
table.dat:has( > tbody > tr > *:nth-child(2):not([class="-"]) ) > * > tr > *:nth-child(2),
table.dat:has( > tbody > tr > *:nth-child(3):not([class="-"]) ) > * > tr > *:nth-child(3) { display: table-cell }

table.dat  tr > td:nth-child(4),
table.dat  tr > td:nth-child(5) {
  opacity: 0.5;
  background: whitesmoke;
  width: 1px
}

table.dat td.full { color: #080; }
table.dat td.mid-full { color: #8b1; }
table.dat td.mid-empty { color: #d80; }
table.dat td.empty { color: #c66 }

@media print {
* { position: initial; box-sizing: initial; }
*::before, *::after { box-sizing: initial; }
}