/************************/
/**** Scrolling Table ***/
/************************/

/*the following html and body rule sets are required only if using a % width or height*/
/*html {
  width: 100%;
  height: 100%;
}*/

body {
	box-sizing: border-box;
	/*margin:0;*/
	/*padding: 10px 20px 10px 20px;*/
	/*text-align: center;*/
	}


.scrollingtable {
	box-sizing: border-box;
	display: inline-block;
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 12px;
	/* height: 248px; 			/*100%*/; /*set table height here; can be fixed value or %*/ */
	height: 108%; 			/*100%*/; /*set table height here; can be fixed value or %*/
	line-height: 20px;
	/* margin-bottom:4px; */
	min-height: 0 			/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
	min-width: 0 			/*100%*/; /*if you want a % width, set it here, else set to 0*/
	overflow: hidden;
	padding: 4px 0px 20px 0; 	/*need enough padding to make room for caption*/
	/* text-align: left; */
	vertical-align: middle;
	width: auto; 			/*if you want a fixed width, set it here, else set to auto*/
	}

.scrollingtable * {box-sizing: border-box;}

.scrollingtable > div {
	position: relative;
	border-top: 1px solid black;
	height: 100%;
	padding-top: 20px; /*this determines column header height*/
	}

.scrollingtable > div:before {
	top: 0;
	background: cornflowerblue; /* cornflowerblue header row background color*/
	}

.scrollingtable > div:before,

.scrollingtable > div > div:after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	left: 0;
	/* text-align: left; */
	}

.scrollingtable > div > div {
	min-height: 0;          /*43px;*/ /*if using % height, make this large enough to fit scrollbar arrows*/
	max-height: 100%;
	overflow: scroll;       /*auto*/ /*set to auto if using fixed or % width; else scroll*/
	overflow-x: hidden;
	border: 1px solid black; /*border around table body*/
	}

.scrollingtable > div > div:after {background: white;} /*match page background color*/

.scrollingtable > div > div > table {
	width: 100%;
	border-spacing: 0;
	margin-top: -22px;	/*inverse of column header height*/
						/*margin-right: 17px;*/ /*uncomment if using % width*/						
	}

.scrollingtable > div > div > table > caption {
	position: absolute;
	top: -20px; 			/*inverse of caption height*/
	margin-top: -1px; 		/*inverse of border-width*/
	width: 100%;
	font-weight: bold;
	/* text-align: left; */
	}

.scrollingtable > div > div > table > * > tr > * {padding: 0;}

.scrollingtable > div > div > table > thead {
	vertical-align: bottom;
	white-space: nowrap;
	/* text-align: left; */
	}

.scrollingtable > div > div > table > thead > tr > * > div {
	display: inline-block;
	padding:0px 6px 0px 2px;	/*header cell padding*/
	text-indent:0px;
	}


.scrollingtable > div > div > table > thead > tr > :first-child:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;					/*match column header height*/
	border-left: 1px solid black;	/*leftmost header border*/
	}

.scrollingtable > div > div > table > thead > tr > * > div[label]:before,

.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,

.scrollingtable > div > div > table > thead > tr > * + :before {
	position: absolute;
	top: 0;
	white-space: pre-wrap;
	color: white; 				/*header row font color*/
	}

.scrollingtable > div > div > table > thead > tr > * > div[label]:before,

.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}

.scrollingtable > div > div > table > thead > tr > * + :before {
	border-left: 0px solid black;	/*borders between header cells*/
	content: "";
	display: block;
	min-height: 20px;				/*match column header height*/
	padding-top: 1px;
	}

.scrollingtable .scrollbarhead {float: right;}

.scrollingtable .scrollbarhead:before {
	position: absolute;
	width: 100px;
	top: -1px;				/*inverse border-width*/
	background: white;		/*match page background color*/
	}

.scrollingtable > div > div > table > tbody > tr:after {
	content: "";
	display: table-cell;
	position: relative;
	padding: 0px;
	border-top: 1px solid black;
	top: -1px; 						/*inverse of border width*/
	}

.scrollingtable > div > div > table > tbody {vertical-align: top;}

.scrollingtable > div > div > table > tbody > tr {background: white;}

.scrollingtable > div > div > table > tbody > tr:nth-child(odd) > * {
	background-color: aqua;      /* aqua, row colors */
	border-bottom: 1px solid black;
	padding: 0 2px 0 2px;
	height: 20px; 				/*match column header height*/
	}

.scrollingtable > div > div > table > tbody > tr:nth-child(even) > * {
	background-color: white;      /* white, row colors */
	border-bottom: 1px solid black;
	padding: 0 2px 0 2px;
	height: 20px; 				/*match column header height*/
	}

.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}

.scrollingtable > div > div > table > tbody > tr:nth-child(odd) {
	background: aqua;			/* gainsboro;  alternate row color*/
	} 		

.scrollingtable > div > div > table > tbody > tr:nth-child(even) {
	background:white;			/* gainsboro;  alternate row color*/
	} 		

.scrollingtable > div > div > table > tbody > tr > * + * {
	border-left: 1px solid black; 		/*borders between body cells*/
	}

.scrollbarhead {
	background:black;
	background-color:black;			/* gainsboro;  alternate row color*/
	color:black;
	width:20px;
	}

.scrollingtable {
	height: 108%; 			/*100%*/; /*set table height here; can be fixed value or %*/
	width:98%;	
	}

/* End scrolling table */