:root{
  --bg: #2f2d38;
  --bgheader: #405D92;
  --shadowheader: 0px 3px 6px #2f2d38;
  --white: #FFF;
  --ftin: .5em;
  --ftin2: .65em;
  --fsmall: .75em;
  --fsize1: .9em;
  --fsize2: 1.25em;
  --fsize3: 1.5em;
  --fsizesub: 1.4em;
  --darktext: #4C5560;
  --darkbtn: #414962;
  --orange: #4a36e1;
}
body{
  padding: 0;
  margin: 0;
}
.root{
  background: var(--bg);
  background-attachment: fixed;
  width: 100%;
  margin: auto;
  min-height: calc(100vh - 146px);
  position: relative;
  color: var(--white);
}
a, a:hover{
  color: inherit;
  text-decoration: none;
}
a.btn{
  padding: 0;
  text-decoration: underline;
}
.btn:hover{
  cursor: pointer;
}
.btn:active, .btn:focus, button:active, button:focus, input:active, input:focus{
  outline: none !important;
  box-shadow: none;
}
.btn:active, a.btn:active, a.snk-promo:active{
  transform: scale(.99);
}
.img-square{
  position: relative;
  padding-bottom: 100%;
}
.img-square img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.big-banner{
  display: block;
}
.small-banner{
  display: none;
}
.wrapper-home{
  padding-top: 5em;
}
.wrapper{
  padding-top: 4em;
}

/*modal*/
.modal.fade .modal-dialog{
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -ms-transform: scale(0.1);
  transform: scale(0.1);
  opacity: 0;
  -webkit-transition: ease 0.3s;
  -moz-transition: ease 0.3s;
  transition: ease 0.3s;
}
.modal.show .modal-dialog{
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
body.modal-open{
  padding-right: 0 !important;
  overflow: auto;
}

.mb-head{
  position: relative;
  border-bottom: 1px solid rgba(65,73,98,.2);
  padding: 1.25em;
}
.mbh-title{
  color: var(--orange);
  font-size: var(--fsize2);
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-align: center;
}
.mb-body{
  padding: 1em;
}
.mbb-top{
  font-size: var(--fsize1);
  background: #F5F5F5;
  padding: 1em;
}
.mbbt-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 2;
}
.mbbt-row span:nth-child(1){
  color: #959595;
}
.mbbt-row span:nth-child(2){
  color: var(--darktext);
}
.mbb-bottom{
  padding-top: .5em;
}
.mbbb-text{
  color: var(--darkbtn);
  font-size: var(--fsmall);
  padding-bottom: 1em;
}
.modal-detail .next-btn{
  margin-top: 2em;
}
.modal-detail.show{
  padding-right: 0 !important;
}
body.modal-open{
  overflow: hidden;
}

/* modal ewall */
.modal-ewall .modal-content{
  border-radius: 6px;
  background: none;
  padding-right: 0 !important;
}
.modal-ewall .modal-dialog{
  max-width: 25em;
}
.mehr{
  background: #FFF;
}
.mehr hr{
  border: 1px solid #D5D5D5;
  width: calc(100% - 1em);
  margin: 0 auto;
}
.me-head{
  background: var(--bgheader);
  position: relative;
  padding: 1.75em;
  border-radius: 6px 6px 0 0;
}
.meh-title img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 6.5em;
}
.me-body-top{
  padding: .75em 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
}
.mebt-left{
  width: 75%;
  padding-right: 1.75em;
}
.mebt-left-top{
  color: #ABABAB;
  font-size: .9em;
}
.mebt-left-bottom{
  font-weight: 700;
  word-break: break-all;
  line-height: 1.2;
}
.mebt-right{
  width: 25%;
}
.mebt-right img{
  width: 100%;
  max-width: 5em;
  margin-left: auto;
  display: block;
}
.me-body-center{
  padding: 1em 1.5em;
  background: #FFF;
}
.mebc-one{
  text-align: center;
  color: #ABABAB;
  font-family: arialrounded;
}
.mebc-two{
  margin: .5em 0;
}
.mebc-two img{
  margin: auto;
  display: block;
  width: 100%;
  max-width: 12em;
}
.mebc-three{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mebc-three-left{
  color: #ABABAB;
  font-family: arialrounded;
}
.mebc-three-right{
  color: #5A5A5A;
  font-weight: 700;
  font-family: arialrounded;
}
.me-body-bottom{
  padding: .75em 1.25em .5em;
  text-align: center;
  background: #F5F5F5;
  border-top: 1px solid #D5D5D5;
  border-bottom: 1px solid #D5D5D5;
}
.mebb-one{
  font-size: var(--ftin2);
  font-weight: 500;
}
.mebb-two{
  color: #00B188;
  font-family: arialrounded;
  margin-top: .5em;
}
.me-bottom{
  padding: 1em 1.75em 1.25em;
  background: #FFF;
  border-radius: 0 0 6px 6px;
}
.btn-modal-ewall{
  color: #FFF;
  background: #F56603;
  padding: 1em;
  border-radius: 6px;
  width: 100%;
  max-width: 18em;
  margin: auto;
  display: block;
}
.btn-modal-ewall:hover, .btn-modal-ewall:active, .btn-modal-ewall:focus{
  color: #FFF;
}
/* end modal ewall */
/*end modal*/

/*input effect*/
.input-group{
  position: relative;
  margin-bottom: 1em;
}
.input-group input{
  font-size: var(--fsize1);
  padding: 1em .5em .4em;
  display: block;
  width: 100%;
  font-weight: 700;
  border: none;
  border-bottom: 1px solid var(--darkbtn);
  outline:none;
}
.input-group input::placeholder{
  color: #CCC;
  font-weight: 300;
}
.input-group input:focus:invalid{
  border-bottom: 1px solid red;
}
.input-group input:focus:valid{
  border-bottom: 1px solid #5cd053;
}

.o-checkbox.inactive{
  visibility: hidden;
}
.o-checkbox{
  cursor: pointer;
}
.o-checkbox .oc-input{
  display: none;
}
.o-checkbox .oc-input:checked ~ .oc-indicator::after{
  transform: rotateZ(45deg) scale(1);
  top: -6px;
  left: 5px;
}
.o-checkbox .oc-input:checked ~ .oc-indicator::before{
  opacity: 1;
}
.oc-indicator{
  border-radius: 3px;
  display: inline-block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #AAA;
}
.oc-indicator::after{
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  transition: 0.3s;
  transform: rotateZ(90deg) scale(0);
  width: 10px;
  border-bottom: 4px solid var(--darkbtn);
  border-right: 4px solid var(--darkbtn);
  border-radius: 3px;
  top: -2px;
  left: 2px;
}
.oc-text{
  margin-left: .3em;
  font-size: var(--fsize1);
}
/*end input effect*/

/*header*/



/*end header*/

/*carousel*/
.carousel-outer{
  position: relative;
  z-index: 0;
}
.owl-theme .custom-nav{
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
}
.owl-theme .owl-prev, .owl-theme .owl-next{
  position: absolute;
  height: 100px;
  color: inherit;
  background: none;
  border: none;
  z-index: 100;
}
.owl-theme .owl-prev:hover, .owl-theme .owl-next:hover{
  background: none;
}
.owl-theme i{
  font-size: 2.5rem;
  color: #cecece;
}
.owl-theme .owl-prev{
  left: 0;
}
.owl-theme .owl-next{
  right: 0;
}
.owl-theme .owl-nav [class*=owl-]{
  color: #FFF;
  margin: 0;
  background: none;
}
.owl-dots{
  position: absolute;
  bottom: 14px;
  right: .5em;
}
.owl-theme .owl-dots .owl-dot span{
  background: #9EACC8;;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
  background: #FFF;
}
.owl-theme .owl-nav [class*=owl-]:hover{
  background: none;
}

.carousel-cover img, .promo-details img{
  width: 100%;
  position: relative;
}
.carousel-cover-cpt{
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 1em;
}
.ccc-rct{
  margin-bottom: .25em;
}
.ccc-rct span{
  padding: .25em .5em;
  font-size: var(--fsmall);
  border-radius: 5px;
  text-transform: uppercase;
}
.ccc-rct span.promo{
  background: #D02F2F;
}
.ccc-rct span.news{
  background: #2FB7D0;
}
.ccc-title{
  /* font-size: var(--fsizesub); */
  font-size: 1.875em;
  font-weight: 500;
}
.ccc-text{
  /* font-size: var(--fsize1); */
  font-size: 1.125em;
}
.ccc-look{
  font-size: var(--fsmall);
  color: #C5AE3A;
  text-decoration: underline;
}
/*end carousel*/

/*content column*/
.content{
  padding-bottom: 3em;
}
.content-column{
  padding: 2em 0;
}
.cc-title{
  font-size: var(--fsizesub);
  padding-bottom: .5em;
}
.grid-wrap{
  display: grid;
  grid-template-columns: repeat(5,20%);
  margin: auto -.5em;
}
.grid-wrap .game-name{
  padding: .5em;
}

.grid-wrap a{
  padding: .5em;
}

.grid-wrap img{
  width: 100%;
}
.gw-caption{
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fsize1);
  padding: .5em 0;
}
/*end content column*/

/*promo details*/
.promo-wrap{
  color: var(--darktext);
}
.promo-details{
  position: relative;
}
.promo-title{
  font-size: var(--fsize2);
  padding: .5em 0;
}
.promo-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F5F5F5;
  padding: 1em;
  border-bottom: 1px solid #DFDFDF;
}
.periode-promo{
  display: flex;
  align-items: center;
}
.periode-promo img{
  height: 3em;
  margin-right: .5em;
}
.periode-promo span:nth-child(2) div:nth-child(2){
  font-weight: 700;
}
.snk-promo{
  color: var(--darktext);
  border: 2px solid var(--darktext);
  font-size: var(--fsize1);
  padding: .5em 1em;
  border-radius: 5px;
}

.promoted{
  background: #FFF;
  padding: 1em 0;
}
.buy-now{
  font-family: multicolore;
  font-size: 1.1em;
  color: #2FB7D0;
  text-align: center;
  padding-bottom: .75em;
}
.single-promote{
  width: 100%;
}
.single-promote .promoted-item{
  width: 25%;
  margin: auto;
}
.double-promote{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.double-promote .promoted-item{
  width: 25%;
  margin: auto 1em;
}
.triple-promote{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.triple-promote .promoted-item{
  width: 20%;
  margin: auto 1em;
}
.multiple-promote{
  display: grid;
  grid-template-columns: repeat(4,25%);
  padding: 0 5em;
}
.multiple-promote .promoted-item{
  padding: 0 1em;
}

.promoted-item img{
  width: 100%;
}
.pi-title{
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fsize1);
  padding: .5em 0 1.25em;
}

.promo-snk{
  background: #FFF;
  padding: 1em 2em;
}
.promo-snk > div > span{
  white-space: normal !important;
  display: block;
}
.promo-snk-title{
  font-size: var(--fsize2);
  padding-bottom: .5em;
}
.promo-snk ol{
  padding-left: 1em;
}
.promo-snk ol li{
  padding-bottom: 1em;
  font-size: var(--fsize1);
}
/*end promo details*/

/*direct top up*/
.white-wrapper{
  background: #FFF;
  color: var(--darktext);
  padding: 2em 1em;
  margin-top: 1em;
  border-radius: 5px;
}
.dtu-wrapper{
  display: flex;
}
.direct-col{
  width: 50%;
  padding: 0 1em;
}
.direct-it-first, .direct-it-second{
  width: 100%;
}
.dc-images{
  max-width: 20em;
  max-height: 20em;
  margin: auto;
}
.dc-images .img-square img{
  border-radius: 5px;
}
.direct-title{
  font-size: var(--fsize2);
  font-weight: 700;
  text-align: center;
  padding: .5em 0;
  line-height: 1;
}
.direct-title-list{
  text-align: center;
}
.dtl-item{
  color: #0073FF;
  border: 1px solid #0073FF;
  margin: auto;
  margin-bottom: .5em;
  max-width: 20em;
  padding: .25em;
  border-radius: 5px;
  font-size: var(--fsize1);
}
.dtl-item:hover{
  text-decoration: underline;
}
.direct-text{
  text-align: justify;
  font-size: var(--fsize1);
}
.section-moretext{
  word-wrap: break-word;
}
.moretext{
  display: block;
}
.moreless-button, .moreless-button:hover{
  color: #0073FF;
  text-decoration: underline;
  display: none;
}
.moretext-redeem{
  display: none;
}
.moreless-button-redeem, .moreless-button-redeem:hover{
  color: #0073FF !important;
  cursor: pointer;
  text-decoration: underline !important;
  display: block;
}
.dc-item{
  padding-bottom: 1.5em;
}
.direct-subtitle{
  padding-bottom: .5em;
  margin-left: -1em;
}
.step-number{
  background: var(--orange);
  color: #FFF;
  padding: .5em 1em;
  margin-right: .5em;
  border-radius: 0 0 10px 0;
}
.dtu-input{
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.dtu-input .dtui-d{
  width: 30%;
  padding-left: 2px;
  padding-right: 2px;
}
.dtu-input input{
  font-weight: 500;
}
.dtu-input input::placeholder{
  color: #CCC;
  font-weight: 300;
  font-size: var(--fsmall);
  text-align: center;
}
.dtu-input img{
  height: 2.5em;
}
.dtui-d input{
  border: 1px solid #B4B7B9;
  color: rgb(241, 6, 225);
  font-weight: 700;
}
.dtui-d input::placeholder{
  color: #B4B7B9;
  font-weight: 500;
}
.dtui-d input:active{
  border: unset;
}
.dtui-4{
  display: flex;
  align-items: baseline;
  width: 100%;
}
.dtui-4-col{
  width: 50%;
}
.dtui-4-col .dtui-d{
  width: 100%;
  margin-bottom: .25em;
}
.selectbox .s-hidden{
  visibility: hidden;
  padding-right: 10px;
}
.selectbox .select{
  cursor: pointer;
  display: inline-block;
  position: relative;
  border: 1px solid #B4B7B9;
  border-radius: 5px;
  margin: 0;
  font-size: var(--fsize1);
}
.selectbox .styledSelect{
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
  display: flex;
  align-items: center;
  right: 0;
  bottom: 0;
  left: 0;
  color: #555;
  background-color: white;
  padding: 0 10px;
}
.selectbox .styledSelect:after{
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-color: #555 transparent transparent transparent;
  position: absolute;
  top: 9px;
  right: 6px;
}
.selectbox .options{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
  border: 1px solid #ccc;
  background-color: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  height: 16.5em;
  overflow: scroll;
}
.selectbox .options li{
  margin: 0 0;
  padding: 0 10px;
}
.selectbox .options li:hover{
  background-color: #39f;
  color: white;
}

.help-wrapper{
  position: relative;
}
#btnHelp.bounce{
  animation: bounce 1.25s infinite;
  -webkit-animation: bounce 1.25s infinite;
  -moz-animation: bounce 1.25s infinite;
  -o-animation: bounce 1.25s infinite;
}
@-webkit-keyframes bounce{
  0%, 20%, 50%, 80%, 100%{-webkit-transform: translate(0,0);}
  40%{-webkit-transform: translate(0,-15px);}
  60%{-webkit-transform: translate(0,-5px);}
}
@-moz-keyframes bounce{
  0%, 20%, 50%, 80%, 100%{-moz-transform: translate(0,0);}
  40%{-moz-transform: translate(0,-15px);}
  60%{-moz-transform: translate(0,-5px);}
}
@-o-keyframes bounce{
  0%, 20%, 50%, 80%, 100%{-o-transform: translate(0,0);}
  40%{-o-transform: translate(0,-15px);}
  60%{-o-transform: translate(0,-5px);}
}
@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{transform: translate(0,0);}
  40%{transform: translate(0,-15px);}
  60%{transform: translate(0,-5px);}
}
.help-popup{
  position: absolute;
  padding: .25em;
  border: 1px solid #636363;
  background: #FFF;
  border-radius: 5px;
  top: 3.5em;
  right: 0;
  width: 600%;
  height: auto;
  max-width: 340px;
  display: none;
}
.help-popup img{
  width: 100%;
  height: auto;
}

.dtu-text{
  font-size: var(--fsize1);
}
.dtu-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
  padding-left: 0;
}
.dtu-grid label, .dtu-grid-pay label{
  position: relative;
  list-style: none;
  border: 1px solid var(--darktext);
  font-size: var(--ftin2);
  padding-top: 1em;
  padding-bottom: 1.1em;
  margin-bottom: -0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
label.selected{
  background: #DBDDDF;
}
.input-text34{
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
.dtu-grid-pay{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-gap: .4em;
  padding-left: 0;
}
.dtu-grid-pay label{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
label.unselect{
  color: #CCC;
  border: 1px solid #CCC;
}
label.unselect:active, label.unselect:hover{
  transform: scale(1);
  color: #CCC;
}
label.hot-deal{
  display: table;
}
label.hot-deal div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
label.hot-deal div:nth-child(1){
  margin-bottom: .25em;
}
label.hot-deal div:nth-child(2){
  margin-bottom: 0;
}
.hd-text{
  background: #D02F2F;
  color: #FFF;
  padding: .5em 1em;
  border-radius: 5px;
  font-weight: 700;
  font-size: var(--fsize1);
}
.hd-num{
  color: #D02F2F;
  font-size: var(--fsize3);
  font-weight: 700;
}
li.harga-best-deal .hd-text{
  background: #24A411;
}
li.harga-best-deal .hd-num{
  color: #24A411;
}
.next-btn{
  width: 100%;
  background: rgb(153, 0, 255);
  color: #FFF;
  padding: 1.25em 0;
  font-weight: 500;
}


.a-box {
  display: inline-block;
  width: 260px;
  text-align: center;
}


.text-container {
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  padding: 120px 20px 20px 20px;
  border-radius: 20px;
  background: #fff;
  margin: -120px 0px 0px 0px;
  line-height: 19px;
  font-size: 14px;
}
.text-containerr {
  margin: 10px 0px 60px 0px;
  background: #fff;
  line-height: 15px;
  font-size: 14px;
}

.text-container h3 {
  margin: 60px 0px 10px 0px;
  color: #cd04ff;
  font-size: 18px;
}
.text-containerr h3 {
  color: #cd04ff;
  font-size: 18px;
}
.next-btn:hover{
  color: #FFF;
}
/*end direct top up*/

/*voucher games*/
.how-redeem{
  width: 50%;
  padding: 1em;
  margin-top: 1em;
}
.redeem-title{
  font-size: var(--fsize2);
  font-weight: 700;
  line-height: 1;
}
.redeem-text{
  background: #E4E4E4;
  font-size: var(--fsize1);
  padding: 1em;
  padding-left: 2em;
  border-radius: 5px;
  margin-top: 1em;
}
.link-redeem, .link-redeem:hover{
  color: #0073FF;
  text-decoration: underline;
}
/*end voucher games*/

/*thank*/
.white-wrapper.thank{
  padding: 1em;
}
.thank-title{
  color: var(--orange);
  text-align: center;
  padding: .25em 0 1em;
  font-size: var(--fsize2);
  font-weight: 500;
  border-bottom: 1px solid rgba(65,73,98,.2);
}
.thank-body{
  font-size: var(--fsize1);
  padding: 2em 2em 1em;
}
.thank-body span{
  color: red;
}
.thank .next-btn, .thank .white-btn{
  max-width: 20em;
  margin: auto;
  display: block;
  margin-top: 3em;
}
.thank-snk{
  background: #FFF;
  color: var(--darktext);
  margin-top: 2em;
  text-align: center;
  font-size: var(--fsmall);
  line-height: 1.2;
  padding: 1em;
}
.thank-snk a{
  color: #0073FF;
}
/*end thank*/

/*credit card*/
.credit-card{
  background: #FFF;
  border-radius: 5px;
  margin-top: 1em;
  color: var(--darktext)
}
.credit-card.container{
  padding-left: 0;
  padding-right : 0;
}
.ccard-title{
  color: var(--orange);
  font-size: var(--fsize2);
  font-weight: 700;
  text-align: center;
  padding: 1em;
}
.ccard-top{
  background: #F5F5F5;
  padding: 1em;
  border-top: 1px solid #E3E4E8;
  border-bottom: 1px solid #E3E4E8
}
.ccard-top .mbb-top{
  max-width: 30em;
  margin: auto;
}
.ccard-outer{
  display: flex;
}
.ccard-col{
  width: 50%;
  padding: 0 1em;
}
.ccard-inner{
  padding: 2em 1em;
  position: relative;
}
.cc-p-left{
  font-size: var(--fsize1);
}
.cc-p-right{
  font-size: var(--fsize1);
  color: var(--orange);
}
.cc-all{
  position: absolute;
  bottom: -3.5em;
}
.cc-all img{
  width: 50%;
  margin: auto;
  display: block;
}
.cca-left{
  display: block;
}
.cca-right{
  display: none;
}

.credit-card .input-group label{
  color: #CCC;
}
.credit-card .input-group input[type=text]{
  font-weight: 700;
}
.cc-form input{
  border: 1px solid var(--darkbtn);
  font-weight: 700;
  font-size: var(--fsize1);
}
.cc-form input::placeholder{
  color: #CCC;
  font-weight: 300;
}
.card-wrapper{
  width: 100% !important;
}
.jp-card-container{
  transform: scale(0.6);
  z-index: 0 !important;
}
.jp-card .jp-card-front .jp-card-lower{
  width: 90% !important;
  left: 6% !important;
}
.buy-cc-btn{
  padding: 1em 0 2em;
}
.buy-cc-btn .btn{
  max-width: 20em;
  margin: auto;
  display: block;
}
/*select*/
.select-hidden{
  display: none;
  visibility: hidden;
  padding-right: 10px;
}
.select{
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: var(--darktext);
  width: 100%;
  height: 40px;
  margin: 1em auto 0;
}
.select-styled{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #F5F5F5;
  padding: 8px 15px;
}
.select-styled:after{
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}
.select-styled:hover{
  background-color: #F5F5F5;
}
.select-styled:active, .select-styled.active{
  background-color: #F5F5F5;
}
.select-styled:active:after, .select-styled.active:after{
  top: 9px;
  border-color: transparent transparent #333 transparent;
}
.select-options{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #F5F5F5;
}
.select-options li{
  margin: 0;
  background: #EFEFEF;
  padding: 8px 0;
  text-indent: 15px;
  font-size: var(--fsize1);
}
.select-options li:hover{
  color: #000;
  background: #FFF;
  font-weight: 500;
}
.select-options li[rel="hide"]{
  display: none;
}
.country{
  font-size: .95em;
  padding: .25em .5em;
  font-weight: 700;
  margin-bottom: -10px;
}
/*end select*/
/*end credit card*/

/*finish cc*/
.thank-cc-wrapper, .virtual-wrapper{
  max-width: 30em;
  margin: auto;
}
.tb-thank-cc{
  display: block;
  align-items: center;
}
.thank-cc-col{
  width: 100%;
}
.thank-cc .white-btn, .thank-cc .next-btn{
  margin: 1em auto;
}
.white-btn{
  color: var(--darkbtn);
  border: 2px solid var(--darkbtn);
  width: 100%;
  padding: 1.25em 0;
  font-weight: 700;
}
.tcc-top{
  font-size: var(--fsmall);
  color: #A0A0A0;
}
.tcc-bottom{
  padding-bottom: .5em;
  font-weight: 500;
}
/*end finish cc*/

/*virtual*/
.virtual-wrapper .direct-col{
  width: 100%;
}
.virtual-wrapper .dtu-grid{
  grid-template-columns: repeat(4,1fr);
}
.virtual-wrapper .dtu-grid img{
  width: 100%;
}
.virtual-item{
  border-bottom: 1px solid #D9DBE0;
  margin-bottom: 1em;
}
.virtual-head{
  font-size: var(--fsize2);
  font-weight: 500;
  padding-bottom: .5em;
}
.virtual-text{
  font-size: var(--fsize1);
  line-height: 1;
}
/*new flow va*/
.dropdown-va{
  padding: .5em .5em 1em;
  border-bottom: 1px solid #b9b9b9;
  margin-bottom: .5em;
}
.dropdown-va .dtu-grid img{
  width: 100%;
  max-height: 3em;
  object-fit: contain;
}
.dropdown-va .dtu-grid li{
  padding: .5em 0;
}
.dropdown-va .dtu-grid li:hover{
  border: 1px solid #0073FF;
  background: #ECECEC;
}
/*end new flow va*/
/*end virtual*/

/*pay with*/
.paywith{
  padding: 0;
}
.container.paywith{
  max-width: 30em;
}
.paywith .mb-head{
  position: relative;
  padding: 2em 0;
}
.back-btn{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0,-50%);
  z-index: 1;
}
.back-btn:active{
  transform: scale(.9) translate(0,-50%);
}
.back-btn img{
  width: 1.25em;
}
.pw-btn{
  margin-top: 1.5em;
}
.pw-btn .btn{
  margin: .5em 0;
}
.success{
  font-weight: 700;
}
.unsuccess{
  color: red;
  font-weight: 700;
}
/*modal*/
.modal-pay{
  color: var(--darkbtn);
}
.mp-image{
  position: relative;
  padding-bottom: 70%;
}
.mp-image img{
  width: 15em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.mp-notif{
  text-align: center;
  font-size: var(--fsize1);
  padding: 0 2em 2em;
}
.mp-text{
  font-size: var(--fsmall);
  background: #F5F5F5;
  border-top: 1px solid #CFCFCF;
  border-bottom: 1px solid #CFCFCF;
  padding: 1em 1.5em;
}
.modal-pay .white-btn{
  width: 90%;
  margin: 1em auto;
}
/*end modal*/
/*end pay with*/

/*text page*/
.text-page{
  margin-top: 1em;
  color: var(--darktext);
}
.text-page .promo-snk{
  border-radius: 5px;
}
.text-page .promo-snk-title{
  text-align: center;
  font-weight: 500;
}
.btn-snk{
  font-size: var(--fsize1);
  padding: 1.5em 0 .5em;
}
.btn-snk a{
  color: #0073FF;
}
.snk-text{
  padding: 0 1em;
}
/*end text page*/

/* redeem */
.ribbon{
  position: absolute;
  top: -1px;
  right: -1px;
}
.ribbon img{
  width: 3.4em;
}
.wrapper-kode-voucher{
  background: #DBDDDF;
  padding: .75em .75em 3em;
  border-radius: 10px;
  margin-bottom: 1.25em;
}
.wrapper-kode-voucher p{
  font-size: var(--fsize1);
}
.wkv-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wkvi-left{
  width: 65%;
  height: 2.75em;
  padding-right: .75em;
}
.wkv-inner input{
  color: #000;
  font-weight: 700;
  margin-right: .5em;
  height: 100%;
  border-radius: 6px;
}
.wkv-inner input::placeholder{
  font-size: var(--fsize1);
  font-weight: 300;
}
.wkvi-right{
  position: relative;
  width: 35%;
  height: 2.75em;
}
.wkv-inner .btn{
  background: var(--orange);
  color: #FFF;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.kod-vou-benar{
  display: none;
  width: 3em;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
}
.kod-vou-benar img{
  width: 100%;
}
.kod-vou-salah{
  display: none;
  position: absolute;
  color: red;
  margin-top: 10px;
  font-size: var(--fsize1);
}









.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}




@media (max-width: 1000px){
	header{
		padding: 7px 4%;
		transition: .2s;
	}
	header.sticky{
		padding: 7px 4%;
		transition: .2s;
	}
	section{
		padding: 80px 4%;
		transition: .1s;
	}
}

@media (max-width: 670px){

	.header-icons i{
		position: relative;
    top: 1px;
		left: 10px;
		font-size: 10px;
		margin-right: 20px;
		padding: 10;
		background: rgb(144, 8, 228);
		border-radius: 4px;
		cursor: pointer;
		margin-top: 1px;
	}

}
/* end redeem */


@media only screen and (max-width: 992px){
  .dtu-input .dtui-d{
    width: 100%;
  }
}
@media only screen and (max-width: 768px){
  .dtu-wrapper{
    display: block;
  }
  .direct-col{
    width: 100%;
  }
  .direct-inner{
    display: flex;
    padding: 0;
    padding-bottom: 1em;
  }
  .direct-it-first{
    width: 30%;
  }
  .direct-it-second{
    width: 70%;
    padding-left: 1.5em;
  }
  .direct-title{
    text-align: left;
    padding: 0 0 .5em;
  }
  .direct-subtitle{
    margin-left: -2em;
  }
  .how-redeem{
    width: 100%;
  }
  .moretext{
    display: none;
  }
  .moreless-button, .moreless-button:hover{
    display: block;
  }
  .virtual-wrapper .dtu-grid{
    grid-template-columns: repeat(3,1fr);
  }
  .ccard-outer{
    display: block;
  }
  .ccard-col{
    width: 100%;
  }
  .cca-left{
    display: none;
  }
  .cca-right{
    display: block;
    bottom: 0;
  }

  .footer{
    display: block;
  }
  .footer div{
    width: 100%;
  }
  .footer-tbs{
    padding: .5em 0 1em;
  }
  .footer-text{
    text-align: center;
    border-top: 1px solid #3A3E44;
    padding: 1em 0;
  }
  .footer-cs img{
    width: 7em;
  }
  .footer-bottom{
    display: block;
    text-align: center;
  }
  .footer-bottom img{
    margin: auto;
    display: block;
    margin-bottom: 1em;
  }
}

@media only screen and (max-width: 576px){

  .wrapper-home{
    padding-top: 0;
  }
  .header{
    justify-content: center;
  }
  .header-home .header{
    justify-content: space-between;
  }
  .header-sl{
    display: none;
  }
  .header-home .header-sl{
    display: none;
  }
  .promo-details-banner{
    position: relative;
    padding-bottom: 112%;
  }
  .promo-details-banner img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  .periode-promo img{
    height: 2em;
  }
  .periode-promo span:nth-child(2) div:nth-child(1){
    font-size: .85em;
  }
  .periode-promo span:nth-child(2) div:nth-child(2){
    font-size: .9em;
    line-height: 1;
  }
  .promo-details .ccc-rct{
    display: none;
  }
  .ccc-title{
    /* font-size: var(--fsize2); */
    font-size: 1.375em;
    line-height: 1;
    padding-bottom: .5em;
  }
  .ccc-text{
    font-size: 0.875em;
  }
  .promo-details .carousel-cover-cpt{
    display: none;
    position: relative;
    background: #FFF !important;
    color: var(--darktext);
    padding: 1em;
  }
  .promo-title{
    padding: .25em .75em;
  }
  .triple-promote .promoted-item{
    width: 25%;
    margin: auto .375em;
  }
  .multiple-promote{
    grid-template-columns: repeat(3,33.33%);
    padding: 0 1em;
  }
  .multiple-promote .promoted-item{
    padding: 0 .35em;
  }
  .promo-head{
    display: block;
  }
  .periode-promo{
    justify-content: center;
    padding-bottom: 1em;
  }
  .snk-promo{
    display: flex;
    justify-content: center;
  }
  .promoted{
    background: transparent;
    color: #FFF;
  }
  .header-home{
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .banner-cover.container, .content-white .container{
    padding: 0;
    margin: 0;
  }
  .white-wrapper{
    padding-top: 0;
    padding-bottom: 1em;
  }
  .big-banner{
    display: none;
  }
  .small-banner{
    display: block;
  }
  .grid-wrap{
    grid-template-columns: repeat(3,33.33%);
  }
  .direct-col{
    padding: 1em 0;
  }
  .direct-content{
    padding: 1em 15px 3em;
    padding-top: 0;
  }
  .redeem-text{
    background: none;
    padding: 0;
    padding-left: 1em;
  }
  .thank-wrapper{
    padding: 0 1em 4em;
  }
  .thank-snk.container{
    width: unset;
    margin: 2em -15px 0;
  }
  .thank-body{
    padding: 2em 0em 1em;
  }
  .tb-thank-cc{
    display: block;
  }
  .thank-cc-col{
    width: 100%;
  }
  .modal-dialog{
    margin: 1rem;
  }
  .content-pay{
    padding: 0 1em 3em;
  }
  .text-page{
    padding: 0 1em 1em;
  }
  .promo-snk{
    padding: 2em 1em;
  }
  .dtl-item{
    font-size: var(--fsmall);
  }

  .direct-inner{
    display: block;
  }
  .direct-it-first, .direct-it-second{
    width: 100%;
  }
  .direct-it-second{
    padding-left: 0;
  }
  .dc-images{
    max-width: 11em;
    max-height: 11em;
  }
  .direct-title{
    padding: 1em 0 .5em;
    text-align: center;
  }
  .dtu-grid{
    grid-template-columns: repeat(2,1fr);
  }
  .modal-ewall .modal-dialog{
    max-width: unset;
  }
  .wrapper-kode-voucher{
    border-radius: 0;
    margin-left: -1em;
    margin-right: -1em;
  }
  .ribbon img{
    width: 4em;
  }
}