.box_warna{float:left;   width:74px; height:74px; background:#CC0000; border-radius:4px; line-height:74px; font-size:24px; color:#FFFFFF; text-align:center;}
.box_warna2{float:left;  width:74px; height:74px; background:#31708f; border-radius:4px; line-height:74px; font-size:24px; color:#FFFFFF; text-align:center;}
.box_warna3{float:left;  width:74px; height:74px; background:#009933; border-radius:4px; line-height:74px; font-size:24px; color:#FFFFFF; text-align:center;}
.p1{font-size:18px; font-weight:600;}

.p2{ margin-bottom:0; margin-top:-8px;}
#selform{width:100%}
.tengah{text-align:center;}
.tampilkan{line-height:34px;}
b{ font-weight: 500; }
th{ font-weight: 500; }

.control-label{ font-weight: 500; }
/* =============================================================================================================================================================================
/* ---- START CHART --- 
============================================================================================================================================================================= */
#chartt { width:100%;  height: 300; margin: 30px auto 0; display: block;}
#chartt #numbers {  height: 100%;  width:46px;  margin: 0;  padding: 0;  display: inline-block;  float: left; }
#chartt #numbers li { text-align:center; list-style: none; height: 31px; border-bottom: 1px solid #ddd;  position: relative;  bottom: 31px;}
#chartt #numbers li:last-child { height: 31px; }
#chartt #numbers li span {  position: absolute;  bottom: 0;  right: 0px;  left:0;}
#chartt #bars {display: inline-block; width:calc(100% - 46px);height: 309px;padding: 0;margin: 0; box-shadow: 0 0 0 1px #ddd; position:relative;}
#chartt #bars li { width:8.33333333333333%; list-style:none; float:left; height: 309px;  margin: 0; text-align: center; position: relative; }
#chartt #bars li .bar { z-index:2;  display: block;  width:52%;  background:#0099CC;  position: absolute; left:0; right:0; margin-left:auto; margin-right:auto;  bottom: 0;
   -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);   -webkit-transition-duration: 0.3s; transition-duration: 0.3s;  -webkit-transition-property: color, background-color; transition-property: color, background-color;}
#chartt #bars li .b1 {   left:auto; right:4%; margin-left:0; margin-right:0;}
#chartt #bars li .b3 { left:4%; right:auto; margin-left:0; margin-right:0;}
#chartt #bars li .bar:hover {  background:#0077CC; cursor: pointer;}
#chartt #bars li .bar:before { color:#337ab7; content: attr(data-percentage) '%'; position: relative; bottom: 20px;}
#chartt #bars li span {  width: 100%; position: absolute; bottom: -2em; left: 0; text-align: center;}
.ket_chart{line-height:180%; margin-top:5px; margin-bottom:0px; }
.line_bar1{position:absolute; bottom:30px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar2{position:absolute; bottom:61px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar3{position:absolute; bottom:92px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar4{position:absolute; bottom:123px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar5{position:absolute; bottom:154px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar6{position:absolute; bottom:185px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar7{position:absolute; bottom:216px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar8{position:absolute; bottom:247px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;} .line_bar9{position:absolute; bottom:278px; z-index:1; border-bottom:solid 1px #ddd; left:0; right:0;}


.kotak_login{width:58%; margin: auto; margin-top: 100px;  }
.box_log{width:31%;}
.judul2{text-align: center; font-weight: 500; margin-bottom: 34px;}
.selamat{font-size:20px; font-weight: 500; margin-top: 30px;margin-bottom: 10px;  text-align: center;}
.strator{ display: table; margin: auto; margin-top: 10px; text-align: center; margin-bottom:6px; font-weight: 500; }
.pengguna{display: none; }
.selamat2{font-size:20px; margin-top: 20px;margin-bottom: 10px; font-weight: 500;  text-align: center;}
.silahkan{text-align: center; margin-bottom: 70px;}


@media only screen and (min-width: 551px) {
.nama{ display:block;}
#nama_k{ display:none;}

}








@media only screen and (max-width: 550px) {
#kotak{width:90%}
#chartt { width:900px;} 
.ket_chart{line-height:180%; font-size:12px; padding-left:4%; padding-right:4%; margin-top:10px; margin-bottom:10px; text-align:center}
#selform{ margin-bottom:20px;}
.tengah{text-align:left; margin-top:20px;}
.tampilkan{line-height:normal; margin-bottom:20px;}
.nama{ display:none;}
#nama_k{ display:block; font-size:17px; font-weight:600; text-transform:uppercase; margin-top:26px; margin-left:20px;}


.judul2{margin-bottom: 24px;}
.kotak_login{margin-top: 100px;width:80%; }
.box_layanan{margin-top: 0px;}
.akhir{margin-bottom: 100px;margin-top: 60px; }
.box_log{width:auto;}
.selamat{font-size:22px; font-weight: 600;margin-top: 20px;   }
.strator{ margin-bottom:20px; }
.top-right-menu{display:none;}
.pengguna{display: table; margin: auto; width: 96%; position: relative; height:50px; margin-top:2px}
.selamat2{font-size:18px;  font-weight: 600;}
.patah{display:block;}
.silahkan{font-size:12px; padding-left:8%; padding-right:8%;}

}