@charset "utf-8";
/* CSS Document */

/* ------- Tabel Style --------- */
.csstable {
	margin:0px;
	padding:0px;
	width:100%;
}.csstable table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
	margin-bottom:10px;
}
.csstable tr:nth-child(odd){ background-color:#ffffff; }
.csstable tr:nth-child(even){ background-color:#f9f9f9; }
.csstable th{
	padding:5px 5px !important;
	font-size:12px;
	color:#333;
	text-align:left;
}
.csstable td{
	vertical-align:middle;
	border:1px solid #ecebeb;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:3px 5px;
	font-size:13px;
	color:#333;
}
.csstable tr:nth-child(odd):hover{
	background-color:#F0F8FF;	
}
.csstable tr:nth-child(even):hover{
	background-color:#F0F8FF;	
}
.csstable tr:last-child td{
	border-width:0px 1px 1px 0px;
}.csstable tr td:last-child{
	border-width:0px 0px 1px 0px;
}.csstable tr:last-child td:last-child{
	border-width:1px 1px 1px 0px;
}.csstable tr td:first-child{
	border-left-width:1px;
}.csstable tr td:last-child{
	border-right-width:1px;
}
.csstable tr:first-child th{
	background-color:#f9f9f9;
	border:0px solid #ecebeb;
	text-align:left;
	border-width:1px 1px 1px 1px;
	font-size:14px;
	font-weight:600;
	color:#202020;
	border-top:2px solid #AAD5FF;
}

/* ------ Input Style ------- */
input, textarea, select { 
    padding: 3px 9px; 
    border: solid 1px #D8D8D8; 
    outline: 0; 
    /*background: #FFFFFF url('bg_form.png') left top repeat-x;*/ 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #FFFFFF), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px; 
	color:#666;
    } 
   
textarea { 
    width: 400px; 
    max-width: 400px; 
    height: 150px; 
    line-height: 150%; 
    } 
   
input:hover, textarea:hover, 
input:focus, textarea:focus { 
    border-color: #9FCFFF; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 
	
input[type:submit] {
	background:none;	
}

.tabel_form {
	margin:0px;
	padding:0px;
	width:100%;
}.tabel_form table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
	margin-bottom:10px;
}
.tabel_form td{
	vertical-align:middle;
	text-align:left;
	padding:0px 7px 0px 0px;
	color:#333;
}
.tabel_form label{
	margin-top:5px;
	font-weight:400;
}
.tabel_form2 label{
	margin-top:5px;
	font-weight:400;
	margin-left:-13px;
}
.tabel_form input { font-size:13px; }
.tabel_form select { font-size:13px; }


a.tip {
    text-decoration: none;
	color:#069;
}
a.tip:hover {
    cursor: help;
    position: relative;
	color:#039;
	animation-name: example;
    animation-duration: 0.5s;
}
@keyframes example {
    from { opacity: 0.2;}
    to { opacity: 1;}
}
a.tip span {
    display: none
}
a.tip:hover span {
    padding: 5px 5px 5px 5px;
    display: block;
    z-index: 100;
    background:#f0f0f0;
	background-position:right 4px center; !important;
	border:1px solid #999;
	border-radius: 3px;
	-moz-box-shadow: 0px 2px 3px #666;
	-webkit-box-shadow: 0px 2px 3px #666;    
	left: 60px;
    margin: 10px;
    min-width: 133px;
    position: absolute;
    top: 10px;
    text-decoration: none;
	color:#333;
}

.colorJudul {
	background-color:#D3D3D3;
}


.tooltips {
  position: relative;
  display: inline;
}

.tooltips span {
  position: absolute;
  color: #FFFFFF;
  background: #000000;
  padding:5px 10px;
  min-width:130px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s;
}

.tooltips > span img{}

.tooltips[tooltip-position="top"] span{
  margin-left:10px;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.tooltips[tooltip-position="bottom"] span{
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.tooltips[tooltip-position="left"] span{
  margin-top:30px;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.tooltips[tooltip-position="right"] span{
  margin-top:30px;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.tooltips span:after {
  content: '';
  position: absolute;
  width: 0; height: 0;
}

.tooltips[tooltip-position="top"] span:after{
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid black;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tooltips[tooltip-position="bottom"] span:after{
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border-bottom: 8px solid black;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tooltips[tooltip-position="left"] span:after{
  top: 50%;
  left: 100%;
  margin-top: -8px;
  border-left: 8px solid black;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tooltips[tooltip-position="right"] span:after{
  top: 8%;
  right: 100%;
  margin-top: -8px;
  border-right: 8px solid black;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tooltips:hover span {
  visibility: visible;
  opacity: 1;
  z-index: 999;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  filter: alpha(opacity=100);
}

.tooltips[tooltip-position="top"]:hover span{
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
}

.tooltips[tooltip-position="bottom"]:hover span{
  top: 30px;
  left: 50%;
  margin-left: -76px;
}

.tooltips[tooltip-position="left"]:hover span{
  right: 100%;
  top: 50%;
  margin-top: -15px;
  margin-right: 15px;
}

.tooltips[tooltip-position="right"]:hover span{
  left: 100%;
  top: 50%;
  margin-top: -15px;
  margin-left: 15px;
}

.tooltips[tooltip-type="primary"] > span {
  background-color:#2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="top"] > span:after{
  border-top: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="left"] > span:after{
  border-left: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="right"] > span:after{
  border-right: 8px solid #2980b9;
}

.tooltips[tooltip-type="success"] > span {
  background-color:#27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="top"] > span:after{
  border-top: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="left"] > span:after{
  border-left: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="right"] > span:after{
  border-right: 8px solid #27ae60;
}

.tooltips[tooltip-type="warning"] > span {
  background-color:#f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="top"] > span:after{
  border-top: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="left"] > span:after{
  border-left: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="right"] > span:after{
  border-right: 8px solid #f39c12;
}

.tooltips[tooltip-type="danger"] > span {
  background-color:#c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="top"] > span:after{
  border-top: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="left"] > span:after{
  border-left: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="right"] > span:after{
  border-right: 8px solid #c0392b;
}

.tooltips[tooltip-type="default"] > span {
  background-color:#FBFBFB;
  box-shadow:1px 1px 2px #999999; 
}

.tooltips[tooltip-type="danger"][tooltip-position="top"] > span:after{
  border-top: 8px solid #FBFBFB;
}

.tooltips[tooltip-type="default"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #FBFBFB;
}

.tooltips[tooltip-type="default"][tooltip-position="left"] > span:after{
  border-left: 8px solid #FBFBFB;
}

.tooltips[tooltip-type="default"][tooltip-position="right"] > span:after{
  border-right: 8px solid #FBFBFB;
}

.tabel_form input[type="radio"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}

.tabel_form label {
  display: block;
  cursor: pointer;
  line-height: 15px;
  font-size: 1em;
}

.tabel_form input[type="radio"]. {
  display: none;
}

.tabel_form input[type="radio"] + span {
  display: block;
}

/* the basic, unchecked style */
.tabel_form input[type="radio"].A + span:before  {
  content: 'A';
}
.tabel_form input[type="radio"].B + span:before  {
  content: 'B';
}
.tabel_form input[type="radio"].C + span:before  {
  content: 'C';
}
.tabel_form input[type="radio"].D + span:before  {
  content: 'D';
}
.tabel_form input[type="radio"].E + span:before  {
  content: 'E';
}
.tabel_form input[type="radio"] + span:before  {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.25em;
  border-radius: 1em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.1em #666;
  margin-right: 0.75em;
  transition: 0.5s ease all;
  text-align:center;
}

/* the checked style using the :checked pseudo class */
.tabel_form input[type="radio"]:checked + span:before {
  background: #4FA7FF;
  box-shadow: 0 0 0 0.1em #999;
}

/* BTN UJIAN SOAL */
#btn_soal {
	width:17.7%;
	display:block;
	text-align:center;
	padding-top:5px;
	min-height:50px;
	font-size:25px;
	font-weight:bold;
	color:#333;
	border:1px solid #EEEEEE;
	/* Safari 3-4, iOS 1-3.2, Android 1.6- */
	-webkit-border-radius: 3px; 
	/* Firefox 1-3.6 */
	-moz-border-radius: 3px; 
	/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-radius: 3px;
	cursor:pointer;
	float:left;
	margin:0 6px 5px 0;;
}
#btn_soal:hover {
	opacity:0.9;
	border:1px solid #A7A7A7;
}
.badge1 {
   position:relative;
}
.badge1[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-5px;
   right:-5px;
   font-size:.5em;
   background:#FFF;
   color:#333;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   border:1px solid #868686;
}

.ban {
	padding:0px 5px;
	height:15px;
	border:1px solid #868686;
	background-color:#FFF;
	color:#333;
	font-size:12px;
	text-align:center;
	/* Safari 3-4, iOS 1-3.2, Android 1.6- */
	-webkit-border-radius: 15px; 
	/* Firefox 1-3.6 */
	-moz-border-radius: 15px; 
	/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-radius: 15px;
	position:relative !important;
	left:-6px;
	top:-22px;
	z-index:200;
}