* {
	max-width: 100%;
}
html, body {

	margin: 0;
	padding: 0;
	width: 100vw;
	min-height: 100%;
	background-image: linear-gradient(180deg, #ffffff, #aaaaaa);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2vmin;
}

.BOX_Pad, #BOX_Header {
	padding: 1rem;
}

.COL_33 {
	float: left;
	width: 33.3333%;
}
.COL_50 {
	float: left;
	width: 50%;
}

.ROW_New {
	clear: both;
}

.LAB_Head {
	margin: .5rem;
	padding: .5rem;
	background-color: #666666;
	color: #ffffff;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}

.BOX_Pass {
	text-align: center;
}	
.BOX_PassPoint {
	display: inline-block;
	width: 5vmin;
	height: 5vmin;
	border: 1px solid #000000;
}
.BOX_PassBlank {
	display: inline-block;
	width: 5vmin;
	height: 5vmin;
	border: 1px dashed rgba(0, 0, 0, 0);
}
.BOX_PassScore {
	display: inline-block;
	width: 5vmin;
	height: 5vmin;
	border: 1px dashed #000000;
}


.BTN_Point {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #000000;
	font-size: 4vmin;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}
	.BTN_Point:hover, .BTN_Point.Active {
		background-color: #aaaaaa;
	}


#BOX_ChoosePoint {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	z-index: 100;
}
.BTN_ChoosePoint {
	float: left;
	margin: 5%;
	width: 23.333%;
	height: 80%;
	background-color: rgba(0, 0, 0, .5);
	font-weight: bold;
	font-size: 50vh;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
}
	.BTN_ChoosePoint:hover {
		background-color: #000000;
	}