/* CSS Document */
*{
	box-sizing:border-box;
	padding:0;
	margin:0;
}
body{
	overflow-x:hidden;
	scrollbar-width: thin;
}

.currentLink{
	background-color:#000 !important;
	color:#fff !important;
}
#olineCenterMain{
	display:grid;
	grid-template:auto/auto;
	grid-row-gap:0vh;
}
	#oTopTitle{
		display:grid;
		grid-column:1;
		grid-row:1;
		grid-template:10vh/1vw 1vw 15vw 30vw 8vw 10vw 21.5vw;
		grid-auto-flow:column;
		grid-column-gap:2vw;
		border-bottom:#003E6B thin solid;
	}
		#oTopTitle>h1{
			display:grid;
			grid-column:4;
			grid-row:1;
			width:35vw;
			line-height:2;
		}
		#oTopTitle h3{
			display:grid;
			grid-column:6;
			grid-row:1
		}
		#oTopTitle a{
			dispaly:none;
			grid-column:7;
			grid-row:1;
			font-size:1.5em;
		}
		
	#onameDisplay{
		display:grid;
		grid-column:1;
		grid-row:2;
		grid-template:1fr/1vw 1vw 30vw 40vw 10vw 20vw;
		grid-auto-flow:column;
		border-bottom:#D33033 thin solid;
		height:7vh;
		line-height:2;
	}
		#onameDisplay>h3{
			display:grid;
			grid-column:4;
			grid-row:1;
			font-size:20px;
		}
		#onameDisplay>h4{
			display:auto;
			grid-column:6;
			grid-row:1;
		}
		
	#oMainContent{
		display:grid;
		grid-column:1;
		grid-row:3;
		grid-template:1fr/7vw 20vw 72vw;
		grid-column-gap:0.2vw;
	}
		#oMainContent #osideMenuOne, #oMainContent #osideMenuTwo, #oMainContent #oshowArea{
			display:grid;
			grid-row:1;
		}
		#oMainContent #osideMenuOne{
			grid-column:1;
			height:82vh;
			align-content:flex-start;
			grid-auto-rows:21vh;
			grid-auto-columns:7vw;
		}
			#oMainContent #osideMenuOne>a{
				color:#707070;
				background-color:#DBDFFF;
				border-bottom:#000 thin solid;
				line-height:1;
				text-decoration:none;
				padding-top:7vh;
				text-align:center;
			}
				#oMainContent #osideMenuOne>a:hover{
					background-color:#003E6B;
					color:#fff;
				}
		#oMainContent #osideMenuTwo{
			grid-column:2;
			height:82vh;
			background-color:#E1E1E1;
			overflow-y:auto;
			overflow-x:hidden;
		}
		#oMainContent #oshowArea{
			grid-column:3;
			height:auto;
			width:72vw;
			background-color:#FBFBFB;
			grid-template:auto/20vw 20vw 20vw;
			grid-column-gap:4vw;
			grid-row-gap:2vh;
			margin-left:2vw;
			margin-top:2vh;
		}
			#oshowArea div{
				display:grid;
				grid-column:auto;
				grid-row:auto;
				width:20vw;
				height:55vh;
				background-color:#06D2D5;
				overflow-y:auto;
			}
			.resultsBtn{
				display:grid;
				background-color:#000;
				color:#fff;
				text-align:center;
				width:20vw;
				height:5vh;
				text-transform:uppercase;
				line-height:1.9;
				text-decoration:none;
			}
			
			#osideMenuTwo{
				display:grid;
				grid-template:auto/5vw 20vw;
				grid-auto-flow:column;
				grid-auto-flow:row;
				grid-auto-rows:7vh;
				grid-template-rows:3vh;
				grid-row-gap:3vh;
				align-items:start;
			}
			#osideMenuTwo h4{
				grid-column:1/span 2;
				align-self:start;
				height:auto;
				text-align:center;
			}
			#osideMenuTwo a{
				align-self:flex-start;
				max-width:14.5vw;
				height:7vh;
				word-break:break-all;
				overflow:hidden;	
			}
			
			#osideMenuTwoStudentResult{
				display:grid;
				grid-column:2;
				height:82vh;
				background-color:#E1E1E1;
				grid-template:auto/20vw;
				overflow-y:auto;
				overflow-x:hidden;
			}
			#osideMenuTwoStudentResult h4{
				grid-column:1;
				align-self:start;
				justify-self:start;
				justify-content:flex-start;
				height:auto;
			}
			#osideMenuTwoStudentResult a{
				align-self:flex-start;
				min-width:9.5em !important;
				height:auto;
				word-break:break-all;
				overflow:hidden;
				font-size:0.7em;
			}
			#osideMenuTwoStudentResult input[type="button"]{
				height:5vh;
				font-size:20px;
				background-color:#0005F9;
				color:#fff;
			}
		#btnReceiptNum, #paymentApproveBtn{
			height:5vh;
			font-size:20px;
			background-color:#0005F9;
			color:#fff;
		}
		.choiceBtn{
			display:grid;
			grid-column:1/span 2;
			width:20vw;
			grid-template:1/7vh 7vh;
			grid-auto-flow:column;
		}
		.btnStuRequest{
			height:5vh;
			font-size:15px;
			background-color:#0005F9;
			color:#fff;
		}
		
		#infoMobileNum{
			height:5vh;
			width:18vw;
			font-size:17px;
		}
	
	#oMainContent #oCreateCourse{
		display:grid;
		grid-column:2/span 3;
		grid-row:1;
		margin-left:5vw;
	}
	
	#oMainContent #editoCreateCourse{
		display:grid;
		grid-column:3;
		grid-row:1;
	}

#markDisplayBox{
	position:absolute;
	display:none;
	top:16vh;
	left:25vw;
	width:52vw;
	height:35vw;
	overflow-y:auto;
	overflow-x:hidden;
	background-color:#F9F9F9;
	overflow-y:auto;
}
#closeBox{
	position:absolute;
	display:none;
	top:16vh;
	left:77vw;
	border-radius:10vw;
	padding-left:1.3vw;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding-top:1.4vh;
	width:5vw;
	height:5vw;
	font-size:3em;
	overflow-y:auto;
	overflow-x:hidden;
	background-color:#5053FF;
	color:#FFF;
}

.courseOrder{
	cursor:pointer;
}