html
{
	height:100%;
	padding:0px;
	margin:0px;
}
@font-face {
    font-family: myfirstfont;
    src: url(fonts/Karla-Regular.ttf);
}
body
{
	margin:0px;
	padding:0px;
	font-family:myfirstfont;
	background-color:#ffffff;
	font-size:18px;
	height:100%;
}


ul{
	list-style-type:none;
}
li{
	line-height:40px;
}
h1
{
	color:#808e9b;
	font-family:verdana;
	font-size:20px;
}
h2
{
	color:#808e9b;
	font-size:15px;
	margin:0px;
	padding:0px;
}
h3
{
	font-size: 17px;
	margin:0px;
	padding:0px;
}
hr
{
	border: 1px solid #ECF0F1;
}
input[type=checkbox] {

}
.wrapper
{
	width:100%;
	height:100%;
	margin:0px auto;
	display:grid;
	grid-template-rows:2fr 9fr 1fr;
	grid-template-columns:repeat(6, 1fr);
	grid-gap:5px;
	padding:0px;
}
.item1
{
	
	grid-column:1/-1;
	border-bottom:1px solid #ecf0f1;
	padding:0px;
}
.item2
{
	
	border-right:1px solid #ecf0f1;
}
.itemfull
{
	grid-column:1/-1;
	padding:0px;
	margin:0px;
	border-bottom:1px solid #ecf0f1;
}

.item3
{
	grid-column:2/6;
	padding:0px;
	margin:0px;
}
.item4
{
	padding:0px;
	margin:0px;
}
.item5
{
	border-top:1px solid #ecf0f1;
	grid-column:1/-1;
	padding:0px;
	margin:0px;
}
.logo
{
	width:15%;
	float:left;
	height:100%;
}
.logo img
{
	width:100%;
	height:80px;
	height:auto;
}
.banner
{
	width:70%;
	height:100%;
	text-align:center;
	float:left;
	line-height:auto;
	
}
.clock p
{
	margin-bottom:5px;
}
p{
	margin:0px;
	padding-left:10px;
	padding-right:10px;
	padding-top:0px;
	padding-bottom:0px;
	font-style:bold;
	line-height:20px;
	
}

.clock
{
	width:15%;
	height:100%;
	text-align:center;
	font-size:15px;
	float:left;
	text-align:right;
	font-weight:bold;
	padding-right:0px;
}
.ex-legend
{
	width:95%;
	height:90%;
	border-left: 1px solid #ecf0f1;
	border-bottom: 1px solid #ecf0f1;
}
.qus
{
	margin: 0px;
	height:80%;
	line-height:25px;
	margin:0px;
	padding:5px;
	overflow:auto;
}
.qusn
{
	display:block;
	margin:0px;
	padding-left: 10px;
	width:10px;
	height:30px;
	background-color:#70a1ff;
	line-height:30px;
	color:white;
}
.controls
{
	width:100%;
	position:relative;
	height:15%;
	border-top:1px solid #ecf0f1;
	margin:0px auto;
	height:20%;
}
.inscont
{
	margin:0px auto;
	width:80%;
}
.btnrght:hover
{
	background-color:#0984e3;
	box-shadow: 2px 2px 10px #3c40c6 inset;
}
.btnrght
{
	position:relative;
	width:150px;
	height:40px;
	font-weight:bolder;
	font-size:14px;
	background-color:#487eb0;
	border:0px;
	right:0px;
	float:right;
	margin-top:10px;
	color:white;
	margin-left:10px;
	margin-right:5px;
}
.lghead
{
	width:97%;
	height:20px;
	background-color:#70a1ff;
	padding:5px;
	line-height:20px;
	color:white;
}
.legendno,.try {
  border-radius: 200px;
  width:40px;
  height:40px;
  border:2px solid #bdc3c7;
  font-size:14px;
  background-color:#e74c3c;
  margin:3px 3px auto;
  float:left;
  padding:0px;
  /*box-shadow: 2px 2px 10px #2d3436 inset;*/
  color:white;
  font-weight:bold;
  
}
.legendyes {
  border-radius: 200px;
  width:40px;
  height:40px;
  border:2px solid #bdc3c7;
  font-size:14px;
  background-color:#16a085;
  margin:3px 3px auto;
  float:left;
  padding:0px;
  /*box-shadow: 2px 2px 10px #2d3436 inset;*/
  color:white;
  font-weight:bold;
  
}
.legendre
{
  border-radius: 200px;
  width:40px;
  height:40px;
  border:2px solid #bdc3c7;
  font-size:14px;
  background-color:#f1c40f;
  margin:3px 3px auto;
  float:left;
  padding:0px;
  /*box-shadow: 2px 2px 10px #2d3436 inset;*/
  color:black;
  font-weight:bold;
}	
.legend:hover
{
	background-color:#ffdd59;
	text-shadow: 2px 2px 2px black;
	box-shadow: none;
}
.legd
{
	width:97%;
	padding:5px;
	height:390px;
	overflow:auto;
}
#timer
{
	font-size:18px;
}
#econtent
{
	height:90%;
	overflow:auto;
}
.prog
{
	width:30px;
	float:left;
	margin-right:5px;
	margin:0px auto;
}
.progress
{
	display:block;
	width:80%;
	height:10px;
	border:1px solid #0fbcf9;
	border-radius:5px;
	float:left;
	margin-left:5px;
	margin-top:5px;
}
.bar
{
	width:0%;
	height:100%;
	background-color:#0fbcf9;
	float:left;
}
.prdiv
{
	width:95%;
	height:20px;
	padding-right:0px;
}
.cand
{
	width:100%;
	height:97%;
	padding-top:6%;
}
.canimg
{
	width:100px;
	height:120px;

	border:2px solid white;
	box-shadow: 0px 0px 3px #2d3436;
	padding:0px;
}
.canimg1
{
	width:100px;
	height:120px;
	margin:0px auto;
	padding:0px;
}
.candet
{
	text-align:left;
	margin-top:10px;
	font-size:15px;
}
.lghelp
{
	margin-top:10px;
	border-top:1px solid #ecf0f1;
	
}
.login
{
	width:400px;
	height:200px;
	margin:0px auto;
	border:1px solid #ecf0f1;
	padding:10px;
	margin-top:8%;
}
th
{
	color:white;
	background-color:#487eb0;
}
table{
	border-collapse:collapse;
}
tr{
	border-bottom:1px solid #ecf0f1;
}
.ltext
{
	width:96%;
	height:30px;
	border:1px solid #ecf0f1;
	line-height:30px;
	padding-left:5px;
}
.insturct
{
	width:100%;
	padding:0px;
	margin:0px auto;
	height:100%;
}
#exload
{
	width:80%;
	height:100%;
	line-height:auto;
	padding-top:10px;
	padding-bottom:10px;
	margin:0px auto;
	text-align:center;
	display: flex;
  	align-items: center;
	justify-content: center;
	border-bottom:1px solid #487eb0;
}
.imgload{
	width:100px;
	text-align:center;
}
#exload a
{
	display:block;
	width:150px;
	height:40px;
	line-height:40px;
	font-weight:bolder;
	font-size:14px;
	background-color:#487eb0;
	border:0px;
	right:0px;
	color:white;
	text-decoration:none;
}
#exload a:hover
{
	background-color:#0984e3;
	box-shadow: 2px 2px 10px #3c40c6 inset;
}

.rewbox
{
	width:50%;
	margin:0px auto;
	padding-top:20px;
	
}