@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:1em;
	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:1em;
	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:1em;
	font-weight:600;
	color:#202020;
	border-top:2px solid #AAD5FF;
}

.csstable2 {
	margin:0px;
	padding:0px;
	width:100%;
}.csstable2 table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
	margin-bottom:5px;
}
.csstable2 td{
	vertical-align:middle;
	border-bottom:1px solid #DDEEFF;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:3px 5px;
	font-size:1em;
	color:#333;
	background-color:#BDF;
}


.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:1em; }
.tabel_form select { font-size:1em; }


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 5px;
  min-width:100px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s;
  box-shadow:1px 1px 1px #999999;
}

.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="default"][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;
}