html {
  font-family: "Tahoma";
  background: url(../img/bgr/white_brick_wall.png) repeat top left !important;
}
body {
  font-family: "Tahoma";
  line-height: 1.48;
  color: #000;
  height: 100%;
}
.bodylogin {
  background: url(../img/bgr/wht-02.png) repeat top left !important;
}
.box-login-noise {
  background: url(../img/bgr/brw-02.png) repeat top left !important;
}
.index-login-img {
  background: url(../img/login.png) no-repeat top left !important;
}

.profil {
  background-color: rgba(255, 255, 255, 0.8);
}

.bgrUser {
  background: transparent;
}

.mysection {
  padding: 50px 10px 15px;
  margin-bottom: 5px;
  background: url(../img/bgr/login.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Loader 
-------------------------------------------------------
*/
.wira_pre_loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #fff;
}
.wira_pre_loader .wira_loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 14px Arial;
  color: #000;
}

/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999999;
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
}

.preloader .preloader-inner {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background: -webkit-radial-gradient(
    rgba(0, 0, 0, 0) 50%,
    rgba(249, 163, 146, 0.8)
  );
  background: -moz-radial-gradient(
    rgba(0, 0, 0, 0) 50%,
    rgba(249, 163, 146, 0.8)
  );
  background: -o-radial-gradient(
    rgba(0, 0, 0, 0) 50%,
    rgba(249, 163, 146, 0.8)
  );
  background: radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(249, 163, 146, 0.8));
  z-index: 10;
}

.preloader .preloader-inner .logo {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 100%;
  max-width: 400px;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.preloader .preloader-inner .logo img {
  width: auto;
  margin-left: -10px;
}

.preloader .preloader-inner .preloader-box {
  position: absolute;
  width: 100%;
  height: 30px;
  left: 0;
  top: 58%;
  padding-left: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -moz-perspective: 200px;
  perspective: 200px;
  -webkit-perspective: 200px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.preloader .preloader-inner .preloader-box > div {
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #ccc;
  float: left;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: #b43f90;
  margin-right: 15px;
}

.preloader .preloader-inner .preloader-box > div:nth-child(1) {
  -webkit-animation: movement 600ms ease 0ms infinite alternate;
  -moz-animation: movement 600ms ease 0ms infinite alternate;
  -o-animation: movement 600ms ease 0ms infinite alternate;
  animation: movement 600ms ease 0ms infinite alternate;
}

.preloader .preloader-inner .preloader-box > div:nth-child(2) {
  -webkit-animation: movement 600ms ease 75ms infinite alternate;
  -moz-animation: movement 600ms ease 75ms infinite alternate;
  -o-animation: movement 600ms ease 75ms infinite alternate;
  animation: movement 600ms ease 75ms infinite alternate;
}

.preloader .preloader-inner .preloader-box > div:nth-child(3) {
  -webkit-animation: movement 600ms ease 150ms infinite alternate;
  -moz-animation: movement 600ms ease 150ms infinite alternate;
  -o-animation: movement 600ms ease 150ms infinite alternate;
  animation: movement 600ms ease 150ms infinite alternate;
}

.preloader .preloader-inner .preloader-box > div:nth-child(4) {
  -webkit-animation: movement 600ms ease 225ms infinite alternate;
  -moz-animation: movement 600ms ease 225ms infinite alternate;
  -o-animation: movement 600ms ease 225ms infinite alternate;
  animation: movement 600ms ease 225ms infinite alternate;
}

.preloader .preloader-inner .preloader-box > div:nth-child(5) {
  -webkit-animation: movement 600ms ease 300ms infinite alternate;
  -moz-animation: movement 600ms ease 300ms infinite alternate;
  -o-animation: movement 600ms ease 300ms infinite alternate;
  animation: movement 600ms ease 300ms infinite alternate;
}

.preloader .preloader-inner .preloader-box > div:nth-child(6) {
  -webkit-animation: movement 600ms ease 375ms infinite alternate;
  -moz-animation: movement 600ms ease 375ms infinite alternate;
  -o-animation: movement 600ms ease 375ms infinite alternate;
  animation: movement 600ms ease 375ms infinite alternate;
}

.preloader .preloader-inner .preloader-box > div:nth-child(7) {
  -webkit-animation: movement 600ms ease 450ms infinite alternate;
  -moz-animation: movement 600ms ease 450ms infinite alternate;
  -o-animation: movement 600ms ease 450ms infinite alternate;
  animation: movement 600ms ease 450ms infinite alternate;
}

.preloader .preloader-inner .preloader-box > div:nth-child(8) {
  margin-top: 0;
  -webkit-animation: movement 600ms ease 525ms infinite alternate;
  -moz-animation: movement 600ms ease 525ms infinite alternate;
  -o-animation: movement 600ms ease 525ms infinite alternate;
  animation: movement 600ms ease 525ms infinite alternate;
}

@-webkit-keyframes movement {
  from {
    -webkit-transform: scale(1) translateY(0px) rotateX(0deg);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
    -webkit-box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    background: #b43f90;
  }
}

@-moz-keyframes movement {
  from {
    -webkit-transform: scale(1) translateY(0px) rotateX(0deg);
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
    -moz-box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    background: #b43f90;
  }
}

@-o-keyframes movement {
  from {
    -webkit-transform: scale(1) translateY(0px) rotateX(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    background: #b43f90;
  }
}

@keyframes movement {
  from {
    -webkit-transform: scale(1) translateY(0px) rotateX(0deg);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
    -webkit-box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.1);
    background: #b43f90;
  }
}

/*
-------------------------------------------------------
*/

.wira-nav-item {
  background: url(../img/bgr/head_table.png) repeat top left;
  border-left: 1px solid #fff;
  border-right: 1px solid #555;
}
.wira-nav-item :hover {
  background: url(../img/bgr/white_texture.png) repeat top left;
  border-left: 1px solid #fff;
  border-right: 1px solid #555;
}

.wira_bgr_time {
  background: url(../img/bgr/btn/r-black-1.png) repeat top left !important;
}

/* Form
-------------------------------------------------------
*/
.bgr-form {
  background: url(../img/bgr/bckg_page.png) repeat top left !important;
  border: 1px solid #999;
}

.area-timbul {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  box-shadow: 1px 1px 3px #000;
}

.btn-img img {
  border: 1px solid #fff;
  border-radius: 5px;
}

.btn-img img:hover {
  border: 1px solid blue;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #555;
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.inputan {
  border: 1px solid #999;
  background: #fff;
}

.wajib-isi {
  border: 1px solid tomato;
}

/*.mysection{
  padding:50px 10px 15px;
  margin-bottom:5px;
  background: -webkit-linear-gradient(top, #fff 0%, #25fc47 2%, transparent 90%);
  background: -moz-linear-gradient(top, #fff 0%, #25fc47 2%, transparent 90%);
  background: -o-linear-gradient(top, #fff 0%, #25fc47 2%, transparent 90%);
}*/

.bgr_content {
  padding: 20px 0 15px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.8);
}

.judul_mysection {
  padding: 5px 0 25px;
}
.judul_mysection h2 {
  font-weight: bold;
  color: #003366;
}

.icon_mysection {
  width: 50px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.head_perpage {
  /*background: url(../img/bgr/wild-oliva-light-headx.png) repeat top left !important;*/
  background-color: #300f02;
  color: #fff;
  text-align: center;
  padding: 10px;
  border: 1px solid #333;
}

fieldset.sysinfo {
  /*border: 1px groove #ddd !important; */
  padding: 0 1.4em 1.4em 1.4em !important;
  margin: 0 0 1.5em 0 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #000;
  box-shadow: 0px 0px 0px 0px #000;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.3);
}

legend.sysinfo {
  color: #000;
  font-size: 14px !important;
  font-weight: bold !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-bottom: 5px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #555;
  border-right: 1px solid #555;
  background-color: rgba(0, 0, 0, 0.1);
}
.auto_scroll {
  display: block;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  padding: 5px;
  height: 200px;
  overflow: auto;
}

.home-item {
  margin-bottom: 20px;
}

.blink {
  animation: berkedip 0.5s steps(5, start) infinite;
  -webkit-animation: berkedip 0.5s steps(5, start) infinite;
}

@keyframes berkedip {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes berkedip {
  to {
    visibility: hidden;
  }
}

.wira-slogan-animasi {
  background: linear-gradient(to right, #fff, #fff, #fff, navy);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 800px;
  background-position: center 0%;
  animation: slogan-animasi 25s infinite linear;
}

@keyframes slogan-animasi {
  100% {
    background-position: 8160px;
  }
}

.bgr-highlight {
  /*background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f); */
  /* Merah, Orange, Hijau, Biru Blao, Pink, Kuning, Pink tua*/
  background: linear-gradient(
    to right,
    #fff,
    #fff,
    #fff,
    #fff,
    #fff,
    #cc0000,
    yellow,
    green,
    aqua,
    blue,
    #fff,
    #fff,
    #fff,
    #fff,
    #cc0000,
    yellow,
    green,
    aqua,
    blue
  );
  background-size: 500% 500%;
  -webkit-animation: ignielGradient 3s ease infinite;
  -moz-animation: ignielGradient 3s ease infinite;
  animation: ignielGradient 3s ease infinite;
}
@-webkit-keyframes ignielGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes ignielGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes ignielGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*
.bgr-highlight {
    background: linear-gradient(45deg, #fff, #8dacc6, #fff, #8dacc6, #fff, #8dacc6, #fff, #000);
    background-size: 500% 500%;
    -webkit-animation: ignielGradient 5s ease infinite;
    -moz-animation: ignielGradient 5s ease infinite;
    animation: ignielGradient 5s ease infinite;
}
@-webkit-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}*/

/* View Foto */
.changeImg {
  position: relative;
  cursor: pointer;
}
.changeImg span {
  display: none;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  font-size: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: #000;
}
.changeImg:hover span {
  display: block;
  margin-left: 15%;
  margin-right: 15%;
}