header('Content-type: text/css');
/* 
 * CSS Document 
  transition: max-height 0.3s, padding 0.3s;
  transition: all .35s;
 * https://jqueryui.com/demos/
 * https://www.w3schools.com/cssref/css_selectors.php
 * https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
 */
html, body {
}
/* 
 * **************
 * SIZE VARIABLES 
 */
:root {
}

/* 
 * *************
 * DISPLAY TABLE 
 */
.table {
  display: table;
  transition: all .35s;
  }
/*div.table.hidden {
  display: none;
  transition: max-height 0.3s, padding 0.3s;
  }*/
.table > .thead {
  display: table-header-group;
  transition: all .35s;
  }
.table > .tbody {
  display: table-row-group;
  transition: all .35s;
  }
.table > .tfoot {
  display: table-footer-group;
  transition: all .35s;
  }
.table > .tr:not( .box ):not( .hidden ) , 
.thead > .tr:not( .headButtons ):not( .box ):not( .hidden ) ,
.tbody > .tr:not( .box ):not( .hidden ):not( .filteredOut ) ,
.tfoot > .tr:not( .box ):not( .hidden ) ,
.table > .row:not( .box ):not( .hidden ) ,
.thead > .row:not( .headButtons ):not( .box ):not( .hidden ) ,
.tbody > .row:not( .box ):not( .hidden ):not( .filteredOut ) ,
.tfoot > .row:not( .box ):not( .hidden ) {
  display: table-row;
  transition: all .35s;
  }
.table > .caption ,
.thead > .caption ,
.tbody > .caption ,
.tfoot > .caption ,
.table > .tr > .caption ,
.thead > .tr > .caption ,
.tbody > .tr > .caption ,
.tfoot > .tr > .caption ,
.table > .row > .caption ,
.thead > .row > .caption ,
.tbody > .row > .caption ,
.tfoot > .row > .caption {
  display: table-caption;
  }
.caption.top {
  caption-side: top;
  }
.caption.bottom {
  caption-side: bottom;
  }
.table > .tr.filteredOut ,
.thead > .tr.filteredOut ,
.tbody > .tr.filteredOut ,
.tfoot > .tr.filteredOut {
  display: none;
  transition: max-height 0.3s, padding 0.3s;
  }
.table > .td ,
.thead > .td ,
.tbody > .td ,
.tfoot > .td ,
.table > .tr:not( .box ) > .td ,
.thead > .tr:not( .box ) > .td ,
.tbody > .tr:not( .box ) > .td ,
.tfoot > .tr:not( .box ) > .td ,
.table > .row:not( .box ) > .td ,
.thead > .row:not( .box ) > .td ,
.tbody > .row:not( .box ) > .td ,
.tfoot > .row:not( .box ) > .td ,
.table > .cell ,
.thead > .cell ,
.tbody > .cell ,
.tfoot > .cell ,
.table > .tr:not( .box ) > .cell ,
.thead > .tr:not( .box ) > .cell ,
.tbody > .tr:not( .box ) > .cell ,
.tfoot > .tr:not( .box ) > .cell ,
.table > .row:not( .box ) > .cell ,
.thead > .row:not( .box ) > .cell ,
.tbody > .row:not( .box ) > .cell ,
.tfoot > .row:not( .box ) > .cell {
  display: table-cell;
  }

.table.hidden ,
.caption.hidden ,
.thead.hidden ,
.tbody.hidden ,
.tfoot.hidden ,

.table > .tr.hidden ,
.thead > .tr.hidden ,
.tbody > .tr.hidden ,
.tfoot > .tr.hidden ,

.table > .row.hidden ,
.thead > .row.hidden ,
.tbody > .row.hidden ,
.tfoot > .row.hidden ,

.table > .td.hidden ,
.thead > .td.hidden ,
.tbody > .td.hidden ,
.tfoot > .td.hidden ,

.table > .tr > .td.hidden ,
.thead > .tr > .td.hidden ,
.tbody > .tr > .td.hidden ,
.tfoot > .tr > .td.hidden ,

.table > .row > .td.hidden ,
.thead > .row > .td.hidden ,
.tbody > .row > .td.hidden ,
.tfoot > .row > .td.hidden ,

.table > .cell.hidden ,
.thead > .cell.hidden ,
.tbody > .cell.hidden ,
.tfoot > .cell.hidden ,

.table > .tr > .cell.hidden ,
.thead > .tr > .cell.hidden ,
.tbody > .tr > .cell.hidden ,
.tfoot > .tr > .cell.hidden ,

.table > .row > .cell.hidden ,
.thead > .row > .cell.hidden ,
.tbody > .row > .cell.hidden ,
.tfoot > .row > .cell.hidden {
  display: none;
  }
/* 
 * ******
 * LAYOUT 
 */
.table {
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
  }
td ,
.tr > .cell:not( + .headButtons ) ,
.tr > .td:not( + .headButtons ) {
  line-height: 1.4em;
  overflow: auto;
  vertical-align: inherit;
  unicode-bidi: isolate;
  }
.thead {
  position: -webkit-sticky;
  position: sticky;
  top: -1.05em;
  z-index: 100;
}
.thead > .span {
  cursor: pointer;
  }
.caption ~ .thead {
  top: 2.0em;
}
.table > .caption ,
.thead > .caption ,
.tbody > .caption ,
.tfoot > .caption {
  margin: 0em auto;
  font-size: 1.0em;
  line-height: 1.5em;
  font-weight: bold;
  vertical-align: middle;
  white-space: nowrap;
  z-index: 105;
  padding: 0.25em 0.25em;
  font-size: 1em;
  border-width: 0.15em;
  border-style: solid;
  position: sticky;
  top: -0.78em;
  }
.thead > .tr:not( .headButtons ) {
  text-align: left;
  margin: 0.3em auto;
  font-size: 1.0em;
  line-height: 1.5em;
  font-weight: bold;
  vertical-align: middle;
  white-space: nowrap;
  }
.tbody > .cell {
  vertical-align: top;
  }
.cell {
/*div.table > .row > div.cell { */
  z-index: 99;
  padding: 0.25em 0.25em;
  font-size: 1em;
  border-width: 0.15em;
  border-style: solid;
  min-width: 2.5em;
  max-width: 70em;
  max-height: 70em;
  overflow: overlay;
  text-overflow: ellipsis;
  }

.tr > .btn {
  position: relative;
  top: 0.75em;
  }
.caption > .TgView {
  float: left;
  font-size: 1.5em;
  line-height: 1.7em;
  padding: 0em 0.5em;
  }
.caption > .TgView ,
.caption > .TgView::before {
  cursor: pointer;
  }
/* 
 * *******
 * COLOURS 
 */
.thead > .tr:not( .headButtons ) ,
.tfoot > .tr ,
.th {
  background-color: var(--greyLighter);
  }
.table > .tr ,
.tbody > .tr {
  background-color: var(--white);
  }
.b-c_W ,
.background-color_White {
  background-color: var(--white);
  border-width: 0.15em;
  border-style: solid;
  }
.b-c_WNth ,
.background-color_WhiteNth {
  background-color: var(--greySmoke);
  border-width: 0.15em;
  border-style: solid;
  }
.table > .caption ,
.thead > .caption ,
.tbody > .caption ,
.tfoot > .caption ,
.table > .tr > .cell ,
.thead > .tr > .cell ,
.tbody > .tr > .cell ,
.tfoot > .tr > .cell {
  border-color: var(--themeDarker);
  }
.table > .tr:nth-child(even) ,
.tbody > .tr:nth-child(even) {
  background-color: var(--greySmoke);
  }
div.table .data.tr.new {
  background-color: var(--greyLighter);
  border-color: var(--greyDark);
  box-shadow: none ;
  }

.table .stats.tr:nth-child(odd) {
  background-color: var(--greyLighter);
  }
.table .stats.tr:nth-child(even) {
  background-color: var(--greySmoke);
  }
.table > .stats.tr:hover {
  background-color: var(--selectedHover);
  }
.table > .tr:hover ,
.tbody > .tr:hover ,
.tfoot > .tr:hover ,
.hoverRow ,
.hoverCol {
  background-color: var(--selectedHover);
  }
.hoverCell {
  background-color: var(--selectedDark);
  }
.hoverHead {
  background-color: var(--greyLight);
  }
.th .glyphicon:not( .fiterSelected ) {
	color: var(--greyDarker);
  }
.th.onLine ,
.onLine {
  text-align: left;
  min-width: 1em;
  transform: translate( -0% , -50% );
  z-index: 110;
  position: relative;
  /*top: -0.8em;*/
  padding: 0.1em 0.3em;
  margin: 0em 0.3em;
  float: left;
  line-height: 1em;
  height: 1em;
  background-color: var( --white ) !important;
  border-style: none;
  overflow: visible;
  white-space: nowrap;
  box-shadow: 
	0 0em 0.1em 0 var(--blackThree), 
	0 0em 0.4em 0 var(--blackOne), 
	0 0em 0.2em 0 var(--white) inset, 
	0 0em 0.4em 0 var(--blackTwo) inset;
  }
.onLine .onHover {
  display: none;
  }
.onLine.th:hover .onHover {
  display: inline-block !important;
  }

div.headButtons.tr ,
tr.headButtons.tr ,
.thead > .headButtons.tr {
  background-color: var( --whiteClear );
  border-style: none;
  border: 0em;
  display: flex;
  flex-wrap: nowrap;
  height: 0em;
  position: sticky;
  left: 0em;
  z-index: 105;
  }
.onHover:not( .onHoverOn , .onLine > .onHover ){
  /*display: none;*/
  visibility: hidden;
  transition: all .35s;
  }
.th:hover .onHover:not( .onHoverOff , .onLine > .onHover ) {
  /*display: inline-block !important;*/
  visibility: visible;
  background-color: var( --greyLighter );
  line-height: initial;
  transition: all .35s;
  }