// Coin Balance
.amount{
    @apply rounded-r-none border-r-transparent max-w-[150px] #{!important};
}
.currency-select{
    @apply absolute left-full max-w-[75px] -ml-4;
    @apply rounded-l-none border-l-transparent #{!important};
    option{
        @apply text-black
    }
}
.button-topup{
    @apply bg-white text-black rounded-md text-13 
    md:absolute md:top-1/2 md:ml-16 md:-translate-y-1/2 md:left-full md:h-[45px] mt-2 md:mt-0;
    @screen <md{
        width: calc(100% + 75px - 1rem)
    }
}

// Package
.package-information{
    @apply flex space-y-2 md:space-y-0 md:space-x-2 items-center flex-col md:flex-row
}
.package-img{
    @apply  max-w-[150px] md:w-16 md:h-12 mb-1 md:mb-0;
    img{
        @apply w-full h-full object-cover rounded-sm
    }
}
.package-item{
    @apply bg-secondary text-black rounded-lg px-2 py-[1px] text-12 inline-block whitespace-nowrap
}
.extend-button{
    @apply px-2 py-[3px] bg-[#3a3a3a] rounded-lg inline-block w-[120px] text-12 hover:bg-black transition-all duration-200 text-center;
}


// IDs
.member-wrapper .cart-row .cart-price,.member-wrapper .cart-row .cart-quantity{
    @screen xl{
        width: 150px;
        flex: 0 0 150px !important;
    }
}
.member-wrapper .cart-quantity{
    @apply justify-start
}
.member-order-detail-wrapper .cart-total {
    @apply text-left
}
.member-wrapper .cart-item-detail{
    @screen <xs{
        margin-bottom: 0
    }
}
.member-wrapper .cart-row .cart-quantity{
    @apply flex-row space-x-3;
    @screen <xl{
        @apply pl-[2px] items-center;
    }
    @screen <md{
        @apply flex-col items-start space-x-0;
    }
}
.cart-date{
    @apply text-[9px] xl:text-[11px] flex items-center;
    @apply xl:ml-0 #{!important};
    span{
        @apply inline-block mr-1
    }
}

// Member Order
.order-colm{
  @apply <md:space-x-0 <md:flex-col <2xl:flex <2xl:items-baseline space-x-4 2xl:space-x-0 flex-grow xs:px-2;
  @screen 2xl{
      &.colm-sm{
          width: 10%;
      }
      &.colm-nm{
          width: 15%; 
      }
      &.colm-lg{
          width: 20%;
      }
  }
  >p:first-child{
      @screen <2xl{
          width: 96px;
      }
  }
}
.order-item{
  @apply flex flex-col space-y-2 2xl:space-y-0 2xl:flex-row border-b py-6;
  .order-colm:last-child{
      width: auto;
    }
}
.order-wrapper{
    @apply flex flex-wrap;
    .order-item{
        @apply w-full xs:w-1/2 2xl:w-full p-4 mb-4 xs:mb-0 border-collapse ;
        @screen <2xl{
            border: 1px solid;
            border-color: rgba(#fff,.7);
      }
  }
}

.stat-payment{
  @apply py-[1px] text-12 rounded-lg;
&.pending{
  @apply bg-[#FFEBCE] text-[#F29100];
}
&.success{
  @apply bg-[#CEFFDF] text-[#1EBF10];
}
&.canceled{
  @apply bg-[#FFD1CE] text-[#F23D15];
}
&.canceled-text{
  @apply text-[#F23D15];
}
&.pending-bg{
  @apply text-[#ffffff] bg-[#F29100];
}
&.success-bg{
  @apply text-[#ffffff] bg-[#1EBF10];
}
&.success-text{
  @apply text-[#1EBF10];
}
&.canceled-bg{
  @apply text-[#ffffff] bg-[#F23D15];
}
}

.stat-list{
  .stat-payment{
    background-color: transparent;
  }
}