<style>

/* Globale konstanter/variabler: */
:root {
    --tblRowDrk: #e0e0e0;   /* Tabellinie med mørk baggrund e4e4e4*/
    --tblRowLgt: #f0f0f0;   /* Tabellinie med lys baggrund  #eeeee */
    --tblHedDrk: #1978AB;   /* Tabelheader med mørk baggrund - Due-blå  */
    --tblHedLgt: #1E91CF;   /* Tabelheader med lys baggrund - Himmel-blå  */
    --tblFotLgt: #F5F5F5;   /* Tabelfooter med lys baggrund - Lys-grå  */
    --tblgridln: #f8f8f8;   /* Tabel feltlinier  */
    --filtInpBg: #ccffff;   /* Filter input #ccffff; Cyan-light */
    --creaInpBg: #ffffcc;   /* Create input #ffffcc; Yellow-light */
}      


/* Angående "Fixed Header-system": */

html, body{
  margin:0;
  padding:0;
  height:100%;
}
#htm_table tblsection {
  position: relative;
  border: 5px solid #000;
  padding: 2px;
  padding-top: 10px;    /* Space for Table header */
  padding-bottom: 10px; /* Space for Table footer */
  background: var(--tblHedDrk);  /* #500; */
}
#htm_table tblsection.positioned {
  position: absolute;
  top:100px;
  left:100px;
  /* width:800px; */
  box-shadow: 0 0 15px #333;
  
  background:#ffffcc;
}
#htm_table .tblcontainer {
  overflow-y: auto;
  /*max-height: 400px;  /* Space for Table Body */
  
  background:#ccffff;
}
#htm_table table {
  border-spacing: 0;
  width:100%;
  
  background:white;
}

#htm_table td + td {
  border-left:1px solid var(--tblgridln);
}
#htm_table td, th {
  border-bottom:1px solid var(--tblgridln);
  background: transparent;
  color: #000;
  padding: 10px 25px;
  padding: 6px 10px;
  vertical-align: top;
}
#htm_table th, tfoot td {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
  
  background:white;
}
#htm_table th p0,      /* LABEL-linie */
#htm_table th div {
  position: absolute;    /* absolute; */
  background: transparent;
  /* color: #fff; */
/*   padding: 7px 25px; */
  padding: 5px 4px;
  top: 47px;            /* Header forskydes til over tabellens body.  */
/*   margin-left: -25px; */
  margin-left: -15px; 
  line-height: normal;
  border-left: 1px solid var(--tblgridln);
}

#htm_table th p1 {         /* FILTER-linie */
  position: absolute;  /* absolute; */
  background: transparent;
  /* color: #fff; */
  padding: 6px 5px;
  top: 160px;            /* Header forskydes til over tabellens body.  */
  /* margin-left: -25px; */
  margin-left: -15px;
  line-height: normal;
  border-left: 1px solid var(--tblgridln);
}

/* p0,p1 {display: in-line;}    /* p0, p1 benyttes til at styre 2 head/foot-linier */

#htm_table th input,
#htm_table tfoot input {
  border:1px solid black; 
  padding-left:4px; 
  margin-left:2px; 
  height:24px;
}
#htm_table tfoot tr td p0 {    /* INPUT-linie */
  position: absolute;
  background: transparent;
  color: #666;
  padding: 6px 15px;
  /*bottom: 50px;            /* Footer forskydes til under tabellens body.  */
  /* top:335px; */
  margin-left: -15px;
  line-height: normal;
  border: 1px;
}
#htm_table tfoot tr td p0 input {
  background: var(--creaInpBg);
}
#htm_table tfoot tr td p1 {    /* Tekst-linie */
  position: absolute;
  background: transparent;
  color: #666;
  padding: 6px 15px;
  bottom: 10px;            /* Footer forskydes til under tabellens body.  */
  margin-left: -15px;
  line-height: normal;
  border: 1px;
}

#htm_table th:first-child div, tfoot th:first-child div{
  border: none;
}

#htm_table tr {background-color: var(--tblRowLgt);}
#htm_table tr:nth-child(even){background-color: var(--tblRowDrk);}
#htm_table tr:hover {background-color: #fff;}

/*<!-- #htm_table tr:before {background-color:white; padding:2px; position: relative; top:10px; content:'PREFIX (Row-Select)'; border-right:3px solid lightgray;}
#htm_table tr:after {background-color:white; padding:2px; position: relative; top:10px; content:'SUFFIX (Row-Delete/Edit)'; border-left:3px solid lightgray; text-align:right;}
 -->*/
/* Sortering af tabeller:                            */
/* https://www.kryogenix.org/code/browser/sorttable/ */
/* op-pil / ned-pil sættes i: $ØProgRoot.$_assets.'js/sorttable.js */
/* Benyttes ikke! */




/* Benyttes: http://tristen.ca/tablesort/ */
#htm_table th[role=columnheader]:not(.no-sort) {
	cursor: pointer;
}

#htm_table th[role=columnheader]:not(.no-sort):after {
	content: '';
	float: right;
	margin-top: 7px;
	border-width: 0 4px 4px;
	border-style: solid;
	border-color: #404040 transparent;
	visibility: hidden;
	opacity: 0;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#htm_table th[aria-sort=ascending]:not(.no-sort):after {
	border-bottom: none;
	border-width: 4px 4px 0;
}

#htm_table th[aria-sort]:not(.no-sort):after {
	visibility: visible;
	opacity: 0.4;
}

#htm_table th[role=columnheader]:not(.no-sort):hover:after {
	visibility: visible;
	opacity: 1;
}
</style>
