body {
  font-family: 'Montserrat', sans-serif;
  line-height: normal;
  background: #000000;
  padding-top: 90px;
  font-size: 11pt;
  touch-action: manipulation;
}
body:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 400px;
  left: 0;
  top: 90px;
  background: url(images/bg-header.jpg)no-repeat;
  background-size: 100% auto;
}
body#login-page:before {
  display: none;
}
a {
  outline: 0 !important;
}
@media(max-width:992px){
  table.dataTable td, table.dataTable th {
    white-space: nowrap;
  }
  body{
    padding-top: 73px;
  }
  body:before {
    top: 69px;
    height: auto;
    padding-top: 38%;
    background-position: center;
    background: url(images/bg-header-mobile.png);
    background-size: 100% 100%;
  }
}

/*HEADER*/
nav.navbar {
  background: #000 !important;
  padding: 15px 0;
  box-shadow: 0 -80px 70px 60px #f5da36;
}
a.navbar-brand img {
  height: 50px;
}
.navbar-expand-md .navbar-collapse {
  flex-grow: unset;
}
nav a.nav-link:hover,nav a.nav-link:focus {
  background: #f5da36;
  color: #272730;
}
nav a.nav-link {
  font-size: 11pt;
  color: #f5da36;
  border-radius: 50px;
  padding: 9px 19px !important;
  display: block;
  font-weight: 500;
  margin-left: 10px;
}
.login-action-button {
  background: #f5da36;
  padding: 0 10px;
}
.login-action-button a {
  font-size: 11pt;
  padding: 9px 15px;
  text-decoration: none;
  color: #272730;
  font-weight: 500;
}
button.navbar-toggler {
  background: #f5da36;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  margin-right: 10px;
}
button.navbar-toggler span {
  width: 20px;
  background: #000;
  position: relative;
  height: 3px;
  margin: 3px 0;
  border-radius: 5px;
  display: block;
  vertical-align: middle;
}

/*popup copy*/
.custom-alert {
  position: fixed;
  width: 350px;
  background: #fff;
  top: -10px;
  opacity: 0;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  padding: 14px 20px 14px 56px;
  border-radius: 10px;
  font-size: 12pt;
  transition: 0.2s ease-in-out;
  font-weight: 500;
}
.custom-alert.active {
  top:20px;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.custom-alert .check-icon:before {
  content: "";
  width: 14px;
  height: 9px;
  border-bottom: 4px solid #fff;
  border-left: 4px solid #fff;
  display: block;
  position: absolute;
  transform: rotate(-45deg);
  top: 6px;
  left: 5px;
}
.custom-alert .check-icon {
  width: 24px;
  height: 24px;
  border: 0;
  background: #05d515;
  display: block;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
@media(max-width:992px){
  .login-action-button {
    background: #f5da36;
    padding: 0 5px;
    /* border-radius: 8px !important; */
  }
  header .search-form {
    position: absolute;
    left: 0;
    width: 100%;
    top: 100%;
    background: #000;
    padding: 2px 15px 17px;
    display: none;
  }
  a.navbar-brand img {
    height: 28px;
  }
  .login-action-button {
    margin: 0 !important;
  }
  a.navbar-brand {
    height: auto;
    margin: 0;
    display: block;
  }
  .login-action-button a {
    padding: 9px 10px;
  }
  div#navbarCollapse {
    position: absolute;
    width: 70%;
    z-index: 1;
    top: 0;
    height: 100vh;
    left: 0;
    background: #1a1a1a;
    border-radius: 0 0 15px;
    padding: 0 0;
    display: block;
    transform: translateX(-100%);
    transition: all 0.2s ease;
  }
  div#navbarCollapse.show {transform: translateX(0%);transition: all 0.2s ease;}
  nav a.nav-link {
    padding: 10px 19px !important;
    border-radius: 6px;
    margin-right: 10px;
  }
  nav a.nav-link.text-red {
    color: #d63f3e;
}
  nav a.nav-link i {
    font-size: 13pt;
    font-weight: normal !important;
    margin-right: 7px;
}
  div#navbarCollapse .navbar-brand {
    padding: 19px 30px;
    border-bottom: 2px solid #f5da36;
  }
  div#navbarCollapse ul.navbar-nav {
    padding: 13px 0 13px;
    margin: 0 !important;
  }
  .menu-active .background-layer {
    position: fixed;
    backdrop-filter: blur(6px);
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.1);
  }
}


/*SECTION HERO*/
section#hero {
  padding-top: 50px;
}
section#hero .owl-theme .owl-dots .owl-dot span {
  width: 54px;
  height: 3px;
}
section#hero .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  font-size: 52pt;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 70px;
  transform: translateY(-50%);
  line-height: 0;
  margin-top: -20px !important;
  color: #fff;
}
div#hero-slide .active img {
  -webkit-filter: grayscale(0%) contrast(100%) brightness(100%);
  filter: grayscale(0%) contrast(100%) brightness(100%);
}
div#hero-slide img {
  -webkit-filter: grayscale(100%) contrast(140%) brightness(50%);
  filter: grayscale(100%) contrast(140%) brightness(50%);
}
div#hero-slide .owl-dots {
  margin-top: 15px;
}
.owl-theme .owl-dots .owl-dot span, .owl-theme .owl-dots .owl-dotspan {
  background: #555;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #fff;
}
@media(max-width:992px){
  section#hero {
    padding-top: 20px;
  }
  section#hero .owl-nav.disabled {
    display: none;
  }
  section#hero .owl-nav{
    padding: 0;
  }
  section#hero .owl-theme .owl-dots .owl-dot span {
    width: 34px;
    height: 2px;
    margin: 0 4px;
  }
  div#hero-slide .owl-dots {
    margin-top: 6px;
    margin-bottom: 15px;
  }
}

/*SEARCH CATALOG*/
div#dropsearchdown input {
  border-radius: 25px;
  padding-left: 16px;
  border: 0;
  /* font-size: 11pt; */
  width:250px;
  padding-top: 8px;
  padding-bottom: 8px;
}
div#dropsearchdown button {
  position: absolute;
  right: 3px;
  background: transparent;
  border: 0;
  z-index: 0;
  background: #fff;
  padding: 4px 10px;
  border-radius: 0 30px 30px 0;
}
div#listProduk {
  position: relative;
}
@media(max-width:992px){
  div#dropsearchdown input {
    /* border-radius: 20px; */
    padding-left: 20px;
    padding: 7px 20px;
    font-size: 11pt;
}
  button#toggleButton {
    padding: 9px 11px !important;
  }
  div#dropsearchdown button {
    padding: 6px 10px;
  }
}


/*CEK TRX*/

.table-detailtrx tr:first-child td {
  border-top: 0;
}
.table-detailtrx tr:last-child td {
  border-bottom: 0;
}
.table-detailtrx {
  border: 2px solid #363636;
  border-radius: 10px;
}
.table-detailtrx td {
  background: transparent;
  color: #fff;
  border: 2px solid #363636;
  border-left: 0;
  border-right: 0;
  padding: 10px 20px;
}
button.rounded-3 {
  border-radius: 50px !important;
}

/*TAB CATALOG*/
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
  background: transparent;
  border-color: #f5da36 !important;
  color: #f5da36;
  /* border-radius: 0; */
  background: transparent;
  border-right: 1px solid #bbb;
}
.nav-tabs .nav-link {
  color: #fff;
  font-weight: 500;
  border-radius: 25px;
  border-color: #fff;
  color: #aaa;
  background: transparent;
  border: 1px solid #666;
  margin: 0 6px;
}
@media(max-width:992px){
  ul#catalogTab {
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: start !important;
    overflow-x: auto;
    padding-bottom: 11px;
  }
}

/*CATALOG*/
#catalogTabContent h2 {
  color: #f5da36;
  font-weight: 700;
  font-size: 19pt;
  text-transform: uppercase;
  margin: 40px 0 30px;
}
div#catalogTabContent a:hover img {
  transform: scale(1.1);
}
div#catalogTabContent a {
  position: relative;
  display: block;
}
div#catalogTabContent a:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
  transform: scale(0.5);
  opacity: 0.4;
  border-radius: 8px;
}
div#catalogTabContent a:hover:before {
  transform: scale(1.5);
  opacity: 0;
  border-radius: 30px;
}
div#catalogTabContent img {
  border-radius: 18px;
  transition: all 0.5s ease;
  position: relative;
}
div#catalogTabContent .row {
  --bs-gutter-x: 2rem;
}
div#catalogTabContent .row > div {
  margin-bottom: 20px;
}
@media(max-width:992px){
  div#catalogTabContent .row > div {
    margin-bottom: 10px;
  }
  div#catalogTabContent .row {
    --bs-gutter-x: 1.2rem;
  }
  div#catalogTabContent img {
    border-radius: 10px;
  }
  #catalogTabContent h2 {
    font-size: 14pt;
  }
}

/*FOOTER*/
#footer-catalog {
  background: #151515;
  margin-top: 60px;
  margin-bottom: -80px;
}
#footer-catalog h3:first-child{
  margin-top: 0 !important;
}
#footer-catalog h3{
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.5rem;
  margin-top: 3rem!important;
}
#footer-catalog p,#footer-catalog p *{
  font-family: 'Montserrat', sans-serif !important;
  font-size:10pt !important;
  color:#fff !important;
}
footer#footer {
  background: #151515;
  margin-top: 80px;
}
footer#footer .footer-bottom {
  color: #fff;
  background: url(images/bg-footer.jpg)no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 30px;
}
footer#footer a{
  color: #fff;
  text-decoration: none;
}
footer#footer .footer-bottom h3 {
  color: #f5da36;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14pt;
  margin: 0 0 14px !important;
}
.list-social a {
  background: #f5da36;
  width: 33px;
  height: 33px;
  line-height: 26px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000 !important;
  font-size: 16pt;
  margin-right: 4px;
}
img.footer-logo {
  width: 290px;
  margin-bottom: 20px;
}
@media(max-width:992px){
  footer#footer {
    margin-top: 40px;
    font-size: 13px;
  }
  #footer-catalog {
    margin-bottom: -40px!important;
  }
  .point-event-scrollto {
    top: -115px !important;
  }
  .payment-methode > div {
    width: calc(25% - 0.4rem);
    text-align: center;
  }
  img.footer-logo {
    width: auto;
    height: 60px;
  }
  footer#footer h3{
    font-size: 13pt;
  }
  .copyright{
    font-size: 10.5px;
    padding-left: 0;
    padding-right: 0;
  }
  .payment-methode img {
    max-width: 100%;
  }
}


/*DETAIL CATALOG*/
section#detail-catalog {
  padding-top: 40px;
}
.widget-catalog-detail {
  margin-top: -100px;
}
section#banner-catalog img {
  box-shadow: 0 0px 60px -20px #f5da36;
  border-radius: 10px;
}
.shadow-image {
  position: absolute;
  top: 15px;
  left: -8px;
  width: calc(100% - 1.5rem);
  filter: grayscale(100%);
  opacity: 0.7;
}
.text-yellow{
  color: #f5da36 !important;
}
.text-sm {
  font-size: 10pt;
}
.text-xs {
  font-size: 12px;
}
.fw-500{
  font-weight: 500;
}
.bg-yellow{
  background: #f5da36;
}
a.bg-yellow:hover,button.bg-yellow:hover,button.bg-yellow.show,a.bg-yellow:active,button.bg-yellow:active{
  background: #85771d !important;
}
.swal-modal {
  background: #151515;
  color: #fff !important;
}
.swal-content {
  margin-top: 10px !important;
}
.swal-title {
  color:#fff;
  font-size: 1.25rem!important;
}
.swal-content * {
  font-size: 10pt;
  color: #fff !important;
}
.swal-text {
  color: #Fff;
  font-size: 10pt;
}
.swal-icon--error {
  border: 3px solid #f00 !important;
  width: 73px;
  height: 74px;
}
.swal-icon:first-child {
  margin-top: 26px;
  margin-bottom: 10px;
}
.swal-icon--error__line{
  background: #f00 !important;
  height:3px !important;
  width:41px;
}
button.swal-button.swal-button--confirm {
  background: #f5da36 !important;
  color: #000 !important;
  padding: 7px 24px !important;
}
.swal-footer{
  text-align: center !important;
}
.swal-icon--error{
  border:3px solid #f00 !important
}
.modal {
  background: rgba(255, 255, 255, 0.3) !important;
}
.bg-grey{
  background: #34373B !important;
}
.table-order td,.table-order tr{
  border: 0;
  background: #34373B !important;
  color: #fff !important;
}
.bg-blackgrey{
  background: #151515;
}
#detail-catalog a{
  color: #f5da36;
  text-decoration: none;
}
.title-card-text {
  font-weight: bold;
  font-size: 16px;
  margin-left: 72px;
}
.position-absolute.title-card-icon i {
  color: #B38700;
  font-size: 16px;
  rotate: -45deg;
}
.card-widget-catalog {
  background: #34373B;
  padding: 13px !important;
}
.title-card-icon {
  margin-left: 20px;
  margin-bottom: 16px;
  background-color: #F5DA36;
  rotate: 45deg;
  width: 38px;
  height: 38px;
  border:3px solid #fff;
  top: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.data-detail-catalog .title-card-icon span{
  color: #000000;
  font-size: 24px;
  rotate: -45deg;
  font-weight: bold;
}
#caraBayar .accordion-item:not(:first-of-type) {
  border: 1px solid !important;
}
.accordion-button::after{
  filter: invert(1) !important;
}
input#account_desc {
  padding: 12px 19px !important;
  border-radius: 20px !important;
  background: #666 !important;
  color: #ffe96f !important;
  opacity:1;
  -webkit-text-fill-color: #ffe96f !important;
  /* color: #ffd800 !important */
}
.data-detail-catalog .title-card-text {
  font-size: 15pt !important;
  padding: 1px 0;
}
div#item_pilihan_container img{
  /* width: 40px; */
  height: 40px;
  filter: grayscale(100%);
  /* object-fit: cover; */
}
div#item_pilihan_container > .col-6 > div {
  font-size: 12px !important;
  cursor: pointer;
  font-weight: bold;
  background-color: #CACACA;
  color: black;
  padding: 12px 14px !important;
  border: 2px solid transparent;
}
div#item_pilihan_container p {
  margin-bottom: 5px;
}
.progress-container {
  width: 100%;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #ffc107;
}

@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}
div#id_info.active > div:nth-child(1) {
    display: none !important;
}

div#id_info > div:nth-child(1) {
    display: flex !important;
}
div#id_info.active > div:nth-child(2) {
    display: block !important;
}

div#id_info > div:nth-child(2) {
    display: none !important;
}
div#id_info {
    padding-bottom: 7px;
}
.rank_icon {
    width: 1.6rem;
    height: 1.6rem;
    margin: -5px 0 -4px;
}
.userinfo .avatar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    top: -0.5px;
}
.username.userthree p {
    margin: 0 0 5px;
}
.userinfo .avatarBg {
    position: absolute;
    top: 0;
    left: -0.5px;
    width: 5.2rem;
    height: auto;
}
.userinfo .avatar_wrap {
    position: relative;
    width: 5.2rem;
    height: 5.2rem;
  margin-right:15px;
    padding: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0;
}
.username.userthree p {
    margin: 2px 0 5px;
}
.userinfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.point-event-scrollto {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -130px;
}
div#isi_ulang_instan_container img {
  /* width: 40px; */
  height: 32px;
  object-fit: cover;
  /* filter: grayscale(100%); */
}
div#isi_ulang_instan_container > .col-6 > div {
  font-size: 12px !important;
  cursor: pointer;
  font-weight: bold;
  background-color: #CACACA;
  color: black;
  padding: 12px 14px 10px !important;
  border: 2px solid transparent;
}
div#isi_ulang_instan_container p {
  margin-bottom: 5px;
  padding: 0 !important;
}
div#isi_ulang_instan_container p:last-child,div#item_pilihan_container p:last-child {
  margin: 0;
  padding: 2px 0 3px 13px !important;
  margin-left: -13px;
}
div#isi_ulang_instan_container > .col-6 > label a, div#item_pilihan_container > .col-6 > label a {
    position: absolute;
    width: 100%;
    height: 100%;
}
div#isi_ulang_instan_container > div {
  margin-bottom: -7px;
}
div#isi_ulang_instan_container .check-icon,div#item_pilihan_container .check-icon{
  display: none;
}
div#isi_ulang_instan_container > .col-6 > label,div#item_pilihan_container > .col-6 > label{z-index: 1;cursor: pointer;}
div#isi_ulang_instan_container > .col-6 > input,div#item_pilihan_container > .col-6 > input{
  position: absolute;
  width: 0;
  height: 0;
}
div#isi_ulang_instan_container > .col-6 > input:checked ~ div img,div#item_pilihan_container > .col-6 > input:checked ~ div img{
  filter: grayscale(0);
}
div#isi_ulang_instan_container > .col-6 > input:checked ~ div,div#item_pilihan_container > .col-6 > input:checked ~ div{
  cursor: not-available;
  font-weight: bold;
  background-color: #F5DA36;
  border: 2px solid white;
  box-shadow: 0 0 12px white;
  overflow: hidden;
  color: black;
  position: relative;
  -webkit-animation-name: shadow;
  animation-name: shadow;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
div#isi_ulang_instan_container > .col-6 > input:checked ~ div .check-icon,div#item_pilihan_container > .col-6 > input:checked ~ div .check-icon{
  display: block;
}
div#isi_ulang_instan_container > .col-6 > input:checked ~ div p:last-child,div#item_pilihan_container > .col-6 > input:checked ~ div p:last-child{
  margin-bottom: 0px;
  background-color: #B38700;
  background-image: linear-gradient(to right, #B38700, #F5DA36);
  color: #ffffff;
}
.check-icon{
  right: 0px;
  height:10px; 
  border-right:solid 20px white;
  border-bottom:solid 20px transparent;
  border-left:solid 20px transparent;
}
@keyframes shadow {
  0% {
    box-shadow: 0 0 2px 0px #f0dd62;
  }
  100% {
    box-shadow: 0 0 22px 5px #f0dd62;
  }
}

@keyframes glitch {
  0% {
    left: -75px;
  }
  100% {
    left: 1000%;
  }
}
.content-buy .btn-order{overflow: hidden;position:relative}
div#isi_ulang_instan_container > .col-6 > input:checked ~ div:after,div#item_pilihan_container > .col-6 > input:checked ~ div:after,div#pilih_pembayaran_container > div >  input:checked ~ div:after,.content-buy .btn-order:after {
    background: #fff;
    content: "";
    height: 155px;
    opacity: .3;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    left: -75px;
    animation-name: glitch;
    -webkit-animation-name: glitch;
    animation-name: glitch;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: ;
}



/*PAYMENT*/
div#pilih_pembayaran_container img{
  width: auto;
  height: 40px;
}
div#pilih_pembayaran_container > div > input:checked ~ div {
  background:  linear-gradient(90deg, rgba(246,222,79,1) 0%, rgb(247, 237, 137) 100%);
  border: 4px solid white;
  position: relative;
  z-index: 2;
}
div#pilih_pembayaran_container > div > label{
  cursor: pointer;
  z-index: 1;
}
div#pilih_pembayaran_container > div > input{
  position: absolute;
  width: 0;
  height: 0;
}
div#pilih_pembayaran_container > div > div {
  background-color: #CACACA;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
}
div#pilih_pembayaran_container a {
  top: 17px;
  box-shadow: 4px 4px #767676;
  margin-right: 16px;
  transform: skew(-15deg);
  cursor: pointer;
  padding: 5px 10px !important;
  text-decoration:none;
  z-index: 3;
}
.active>.page-link, .page-link.active {
  z-index: 3;
  color: #222;
  background-color: #f5db36;
  border-color: #f5db36;
}
.daftar-harga div#list-order_paginate {
  padding-right: 0 !important;
  padding-top: 4px;
}
div#pilih_pembayaran_container a span {
  font-weight: bold;
  font-size: 12px;
  color: #CACACA;
  white-space: nowrap;
  display: block;
  transform: skew(15deg);
  line-height: 1.2;
}
div#pilih_pembayaran_container > div > div > div:first-child {
  /* width: 100%; */
}
div#pilih_pembayaran_container > div > div > div:first-child p {
  padding-top: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
  border-top: 2px solid transparent !important;
  padding-left: 20px !important;
}
div#pilih_pembayaran_container > div > div > div:nth-child(2) p:first-child{
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 5px;
  padding-top: 15px;
  color: transparent;
}
div#pilih_pembayaran_container > div > div > div:nth-child(2) p:last-child{
  box-shadow: 4px 4px #767676;
  transform: skew(-15deg);
  margin-left: -5px;
  margin-bottom: 0 !important;
}
div#pilih_pembayaran_container > div > div > div:nth-child(2) p:last-child span{
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
  display: inline-block;
  transform: skew(15deg);
  color: #CACACA;
}
div#pilih_pembayaran_container > div > input:checked ~ div a{
  background: #fff !important;
  box-shadow: 4px 4px #B38700;
}
div#pilih_pembayaran_container > div > div .check-icon{
  display: none;
  font-size: 12px;
  right: 0px;
  top: 0px !important;
}
div#pilih_pembayaran_container > div > input:checked ~ div .check-icon{
  display: block;
}
div#pilih_pembayaran_container > div > input:checked ~ div a span{color: #000 !important;}
div#pilih_pembayaran_container > div > input:checked ~ div > div:nth-child(2) p:last-child{
  background: #fff !important;
  box-shadow: 4px 4px #B38700;
}
div#pilih_pembayaran_container > div > input:checked ~ div > div:nth-child(2) p:last-child span{color: #000 !important;}
/* div#pilih_pembayaran_container > div > input:checked ~ div > div:first-child p{border-color: #fff !important;} */

div#pilih_pembayaran_container > div.disabled-payment  > div{
  background: #7D848E;
}
div#pilih_pembayaran_container > div.disabled-payment  {
  cursor: no-drop;
}
.disabled-payment > input, .disabled-payment > label {
  display: none;
}
div#pilih_pembayaran_container > div.disabled-payment > div > div:nth-child(2) p:last-child span{
  color: #434343;
  transform: skew(-0deg);
  font-size: 13px;
}
div#pilih_pembayaran_container > div.disabled-payment > div > div:nth-child(2) p:last-child{
  box-shadow: none;
  padding-top: 13px;
  transform: skew(-0deg);
  color: #434343;
  text-align: center;
  font-size: 13px;
}

div#pilih_pembayaran_container > div.recommend-payment.disabled-payment > div > div:nth-child(2) p:last-child span{
  font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
    display: inline-block;
    transform: skew(15deg);
    color: #CACACA;
}
div#pilih_pembayaran_container > div.recommend-payment.disabled-payment > div > div:nth-child(2) p:last-child{
  box-shadow: 4px 4px #B38700;
  transform: skew(-15deg);
  margin-left: -5px;
  margin-bottom: 0 !important;
}
div#pilih_pembayaran_container > div.recommend-payment > div:before{
  display: block !important;
}
div#pilih_pembayaran_container .disabled-payment a{
  background-color: #434343;
  box-shadow: 4px 4px #767676;
}
div#pilih_pembayaran_container .disabled-payment a span{
  color: #7d848e;
}

div#pilih_pembayaran_container > div.recommend-payment > div {
  background: linear-gradient(90deg, rgba(246,222,79,1) 0%, rgb(247, 237, 137) 100%);
  border: 4px solid transparent;
}
div#pilih_pembayaran_container > div.recommend-payment > div > div:first-child p {
  /* border-color: #fff !important; */
}
div#pilih_pembayaran_container > div.recommend-payment > div a {
  background: #fff !important;
  box-shadow: 4px 4px #B38700;
  display: none;
}
div#pilih_pembayaran_container > div.recommend-payment > div > div:nth-child(2) p:last-child {
  background: #fff !important;
  box-shadow: 4px 4px #B38700;
}
.title-footer-catalog{
  transform: skew(-15deg);
  box-shadow: 2px 2px 20px 2px #F5DA36;
  background-color: #F5DA36;
}
#footer-catalog .title-footer-catalog span {
  font-weight: bold;
  font-size: 15px !important;
  white-space: normal;
  display: inline-block;
  transform: skew(15deg);
  color: #000 !important;
}
div#pilih_pembayaran_container > div.recommend-payment > div > div:first-child span {
  color: #fff;
  font-style: italic;
  font-weight: 800;
  font-size: 21pt;
  margin-left: 20px;
  opacity: 0.7;
}
div#pilih_pembayaran_container > div > div > div:nth-child(2) {
  min-width: 166px;
  margin: 0 !important;
  justify-content: flex-end;
}
div#pilih_pembayaran_container > div > div:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 40px);
  height: 2px;
  background: #1a1a1a;
  bottom: 32px;
}
div#pilih_pembayaran_container > div > input:checked ~ div:before {
  background: #fff !important;
  bottom:28px;
}
.content-buy{
  z-index: 3;
}
div#pilih_pembayaran_container > div.disabled-payment > div:before {display: none;}
div#pilih_pembayaran_container > div.recommend-payment > div:before {background: #fff !important;}
@media(max-width:992px){
  .d-md-none {
    display: block!important;
  }
  div#pilih_pembayaran_container > div > input:checked ~ div > div:nth-child(2) p:last-child {
    background: #fff !important;
    box-shadow: 2px 2px #B38700;
  }
  div#pilih_pembayaran_container > div > div > div:nth-child(2) p:last-child {
    box-shadow: 2px 2px #767676;
  }
  div#pilih_pembayaran_container > div > div:before{bottom:22px}
  div#pilih_pembayaran_container > div > input:checked ~ div:before {
    background: #fff !important;
    bottom: 20px;
  }
  div#pilih_pembayaran_container > div > div > div:nth-child(2) {
    min-width: 114px;
  }
  div#item_pilihan_container,#isi_ulang_instan_container {
    --bs-gutter-y: 0.6rem;
    --bs-gutter-x: 0.6rem;
  }
  div#isi_ulang_instan_container > .col-6 p:first-child {
    font-size: 12px;
  }
  div#item_pilihan_container > .col-6 > div {
    padding: 6px 7px 5px !important;
  }
  div#item_pilihan_container img {
    /* width: 40px; */
    height: 35px;
  }
  div#item_pilihan_container p:first-child {
    margin-bottom: 5px;
    font-size: 10px;
  }
  div#isi_ulang_instan_container img{
    height: 22px;
  }
  div#isi_ulang_instan_container > .col-6 > div{
    padding: 6px 9px 5px !important;
  }
  .data-detail-catalog .title-card-text {
    font-size: 11pt !important;
    padding: 1px 0 !important;
  }
  .data-detail-catalog .title-card-icon span {
    font-size: 16px;
  }
  .title-card-icon {
    width: 34px;
    height: 34px;
    padding: 0 !important;
  }
  input#account_desc {
    padding: 10px 12px !important;
    border-radius: 5px !important;
  }
  .data-detail-catalog  input.rounded-4,.data-detail-catalog  input.rounded-5 {
    border-radius: 5px !important;
    padding: 8px 12px !important;
  }
  .shadow-image {
    position: absolute;
    top: 13px;
    left: 6px;
    width: calc(100% - 2rem);
  }
  div#item_pilihan_container img{
    height: 30px;
  }
  .widget-catalog-detail .fs-5 {
    font-size: 13pt !important;
  }
  div#pilih_pembayaran_container img {
    width: auto;
    height: 25px;
  }
  div#pilih_pembayaran_container > div > div > div:first-child, 
  div#pilih_pembayaran_container > div.recommend-payment > div > div:first-child, 
  div#pilih_pembayaran_container > div.recommend-payment.disabled-payment > div > div:first-child{
    /* padding-bottom: 22px !important; */
  }
  div#pilih_pembayaran_container > div.disabled-payment > div > div:first-child {
    padding: 0 !important;
  }
  .after-loggin button#dropdownMenuButton1 {
    white-space: nowrap;
    max-width: calc(100vw - 260px);
    overflow: hidden;
    max-height: 4rem;
    -webkit-line-clamp: 1;
    display: box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
  div#pilih_pembayaran_container > div > div > div:first-child p {
    padding-left: 8px !important;
    font-size: 9px;
    padding-top: 4px;
    margin-bottom: 5px;
    /* position: absolute; */
    white-space: nowrap;    
    max-width: 100px;
    bottom: 2px;
  }
  div#pilih_pembayaran_container > div.disabled-payment > div > div:nth-child(2) p:last-child {
    font-size: 10px;
    margin-top: 6px;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  div#pilih_pembayaran_container .disabled-payment a {
    box-shadow: 2px 2px #767676;
  } 
  div#pilih_pembayaran_container > div.disabled-payment > div > div:nth-child(2) p:last-child span{
    font-size: 10px;
  }
  div#pilih_pembayaran_container > div > div{
    border-width: 2px !important;
  }
  div#pilih_pembayaran_container > div > div > div:nth-child(2) p:last-child {
    padding: 2px 8px 3px !important;
    margin-right: 0 !important;
    margin-top: 6px;
  }
  div#pilih_pembayaran_container > div.recommend-payment.disabled-payment > div > div:nth-child(2) p:last-child span{
    font-size: 12px;
    font-weight: bolder;
  }
  div#pilih_pembayaran_container > div.recommend-payment.disabled-payment > div > div:nth-child(2) p:last-child{
    box-shadow: 2px 2px #B38700;
    padding: 2px 8px 3px !important;
    margin-right: 0 !important;
    margin-top: 6px;
  }
  div#pilih_pembayaran_container a {
    top: 11px;
    margin-right: 14px;
    cursor: pointer;
    padding: 3px 5px !important;
    box-shadow: 2px 2px #767676;
    border-radius: 2px !important;
  }
  div#pilih_pembayaran_container > div > input:checked ~ div a {
    background: #fff !important;
    box-shadow: 2px 2px #B38700;
  }
  div#pilih_pembayaran_container > div > div{
    padding-right: 10px !important;
  }
  div#pilih_pembayaran_container a span{font-size: 8px;}
  div#pilih_pembayaran_container > div > div > div:nth-child(2) p:first-child {
    font-size: 11px;
    margin-bottom: 3px;
    padding-top: 12px;
  }
  div#pilih_pembayaran_container > div > div > div:nth-child(2) p:last-child span {
    font-weight: bolder;
    font-size: 12px;
    padding: 0 !important;
  }
  div#pilih_pembayaran_container > div.recommend-payment > div a {
    background: #fff !important;
    box-shadow: 2px 2px #B38700;
  }
  div#pilih_pembayaran_container > div.recommend-payment > div > div:first-child span {
    font-size: 24px;
    margin-left: -5px;
    position: absolute;
    right: 126px;
    bottom: 28px;
  }
  div#pilih_pembayaran_container > div.recommend-payment > div > div:nth-child(2) p:last-child {
    background: #fff !important;
    box-shadow: 2px 2px #B38700;
  }
  input#kode_voucher {
    border-radius: 0 10px 10px 0 !important;
    padding: 8px 9px !important;
}
.rounded-start-4 {
  border-radius: 10px 0 0 10px !important;
}
.catalog-desc p:nth-child(2) {
  display: block;
}
.catalog-desc p:first-child {
  display: block;
}
.catalog-desc p {
  display: none;
}
.catalog-desc.show-all .catalog-show {display: none;}
.catalog-desc.show-all p {
  display: block;
}

}

@media(min-width:993px){
  .after-loggin button#dropdownMenuButton1 {
    margin-left: 15px !important;
  }
  main#main {
    min-height: calc(100% - 562px);
  }
  .col-lg-9.data-detail-catalog {
    width: 72%;
  }
  .col-lg-3.widget-catalog-detail {
    width: 28%;
  }
}

/*HISTORY*/
.menu-loggedin  a:hover,.menu-loggedin  a.active{
  background: linear-gradient(90deg, rgba(246,218,55,1) 30%, rgba(21,21,21,1) 98%);
  color: #222 !important;
  cursor: pointer;
  font-weight: 500;
}
.menu-loggedin  a:hover img,.menu-loggedin  a.active img{
  -webkit-filter: brightness(8%);
  filter: brightness(8%);
}
.menu-loggedin img {
  width: 19px;
  height: 17px;
  object-fit: scale-down;
  position: relative;
  top: -2px;
  margin-right: 8px !important;
}
.menu-loggedin a i {
  font-size: 14pt;
  font-weight: normal;
}
.menu-loggedin a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /* font-size: 12pt; */
  font-weight: 600 !important;
}
.text-red{
  color: #d63f3e;
}
.after-loggin .dropdown-menu[data-bs-popper] a:hover,.after-loggin .dropdown-menu[data-bs-popper] a:focus,.after-loggin .dropdown-menu[data-bs-popper] a:active{
  background: #151515 !important;
}
.after-loggin .dropdown-menu[data-bs-popper] {
  margin-top: 20px;
  background: #232323;
  white-space: nowrap;
  min-width: 190px;
}
.after-loggin .dropdown-menu[data-bs-popper] img {
  width: 15px !important;
  height: 14px;
  object-fit: scale-down;
}
.nav-history a {
  border-radius: 6px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.nav-history a.active,.nav-history a:hover {
  background: #f5da36;
  color: #222 !important;
}
.nav-history {
  border-bottom: 2px solid #363636;
}
.report-search {
  border: 2px solid #363636;
}
.fw-600{
  font-weight: 600 !important;
}
.data-order table {
  border: 2px solid #363636;
  margin-top: 0 !important;
}
.button-block button:hover,.button-block a:hover {
  background: #877819;
  color: #222 !important;
}
ul.pagination li {
  margin-left: 10px;
}
ul.pagination a {
  border-radius: 7px !important;
  font-size: 10pt;
  font-weight: 500;
  color:#000;
  padding: 7px 15px;
}
ul.pagination .disabled a {
  background: #34373b;
  color: #fff;
  border-color: #34373b;
}
.data-order a {
  color:  #f5da36;
  text-decoration: none;
}
div#list-order_info {
  font-weight: 500;
  font-size: 10pt;
  margin-top: 10px;
}
div#list-order_paginate {
  margin-top: 10px;
}
.dataTables_scrollHead table {
    border-bottom: 0;
    border-radius: 8px 8px 0 0!important;
}
.dataTables_scrollBody table {
  border-top: 0;
  border-radius: 0 0 8px 8px!important;
}
.data-order td {
  background: transparent;
  color: #fff;
  border-bottom: 2px solid #363636;
  padding: 9px 13px;
  vertical-align: middle;
}
.data-order tbody tr:last-child td {border:0}
.bg-green{
  background: #2bb673;
}
li.sparator {
  border-bottom: 2px solid #f5da36;
  margin: 15px 0 15px;
}
.bg-lightgrey{
  background: #4c4c4c;
}
.border-bottom-2{
  border-bottom: 2px solid #363636;
}
.bg-blue{
  background: #4abdff;
}
a.bg-blue:hover,button.bg-blue:hover{
  background: #2f81b0;
}
.bg-red{
  background: #d02726;
}
a.bg-red:hover,button.bg-red:hover{
  background: #901a1a;
}

/*Detail Deposit*/
.alert-info .alert-warning i {
    margin: 0 4px;
}

.alert-info .alert-warning {
    padding: 5px 12px !important;
    background: #f5da36;
    border-color: #f5da36;
    color: #151515;
    font-weight: 700 !important;
    font-size: 12pt;
}
.kodetransaksi-mobile {
    background: #202020 !important;
    padding: 20px 20px;
    border-radius: 14px;
    margin-top: 30px;
    margin-bottom: 5px;
}
.kodetransaksi-mobile div#trxcopy {
    background: #2e2e2e;
    font-size: 13pt;
    font-weight: 600;
    text-align: center;
    padding: 9px 0;
    border-radius: 13px;
    margin-top: 15px;
}
.kodetransaksi-mobile button {
    font-size: 9pt;
    background: #2e2e2e !important;
    padding: 5px 12px !important;
    border-radius: 10px;
}
@media(max-width:767px){
  .alert-info .alert-warning{
    font-size:14pt
  }
  .info-transaction {
    text-align: center;
    font-size: 10pt !important;
  }
  .btn-carabayar{
    border-radius: 5px !important;
    padding: 10px 10px !important;
    margin-top: 10px;
  }
}


@media(min-width:993px){
  div#list-order_paginate {
    padding-right: 28px;
}
  .after-loggin .dropdown-menu[data-bs-popper] {
    margin-top: 35px;
  }
  .content-buy {
    z-index: 3;
    position: relative !important;
  }
  .content-buy .card-body > .d-flex > div:first-child {
    width: 10% !important;
  }
  .content-buy button {
    border-radius: 20px !important;
    font-size: 11pt !important;
    padding: 8px 0 !important;
  }
  .fs-sm-6 {
    font-size: 1rem!important;
  }
  .fs-sm-3 {
    font-size: calc(1.3rem + .6vw)!important;
  }
}
@media(max-width:992px){
  .navbar-expand-md .navbar-toggler {
    display: block;
  }
  .navbar-expand-md .navbar-collapse {
    display: block!important;
  }
  .navbar-expand-md .navbar-nav {
    display: block;
  }
  .d-sm-none {
    display: block!important;
  }
  .d-sm-block {
    display: none!important;
  }
  .lable-promotion{
    font-size: 11.5pt !important;
  }
  .jumlah-trx .text-white.fw-bold.mb-2 {
    font-size: 30pt !important;
  }
  .jumlah-trx .fs-6.text-white.fw-600 {
    font-size: 10pt !important;
  }
  .jumlah-trx {
    margin: 0 -7px;
    justify-content: start !important;
  }
  .jumlah-trx > div{width:50% !important;padding: 0 7px;}
  ul.pagination li {
    margin: 0 5px;
  }
  #history-page .col-12.col-sm-9 {
    width: 100% !important;
  }
  .data-show{
    justify-content: center;
    text-align: center;
  }
  .button-block {
    justify-content: space-evenly !important;
  }
  .button-block > a, .button-block button {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  section#history-page {
    font-size: 14px;
  }
}

/**DASHBOARD**/
.bar-status {
  width: 100%;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  margin-bottom: 14px;
}
.bar-status-active {
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 50px;
  background: #f5da36;
  top: 0;
  left: 0;
}
.bar-status-active div {
  border-radius: 50%;
  position: absolute;
  width: 13px;
  height: 13px;
  background: #f5da36;
  top: -4px;
  margin-left: -7px;
  border: 4px solid #fff;
  left: 100%;
  box-shadow: 0 0 0 1px #f5da36;
}
.label-status .col-auto > div {
  min-width: 90px;
  text-align: center;
}
/* section#list-voucher:before {
  content: "";
  display: block;
  position: absolute;
  width: 930px;
  height: 10px;
  background: #f00;
  left: 50%;
  transform: translateX(-50%);
} */
@media(min-width:768px) and (max-width:992px){
}

@media(max-width:992px){
  #footer-catalog h3{
    font-size: calc(1.275rem + .3vw);
  }
  #catalogTabContent h2 {
    padding-left: 10px !important;
  }
  ul#catalogTab{
    justify-content: center !important;
  }
  .container, .container-md, .container-sm {
    max-width: 98%;
  }
  .content-buy .card-body > .d-flex > .pe-3 {
    width: 10% !important;
  }
  div#catalogTabContent .row > div {
    width: 25%;
  }
  .col-4.col-lg-8.mt-4.mb-4.my-lg-0.mb-lg-3.position-relative.pt-2.pt-md-0 {
    width: 20%;
    padding-top: 10px !important;
  }
  div#catalogTabContent .row {
    padding: 0 5px !important;
  }
}

@media(max-width:640px){
  #catalogTabContent h2 {
    padding-left: 0px !important;
  }
  ul#catalogTab{
    justify-content: start !important;
  }
  div#catalogTabContent .row {
    padding: 0 0px !important;
  }
  .container, .container-md, .container-sm {
    max-width: 100%;
  }
  .content-buy .card-body > .d-flex > .pe-3 {
    width: 20% !important;
  }
  div#catalogTabContent .row > div {
    width: 33.3%;
  }
  .col-4.col-lg-8.mt-4.mb-4.my-lg-0.mb-lg-3.position-relative.pt-2.pt-md-0 {
    width: 33.33%;
    padding-top: 0px !important;
  }
}

@media(max-width:767px){
  div#pilih_pembayaran_container > div.recommend-payment > div > div:first-child span {
    font-size: 4vw;
    margin-left: -5px;
    position: absolute;
    left: 86px;
    top: 33%;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);  
  }
}