* {
	max-width: 100%;
}
html, body {
	margin: 0;
	padding: 0;
	width: 100vw;
	min-height: 100vh;
	background-image: linear-gradient(180deg, #eeffee, #aaffaa);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6vw;
}

.BOX_Pad {
	padding: 1rem;
}

.ROW_New {
	clear: both;
}
.PAGE_New {
	clear: both;
}


#BOX_Grid {
	position: relative;
	width: 100vw;
	height: 90vh;
}

.BOX_Square {
	position: absolute;
	width: calc(2vw - 2px);
	height: calc(3vh - 2px);
	border: 1px solid #66cc66;
	background-color: #aaffaa;
	color: #ffffff;
	text-align: center;
	font-size: 2.5vh;
	font-weight: bold;
	text-decoration: none;
}
	.BOX_Square.Ball {
		width: calc(2vw - 4px);
		height: calc(3vh - 4px);		
		border: 2px solid #000000;
		border-radius: 1vw;
		background-color: #ffffff !important;
		color: #000000;
	}
	.BOX_Square.Hole {
		width: calc(2vw - 4px);
		height: calc(3vh - 4px);		
		border: 2px solid #ffffff;
		border-radius: 1vw;
		background-color: #000000;
	}
	.BOX_Square.Green {
		background-color: #66aa66;
		border: 1px dashed #337733;
	}
	.BOX_Square.Hazard {
		background-color: #aaaa66;
		border: 1px dashed #777700;
	}
	.BOX_Square.PathOption {
		background-color: #ff6666;
		border: 1px dashed #cc3333;
	}



#BOX_Controls {
	position: relative;
	width: calc(100vw - 4px);
	height: calc(10vh - 4px);
	background-color: #eeeeee;
	border: 2px solid #999999;
	border-top-left-radius: 2vw;
	border-top-right-radius: 2vw;
	z-index: 1000;
}
	#BTN_Restart {
		position: absolute;
		margin: 2vh 2vh;
		padding: 2px 1vw;
		right: 0;
		bottom: 0;
		border: 2px solid #666666;
		border-radius: 1vh;
		background-color: #cccccc;
		color: #333333;
		font-weight: bold;
		font-size: 3vh;
		text-decoration: none;
	}
		#BTN_Restart:hover {
			background-color: #333333;
			color: #cccccc;
		}
	#LAB_Strokes {
		position: absolute;
		margin: 0 1vw;
		padding: 0;
		right: 15vw;
		bottom: 0;
		border: 2px solid #333333;
		border-top-left-radius: 1vh;
		border-top-right-radius: 1vh;
		color: #333333;
		font-weight: bold;
		font-size: 4vh;
		text-align: center;
	}
		#LAB_Strokes div {
			padding: 4px 1px 1px 1px;
			background-color: #333333;
			color: #cccccc;
			font-size: 1.25vh;
		}

		
	.BTN_Die {
		position: absolute;
		margin: 2px;
		padding: 1vh 1vw;
		border: 2px solid #333333;
		border-radius: 1vh;
		color: #333333;
		font-weight: bold;
		font-size: 4vh;
		text-align: center;
		text-decoration: none;
	}
		#BTN_Die_1 {
			right: 85vw;
			bottom: 1vh;
		}
		#BTN_Die_2 {
			left: 15vw;
			bottom: 1vh;
		}

	#BTN_Roll_1, #BTN_Hold_1, #BTN_Roll_2, #BTN_Hold_2 {
		position: absolute;
		margin: 1vh 1vh;
		padding: 2px 1vw;
		border: 2px solid #ff0000;
		border-radius: 1vh;
		background-color: #cccccc;
		color: #333333;
		font-weight: bold;
		font-size: 2vh;
		text-decoration: none;
	}
		#BTN_Roll_1:hover, #BTN_Hold_1:hover, #BTN_Roll_2:hover, #BTN_Hold_2:hover {
			background-color: #333333;
			color: #cccccc;
		}
		#BTN_Roll_1 {
			right: calc(85vw + 5vw);
			bottom: 4vh;
		}
		#BTN_Hold_1 {
			right: calc(85vw + 5vw);
			bottom: .5vh;
		}
		#BTN_Roll_2 {
			left: calc(15vw + 5vw);
			bottom: 4vh;
		}
		#BTN_Hold_2 {
			left: calc(15vw + 5vw);
			bottom: .5vh;
		}
		
	#LAB_Feedback {
		position: absolute;
		left: 25vw;
		top: 1vh;
		width: 50vw;
		text-align: center;
		color: #ff0000;
		font-size: 3vh;
		font-weight: bold;
	}