body,html { 
margin: 0; 
padding: 0;   
}
 
@font-face {
    font-family: HPSimplified_Rg;
    src: url(../../font/HPSimplified_Rg.ttf);
}  

.formline{ padding:3px; }

label{
	font-size:14px;
	display:block;
	text-align:left;
}
 .tabel_show {
    width: 100%; 
    overflow-x: scroll; 
  }
  @media (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  }
.td_header {
	margin-top: 10px;
	background-color: #0178a3;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	color: #FFF;
	font-size: 14px;
	text-align: center;
	height: 27px;
	
} 
.td_row1 {
	margin-top: 10px;
	background-color: #b9ccdf;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	color: #141111;
	font-size: 12px;
	height: 32px;
	line-height: 20px;
}
.td_row2 {
	margin-top: 10px;
	background-color: #ffffff;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	color: #141111;
	font-size: 12px; 
	height: 32px;
	line-height: 20px;
} 
 

.input-container{ padding:1px; }

#div-regForm,.registered{	
	padding:15px;
	margin:30px auto 40px auto;
	background-color: #61ad26;
	width:900px;
}

.form-title,
.form-sub-title{
	font-size:20px;	
	font-family:HPSimplified_Rg,Tahoma,Verdana,Arial,sans-serif;
	font-size:20px;
	font-weight:bold;
}

.form-sub-title{
	font-weight:normal;
	padding:6px 0 15px 0;
}

.ButtonSubmit{
	
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	background-color: #0178a3;
	color: #FFF; 
	height: 35px;
	width: 250px;
	font-size: 13px;
	letter-spacing: 0.1em;
	outline: 0;
	border:0;
}

 

#loading{
	left:10px;
	position:relative;
	top:3px;
	visibility:hidden;
}

.error{
	text-align:center;
	margin-top:10px;
	visibility:hidden;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 12px;
	margin-bottom: 10px;
	padding-top: 7px;
	padding-right: 3px;
	padding-bottom: 7px;
	padding-left: 3px;
	background-color: #C00;
	color: #FFF;
}

.sukses{
	padding:7px 3px;
	text-align:center;
	margin-top:10px;
	visibility:hidden;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 12px; 
	background-color: #51a62a;
	color: #ffffff;
	margin-bottom: 10px;
}

 
.error2{
	
	padding:7px 3px;
	text-align:center;
	margin-top:10px; 
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif; 
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 12px;  
	margin-bottom: 10px;
	background-color: #C00;
	color: #FFF;
}

.sukses2{
	padding:7px 3px;
	text-align:center;
	margin-top:10px; 
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif; 
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 12px;  
	margin-bottom: 10px;
	background-color: #51a62a;
	color: #ffffff;
}   
 
.error_form2{
	
	padding:7px 3px;
	text-align:center;
	margin-top:10px; 
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif; 
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 12px;  
	margin-bottom: 10px;
	background-color: #C00;
	color: #FFF;
}

.sukses_form2{
	padding:7px 3px;
	text-align:center;
	margin-top:10px; 
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif; 
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 12px;  
	margin-bottom: 10px;
	background-color: #51a62a;
	color: #ffffff;
} 
[id^="indikatorjawaban-"]{ 
	text-align:center;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px; 
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	text-align: center;
	font-size: 12px;
	background-color: #C00;
	color: #FFF;
	height: 15px;
	width: 18px;
	margin-top: 10px;
	text-decoration: none; 
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px; 
} 

[id^="hasil_"]{ 
	text-align:center;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-family: HPSimplified_Rg, Verdana, Helvetica, sans-serif;
	text-align: center;
	font-size: 12px;
	background-color: #ddd;
	color: #FFF;
	height: 29px;
	width: 28px;
	margin-top: 5px;
	margin-right: 5px;
	text-decoration: none;
	border-radius: 20%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px; 
	float:left;
} 
/* ----------------------------------------  radio button anim----------------------------------- */
.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  visibility: hidden;
  position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{     /* DEFAULT <i> STYLE */
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid gray;
  background: orange;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: orange;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: green;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: orange;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  green;
}

/* ----------------------------------------  end radio button anim----------------------------------- */