:root
{
		--row-height: 2.5em;
		--cell-padding: 1.5em;
}

/*----Contiguous and dynamic number of blocks/boxes in a table row----*/
div.contiguous-box
{
	display: block;
}

a.rowlink
{
	color: inherit;
	display: flex;
	align-items: center;
	width: calc( 100% + var(--cell-padding) + var(--cell-padding) );
	height: var(--row-height);

	margin-left: calc(var(--cell-padding) * -1);
	margin-right: calc(var(--cell-padding) * -1);
	padding-left: var(--cell-padding);
	padding-right: var(--cell-padding);
}

a.right-align-rowlink
{
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: calc( 100% + var(--cell-padding) + var(--cell-padding) );
	height: var(--row-height);

	margin-left: calc(var(--cell-padding) * -1);
	margin-right: calc(var(--cell-padding) * -1);
	padding-left: var(--cell-padding);
	padding-right: var(--cell-padding);
}

.sub-header
{
	text-align: center;
}

.no-top-border
{
	border-top-width: 0px;
}

.no-bottom-border
{
	border-bottom-width: 0px;
}

.no-left-border
{
	border-left-width: 0px;
}

.no-right-border
{
	border-right-width: 0px;
}

.thick-bottom-border
{
	border-bottom-width: 2px;
}

.thick-top-border
{
	border-top-width: 2px;
}

.thick-left-border
{
	border-left-width: 2px;
}

.thick-right-border
{
	border-right-width: 2px;
}


/*----DATA TABLES--------------------------------------------------------------------*/
div.data-table
{
	/*-ms-overflow-style: none;
	scrollbar-width: none;*/
	max-height: calc(100% - 6em);

	width: 100%;
	overflow-y: scroll;
	float: left;
	clear: left;
	background-color: var(--background-color);

	display:block;
	border-style: solid;
	border-width: 0.5px;
	border-collapse: collapse;
	border-radius: var(--standard-border-radius);
	border-color: var(--light-border-color);
	
	margin-bottom: 2em;
}

table.data-table
{
	width: 100%;
	border-collapse: collapse;

	table-layout: fixed;
}

table.data-table-auto
{
	width: 100%;
	border-collapse: collapse;

	table-layout: auto;
}

.data-table tr
{
	border-color: var(--light-border-color);
	border-style: solid;
	
	border-top-width: 0.5px;
	border-right-width: 0px;
	border-bottom-width: 0.5px;
	border-left-width: 0px;
	border-radius: var(--standard-border-radius);
	height: var(--row-height);
}

.data-table .hover
{
	background-color: var(--secondary-color-5);
	color: var(--text-color);
}

.data-table .selected
{
	background-color: var(--tertiary-color-5);
	color: var(--text-color);
}

.data-table tr:first-child
{
	border-top-width: 0px;
}

.data-table tr:last-child
{
	border-bottom-width: 0px;
}

.data-table tr th
{
	background-color: var(--accent-color);
	color: var(--background-color);
	text-align: left;
	padding-left: var(--cell-padding);
	height: var(--row-height);
}

.data-table tr th, .data-table tr td.header
{
	position: sticky;
	top: 0;
}

.data-table tr td
{
	/*background-color: var(--background-color);*/
	padding-left: var(--cell-padding);
	padding-right: var(--cell-padding);

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.data-table tr td img
{
	display: block;
	max-width: 100%;
	max-height: 100%;
	background-color: white;
}

.data-table a
{
	font-weight: normal;
	/*color:var(--accent-color);*/
    text-decoration: none;
}

.full-height-row tr, tr.full-height-row, td.full-height-row, th.full-height-row
{
	height: var( --row-height );
}

.double-height-row td, tr.double-height-row, td.double-height-row, th.double-height-row
{
	height: calc( var( --row-height ) * 2 );
}

/*----RECORD AND FORM TABLES--------------------------------------------------------------------*/
div.record-table
{
	width: 100%;
	overflow-y: hidden;
	float: left;
	clear: left;
	background-color: var(--background-color);

	display:block;
	border-style: solid;
	border-width: 0.5px;
	border-collapse: collapse;
	border-radius: var(--standard-border-radius);
	border-color: var(--light-border-color);

	margin-bottom: 2em;
}
table.record-table
{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.record-table tr
{
	/*border-color: var(--content-background-color);
	border-style: solid;
	
	border-top-width: 0.5px;
	border-right-width: 0px;
	border-bottom-width: 0.5px;
	border-left-width: 0px;
	border-radius: var(--standard-border-radius);*/
	height: var(--row-height);
}

.record-table tr:first-child
{
	border-top-width: 0px;
}

.record-table tr:last-child
{
	border-bottom-width: 0px;
}

.record-table tr th
{
	background-color: var(--highlight-color);
	text-align: left;
	padding-left: var(--cell-padding);
	height: var(--row-height);
}

.record-table tr th, .record-table tr td.header
{
	position: sticky;
	top: 0;
}

.record-table tr td
{
	background-color: var(--background-color);
	padding-left: var(--cell-padding);
	padding-right: 0;/*var(--cell-padding);*/

	white-space:normal;
	overflow: visible;
}

.record-table tr td img
{
	display: block;
	max-width: 100%;
	max-height: 100%;
	background-color: white;
}

/*.record-table tr td a
{
	display: block;
	text-decoration: inherit;
	color: inherit;
}*/

.record-table a
{
	font-weight: normal;
	color:var(--accent-color);
    text-decoration: none;
}

/*----Bordered Tables--------------------------------------------------------------------*/
table.border-table
{
	width: 100%;
	border-style: solid;
	border-width: 0.5px;
	border-collapse: collapse;
	border-color: var(--light-border-color);
	margin-top: 1em;
	margin-bottom: 1em;
}
	/* var(--light-border-color) */

.border-table tr
{
	height: var(--row-height);
}

.border-table tr th
{
	background-color: var(--highlight-color);
	text-align: center;
	padding-left: var(--cell-padding);
	padding-right: var(--cell-padding);

	border-style: solid;
	border-width: 0.5px;
	border-collapse: collapse;
	border-color: var(--light-border-color);
}

.border-table tr td
{
	background-color: var(--background-color);
	padding-left: var(--cell-padding);
	padding-right: var(--cell-padding);

	border-style: solid;
	border-width: 0.5px;
	border-collapse: collapse;
	border-color: var(--light-border-color);
}

/*----Invisible Tables--------------------------------------------------------------------*/
table.invisible-table
{
	width: 100%;
	border-style: none;
	margin: 0;
	padding: 0;
	table-layout: fixed;
}

.invisible-table tr
{
	height: var( --row-height );
}

.invisible-table th
{
	text-align: center;
}

.invisible-table td
{
	padding: 0.5em;
	white-space:normal;
	overflow: visible;
}

/*----ID Tables--------------------------------------------------------------------*/
#load-table
{
	table-layout: fixed;
}

#load-table td
{
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-align: center;
	vertical-align: top;
	word-wrap: break-word;
}

#load-table input
{
	max-width: 90%;
	padding: 0.3em;
}

/*Employee times*/

#shift-table
{
	width: 100%;
	float: left;
	clear: left;
	background-color: var(--background-color);

	display: block;
	border-style: solid;
	border-width: 0.5px;
	border-collapse: collapse;
	border-radius: var(--standard-border-radius);
	border-color: var(--light-border-color);
	
	margin-bottom: 2em;
}

#shift-table table
{
	width: 100%;
	border-collapse: collapse;

	table-layout: fixed;
}

#shift-table tr
{
	border-color: var(--light-border-color);
	border-style: solid;
	
	border-top-width: 0.5px;
	border-right-width: 0px;
	border-bottom-width: 0.5px;
	border-left-width: 0px;
	border-radius: var(--standard-border-radius);
	min-height: var(--row-height);
}


#shift-table tr:first-child
{
	border-top-width: 0px;
}

#shift-table tr:last-child
{
	border-bottom-width: 0px;
}

#shift-table tr th
{
	background-color: var(--accent-color);
	color: var(--background-color);
	text-align: left;
	height: var(--row-height);
}

#shift-table tr th, #shift-table tr td.header
{
	position: sticky;
	top: 0;
}

#shift-table td.time-cell
{
	padding: 0;
	position: relative;
	height: 6em;
}

#shift-table div.time-div
{
	position: absolute;
	top: 50%;
	transform: translate( 0, -50% );
	height: 75%;
	background-color: var( --secondary-color-5 );

	border-style: solid;
	border-width: 1px;
	border-radius: var(--standard-border-radius);
	border-color: var( --secondary-color-4 );
}

/*For shift time data*/
#shift-table div.time-div div
{
	width: 100%;
	height: 33%;
	padding-left: 0.5em;
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;

	line-height: 33%;
}

#shift-table div.time-div.selected
{
	background-color: var( --tertiary-color-5 );
	border-color: var( --tertiary-color-3 );
}

#shift-table div.time-div.unselected
{
	background-color: var( --secondary-color-5 );
	border-color: var( --secondary-color-3 );
}

/*td*/
#shift-table tr td
{
	padding-left: var(--cell-padding);
	padding-right: var(--cell-padding);

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	border-style: solid;
	border-width: 1px;
	border-color: var(--light-border-color);
}

#shift-table tr:first-child td
{
	border-top: none;
}

#shift-table tr:last-child td
{
	border-bottom: none;
}

#shift-table td:first-child
{
	border-left: none;
}

#shift-table td:last-child
{
	border-right: none;
}

/*th*/
#shift-table tr th
{
	border-style: solid;
	border-width: 1px;
	border-color: var(--light-border-color);
}

#shift-table tr:first-child th
{
	border-top: none;
}

#shift-table tr:last-child th
{
	border-bottom: none;
}

#shift-table th:first-child
{
	border-left: none;
}

#shift-table th:last-child
{
	border-right: none;
}