.sr-only { position: absolute; top: -30em; }
#tblcontainer { max-width:95%; margin-left:-20px; font-size:0.9em;  width:95%; height:600px; max-height:600px; overflow:auto; background:#efefef; }
table caption { font-size:1.2em; font-weight:bold; color:#009; padding-top:10px; }
table.sortable { font-size:0.8em; color:#333; font-family:arial;  }
table.sortable td, table.sortable th { padding: 0.5em; width: 8em; background:#fff; }
table.sortable th { color:#009; background:#fff; border-bottom: thin solid #aaa; } /*position:sticky; }*/
table.sortable th.no-sort { padding-top: 0.35em; }
table.sortable th:nth-child(5) { width: 10em; }
table.sortable th button { padding: 4px; margin: 1px; font-size: 100%; font-weight: bold;
  background: transparent; border: none; display: inline; right: 0; left: 0; top: 0;
  bottom: 0; width: 100%; text-align: left; outline: none; cursor: pointer; }
table.sortable th button span { position: absolute; right: 4px; }
table.sortable th[aria-sort="descending"] span::after { content: "▼"; color: currentcolor; font-size: 100%; top: 0; }
table.sortable th[aria-sort="ascending"] span::after { content: "▲"; color: currentcolor; font-size: 100%; top: 0; }
table.show-unsorted-icon th:not([aria-sort]) button span::after { content: "♢"; color: currentcolor; font-size: 100%;
  position: relative; top: -3px; left: -4px; }
table.sortable td.num { text-align: right; }
table.sortable tbody tr:nth-child(odd) { background-color: #eee; }
/* Focus and hover styling */
table.sortable th button:focus, table.sortable th button:hover { padding: 2px;
  border:none; background-color: #9dcdf4; border-top:1px #333 solid; }
table.sortable th button:focus span, table.sortable th button:hover span { right: 2px; }
table.sortable th:not([aria-sort]) button:focus span::after, table.sortable th:not([aria-sort]) button:hover span::after { content: "▼"; color: currentcolor; font-size: 100%; top: 0; }
table.sortable thead tr:first-child th { position: sticky; top: 0; }
