/* overwrite */
.ui-datepicker-trigger{
  background: #fff !important;
  border: 0px !important;
}
.nav-menu a{
  font-size: 15px !important;
}
.genric-btn.success{
  background: #030BF6;
}

.genric-btn.success:hover{
  border: 1px solid #030BF6;
  color: #030BF6;
}
.genric-btn.success-border{
  color: #030BF6;
  border: 1px solid #030BF6;
}
.genric-btn.success-border:030BF6{
  background: #030BF6;
}

.genric-btn.primary{
  background: #030BF6;
}
.genric-btn.primary:hover{
  border: 1px solid #030BF6;
  color: #030BF6;
}
.genric-btn.primary-border{
  color: #030BF6;
  border: 1px solid #030BF6;
}
.genric-btn.primary-border:hover{
  background: #030BF6;
}


/* new */
.mobile{
  display: none;
}
.nav-menu a:hover{
  color: #000;
}
@media (max-width: 810px) {
  .mobile{
    display: inline-block;
  }
}

.text-header{
  font-size: 22px !important;
  font-weight: bold !important;
  margin-left: 10px;
  margin-top: 10px;
  color: #000;
  float:right;
}
.text-header-small{
  font-size:12px;
  display:flex;
  color: #666;
}
.btn-ayat.active{
  background: #242424 !important;
  color: #fff;
}
.font-17{
  font-size: 17px !important;
}
.font-20{
  font-size: 20px !important;
}

.tanggal{
  padding: 5px;
  color: #fff;
}
.tanggal:hover{
  color: #000;
}

.bg-grey{
  background: #242424;
}
.bg-purple{
  /* background: #af02b8; */
  background: #030BF6;
  color: #fff;
}
.border-purple{
  /* border: 1px solid #af02b8; */
  border: 1px solid #030BF6;
  font-size: 17px !important;
}
  .border-purple strong {
    /* color: #af02b8; */
    color: #030BF6;
    font-weight: bolder;
  }
.color-purple{
  /* color: #af02b8; */
  color: #821b07;
}
.bg-green{
  background: #1f8001;
}
.border-green{
  /* border: 1px solid #1f8001; */
  border: 1px solid #000000;
  
  font-size: 17px !important;
}
  .border-green strong {
    /* color: #1f8001; */
    color: #000000;
    font-weight: bolder;
  }
.color-green{
  /* color: #1f8001; */
  color: #000000;
}
.color-white{
  color: #ffffff;
}

a:hover{
  color: #fff;
}
/*  modern button **********  */
.btn-pnj {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  /* color: #075e01; */
  color: #030BF6;
  font-weight: 700;
  font-size: 27px;
  background-color: #fff;
  /* border: 3px solid #075e01; */
  border: 3px solid #030BF6;
  border-radius: 10px;
  padding: 70px 10px;
  /* padding: 35px 10px; */
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn-pnj span {
  position: relative;
  z-index: 1;
}

.btn-pnj:after {
  content: "";
  position: absolute;
  /*
  left: -100%;
  top: 70%;
  height: 1400%;
  width: 140%;
  */
  left: 0;
  top: 0;
  height: 260%;
  width: 160%;
  /* background: #075e01; */
  background: #030BF6;
  color: #fff;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn-pnj:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}


/*  */
.btn-jh {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  /* color: #730179; */
  color: #000000;
  font-weight: 700;
  font-size: 27px;
  background-color: #fff;
  /* border: 3px solid #730179; */
  border: 3px solid #000000;
  border-radius: 10px;
  padding: 70px 10px;
  /* padding: 35px 10px; */
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn-jh span {
  position: relative;
  z-index: 1;
}

.btn-jh:after {
  content: "";
  position: absolute;
  /* left: -100%;
  top: 70%;
  height: 1400%;
  width: 140%; */
  left: 0;
  top: 0;
  height: 260%;
  width: 160%;
  /* background: #730179; */
  background: #000000;
  color: #fff;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn-jh:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}



/*  */
.btn-kd {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #000;
  font-weight: 700;
  font-size: 19px;
  background-color: #fff;
  border: 3px solid #000;
  border-radius: 10px;
  /* padding: 70px 10px; */
  padding: 22px 0px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}
  /* .btn-kd.kp{
    color: #000;
    border: 3px solid #000;
  } */

.btn-kd span {
  position: relative;
  z-index: 1;
}

.btn-kd:after {
  content: "";
  position: absolute;
  left: -92%;
  top: -46%;
  height: 1700%;
  width: 150%;
  background: #000;
  color: #fff;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn-kd:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}




/*  */
.btn-gk {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  /* color: #730179; */
  color: #000000;
  font-weight: 700;
  font-size: 25px;
  background-color: #fff;
  /* border: 3px solid #730179; */
  border: 3px solid #000000;
  padding: 60px 10px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.btn-gk span {
  position: relative;
  z-index: 1;
}

.btn-gk:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 290%;
  width: 140%;
  /* background: #730179; */
  background: #000000;
  color: #fff;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn-jh:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}



/*  */
.galangkangin {
	display: block;
  /* width: 330px; */
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
  transform: translatez(0);
  text-decoration: none;
  box-sizing: border-box;
  border-radius: 10px;
	box-shadow: 0 9px 18px rgba(0,0,0,0.2);
}

.instagram {
	text-align: center;
	/* border-radius: 50px; */
  padding: 60px 10px;
  font-weight: 700;
  font-size: 25px;
  color: #011972;
  background: #fff;
  border: 3px solid #011972;
  transition: all 0.2s ease-out 0s;
}
.instagram:hover {
  color: #011972;
}

.gradient {
	display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: auto;
  margin: auto;
  z-index: -1;
  background: radial-gradient(90px circle at top center, rgba(1, 25, 114,.8) 30%, rgba(255,255,255,0));
  transition: all 0s ease-out 0s;
	transform: translatex(-140px);
	animation: 18s linear 0s infinite move;
}

@keyframes move {
	0% {
		transform: translatex(-140px);
	}
	25% {
		transform: translatex(140px);
		opacity: 0.3;
	}
	50% {
		transform: translatex(140px);
		opacity: 1;
		background: radial-gradient(90px circle at bottom center, rgba(1, 25, 114,.5) 30%, rgba(255,255,255,0));
	}
	75% {
		transform: translatex(-140px);
		opacity: 0.3;
	}
	100% {
		opacity: 1;
		transform: translatex(-140px);
		background: radial-gradient(90px circle at top center, rgba(1, 25, 114,.5) 30%, rgba(255,255,255,0));
	}
}

.carousel-item{
  min-height: 100px;
  /* background: #eee !important; */
}

.wl-box{
  width: 25px;
  height: 12px;
  display: inline-block;
  border-radius: 50px;
  border: 1px solid #000;
  margin-left: 2px;
}
.wl-putih{
  background: #fff;
  color: #000;
}
.wl-merah{
  background: #000000;
  color: #000000;
}
.wl-ungu{
  background: #b700ff;
  color: #b700ff;
}
.wl-hijau{
  background: #038a25;
  color: #038a25;
}
.wl-hitam{
  background: #000;
  color: #000;
}
.wl-text{
  margin-left: 2px;
  background: transparent;
}