body {
  margin: 0;
  padding: 0;
  font:normal 14px/1.5 Arial, sans-serif;
}
#dropdown-menu{
  width: 200px!important;
}

.card-body{
  background-color: #F3F3F3!important;
}

#bg-slideshow {
  position:fixed;
  top:0
}
#bg-slideshow img {
  width: 100%;
  height: 100%;
  position:fixed;
  z-index:1;
  left:0;
  top:0
}
#wrapper {
  width:395px;
  margin:40px auto 0 auto;
  padding:30px;
  position:relative;
  z-index:5;
  background:#fff;
  -webkit-box-shadow:0 0 0 15px rgba(255,255,255,.3);
  -moz-box-shadow:0 0 0 15px rgba(255,255,255,.3);
  box-shadow:0 0 0 15px rgba(255,255,255,.3)
}
.wrapper .content-wrapper{
  padding-bottom: 15px;
}

.content-wrapper .content{
  padding-bottom: 5px;
}

.widget-user .widget-user-header {
  height: 170px
}


.form-control{
  border-radius: 5px;
  border-style: none;
}

.content{
  margin-left: 15px;
  margin-right: 15px;
  
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}

.kotak {
  position: relative;
  /*border-radius: 13px;*/
  background: #ffffff;
  /*border-top: 1px solid #d2d6de;*/
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}

.table > tbody > tr > td{
  vertical-align: middle;
  /*line-height: 1.2;*/
  padding-top: 2px;
  padding-bottom: 2px;
}

.belakang {
  margin-top:
  background-image: url('../images/wibbackground.png')!important;
}
.belakang2 {
  background-image: url('../images/wibbackground2.png')!important;
}

.judulutama{
  width: 300px;
}

.embos{
  text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
  color: #333;
  opacity: 0.4;
  font-size: 120%;
}


.table1 {
  font-family: sans-serif;
  color: #444;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #f2f5f7;
}

.table1 tr th{
  background: #35A9DB;
  color: #fff;
  font-size: 14px;
}

.table1, th, td {
  padding: 2px 20px;
  /*text-align: center;*/
  font-size: 12px;
}

.table1 tr:hover {
  background-color: #f5f5f5;
}

.table1 tr:nth-child(even) {
  background-color: #f2f2f2;
}


/*tambahan wib */

@media and (max-width: 767px) {
  #wrapper {
    width:395px;
  }
  #col-xs-4 {
    padding-left: 1px!important;
  }
}

@media (min-width: 768px) {
  #wrapper {
    width:425px;
  }

}

/*tambahan wib */
/*utk diatas */

@media screen and (min-width: 481px) {

  #col-xs-4 {
    padding-left: 1px!important;
  }
}

@media screen and (max-width: 480px) {
  body {
    background-color: lightgrey;
    /*width: 80%;*/
    /*line-height: 2em!important;*/
  }
  
  #content-wrapper{
    width: 300px!important;
  }

  #wrapper {     
    width:325px;   
    padding:20px; 
    margin-top: 0px;

    margin-left: 0px;   
  }

  .content{
    padding: 0 0rem!important;
    margin-left: 5px;
    margin-right: 5px;
  }
  .content-header{
    padding: 2px .5rem!important;
  }

  .container-fluid{
    padding-bottom: 5px;
    padding-left: .5px;
    padding-right: .5px;
  }
  .card{
    margin-bottom: .5rem;
  }

  .card-body{
    padding: .25rem;
  }


  .widget-user .widget-user-header
  {
    height:200px;
  }


  .login-box, .register-box {
    width: 270px;
    margin: 7% auto;
  }
  .btn{
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: auto;
  }

  #col-xs-4 {
    padding-left: 1px!important;
  }


}


@media screen and (max-width: 320px) {
  body {
  }

  .wrapper .content-wrapper{
    width: 300px;
  }
  

  #wrapper {
    width:250px;
    padding: 8px;
  }
  .login-box, .register-box {
    width: 80%;
    margin: 7% auto;
  }
  .btn{
    margin-left: 0px;
    padding-left: 2px;
    padding-right: 2px;
    width: auto;
  }
  #col-xs-4 {
    padding-left: 1px!important;
  }
  .embos{
    font-size: 80%;
  }

}