@import "fontawesome/font-awesome.min.css";
html,
body {
   margin:0;
   padding:0;
   height:100%;
}

a { text-decoration: none; }


a:active  {color:#0F4DB3; }

a:hover   {

  color:#0F4DB3;

  text-decoration: underline;

  font-weight: normal;

}





.header0 {

  background:url(img/bg_head_blue120.gif) repeat;

  height: 120px;

}

sup, sub {

  color:#D90606;

}

.header1 {

  padding: 6px;

  /* background:url(img/template_01.jpg) no-repeat; */

  height: 80px;

}

.headerImg{

margin-top:5px;

width:100%;

}

.headerTitle{

  padding-top:10px;

  color: white;

  font-size: 2em;

}

img {

  border: 0;

}



.buttons{

  

  padding:2px 5px;



  color:#FFFFFF;

  font-size:14px;

  cursor:pointer;

  -moz-border-radius:6px;

  background:  hsl(190, 50%, 52%);

    border-radius: 3px 3px 3px 3px;

    color: hsl(0, 0%, 100%);



    line-height: 30px;



    position: relative;

    text-decoration: none;

  background: #3b88d8;

  background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);

  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));

  border-top: 1px solid #4081af;

  border-right: 1px solid #2e69a3;

  border-bottom: 1px solid #20559a;

  border-left: 1px solid #2e69a3;

  -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;

  -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;

}



.buttons:hover .button:focus {

  background: #2a81d7;

  background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);

  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));

  border-top: 1px solid #2a73a6;

  border-right: 1px solid #165899;

  border-bottom: 1px solid #07428f;

  border-left: 1px solid #165899;

  -moz-box-shadow: inset 0 1px 0 0 #62b1e9;

  -webkit-box-shadow: inset 0 1px 0 0 #62b1e9;

  cursor: pointer;

  text-shadow: 0 -1px 1px #1d62ab;

      color: hsl(0, 0%, 20%);

    text-decoration: none;

}

.buttons:active {

  background: #3282d3;

  border: 1px solid #154c8c;

  border-bottom: 1px solid #0e408e;

  -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;

  -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;

  text-shadow: 0 -1px 1px #2361a4;

}

.buttons:active, .btn.active {

    background-image: none;

    box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.125) inset;

    outline: 0 none;

}

.buttons.disabled, .buttons[disabled], fieldset[disabled] .buttons {

    box-shadow: none;

    cursor: not-allowed;

    opacity: 0.65;

    pointer-events: none;

}

.buttons-default {

    background-color: hsl(0, 0%, 100%);

    border-color: hsl(0, 0%, 80%);

    color: hsl(0, 0%, 20%);

}

.buttons-default:hover, .buttons-default:focus, .buttons-default:active, .buttons-default.active, .open .dropdown-toggle.buttons-default {

    background-color: hsl(0, 0%, 92%);

    border-color: hsl(0, 0%, 68%);

    color: hsl(0, 0%, 20%);

}





.menut {

  

  background: #FFF;

  font-size : 10pt;



}

.menu {

  

  background: #FFF;

  font-size : 10pt;



}

.menuitem {
  border : 1px solid silver;
  padding: 4px 6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;

}

.menuitem1 {
  border : 1px solid silver;
  padding: 4px 6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;

}

.menuaktif {
  border : 1px solid silver;
  padding: 5px 6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background: none repeat scroll 0 0 #1caf9a;

}

.menuaktif1 {
  border : 3px solid #0000FF;
  padding: 5px 6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background: none repeat scroll 0 0 #0000FF;

}

.menuaktif a {
  color: white;

}

.menuaktif1 a {
  color: white;

}

.JudulBesar {

  clear: both;

  text-align: center;

  font-size: 3em;

  

  color: gray;

}

.Judul {

  font-size: 1.5em;

  text-align: center;

  padding: 2px;

  color:black;

  border-bottom: 0px solid #DDD;


}

.WaktuServer { 

  position: relative;

  float: right;

  font-size: 0.9em;

  color: #06659F;;

}

.NamaLogin {
  position: relative;
  float: right;
  font-size: 0.9em;
  color: silver;
}

.MenuDirectory {

  position: relative;

  float: left;

  font-size: 0.9em;

  color: silver;

}

.isi {

  position: relative;

  clear: both;

  padding: 1px;

  /*height: 76%;*/

  /*overflow: auto;*/

  /*overflow-x: hidden;*/

}

td, th { padding: 2pt }



.box0 {

  padding: 10px;

  color:#000033; 

  background-color: white;

  border: 6px solid gray;

  layer-background-color:#cccccc;

  position:absolute; 

  top:40px; 

  left:40px; 

  width:600px; 

  height:400px;

  z-index:99;

  visibility:hidden;

  overflow: auto;

}

.box1 {

  padding: 4px;

  color:#000033; 

  background-color: white;

  border: 6px solid gray;

  layer-background-color:#cccccc;

  position:absolute; 

  top:20px; 

  left:10px; 

  width:760px; 

  height:500px;

  z-index:99;

  visibility:hidden;

  overflow: auto;

}

.box {

  font-size: 1em;

  border: 1px solid hsl(0, 0%, 87%);

  background-color: white;

  -moz-box-sizing: border-box;
  

}

.bsc {

  font-size: 1em;

}

.drag{

  position: relative;

  cursor: move;

  margin: auto;

  background-color: white;

  text-align: center;

  font-size: 10pt; /* needed for cloned object */

  opacity: 0.7;

  filter: alpha(opacity=70);

  /* without width, IE6/7 will not apply filter/opacity to the element ?! */

  width: 87px;

}

.ttl {

  background:#1caf9a;

  border-bottom:1px solid hsl(0, 0%, 87%);

  border-right:1px solid hsl(0, 0%, 87%);

  border-top:hsl(0, 0%, 87%) 1px solid;

  border-left:hsl(0, 0%, 87%) 1px solid;

  

  /* background: transparent url(img/side_block_bg.gif) repeat scroll; */

  color: white;

  padding:8px 0px;

  background: #0000FF 1px solid;

    

    font-size: 12px;

    text-decoration: none;
  
  
}

.ttl1 {

  background:hsl(32, 100%, 50%);

  border-bottom:1px solid hsl(0, 0%, 87%);

  border-right:1px solid hsl(0, 0%, 87%);

  border-top:hsl(32, 100%, 50%) 1px solid;

  border-left:hsl(32, 100%, 50%) 1px solid;

  

  /* background: transparent url(img/side_block_bg.gif) repeat scroll; */

  color: white;

  padding:8px 0px;

  background: #17539B 1px solid;

   

    font-size: 12px;

    text-decoration: none;
  
  
}

.ttl3 {

  background:hsl(212, 100%, 50%);

  border-bottom:1px solid hsl(0, 0%, 87%);

  border-right:1px solid hsl(0, 0%, 87%);

  border-top:silver 1px solid;

  border-left:silver 1px solid;

  

  /* background: transparent url(img/side_block_bg.gif) repeat scroll; */

  color: black;

  padding:8px 0px;

  background: #17539B 1px solid;

   

    font-size: 12px;

    text-decoration: none;
  
  
}

.ttl4 {

  background:silver;

  border-bottom:1px solid hsl(0, 0%, 87%);

  border-right:1px solid hsl(0, 0%, 87%);

  border-top:silver 1px solid;

  border-left:silver 1px solid;

  

  /* background: transparent url(img/side_block_bg.gif) repeat scroll; */

  color: black;

  padding:8px 0px;

  background: #17539B 1px solid;

   

    font-size: 12px;

    text-decoration: none;
  
  
}
.lbl {

  width: 100px;

  /*float: left;

  display: block; */

  font-size: 12px;

  color: maroon;

  border-bottom: 1px dotted maroon;

}

.inp {

  font-size: 12px;

  font-weight: bold;

  color:#555555;

  text-align: right;
  

  /*background-color: rgb(240,240,200);*/

  /*background: transparent url(themes/default/img/header/panel_08.gif) scroll repeat-x; */

  background: #EEEEEE;

  

  border: 1px solid hsl(0, 0%, 87%);

  padding: 4px;

}

.inpx {

  font-size: 0.9em;

  font-weight: bold;

  color: #06659F;

  background: white;

  border-bottom: 1px dotted silver;

  padding: 4px;

}

.inp1 {

  /*background : url(img/bot_bg.jpg) repeat-x scroll;*/

  background:#D8EBFA;

  border-bottom: 1px solid silver;

  padding: 4px;

}

.inp2 {

  background-color:green;

  padding: 4px;

}

.inp3{

  background-color : rgb(255,255,204);

  border-bottom: 1px solid #DDD;

  padding: 4px;

}

.inp4{

  background-color : rgb(204,204,255);

  border-bottom: 1px solid #DDD;

  padding: 4px;

}

.inp5{

  background-color : hsl(103, 88%, 47%);

  border-bottom: 1px solid #DDD;

  padding: 4px;

}

.inp6{

  background-color : hsl(120, 100%, 40%);

  border-bottom: 1px solid #DDD;

  padding: 4px;

}

.inp7{

  background-color : hsl(32, 100%, 50%);

  border-bottom: 1px solid #DDD;

  text-align: right;

  padding: 4px;

}
.nac {

  background-color : #DEDEDE;

  border-bottom: 1px solid silver;

  color : black;

  padding: 4px;

}

.hdr {

  background-color : white;

  border-top: 2px solid silver;

  border-bottom: 1px solid silver;

  font-weight: bold;

}

.ul {

  border-bottom: 1px solid hsl(0, 0%, 87%);

  border-right: 1px solid hsl(0, 0%, 87%);

  padding: 4px;

}

.ul1 {

  border-bottom: 1px dotted #ddd;

  padding: 4px;

}

.oke {

  background: #66FF66;

  border-bottom: 1px solid #ddd;

}

.kolkir {

  border-right: 1px solid silver;

  padding: 0 4px 0 0;

}

.kolkan {

  padding: 0 0 0 4px;

}

.cnaY {

  background-color:#DFDFDF;

  color:#000000;

  border-bottom: 1px dotted silver;

}

.cnaN {

  background-color: white;

  color: black;

  border: 1px solid hsl(0, 0%, 87%);

}

.cnnY {

  background: lightYellow;

  color: black;

  border-bottom: 1px solid silver;

}

.cnnN {

  background-color: white;

  color: black;

  border-bottom: 1px solid silver;

}

.wrn {

  background-color:#AAD8F9;

  color:#1B5F18;

  padding: 4px;

}

.kiri {

  width: 150px;

  float: left;

}

.submenu {

  font-size: 0.8em;

  clear: both;

  display: block;

}

.bagian_kiri {

  float: left;

  width: 15em;

  padding-right: 4px;

}

.bottomspace{

  width:100%;

  height:30px;

}

.footer {

  clear: both;

  text-align: center;

  padding: 4px;

  background: transparent url(img/bot_bg.jpg) repeat-x scroll;

  border-top: 1px solid #DDD;

  border-bottom: 1px solid #DDD;

  bottom:0px;

  position:fixed;

  width:100%;

}





#JT_arrow_left {

background-image:url(images/arrow_left.gif);

background-position:left top;

background-repeat:no-repeat;

height:23px;

left:-12px;

position:absolute;

top:-3px;

width:10px;

z-index:101;

}

#JT_arrow_right {

background-image:url(images/arrow_right.gif);

background-position:left top;

background-repeat:no-repeat;

height:23px;

position:absolute;

top:-2px;

width:11px;

z-index:101;

}

#JT {

background-color:#FFFFFF;

border:2px solid #CCCCCC;

position:absolute;

z-index:100;

}

#JT_copy {

color:#333333;

padding:10px;

}

.JT_loader {

background-image:url(images/loader.gif);

background-position:center;

background-repeat:no-repeat;

height:12px;

width:100%;

}

#JT_close_left {

background-color:#CCCCCC;

font-weight:bold;

padding-bottom:5px;

padding-left:8px;

padding-top:2px;

text-align:left;

}

#JT_close_right {

background-color:#CCCCCC;

font-weight:bold;

padding-bottom:5px;

padding-left:8px;

padding-top:2px;

text-align:left;

}

#JT_copy p {

margin:3px 0pt;

}

#JT_copy img {

border:1px solid #CCCCCC;

padding:1px;

}

.jTip {

cursor:help;

}





@media print {

.noprint {display: none;}

.JudulBesar {

  clear: both;

  text-align: center;

  font-size: 3em;

  

  color: gray;

  display : none;


}

.NamaLogin {

  float: right;

  font-size: 0.8em;

  color: gray;

  display : none;

}

.MenuDirectory {

  float: left;

  font-size: 0.8em;

  color: gray;

  display : none;

}

.menudropdown {

  clear: both;

  

  font-size : 1em;

  height: 1.2em;

  float: left;

  position: relative;

  display : none;

}

.footer {

  display:none;

}



thead {display: table-header-group; }

tfoot {display: table-footer-group; }

}

/* buat css kalender */



.cals {



font-size:20;

font-weight:bold;

border:#85AFDE 1px solid;

}



.cals th{

background-color:#A2BAE8;

font-size:20px;

color:#FFFFFF;

padding:5px 0px;

}



.cals td{

border:#85AFDE 1px solid;

}



.calsDays{

background-color:#BDD7F2;

color:#2E528D;

font-size:14px;

padding:5px;



}

.calsHoliday{

padding:20px 0px;

background-color:#D20000;

color:#FFFFFF;

}



.calsNormal{

padding:20px 0px;

}



.calsEmpty{

background-color:#A2BAE8;

}



.calsUTS{

padding:20px 0px;

background-color:#C58C23;

color:#FFFFFF;

}



.calsUAS{

padding:20px 0px;

background-color:#8CD7DD;

color:#FFFFFF;

}
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
 
.mainmenubtn:hover {
    background-color: red;
    }
 
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}


#kotakUpload{
    border: 1px dashed #38908a;
    border-radius: 5px;
    background: #deface;
    cursor: pointer;
}
#kotakUpload{
    min-height: 150px;
    padding: 54px 54px;
    box-sizing: border-box;
}
#kotakUpload p{
    text-align: center;
    margin: 2em 0;
    font-size: 16px;
}
#inputFile{
    display: none;
}