@font-face {
	font-family: 'Play';
	src: url('vendor/Play-Regular.ttf');
}

:root {
	--bodyBackgroundColor: #566D7E;
	--colorRed: #cd6155;
	--colorGreen: #27ae60;
	--colorLightGreen: #93d6af;
	--colorAggregate: #dcbb86;
	--colorAdmixture:#c3a6cf;
	--colorCement: #bfc5c6;
	--colorWater: #a9cce3;
	--colorDisplay: #ffff00;
	--colorNumber: #00ff00;
	--colorMoisture: #00EFFF;
	--contentBackgroundColor: #b7c1c8;
	--colorBorder: #566D7E;
}

BODY {
	margin: 0px;
	opacity:1;
	font-family:Play;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	user-select: none;
	background-color: var(--contentBackgroundColor);
	color: #191919;
	font-size: 1.2em;
}

/* https://www.w3schools.com/howto/howto_css_sticky_element.asp */
.sticky {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
}

.searchLine {
	display: flex;
	justify-content: flex-end;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	padding-top: 0.5vh;
	padding-bottom: 0.5vh;
	font-size: 1.2em;
	background-color: var(--contentBackgroundColor);
	border-bottom:1px solid #566D7E;
}

.head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-size: 1.2em;
}

.bTable {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	border-bottom:1px solid var(--colorBorder);
}

.title {
	padding-left: 0.5vw;
}

.chevron {
	padding-right: 0.5vw;
}

.Aggregate {
	background-color: var(--colorAggregate);
}

td.Aggregate {
	background-color: var(--colorAggregate);
	border-top:1px solid var(--colorBorder);
	border-bottom:1px solid var(--colorBorder);
}

.Admixture {
	background-color: var(--colorAdmixture);
}

.Cement {
	background-color: var(--colorCement);
}

.Water {
	background-color: var(--colorWater);
}

TABLE {
	width: 100%;
}

select {
	font-size: 0.9em;
}

td.Water {
	background-color: var(--colorWater);
	border-top:1px solid var(--colorBorder);
	border-bottom:1px solid var(--colorBorder);
}

th {
	text-align: center;
}

td {
	text-align: center;
	white-space: nowrap;
}

.scroller {
  overflow-y: scroll;
  scrollbar-color: var(--colorElementBodies) #e3e1e1;
  scrollbar-width: thin;
}

.scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroller::-webkit-scrollbar-track-piece  {
	background-color: #e3e1e1;
}

.scroller::-webkit-scrollbar-thumb:vertical {
	height: 30px;
	background-color: var(--colorElementBodies);
}

#content {
	margin-left:auto;
	margin-right:auto;
}

.rightTD {
	text-align: right;
}

.hintTD {
	white-space: nowrap;
	min-width: 4em;
}

.tdName {
	text-align: right;
	width: 100%;
}

input {
	text-align: right;
	color: black;
	padding-right: 0.5vw;
	border:1px solid var(--colorBorder);
}
