:root {
	--foreground-color: #000000;
	--background-color: #FFFFFF;
	--button-foreground-color: #000000;
	--button-background-color: #FFFFFF;
	--button-clicked-color: #ffd700;
}

html,body {
	font: 12px sans-serif;
	font-family: sans-serif;
	padding:0;
	margin:0;
	background-color : var(--background-color);
	overflow: auto;
	color: var(--foreground-color);
	height:100%;
}

.title{
	font-size:36px;
	padding:2px;
}
.subTitle{
	font-size:24px;
	padding:2px;
	padding-left:8px;
	padding-top:12px;
}
.para{
	font-size:20px;
	padding:2px;
	padding-left:60px;
}
.bordered{
	border: 1px solid black;
}
.scrollable{
	overflow:auto;
}
.notScrollable{
	overflow:hidden;
}
.hidden{
	display:none;
}
.buttonDiv{
	padding: 0px;
	margin: 0px;
	text-align: center;
	border: 2px solid var(--button-foreground-color);
	/*border-radius: 5px;*/
	opacity: 1.0;
	display:block;
	font-size:20px;
	color: var(--button-foreground-color);
	background-color:var(--button-background-color);
	cursor: pointer;
}
.buttonHover:hover {
	background-color: var(--button-foreground-color);
	color: var(--button-background-color);
}
.buttonClicked {
	background-color: var(--button-clicked-color);
	/*color: var(--button-background-color);*/
}
.buttonCentered {
	font-size:3vw; 
	line-height:4.5vw; 
	height:4.5vw; 
	width:12vw; 
	padding:0px; 
	margin:auto; 
	margin-top:10px;
	margin-bottom: 10px;
}
#selectModel a:link, #selectModel a:visited {
	width:100px; 
	text-decoration: none;
}


/*these are the same as above, but allowing me to exclude these from selections*/
.buttonDivControls{
	padding: 0px;
	margin: 0px;
	text-align: center;
	border: 2px solid var(--button-foreground-color);
	/*border-radius: 5px;*/
	opacity: 1.0;
	display:block;
	font-size:20px;
	color: var(--button-foreground-color);
	background-color:var(--button-background-color);
	cursor: pointer;
}
.buttonHoverControls:hover {
	background-color: var(--button-foreground-color);
	color: var(--button-background-color);
}
.buttonClickedControls {
	background-color: var(--button-clicked-color);
	/*color: var(--button-background-color);*/
}

.tooltip{
	position:absolute;
	height:auto;
	width: auto;
	padding: 8px;
	margin: 0px;
	z-index: 4;
	background-color: lightgray;
	text-align: center;
	border: 2px solid var(--button-clicked-color);
	font-size:16px;
	line-height:16px;
	height:16px;
	opacity:1;
	/*display:block;*/
	/*opacity: 0.0;
	display: none;*/
}
.close{
	position:absolute;
	top:2px;
	left:2px;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid;
	text-align: center;
	font: 36px Arial, sans-serif;
	line-height:25px;
	color: var(--button-foreground-color);
	background-color:var(--button-background-color);
	cursor:pointer;
}

.tooltipContent{
	margin-left: 30px;
	color:black;
}

.noTouch{
	touch-action:none;
}
.touch{
	touch-action:manipulation;
}
#helpContainer{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10;
	cursor:pointer;
}