@charset "utf-8";
:root{
  --big-font-size: 0.6rem;
  --great-medium-font-size: 0.5rem;
  --medium-font-size: 0.4rem;
  --great-small-font-size: 0.35rem;
  --small-font-size: 0.3rem;
  --slight-small-font-size: 0.25rem;
  --extra-small-font-size: 0.2rem;
  --great-mini-font-size: 0.15rem;
  --mini-font-size: 0.1rem;

  --light-font-weight: 100;
  --medium-font-weight: 300;
  --bold-font-weight: 500;
  --extra-bold-font-weight: bold;

  --text-white: white;
  --text-yellow: yellow;
  --text-grey: rgb(140, 149, 149);
  --text-black: black;

  --transparent-background: rgba(255, 255, 255, 0.5);
  --black-transparent-background: rgba(11, 16, 20, 0.6);
  --modal-background: rgba(25, 24, 24, 0.5);

  --green-color: rgb(50, 236, 141);
  --black-transparent-color: rgba(0, 0, 0, 0.511);
}
/* Extra small devices (phones, 50px and up) */
@media (min-width: 50px) {
  /* CSS rules for extra small devices */
  body {
    padding: 0.6rem;
    background-image: url("../image/ppx7_background_mobile.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
  }
  #wrap {
    height: 100%;
    width: 100%;
    overflow-y: scroll; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  #wrap::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
  }
  /* .caidai {
    position: absolute;
    width: 100%;
    height: 13.65333333rem;
    background-image: url("../image/caidai.png");
  } */
  /* .header {
    padding: 0.09333333rem;
  } */

  .content {
    display: flex;
    flex-direction: column;
  }

  .content-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.2rem;
  }

  .content-header p{
    color: var(--text-white);
    font-size: var(--great-medium-font-size);
    font-weight: var(--bold-font-weight);
  }

  #info-button {
    height: 0.5rem;
    width: 0.5rem;
    margin: 0 0.2rem;
    background-image: url("../image/ppx7_info_icon.webp");
  }

  /* #close-button {
    height: 0.6rem;
    width: 0.6rem;
    position: absolute;
    top: 2.8%;
    right: 3.4%;
    background-image: url("../image/ppx7_close_icon.webp");
  } */

  .content-body {
    display:flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .spin-wheel-container{
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: var(--black-transparent-background);
    border-radius: 0.1rem;
    padding: 0.2rem;
  }

  .spin-wheel-header{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    justify-content: center;
    align-items: center;
    /* border: 1px solid blue; */
    gap: 0.2rem;
  }

  .spin-wheel-row-one{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.2rem;
  }

  .cash {
    height: 0.6rem;
    width: 0.8rem;
    background-image: url("../image/ppx7_cash.webp");
  }

  .total-credit-text {
    font-size: var(--great-medium-font-size);
    color: var(--text-yellow);
    font-weight: var(--bold-font-weight);
  }

  #withdraw-button {
    padding: 0.08rem 0.3rem;
    border-radius: 1rem;
    background-color: var(--green-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
  }

  #withdraw-button p{
    font-size: var(--extra-small-font-size);
    color: var(--text-black);
    font-weight: var(--extra-bold-font-weight);
  }

  .currency {
    height: 0.4rem;
    width: 0.4rem;
    background-image: url("../image/ppx7_bz_currency.webp");
  }

  .spin-wheel-row-one p{
    color: var(--text-yellow);
  }

  .spin-wheel-row-two{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.05rem;
  }

  #percentage-text {
    font-size: var(--small-font-size);
    color: var(--text-yellow);
    font-weight: var(--bold-font-weight);
    display: flex;
    align-self: flex-end;
  }

  #progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 1rem;
    overflow: hidden;
  }

  #progress-bar {
    width: 0%;
    height: 0.1rem;
    background-color: var(--green-color);
    /* text-align: center; */
    /* line-height: 30px; */
    color: white;
  }

  .spin-wheel-row-three {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
  }

  .spin-wheel-row-three-text {
    color: var(--text-grey);
    font-size: var(--small-font-size);
    font-weight: var(--light-font-weight);
  }

  .small-money {
    height: 0.35rem;
    width: 0.35rem;
    background-image: url("../image/ppx7_cash.webp");
  }

  .needed-amount-to-withdraw-text {
    font-size: var(--small-font-size);
    font-weight: var(--bold-font-weight);
    color: var(--text-yellow);
  }

  .rule,
  .my {
    position: relative;
    z-index: 1;
    width: 1.2rem;
    height: 0.66666667rem;
    border: 1px solid #d89720;
    font-size: 0.32rem;
    line-height: 0.65333333rem;
    text-align: center;
    color: #d89720;
    border-radius: 0.06666667rem;
  }
  .my {
    width: 1.6rem;
  }
  .title {
    width: 8.52rem;
    height: 4.21333333rem;
    margin: auto;
    background-image: url("../image/title.png");
  }
  /*轮盘*/
  .rotate {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid var(--green-color); */
    margin: 0.4rem 0
  }
  .lunpai {
    width: 100%;
    height: 9.86666667rem;
    background-image: url("../image/ppx7_wheel.png");
    justify-content: center;
    align-items: center;
  }
  /* .ring {
    position: absolute;
    left: 50%;
    top: 0.34666667rem;
    width: 8.22666667rem;
    height: 8.22666667rem;
    margin-left: -4.08rem;
    background-image: url("../image/dark.png");
  } */
  /* .rotate div.light {
    background-image: url("../image/light.png");
  } */

  /* .wheel-spin-selected {
    position: absolute;
    left: 31%;
    top: 15%;
    width: 3.10333333rem;
    height: 3.64rem;
    background-image: url("../image/ppx7_wheel_spin_selected_glow2.png");
  } */

  .wheel-spin-selected-glow {
    /* Hide initially */
    display: none; 
    position: absolute;
    left: 33.5%;
    top: 18%;
    width: 2.6rem;
    height: 2.9rem;
    background-image: url("../image/ppx7_wheel_spin_selected_glow3.png");
    background-size: cover;
    /* Blink animation */
    animation: blink 1s infinite; 
  }

  @keyframes enlargeAndShrink {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    } 
  }

  #btn {
    position: absolute;
    left: 48.5%;
    top: 52%;
    width: 28%;
    height: 28%;
    margin: -1.32rem 0 0 -1.06666667rem;
    background-image: url("../image/ppx7_wheel_button.png");
    transition: transform 0.2s;
  }

  .animate-btn {
    animation: enlargeAndShrink 0.2s ease-in-out;
  }

  /*奖品*/
  .prize {
    overflow: hidden;
    position: absolute;
    left: 55.5%;
    top: 57.5%;
    margin: -3.86666667rem 0 0 -3.86666667rem;
    width: 6.73333333rem;
    height: 6.73333333rem;
    border-radius: 50%;
  }
  .running {
    -o-animation: init 90s linear infinite;
    -ms-animation: init 90s linear infinite;
    -moz-animation: init 90s linear infinite;
    -webkit-animation: init 90s linear infinite;
    animation: init 90s linear infinite;
  }
  @keyframes init {
    100% {
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .prize li {
    position: absolute;
    left: 0;
    top: 0;
    /* align-self: center; */
    width: 100%;
    height: 3.46666667rem;
    background: no-repeat center 35%;
    font-size: 0.32rem;
    font-weight: bold;
    line-height: 0.7rem;
    text-align: center;
    color: #674926;
    -moz-transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  .prize li:nth-child(1) {
    background-image: url("../image/ppx7_spin_wheel_content/08_100.png");
    background-size: 1rem;
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .prize li:nth-child(2) {
    background-image: url("../image/ppx7_spin_wheel_content/09_25.png");
    background-size: 1rem;
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .prize li:nth-child(3) {
    background-image: url("../image/ppx7_spin_wheel_content/05_10.png");
    background-size: 1rem;
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .prize li:nth-child(4) {
    background-image: url("../image/ppx7_spin_wheel_content/04_5.png");
    background-size: 1rem;
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .prize li:nth-child(5) {
    background-image: url("../image/ppx7_spin_wheel_content/03_2.png");
    background-size: 1rem;
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .prize li:nth-child(6) {
    background-image: url("../image/ppx7_spin_wheel_content/07_1.png");
    background-size: 1rem;
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  .prize li:nth-child(7) {
    background-image: url("../image/ppx7_spin_wheel_content/01_Nicetry.png");
    background-size: 1rem;
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .prize li:nth-child(8) {
    background-image: url("../image/ppx7_spin_wheel_content/06_Goodluck.png");
    background-size: 1rem;
    -o-transform: rotate(314deg);
    -ms-transform: rotate(314deg);
    -moz-transform: rotate(314deg);
    -webkit-transform: rotate(314deg);
    transform: rotate(314deg);
  }
  .prize li span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -50%;
    border-right: 1px solid #674926;
    -o-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -o-transform: rotate(20deg) skewY(20deg);
    -ms-transform: rotate(20deg) skewY(20deg);
    -moz-transform: rotate(20deg) skewY(20deg);
    -webkit-transform: rotate(20deg) skewY(20deg);
    transform: rotate(20deg) skewY(20deg);
  }
  .prize li p {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    /* width: 50%;
    height: 60%; */
    padding-top: 0.36666667rem;
    text-align: center;
    line-height: 0.43333333rem;
  }

  .spin-wheel-footer {
    display: flex;
    flex-direction: column;
    /* justify-content: center;
    align-items: center; */
    gap: 0.1rem;
  }

  .spin-wheel-text-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .spin-wheel-text {
    color: var(--text-grey);
    font-size: var(--small-font-size);
    font-weight: var(--medium-font-weight);
  }

  #spin-wheel-count {
    color: var(--text-grey);
    font-size: var(--small-font-size);
    font-weight: var(--medium-font-weight);
    margin-left: 0.1rem;
  }

  .spin-tooltip {
    font-size: 14px; /* Adjust the font size as needed */
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
  }

  .spin-wheel-countdown-date-text {
    color: var(--text-yellow);
    font-size: var(--medium-font-size);
    font-weight: var(--bold-font-weight);
    margin-left: 0.1rem;
  }

  #share-button {
    height: 1rem;
    width: 100%;
    background-color: rgb(19,73,53);
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: 0.01rem solid var(--text-grey)
  }

  .share-icon {
    width: 10%;
    height: 35%;
    background-image: url("../image/ppx7_share_icon.webp");
  }

  .button-text {
    color: var(--text-white);
    font-size: var(--medium-font-size);
    font-weight: var(--bold-font-weight);
  }

  .live-transaction-and-rules-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
  }

  .tabs {
    width: 100%;
    height: 60%;
    background-color: var(--black-transparent-background);
    border-radius: 0.1rem;
  }

  .tab-links {
    padding: 0;
    margin-bottom: 0.2rem;
    list-style: none;
    display: flex;
    flex-direction: row;
  }

  .tab-links:after {
    content: "";
    display: table;
    clear: both;
  }

  .tab-links li {
    margin: 0;
    display: flex;
    flex: 1;
  }

  .tab-links a {
    padding: 0.4rem 0.2rem;
    width: 100%;
    font-size: var(--small-font-size);
    font-weight: var(--bold-font-weight);
    color: white;
    transition: all linear 0.15s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0 0;
    position: relative;
  }

  .tab-links a:hover {
    text-decoration: none;
    cursor: pointer;
  }

  .tab-links .active a {
    color: var(--green-color);
  }

  /** 
  The tab's customize bottom border style
  */
  .tab-links .active a::after {
    content: ''; /* By setting content: '', you create an empty pseudo-element that can then be styled */
    position: absolute; /* Positions the pseudo-element absolutely within the active tab link */
    bottom: 0;  /* Adjust based on border thickness */
    left: 50%;  /* Position in the middle */
    transform: translateX(-50%);  /* Center it horizontally */
    width: 100%;  /* Full width minus padding */
    height: 0.08rem;  /* Border thickness */
    background-color: var(--green-color);  /* Border color */
    border-radius: 8px 8px 0 0;  /* Add rounded corners to bottom-left and bottom-right */
  }

  .tab-content {
    padding: 0.2rem;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
    scrollbar-width: none; /* Show no scrollbar */
  }

  /* For WebKit browsers like Chrome, Safari */
  .tab-content::-webkit-scrollbar {
    width: 0; /* Hide scrollbar */
    height: 0; /* Hide scrollbar */
  }

  /* Optional: If you want to show the scrollbar when hovering */
  .tab-content:hover {
    scrollbar-width: none; /* For Firefox: thin scrollbar on hover */
  }

  .tab-content:hover::-webkit-scrollbar {
    width: 0px; /* Show thin scrollbar on hover */
    height: 0px; /* Show thin scrollbar on hover */
  }

  .tab {
    display: none;
  }

  .tab.active {
    display: block;
  }

  .no-record-text {
    text-align: center;
    color: var(--text-white);
    font-size: var(--great-small-font-size);
    font-weight: var(--bold-font-weight);
  }

  #luckyUserList {
    color: var(--green-color);
    overflow: hidden; /* Ensure that overflowing content is hidden */
    height: 6.5rem; /* Adjust based on your design */
    position: relative;
  }

  #luckyUserList li {
    display: flex;
    width: 100%;
    margin-bottom: 0.5rem;
    justify-content: space-evenly;
    animation: scrollUp 10s linear infinite; /* Adjust timing as needed */
  }

  @keyframes scrollUp {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%); /* Move the items up by 100% of their height */
    }
  }

  #luckyUserList li div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .luckyUserListText {
    color: var(--text-white);
    font-weight: var(--light-font-weight);
    font-size: var(--small-font-size);
  }

  .luckyUserListAmount {
    color: var(--text-yellow);
    font-weight: var(--bold-font-weight);
    font-size: var(--small-font-size);
    margin: 0 0.1rem;
  }

  .luckyUserListCurrency {
    height: 0.4rem;
    width: 0.4rem;
    background-image: url("../image/ppx7_bz_currency.webp");
  }

  .rules-container {
    height: 4rem;
    width: 100%;
    background-color: var(--black-transparent-background);
    border-radius: 0.1rem;
    padding: 0.8rem;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
    scrollbar-width: none; /* Show thin scrollbar */
  }

  /* For WebKit browsers like Chrome, Safari */
  .rules-container::-webkit-scrollbar {
    width: 0; /* Hide scrollbar */
    height: 0; /* Hide scrollbar */
  }

  /* Optional: If you want to show the scrollbar when hovering */
  .rules-container:hover {
    scrollbar-width: none; /* For Firefox: thin scrollbar on hover */
  }

  .rules-title-text {
    color: var(--text-white);
    font-size: var(--small-font-size);
    font-weight: var(--bold-font-weight);
    margin-bottom: 0.4rem;
  }

  .rules-content-text {
    color: var(--text-grey);
    font-size: var(--small-font-size);
    font-weight: var(--light-font-weight);
    line-height: 1.5; /* Adjust this value to add space between lines */
  }

  /*次数*/
  .border {
    width: 5.06666667rem;
    height: 0.84rem;
    margin: 0.13333333rem auto 0.33333333rem;
    background-image: url("../image/border.png");
    font-size: 0.32rem;
    line-height: 0.84rem;
    text-align: center;
    color: #fff;
    background-color: red;
  }
  .scroll {
    width: 7.33333333rem;
    height: 2.33333333rem;
    margin: auto;
  }
  .scroll p {
    width: 4.76rem;
    height: 0.29333333rem;
    margin: auto;
    background-image: url("../image/list.png");
  }
  .scroll div {
    width: 100%;
    height: 1.06666667rem;
    margin-top: 0.26666667rem;
    padding: 0.26666667rem 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.13333333rem;
  }
  .scroll ul {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .scroll ul li {
    position: relative;
    top: 0;
    text-align: center;
    font-size: 0.29333333rem;
    line-height: 0.53333333rem;
    color: #fff;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  /*规则背景*/
  #mask-rule .box-rule {
    background-color: #fe5c51;
  }
  #mask-rule .box-rule .star {
    background-image: url("../../common/image/rule/star2.png");
  }
}

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
  /* CSS rules for small devices */
}

/* Medium devices (small laptops, 768px and up) */
@media (min-width: 768px) {
  /* CSS rules for medium devices */
  body {
    padding: 0.6rem;
    background-image: url("../image/ppx7_background_desktop.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
  }

  #wrap {
    height: 100%;
    width: 100%;
    overflow-y: hidden; /* Hide vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  #wrap::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
  }
  
  .content {
    display: flex;
    flex: 1;
  }

  .content-header p{
    color: var(--text-white);
    font-size: var(--medium-font-size);
    font-weight: var(--bold-font-weight);
  }

  #info-button {
    display: none;
  }

  .content-body {
    display:flex;
    flex-direction: row;
    gap: 0.2rem;
  }

  .spin-wheel-container{
    display: flex;
    flex: 1;
    width: 50%;
    flex-direction: column;
    background-color: var(--black-transparent-background);
    border-radius: 0.1rem;
    padding: 0.2rem;
  }

  .cash {
    height: 0.3rem;
    width: 0.4rem;
    background-image: url("../image/ppx7_cash.webp");
  }

  .total-credit-text {
    font-size: var(--small-font-size);
    color: var(--text-yellow);
    font-weight: var(--bold-font-weight);
  }

  .disabled {
    pointer-events: none; /* Prevents clicking */
    opacity: 0.5; /* Visual indication of being disabled */
    cursor: not-allowed; /* Change the cursor to indicate disabled state */
  }

  #withdraw-button {
    padding: 0.04rem 0.1rem;
    border-radius: 1rem;
    background-color: var(--green-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
  }

  #withdraw-button p{
    font-size: var(--mini-font-size);
    color: var(--text-black);
    font-weight: var(--extra-bold-font-weight);
  }

  .currency {
    height: 0.2rem;
    width: 0.2rem;
    background-image: url("../image/ppx7_bz_currency.webp");
  }

  #percentage-text {
    font-size: var(--great-mini-font-size);
    color: var(--text-yellow);
    font-weight: var(--bold-font-weight);
    display: flex;
    align-self: flex-end;
  }

  #progress-bar {
    width: 0%;
    height: 0.05rem;
    background-color: var(--green-color);
    /* text-align: center; */
    /* line-height: 30px; */
    color: white;
  }

  .spin-wheel-row-three-text {
    color: var(--text-grey);
    font-size: var(--great-mini-font-size);
    font-weight: var(--light-font-weight);
  }

  .small-money {
    height: 0.25rem;
    width: 0.25rem;
    background-image: url("../image/ppx7_cash.webp");
  }

  .needed-amount-to-withdraw-text {
    font-size: var(--great-mini-font-size);
    font-weight: var(--bold-font-weight);
    color: var(--text-yellow);
  }

  .spin-wheel-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
  }

  .rotate {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.1rem 0
  }

  .lunpai {
    width: 100%;
    height: 3.86666667rem;
    background-image: url("../image/ppx7_wheel.png");
    justify-content: center;
    align-items: center;
  }

  .prize {
    overflow: hidden;
    position: absolute;
    left: 113%;
    top: 118.5%;
    margin: -3.86666667rem 0 0 -3.86666667rem;
    width: 2.60133333rem;
    height: 2.60133333rem;
    border-radius: 50%;
  }

  .prize li {
    position: absolute;
    left: 0;
    top: 0;
    align-self: center;
    width: 100%;
    height: 1.26666667rem;
    background: no-repeat center 35%;
    font-size: 0.32rem;
    font-weight: bold;
    line-height: 0.7rem;
    text-align: center;
    color: #674926;
    -moz-transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    /* background-color: red; */
  }
  /* $100 */
  .prize li:nth-child(1) {
    background-size: 0.6rem;
  }
  /* $25 */
  .prize li:nth-child(2) {
    background-size: 0.6rem;
  }
  /* $10 */
  .prize li:nth-child(3) {
    background-size: 0.6rem;
  }
  /* $5 */
  .prize li:nth-child(4) {
    background-size: 0.6rem;
  }
  /* $2 */
  .prize li:nth-child(5) {
    background-size: 0.6rem;
  }
  /* $1 */
  .prize li:nth-child(6) {
    background-size: 0.6rem;
  }
  /* Nice Try */
  .prize li:nth-child(7) {
    background-size: 0.4rem;
  }
  /* Good Luck */
  .prize li:nth-child(8) {
    background-size: 0.4rem;
  }

  .prize li p {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    /* width: 20%;
    height: 10%; */
    padding-top: 0.16666667rem;
    text-align: center;
    line-height: 0.13333333rem;
    font-size: var(--mini-font-size);
  }

  /* .wheel-spin-selected {
    position: absolute;
    left: 36%;
    top: 16.5%;
    width: 1.10333333rem;
    height: 1.24rem;
    background-image: url("../image/ppx7_wheel_spin_selected_glow2.png");
  } */

  .wheel-spin-selected-glow {
    position: absolute;
    left: 37%;
    top: 18%;
    width: 1.06rem;
    height: 1.06rem;
    background-image: url("../image/ppx7_wheel_spin_selected_glow3.png");
    background-size: cover;
  }

  #btn {
    position: absolute;
    left: 65.2%;
    top: 74%;
    width: 22%;
    height: 22%;
    margin: -1.32rem 0 0 -1.06666667rem;
    background-image: url("../image/ppx7_wheel_button.png");
    /* background-color: red; */
  }

  .pointer-button {
    height: 100%;
    width: 100%;
    background-image: url("../image/ppx7_wheel_button.png");
    background-size: cover; /* Ensures the image covers the entire element */
    background-position: center; /* Centers the image within the element */
    background-repeat: no-repeat; /* Prevents the image from repeating */
  }

  .spin-wheel-text {
    color: var(--text-grey);
    font-size: var(--great-mini-font-size);
    font-weight: var(--medium-font-weight);
  }

  #spin-wheel-count {
    color: var(--text-grey);
    font-size: var(--great-mini-font-size);
    font-weight: var(--medium-font-weight);
  }

  .spin-wheel-countdown-date-text {
    color: var(--text-yellow);
    font-size: var(--great-mini-font-size);
    font-weight: var(--bold-font-weight);
    margin-left: 0.1rem;
  }

  #share-button {
    height: 0.5rem;
    width: 100%;
    background-color: rgb(19,73,53);
    border-radius: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: 0.01px solid var(--text-grey)
  }

  .live-transaction-and-rules-container {
    display: flex;
    flex: 1;
    width: 50%;
    flex-direction: column;
    gap: 0.2rem;
  }

  .button-text {
    color: var(--text-white);
    font-size: var(--great-mini-font-size);
    font-weight: var(--bold-font-weight);
  }

  .tabs {
    width: 100%;
    height: 4rem;
    background-color: var(--black-transparent-background);
    border-radius: 0.1rem;
    display: flex;
    flex-direction: column;
  }

  .tab-links a {
    padding: 0.2rem 0.2rem;
    width: 100%;
    font-size: var(--great-mini-font-size);
    font-weight: var(--bold-font-weight);
    color: white;
    transition: all linear 0.15s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0 0;
    position: relative;
  }

  /** 
  The tab's customize bottom border style
  */
  .tab-links .active a::after {
    content: ''; /* By setting content: '', you create an empty pseudo-element that can then be styled */
    position: absolute; /* Positions the pseudo-element absolutely within the active tab link */
    bottom: 0;  /* Adjust based on border thickness */
    left: 50%;  /* Position in the middle */
    transform: translateX(-50%);  /* Center it horizontally */
    width: 100%;  /* Full width minus padding */
    height: 0.03rem;  /* Border thickness */
    background-color: var(--green-color);  /* Border color */
    border-radius: 8px 8px 0 0;  /* Add rounded corners to bottom-left and bottom-right */
  }

  .tab-content {
    padding: 0.1rem;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
    scrollbar-width: none; /* For Firefox: hide scrollbar */
  }

  /* For WebKit browsers like Chrome, Safari */
  .tab-content::-webkit-scrollbar {
    width: 0; /* Hide scrollbar */
    height: 0; /* Hide scrollbar */
  }

  /* Optional: If you want to show the scrollbar when hovering */
  .tab-content:hover {
    scrollbar-width: none; /* For Firefox: thin scrollbar on hover */
  }

  .tab-content:hover::-webkit-scrollbar {
    width: 0px; /* Show thin scrollbar on hover */
    height: 0px; /* Show thin scrollbar on hover */
  }

  .tab-content:hover::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.5); /* Style the scrollbar thumb */
      border-radius: 4px; /* Rounded corners for scrollbar thumb */
  }

  .no-record-text {
    text-align: center;
    color: var(--text-white);
    font-size: var(--great-mini-font-size);
    font-weight: var(--bold-font-weight);
  }

  #luckyUserList li {
    display: flex;
    width: 100%;
    margin-bottom: 0.3rem;
    justify-content: space-evenly;
  }

  .luckyUserListText {
    color: var(--text-white);
    font-weight: var(--light-font-weight);
    font-size: var(--great-mini-font-size);
  }

  .luckyUserListAmount {
    color: var(--text-yellow);
    font-weight: var(--bold-font-weight);
    font-size: var(--great-mini-font-size);
    margin: 0 0.1rem;
  }

  .luckyUserListCurrency {
    height: 0.2rem;
    width: 0.2rem;
    background-image: url("../image/ppx7_bz_currency.webp");
  }

  .rules-container {
    height: 2.65rem;
    width: 100%;
    background-color: var(--black-transparent-background);
    border-radius: 0.1rem;
    padding: 0.2rem;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disable horizontal scrolling */
    scrollbar-width: none; /* Show thin scrollbar */
  }

  /* For WebKit browsers like Chrome, Safari */
  .rules-container::-webkit-scrollbar {
    width: 0; /* Hide scrollbar */
    height: 0; /* Hide scrollbar */
  }

  /* Optional: If you want to show the scrollbar when hovering */
  .rules-container:hover {
    scrollbar-width: none; /* For Firefox: thin scrollbar on hover */
  }

  .rules-container::-webkit-scrollbar {
    width: 8px; /* Show thin scrollbar on hover */
    height: 8px; /* Show thin scrollbar on hover */
  }

  .rules-container:hover::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.5); /* Style the scrollbar thumb */
      border-radius: 4px; /* Rounded corners for scrollbar thumb */
  }

  .rules-title-text {
    color: var(--text-white);
    font-size: var(--great-mini-font-size);
    font-weight: var(--bold-font-weight);
    margin-bottom: 0.2rem;
  }

  .rules-content-text {
    color: var(--text-grey);
    font-size: var(--great-mini-font-size);
    font-weight: var(--light-font-weight);
    line-height: 1.5; /* Adjust this value to add space between lines */
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* CSS rules for large devices */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* CSS rules for extra large devices */
}