#bungkusgen { width:960px;   float:left; background-color:#FFF; margin:35px 0px; }
#bungkusgen2 { width:960px;  float:left; background-color:#FFF; margin:0px 0px 0px 14px; }
#clear		{ clear:both;}
.batas {clear:both;}

.alignleft { text-align: left;  }
.aligncenter { text-align: center;  }
.alignright{ text-align: right;  }
.valigntop { text-align: top;  }
.valignmiddle { text-align: middle;  }
.valignbottom{ text-align: bottom;  }
.bergaris { border:1px outset #CCC;}
.bgabu { background-color:#D7D7D7;  }
.bgbeige { background-color: beige;  }
.bghijau { background-color:#BEFFBD;  }
.bgmaintenance { background:url(../images/maintenance2.jpg) no-repeat; background-size:100%; background-color:#000; }
.bgpink { background-color:#FBB2E9;  }
.border0 { border: 0;}
.border1 { border: 1px solid black;}
.border1kanan { border-right:1px #000000; }
.border1kiri { border-left:1px #000000; }
.border2 { border: 2px solid black;}
.border2 { border: 3px solid black;}
.borderdot1 { border:1px dotted #969696; }
.boxronda { border: 1px solid #000000; float: left; width: 100%; margin-bottom: 10px;  }
.fieldproduk { height:180px;}
.fieldset0 { border: 0;  }
.fieldset2 { border: 1px solid #53ED86;  }
.fieldset3 { border: 1px solid #555555;  }
.fieldsetrt { border: 1px solid #DDDDDD; margin-left: 4px 10px;  }
.floatleft { float:left;}
.floatnone { float:none; }
.fluidfont10 {font-size: 1vw;}
.fluidfont15 {font-size: 1.5vw;}
.fluidfont20 {font-size: 2vw;}
.fluidfont25 {font-size: 2.5vw;}
.fotoberita { float:left; margin-right:10px;}
.fotoblog { float:left; width:30%; margin:10px;}
.fotobukti { border:1px solid #C00;}
.fotoindex { float:left; margin-right:10px; height:100px;}
.fotorounded {  -webkit-border-radius:8px;  -moz-border-radius:8px;  -khtml-border-radius:8px; border-radius:8px; margin:10px;}
.fotostruktur { width:80%; margin:5px 0px; }
.fototesti { width:100%; height:160px; overflow:hidden;}
.font10 { font-size: 10px; }
.font12 { font-size: 12px; }
.font13 { font-size: 13px; }
.font14 { font-size: 14px; }
.font15 { font-size: 15px; }
.font16 { font-size: 16px; }
.font18 { font-size: 18px; }
.font20 { font-size: 20px; }
.font22 { font-size: 22px; }
.font24 { font-size: 24px; }
.font26 { font-size: 26px; }
.font28 { font-size: 28px; }
.font30 { font-size: 20px; }

.gallery { border:0px; padding:3px; width:150px; overflow:hidden; text-align:center; float:left; margin:3px;}
.gallery2 { border:0px; padding:2px; width:120px; height:100px; float:left; margin:2px; overflow: hidden; }
.gallery3 { border:0px; padding:2px; width:80px; height:120px; float:left; margin:2px; overflow: hidden; }
.galleryfoto { border:1px dotted #666; height:65px; margin:5px; overflow:hidden; float:left; -webkit-border-radius:5px;  -moz-border-radius:5px;  -khtml-border-radius:5px; border-radius:5px; vertical-align: bottom;}
.hidden { width:0px; height:0px; overflow:hidden; }
.icon-balita { background: url("../in/icon/icon_balita.png") right no-repeat; background-size:100px;  }
.icon-batita { background: url("../in/icon/icon_batita.png") right no-repeat; background-size:100px;  }
.icon-kk { background: url("../in/icon/icon_kk.png") right no-repeat; background-size:100px;  }
.icon-kost { background: url("../in/icon/icon_kost.png") right no-repeat; background-size:100px;  }
.icon-kuliah { background: url("../in/icon/icon_kuliah.png") right no-repeat; background-size:100px;  }
.icon-laki { background: url("../in/icon/icon_laki.png") right no-repeat; background-size:100px;  }
.icon-lansia { background: url("../in/icon/icon_lansia.png") right no-repeat; background-size:100px;  }
.icon-lansia-female { background: url("../in/icon/icon_lansia_female.png") right no-repeat; background-size:100px;  }
.icon-lansia-male { background: url("../in/icon/icon_lansia_male.png") right no-repeat; background-size:100px;  }
.icon-linmas { background: url("../in/icon/icon_linmas.png") right no-repeat; background-size:100px;  }
.icon-pasangan { background: url("../in/icon/icon_pasangan.png") right no-repeat; background-size:100px;  }
.icon-perempuan { background: url("../in/icon/icon_perempuan.png") right no-repeat; background-size:100px;  }
.icon-produktif { background: url("../in/icon/icon_produktif.png") right no-repeat; background-size:100px;  }
.icon-rumah { background: url("../in/icon/icon_rumah.png") right no-repeat; background-size:100px;  }
.icon-sd { background: url("../in/icon/icon_sd.png") right no-repeat; background-size:100px;  }
.icon-sma { background: url("../in/icon/icon_sma.png") right no-repeat; background-size:100px;  }
.icon-smp { background: url("../in/icon/icon_smp.png") right no-repeat; background-size:100px;  }
.icon-tk { background: url("../in/icon/icon_tk.png") right no-repeat; background-size:100px;  }
.icon-warga { background: url("../in/icon/icon_warga.png") right no-repeat; background-size:100px;  }
.icon-shield-heart { image-source: url("../in/icon/shield-heart-solid-full.svg") right no-repeat; background-size:100px;  }


.img1002{width:100%;margin-bottom:2px;}
.img100{width:100%;margin-bottom:5px;}
.img30 {width:30%;margin-bottom:5px;}
.img40 {width:40%;margin-bottom:5px;}
.img50 {width:50%;margin-bottom:5px;}
.img60 {width:60%;margin-bottom:5px;}
.img70 {width:70%;margin-bottom:5px;}
.img80 {width:80%;margin-bottom:5px;}
.img90 {width:90%;margin-bottom:5px;}
.imgh50 {height:50px;margin-bottom:2px;}
.imgh60 {height:60px;margin-bottom:2px;}
.imgh70 {height:70px;margin-bottom:2px;}
.imgh80 {height:80px;margin-bottom:2px;}
.imgh90 {height:90px;margin-bottom:2px;}
.imgh100 {height:100px;margin-bottom:2px;}
.imgh110 {height:110px;margin-bottom:2px;}
.imgh120 {height:120px;margin-bottom:2px;}
.imgh130 {height:130px;margin-bottom:2px;}
.imgh140 {height:140px;margin-bottom:2px;}
.imgh150 {height:150px;margin-bottom:2px;}
.kotakalamat {width:100%; border:1px solid #D0D0D0; padding:20px; -webkit-border-radius:10px;  -moz-border-radius:10px;  -khtml-border-radius:10px; border-radius:10px;}
.kotakberkas { width:100px; overflow:hidden; margin: 3px; float:left;  -webkit-border-radius:5px;  -moz-border-radius:5px;  -khtml-border-radius:5px; border-radius:5px;}
.kotakblogkecil { height:50px; margin:5px; text-align:left; overflow:hidden;}
.kotakfotobesar { width:80px; height:130px; padding:5px; margin:5px; float:left; border:1px dotted #999; overflow:hidden;  -webkit-border-radius:5px;  -moz-border-radius:5px;  -khtml-border-radius:5px; border-radius:5px;}
.kotakfotoblogkecil { width:80px; margin:5px; float:left;}
.kotakfotokecil { height:70px; overflow:hidden;  -webkit-border-radius:5px;  -moz-border-radius:5px;  -khtml-border-radius:5px; border-radius:5px;}
.kotakjudulblog { float:left;}

/* Kotak Laporan Keren */
.kotakutama { height:80px; width:100%; border-bottom:1px solid white; color:white; margin-bottom: 10px; }
.kotakkiri { heigth:50px; width:60px; text-align: right; float: left; padding: 5px;  }
.kotakkanan { height:30px; padding-left: 10px;  }

.kotakmember { width:210px; height:100px; padding:5px; margin:5px; float:left; border:1px dotted #999; overflow:hidden;  -webkit-border-radius:5px;  -moz-border-radius:5px;  -khtml-border-radius:5px; border-radius:5px;}
.kotakmemberfoto { width:50px; height:50px; margin:5px; float:left; border:1px; overflow:hidden; }
.kotakmemberfoto1 { width:40px; height:50px; margin:5px; float:left; border:1px; overflow:hidden; }
.kotakmemberfoto2 { width:50px; height:70px; margin:5px; float:left; border:1px; overflow:hidden; }
.kotakwarga { width:96%; padding:2%; background:url("../images/bg01.jpg") 100% top no-repeat;  border:1px dotted #666; }
.kotakmenu { width:90px; height: 120px; margin:2px; border:0px; float:left; }
.kotakinfo { width:120px; height: 90px; margin:2px; border:2px dotted #555555; float:left; }
.kotakwargakanan { width:60%; float:left; padding:30px; border:0px; word-wrap: break-word;  }
.kotakwargakiri { width:40%; float:left; padding:20px; border:2px solid #08B50B; word-wrap: break-word; -webkit-border-radius:8px;  -moz-border-radius:8px;  -khtml-border-radius:8px; border-radius:8px;  }
.ktp { width:430px; height: 270px; float:left; padding: 10px; background: url("../images/bgktp.png") top no-repeat; background-size:430px;  -moz-border-radius:10px;  -khtml-border-radius:10px; border-radius:10px; }
.ktp2 { width:430px; height: 270px; float:left; -moz-border-radius:10px;  -khtml-border-radius:10px; border-radius:10px; }
.ktpatas { width: 100%; text-align: center; }
.ktpkanan { width:25% ; float:left; text-align: center; }
.ktpkanantext { width:65%; float:left; line-height:50% ;  }
.ktpkiri { width:70%; float:left;   }
.ktpkiritext { width:35%; float:left; overflow:hidden; line-height:50% ; }
.lebar10 { width:10%;}
.lebar100 { width:100%;}
.lebar20 { width:20%;}
.lebar25 { width:25%;}
.lebar30 { width:30%;}
.lebar40 { width:40%;}
.lebar45 { width:45%;}
.lebar50 { width:50%;}
.legend0 { width:80%; margin:5px 10px; padding:5px 10px; background-color: white; border:0; }
.legend2 { width:80%; margin:5px 10px; padding:5px 10px; background-color: white; border:1px solid #53ED86; }
.legend3 { width:80%; margin:5px 10px; padding:0px 5px; background-color: white; border:1px solid #555555; }
.legendrt { width:30%; margin:5px 10px; padding:0px 5px; background-color: white; border:1px solid #DDDDDD; }
.linkhitam,a:link,a:active,a:hover,a:visited { color:black; text-decoration: none; }
.LN00 { line-height:1% ;}
.LN10 { line-height:10% ;}
.LN100 { line-height:100%;}
.LN110 { line-height:110%;}
.LN120 { line-height:120%;}
.LN130 { line-height:130%;}
.LN140 { line-height:140%;}
.LN150 { line-height:150%;}
.LN160 { line-height:160%;}
.LN170 { line-height:170%;}
.LN180 { line-height:180%;}
.LN190 { line-height:190%;}
.LN200 { line-height:200%;}
.LN20 { line-height:20% ;}
.LN30 { line-height:30% ;}
.LN40 { line-height:40% ;}
.LN50 { line-height:50% ;}
.LN60 { line-height:60% ;}
.LN70 { line-height:70% ;}
.LN80 { line-height:80%;}
.LN90 { line-height:90%;}
.LN95 { line-height:95%;}
.margin10 { margin:10px;}
.margin10atas { margin-top:10px;}
.margin10bawah { margin-bottom:10px;}
.margin10kanan { margin-right:10px;}
.margin10kiri { margin-left:10px;}
.margin15 { margin:15px;}
.margin15atas { margin-top:15px;}
.margin15bawah { margin-bottom:15px;}
.margin15kanan { margin-right:15px;}
.margin15kiri { margin-left:15px;}
.margin20 { margin:20px;}
.margin20atas { margin-top:20px;}
.margin20bawah { margin-bottom:20px;}
.margin20kanan { margin-right:20px;}
.margin20kiri { margin-left:20px;}
.margin25 { margin:25px;}
.margin25atas { margin-top:25px;}
.margin25bawah { margin-bottom:25px;}
.margin25kanan { margin-right:25px;}
.margin25kiri { margin-left:25px;}
.margin30 { margin:30px;}
.margin30atas { margin-top:30px;}
.margin30bawah { margin-bottom:30px;}
.margin30kanan { margin-right:30px;}
.margin30kiri { margin-left:30px;}
.margin5 { margin:5px;}
.margin5atas { margin-top:5px;}
.margin5bawah { margin-bottom:5px;}
.margin5kanan { margin-right:5px;}
.margin5kiri { margin-left:5px;}
.padding10 { padding:10px;}
.padding10atas { padding-top:10px;}
.padding10bawah { padding-bottom:10px;}
.padding10kanan { padding-right:10px;}
.padding10kiri { padding-left:10px;}
.padding15 { padding:15px;}
.padding15atas { padding-top:15px;}
.padding15bawah { padding-bottom:15px;}
.padding15kanan { padding-right:15px;}
.padding15kiri { padding-left:15px;}
.padding20 { padding:20px;}
.padding20atas { padding-top:20px;}
.padding20bawah { padding-bottom:20px;}
.padding20kanan { padding-right:20px;}
.padding20kiri { padding-left:20px;}
.padding5 { padding:5px;}
.padding5atas { padding-top:5px;}
.padding5bawah { padding-bottom:5px;}
.padding5kanan { padding-right:5px;}
.padding5kiri { padding-left:5px;}
.radius3 { -webkit-border-radius:3px;  -moz-border-radius:3px;  -khtml-border-radius:3px; border-radius:3px; }
.radius5 { -webkit-border-radius:5px;  -moz-border-radius:5px;  -khtml-border-radius:5px; border-radius:5px; }
.radius10 { -webkit-border-radius:10px;  -moz-border-radius:10px;  -khtml-border-radius:10px; border-radius:10px; }
.radius15 { -webkit-border-radius:15px;  -moz-border-radius:15px;  -khtml-border-radius:15px; border-radius:15px; }
.radius20 { -webkit-border-radius:20px;  -moz-border-radius:20px;  -khtml-border-radius:20px; border-radius:20px; }
.radius25 { -webkit-border-radius:25px;  -moz-border-radius:25px;  -khtml-border-radius:25px; border-radius:25px; }
.tabel0 table { border:0px; border-collapse:collapse;}
.tabel0 td { border:0px; border-collapse:collapse;  padding:2px 5px; vertical-align: top; }
.tabel1 table { border:1px solid #CCC; border-collapse:collapse;}
.tabel1 th { border:1px solid #CCC; border-collapse:collapse;  padding:2px 5px; font-weight: bold; font-size: 13px; line-height:80%; text-align: center; }
.tabel1 td { border:1px solid #CCC; border-collapse:collapse;  padding:2px 5px; }
.tabel11 table { border:1px solid #CCC; border-collapse:collapse;}
.tabel11 td { border:1px solid #CCC; border-collapse:collapse;  padding:2px 5px; font-size:16px; }
.tabel12 table { border-collapse:collapse;}
.tabel12 td { border-collapse:collapse; padding:2px 5px; font-size:16px;}
.tabel16 table { border-collapse:collapse;}
.tabel16 td { border-collapse:collapse; padding:2px 5px; font-size:16px; vertical-align:top;}
.tabel2 table { border-collapse:collapse;}
.tabel2 td { border-collapse:collapse; padding:2px 5px; font-size:12px;}
.tabeldash table { border-collapse:collapse; border:1px dashed #DDD; width:100%;}
.tabeldash td { border-collapse:collapse; border:1px dashed #DDD; padding:2px 5px; font-size:16px; vertical-align:top;}
.tabeldb { width:120px; height:100px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; font-size:20px; overflow:hidden;}
.tabeldb100 { width:100px; height:80px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; overflow:hidden;}
.tabeldb110 { width:110px; height:90px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; overflow:hidden;}
.tabeldb120 { width:120px; height:100px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; overflow:hidden;}
.tabeldb2 { width:120px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; font-size:20px; overflow:hidden;}
.tabeldb2 { width:120px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; font-size:20px; overflow:hidden;}
.tabeldb80 { width:80px; height:80px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; overflow:hidden;}
.tabeldb90 { width:90px; height:80px; padding:5px; margin:5px; border:1px dotted #999; float:left; text-align:center; overflow:hidden;}
.tabeldbpolos { width:120px; height:100px; padding:5px; margin:5px; float:left; text-align:center; vertical-align:middle; color:#666; font-size:20px; overflow:hidden;}
.tabeldbpolos2 { width:40px; height:100px; padding:5px; margin:5px; float:left; text-align:center; vertical-align:middle; color:#666; font-size:20px; overflow:hidden;}
.textatas { vertical-align: top;}
.textbawah { vertical-align: bottom;}
.textkanan { text-align:right;}
.textkiri { text-align:left;}
.texttengah { text-align:center;}
abu { color:#666;}
abumuda { color:#A0A0A0; }
biru { color:#069;}
bluesky { color:#87CEEB;}
fieldset { border: 1px solid #53ED86;  }
gold { color:#FFD700;}
hijau { color:#090;}
hijaumuda { color:#53ED86;}
hitam { color:#000;}
pink { color:pink;}
pinktua { color:deeppink;}
coklat { color:brown;}
huruf10 {font-size:10px;}
huruf11 {font-size:11px;}
huruf12 {font-size:12px;}
huruf13 {font-size:13px;}
huruf14 {font-size:14px;}
huruf16 {font-size:16px;}
huruf18 {font-size:18px;}
huruf20 {font-size:20px;}
huruf22 {font-size:22px;}
huruf24 {font-size:24px;}
huruf26 {font-size:26px;}
huruf28 {font-size:28px;}
huruf30 {font-size:30px;}
huruf32 {font-size:32px;}
huruf34 {font-size:34px;}
huruf36 {font-size:36px;}
huruf40 {font-size:40px;}
huruf50 {font-size:50px;}
huruf60 {font-size:60px;}
huruf2 {font-size:2px;}
huruf3 {font-size:3px;}
huruf4 {font-size:4px;}
huruf5 {font-size:5px;}
huruf6 {font-size:6px;}
huruf7 {font-size:7px;}
huruf8 {font-size:8px;}
huruf9 {font-size:9px;}
kuning { color:#FFFF00;}
legend { background-color: white; }
maroon { color:#800000;}
merah { color:#FF0000;}
orange { color:#F60;}
putih { color:#FFF;}
silver { color:#C0C0C0;}
taikuda { color:#808000;}
tosca { color:#40E0D0;}

@media (min-width:1200px){
.ukurantinggi { width:3px; height:130px; }
}
	
@media (max-width:1200px){
.ukurantinggi { width:3px; height:130px; }
}
@media (max-width:1100px){
.ukurantinggi { width:3px; height:120px; }
}
@media (max-width:1000px){
.ukurantinggi { width:3px; height:110px; }
}
@media (max-width:900px){
.ukurantinggi { width:3px; height:100px; }
}
@media (max-width:800px){
.ukurantinggi { width:3px; height:90px; }
}
@media (max-width:700px){
.ukurantinggi { width:3px; height:80px; }
}
@media (max-width:600px){
.ukurantinggi { width:3px; height:70px; }
}
@media (max-width:500px){
.ukurantinggi { width:3px; height:60px; }
}
@media (max-width:400px){
.ukurantinggi { width:3px; height:50px; }
}
	
@media (max-width:300px){
.ukurantinggi { width:3px; height:40px; }
}

@media (max-width:200px){
.ukurantinggi { width:3px; height:30px; }
}


  [data-tooltip] {
      cursor: default;
      font: normal 1em sans-serif;
  }

  [data-tooltip]:hover:after {
      display: block;
      content: attr(data-tooltip);
      white-space: pre-wrap;
      color: #f00;
  }

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}