body { margin-top: 4rem;}
main > section { max-width: initial; padding: 1rem }
h2 { position: fixed; z-index: 3; height: 4rem; overflow: hidden; background: var(--bg-main-color); top: -1.2rem;padding: 1.5rem;width: 100%;left: 0;}
.search {position: fixed; z-index: 4; width: auto; right: 0.2rem; top: 0.5rem; }
table.dat { font-size: 0.75rem; }
table.dat tbody td:first-child {text-align: left !important }

/* <table class="data"> */
table.dat { border-spacing: 0; font-size: 0.85rem; margin-bottom: 2vw; min-width: 100%; text-align:center }
table.dat > thead > tr { background-color: #E2F1F8;}
table.dat > thead > tr > th { padding: 0.5rem; border-bottom: 1px solid #fff; }
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 #fff; }
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: #FFF; }
table.dat > tbody > tr > td:first-child { white-space: nowrap; min-width: 15em }

table.dat tbody th, table.dat tbody  td { border: 1px solid #FFF; padding: 0.3rem !important; text-align: center !important; }

tr:nth-child(odd) td[title="play"] { background-color: #E2F1F8; }
tr:nth-child(even) td[title="play"] { background-color: #D2E5ED; }
tr:hover td[title="play"]  {background: #0699}

td:nth-child(2), td:nth-child(3) {
  font-weight: bold;
  font-style: italic;
}

td:nth-child(n+4), th:nth-child(n+4) { font-size: 0.85em !important; padding: 3px !important;} 

th:nth-child(n+4)  { writing-mode: vertical-lr; transform: rotate(200deg); font-size: 1em !important; top:-5px; left: 2px}

table thead {
  position: sticky;
  top: 4rem;
  z-index: 2;
  background: var(--th-bg-color);  
  cursor: pointer;
}

table tbody tr td:first-child {
  position: sticky;
  left: 1rem;
  z-index: 1;
  background: var(--td-bg-color-odd);
  box-shadow: var(--box-shadow);
}

table tbody tr:nth-child(even) td:first-child {
  background: var(--td-bg-color-even);
}

table tbody tr:nth-child(odd):hover td:nth-child(-n+3) { background-color: #E2F1F8; }
table tbody tr:nth-child(even):hover td:nth-child(-n+3) { background-color: #D2E5ED; }

th.highlight-col:nth-child(n+4):after,
td.highlight-col:nth-child(n+4):after  { 
    background-color: #ffa6;
    content: '';  
    height: 100%;    
    top: 0;
	left: 0;
    width: 100%;
    z-index: 2;     
	display:block;
	position: absolute;
}