.welucky-container * {
        box-sizing: initial;
    }

    footer {
        clear: both;
    }

body{margin: 0; padding: 0; font-size: 14px; font-family: "poppins", Helvetica, Arial, "sans-serif"; background-color: #000C58; overflow-x: none}
canvas {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.welucky header{width:100%; float: left}
.welucky header img{width:100%; float: left}
.welucky-container{width: 800px; margin: 0 auto;}
.wl-container{width: 78%; margin: 0 auto;}
.wl-container2{width: 95%; padding-left: 5%}
.cashpool-bar{ width:90%; color: #CC0000; font-size: 12px; line-height: 16px; float: left; background-color: #f7ba47; padding:5px 5%; text-align: center}
.cashpool-col1{ width:30%; float: left; padding: 15px 0 0}
.cashpool-col2{ width:70%; margin-bottom: 10px; float: left; background-image:url("../../../images/minigames/welucky-merdeka-2025/cash-pool-box.jpg"); background-size: cover; background-repeat: no-repeat; background-position: right top}
.cashpool-headline{ width:100%; float: left}
.cashpool-headline h3{margin: 0; padding: 0; font-size: 12px; line-height: 18px; color: #000; font-weight: bold}
.cashpool-desc{ width:100%; font-size: 11px; line-height: 16px; margin-bottom: 10px; text-align: center; color: #CC0000; float: left}
.cashpool-numbers{ width:100%; color: #fff; text-align: center; padding: 10px 0; font-size: 32px; line-height: 50px; font-weight: bold; float: left}
.cashpool-banner{ width:100%; padding:5px 0; font-size: 12px; margin-bottom: 10px; float: left; background-color: yellow}
.cashpool-banner img{ width:100%; float: left}

.numbers-sub{ font-size: 21px; line-height: 28px; font-weight: 600}
.deposit-amount{width: 100%; padding: 5px 0; float: left; background-color:#FFF}

.deposit-sitemap{width:100%; color: #fff; float: left; overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling: touch}
.deposit-sitemap-row{ width:900px; float: left}
.deposit-sitemap-title{ width:70px; color:#646464; margin:0px 0 0; font-size:10px; line-height: 18px; font-weight: 500; float: left}
.deposit-sitemap-amount{width:790px; margin-bottom: 0px; font-size: 10px; line-height: 18px; text-align: center; float: left}
.deposit-sitemap-amount b{color:#F5B941; font-weight: 500}
.deposit-sitemap-col{width:12%; margin-right: 5px; padding: 0px 0; float: left; background-color: #0139AC; background-image: url("../../../images/minigames/welucky-merdeka-2025/img-line.jpg"); background-position: center center; background-size:contain; background-repeat: no-repeat; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px}

.draw-date{ width:100%; margin: 0 0 0px; float: left}
.draw-date-bar{ width:100%; color:#F5B941; font-size: 11px; font-weight: normal; text-align: center; float: left; padding: 5px 0; background-position: center top; background-size: contain}
.draw-date-bar span{font-size: 11px; color: #BCBCBC; font-weight: normal}
.wclucky-bodycontent{width:100%; margin-bottom: 120px; float: left}
.lucky-box{width: 500px; margin: 0 auto; background-image: url("../../../images/minigames/welucky-merdeka-2025/bg-spin-box.gif"); background-position: center -10px; background-repeat: no-repeat; background-size: 100%}
.lucky-number{width:400px; height: 170px; margin: 0 auto; padding: 130px 0 0; font-size: 32px; font-weight: bold; color: black; text-align: center}

.ticketno{width: 100%; /*float: left;*/ text-align: center; color: #fff; margin: 0 0 0px; line-height: 18px; }
.lucky-cta{width: 100%; float: left; text-align: center; margin: 0 0 10px;}
.lucky-cta img{ width: 100%; float: left}

.btn-spin{width: 49%; float: left}
.btn-spin-all{width:49%; float: left}

.wclucky-prizes{width:100%; float:left}
.draw-history{width:100%; float: left; margin: 0px 0 5px 0; color:#000; border-radius: 15px}
.draw-left{width:100%; font-size: 12px; text-align: center; margin: 0px 0 5px; font-weight: normal; float: left}
.draw-right{width:97%; float: left}

.winner-list{position: absolute; right: -42px}
.btn-winner-list img{width:72%; float: left}

.draw-numbers-result{position:relative; width:96%; float: left; padding: 10px 0 10px 4%; margin-bottom: 20px; color: #999999; background-color:#FFF; border-radius: 15px}
.draw-numbers-top{width:100%; margin-bottom: 5px; float: left; color: #fff}
.draw-numbers-top-col1{width:100%; float: left; font-size: 12px; font-weight: 600; text-align: center}
.draw-numbers-top-col2{width:100%; margin: 3px 0 5px 0; float: left; font-size: 11px; color: red; text-align: center}
.draw-numbers-body{ width:100%; float: left}
.draw-timeline{ width:100%; font-size: 11px; margin-bottom: 5px; text-align: center; float: left}
.draw-timeline span{color: #333333}
.draw-numbers-list{width:100%; height: 250px; padding: 5px 0 10px 0; font-size: 14px; text-align: center; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch;}
.draw-numbers-list-row{width:560px; max-width: none; margin-bottom: 10px; margin-right:8px; float: left; display: flex; justify-content: space-between}
.draw-numbers-list-row div{width:23%; padding: 5px 0; float: left; -webkit-border-radius: 60px;-moz-border-radius: 60px;border-radius: 60px}
.open-tickets{background-color:#002898; color: #fff}
.empty-tickets{background-color:#000C58; color:#393939}
.winning-tickets{background-color:#F5B941; color: #000}
.winning-tickets::after{background-image: url("../../../images/minigames/welucky-merdeka-2025/icon-red-star.svg"); background-size: 15px 15px; padding-left: 3px; background-position: right top; background-repeat: no-repeat; display: inline-block;
 width: 15px; height: 15px; content: ""}

.blind-box{width:100%; text-align: center; margin: 20px 0}
.blind-box h4{font-size: 22px; color:#F5B941; margin: 0}
.blind-box-text{width:100%; float: left; color: #ccc; margin: 10px 0 0; line-height:18px;}
.blind-box-progress{width:95%; float: left; background-color: #333333; border-radius:10px; padding: 0 20px; text-align: left; margin: 8px 0 20px}
.blind-box-progress p{font-size: 14px; color:#cccccc; margin-bottom: 6px;}
.blind-box-progress-bar{background-color: #202020; height: 12px; border-radius: 10px; margin-bottom: 12px}
.blind-box-progress-bar-active{background:linear-gradient(90deg, #ffbc29, #ffd885 90%); animation: animate 5s linear infinite; height: 12px; border-radius: 10px; text-align: center; font-size: 10px; line-height: 12px;}
@keyframes animate{0%,100%{filter: hue-rotate(0deg);} /*50%{filter: hue-rotate(360deg);}*/}
.blind-box-progress-bar-active:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:linear-gradient(90deg, #ffbc29, #ffd885 90%); filter: blur(8px);}
.blind-box-progress-bar-active span{position:relative; z-index: 5;}
.blind-box-third-col{display: inline-flex; /*column-gap: 10px; margin-bottom: 10px;*/ margin: 0 60px}
.blind-box-third{float: left; display: flex; justify-content: space-between; background-color: #3a0801; border-radius: 8px; border-color: #f9ca7b; border-style: solid; border-width: 1px; padding: 30px; margin: 10px}
.blind-box-third img{width: 90%; /*float: left;*/ margin: auto;}
.blind-box-third-active{float: left; display: flex; justify-content: space-between; background-image: linear-gradient(160deg, #3a0801 25%, #b2140f 85%); border-radius: 8px; border-color: #f9ca7b; border-style: solid; border-width: 1px; padding:30px; margin: 10px; box-shadow: 0 0 12px #f9ca7b}
.blind-box-third-active img{width: 90%; /*float: left;*/ margin: auto;}

.cashback-container { background: linear-gradient(0deg, #FFFFFF 0%, #FFF9C4 100%); border-radius: 20px;
      padding: 20px; border: 2px solid #FFBC29; box-shadow: 0 0 12px rgba(0,0,0,0.15); }

.cashback-header { display: flex; align-items: center; gap: 15px; }
.cashback-header img { width: 90px; }
.cashback-header h4 { margin: 0; font-size: 14px; color: #000; line-height: 18px; font-weight: 500; }
.cashback-header p { color: #CC0000; font-weight: bold; font-size: 24px; margin: 2px 0 0; }
.progress-wrapper { width: 100%; margin-top: 12px; }
.steps { position: relative; display: flex; justify-content: space-between; margin-bottom: 10px; }
.step { text-align: center; z-index: 2; width: 40px; }
.step-circle { width: 20px; height: 20px; margin: 0 auto 5px; border-radius: 50%; background: #111; border: 3px solid #001; }
.step.start .step-circle { background: #fff; border-color: #000C58; }
.step.passed .step-circle { background: #F2B641; border-color: #000C58; }
.step.claimed .step-circle { background: red; border-color: #000C58; }
.step-label { font-size: 12px; color: #000; }
.step-line { position: absolute; top: 7px; left: 0; width: 96%; height: 12px;
      background: #000C58; border-radius: 10px; z-index: 0; overflow: hidden; margin: 0 8px;}
.progress-fill { position: absolute;top: 0; left: 0; height: 100%;
      width: 48%; /* CONTROL PROGRESS HERE */
      background: linear-gradient(90deg, #FFBC29, #FFD885); border-radius: 10px; overflow: hidden; }

.energy { content: ""; position: absolute; top: 0; left: -50%; width: 150%; height: 100%;
      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 188, 41, 0.6) 10px, rgba(255, 255, 255, 0.3) 20px);
      animation: energyFlow 1s linear infinite; opacity: 0.6; }

@keyframes energyFlow { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }

.milestone { display: flex; align-items: center; background: linear-gradient(90deg, #000C58, #0139AC);
      border-radius: 30px; margin: 15px 0; padding: 8px 15px; color: white; justify-content: space-between; }
.milestone img { width: 60px; margin-right: 10px; margin-top: -22px; }
.milestone-text { display: flex; align-items: center; }
.milestone.red { background: linear-gradient(90deg, #A00700, #FE0000); }

.cashback-button { font-family: poppins; border: 1px solid #fff; border-radius: 20px; padding: 5px 15px; font-weight: bold; cursor: pointer; }
.btn-claimed {background-color: #F0F0F0; color: #979797; }
.btn-claim-now {background: linear-gradient(90deg, #A00700, #FE0000); color: #fff; }
.btn-deposit {background: linear-gradient(90deg, #FFBC29, #FFD885); color: #000C58; }

.claim-now {
  background: linear-gradient(90deg, #04e404, #a0f0a0);
  padding: 0;
  border: none;
  width: 110px;
  height: 32px;
  position: relative;
  color: #000c58;
  /*font-size: 12px;*/
  font-family: poppins;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 16px;
  animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {0% {box-shadow: 0 0 4px 2px rgba(160, 240, 160, 0.6);} 50% {box-shadow: 0 0 10px 4px rgba(160, 240, 160, 1);} 100% {box-shadow: 0 0 4px 2px rgba(160, 240, 160, 0.6);}}
.claim-now-content {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 2; position: relative;}
.claim-now-svg {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 1;}
.claim-now-line {fill: none; stroke-width: 2;}
.claim-now-line--outer {stroke: url(#whiteToTransparent); stroke-dasharray: 160 160; stroke-dashoffset: 0; animation: outer-dashoffset 3s linear infinite;}
@keyframes outer-dashoffset {0% {stroke-dashoffset: 0;} 50% {stroke-dashoffset: 160;} 100% {stroke-dashoffset: 320;}}

.img-prizes{width:100%; float: left; margin: 20px 0}
.img-prizes img{width: 100%; margin: 0 0 10px; -webkit-border-radius: 20px;-moz-border-radius:20px;border-radius: 20px}
.img-prizes h4{font-size: 18px; color:#F5B941; margin: 10px 0 10px}

.img-prizes-blind{width:100%; float: left; margin: 20px 0}
.img-prizes-blind img{width: 100%; margin: 0 0 5px; -webkit-border-radius: 12px;-moz-border-radius:12px;border-radius: 12px}
.img-prizes-blind h4{font-size: 18px; color:#F5B941; margin: 10px 0 10px}
.img-prizes-blind ul{margin: 0 0 0 15px; padding: 0; list-style: circle}
.img-prizes-blind li{width: 100%; float: left; font-size: 14px; color: #999999;}

.draw-tnc{width: 100%; /*float: left;*/ color: #ebebeb; margin: 15px 0; text-align: left}
.draw-tnc h4{font-size: 16px; color:#F5B941; margin: 10px 0 10px}
.cashback { font-size:18px !important; margin-top:25px !important; }
.draw-tnc ul{margin: 0 0 0 15px; padding: 0; list-style: circle}
.draw-tnc li{width: 100%; float: left; font-size: 14px;}

.draw-tnc table { width: 100%; border-collapse: collapse; text-align: left; font-family: poppins; }
.draw-tnc th, td { border: 1px solid #FFFFFF; padding: 8px 12px; }
.draw-tnc thead { background: linear-gradient(90deg, #FFBC29 0%, #FFD885 100%); color: #000; }

.draw-tnc thead th {padding: 12px; text-align: left; border-left: none; border-right: none; border-top: none; }
.draw-tnc thead th:nth-child(2) { border-left: 1px solid #000c58; border-right: 1px solid #000c58; }

/* Rounded corners for header */
.draw-tnc thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.draw-tnc thead tr:first-child th:last-child { border-top-right-radius: 10px; }
.draw-tnc tbody td { padding: 10px; text-align: left; border: 1px solid #ddd; line-height: 18px; }

/* Rounded corners for last row */
.draw-tnc tbody tr:last-child td:first-child { border-bottom-left-radius: 10px !important; }
.draw-tnc tbody tr:last-child td:last-child { border-bottom-right-radius: 10px !important; }

.draw-4d-results{width:100%; padding: 0px 0 0px; float: left; border-radius: 15px}
.draw-4d-results h4{width:100%; float: left; font-size: 18px; color: #F5B941; margin: 0 0 5px}
.draw-4d-results p{width:100%; float: left; color: #ccc; margin: 0 0 20px}
.results-col{width:46%; margin:0 2%; float: left}

.bet-wrap {
    float: left;
    background: url(../../../images/minigames/welucky-merdeka-2025/bet-balls_v2.png);
    width: 100%;
    display: block;
    margin-right: 20px
}
.bet-result {
    float: left;
    display: block;
    width: 100%;
    margin: 0
}

.dodoheader {
    height: 44px;
    padding: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    vertical-align: middle;
    padding: 0 10px
}

.dodoheader .dohleft {
    float: left;
    width: 54%
}

.dodoheader .dohright {
    float: left;
    font-size: 10px;
    width: 46%;
    padding-top: 7px;
    text-align: left;
    color: #fff
}

.dodocontent {
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    vertical-align: middle;
    background: #fff;
    height: auto
}
.dodoprize {
    width: 95%;
    color: #000;
    margin: 0 auto;
    padding: 0 0 1px; 
}

.dodoprizelist {
    height: auto;
    padding: 10px 15px 0; 
}

.dodoprizelist ul:after {
    display: block;
    content: "";
    clear: both; 
}
.dodoprizelist ul li {
    margin: 1px 0;
    float: left;
}

.prizebold {
    font-size: 14px;
    font-weight: 700;
    width: 45%;
    text-align: left
}

.prizebox {
    font-size: 16px;
    border: 1px solid;
    width: 45%;
    font-weight: 700;
    text-align: center
}

.dodotable {
    background-color: #a4a4a4;
    margin: 5px auto
}

.dodotable .dodotitle {
    font-size: 13px;
    padding: 2px;
    font-weight: 700;
    text-align: center
}

.dodonumber {
    padding: 0
}

.dodonumber ul {
    list-style: none;
    padding: 3px 4px;
    margin: 0
}

.dodonumber ul li {
    float: left;
    width: 32%;
    background: #fff;
    font-size: 11px;
    border: 1px solid #a4a4a4;
    font-weight: 700;
    text-align: center
}

.dodonumber:after {
    content: "";
    display: table;
    clear: both
}

.clearfix{ clear:left; margin: 0}

.wineff {
/* -webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, 0px 0px 0px 0px rgba(0,0,0,0); 
box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, 0px 0px 0px 0px rgba(0,0,0,0); */
background: linear-gradient(90deg, #FFBC29 0%, #FFD885 100%);
}

::-webkit-scrollbar-track::-webkit-scrollbar-track {
  background-color:#fff; 
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #fff; 
}

::-webkit-scrollbar-thumb {
  background-color: #585858;
  border-radius: 10px;
  border: solid #fff 3px; 
}

::-webkit-scrollbar-thumb:hover {
  background-color: #2c5d8b;
}

::-webkit-scrollbar-button {
  color: #357cc4;
  background-color: #2c5d8b;
  border: solid white 5px;
  border-radius: 10px;
}
::-webkit-scrollbar-button:hover {
  border: solid white 2px;
}

.textgold{color:#FFCC33}
.textwhite{color:#fff}
.textblue{color:#000C58}

.tab-frame{width:100%; float: left}
.draw-tab-wrapper {
  text-align: center;
  display: block;
  width: 100%; background-color: #eee
}

.draw-tabs {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.draw-tab-link {
  margin: 0 1%;
  list-style: none;
  padding: 10px 30px;
  color: #aaa;
  cursor: pointer;
  font-weight: 700;
  transition: all ease 0.5s;
}

.draw-tab-link:hover {
  color: #999;
  border-color: #999;
}

.draw-tab-link.active {
  color: #333;
  border-color: #333;
  background-color: #F5B941; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px
}

.draw-content-wrapper {
  padding: 0px;
}

.draw-tab-content {
  display: none;
  text-align: center;
  color: #888;
  font-weight: 300;
  font-size: 15px;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeIn 0.5s ease 1 forwards;
}

.draw-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: none;
  }
}

.wl-custom-select {
  position: relative;
  font-family: Arial; 
}
.wl-custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: #000c58; border-radius: 50px; 
}
/*style the arrow inside the select element:*/

.select-selected:after {
  position: absolute;
  content:"";
  top: 12px;
  right: 15px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color:#313131 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #999999 transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color:#ffffff;
  padding: 5px 15px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0) transparent;
  cursor: pointer; 
  user-select: none;
}
.select-items p{
	width: 100%; float: left; display: inline
}
.select-items div,.select-selected span{
	width: 100%; float: left
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #010c58;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99; border-radius: 15px; margin-top: 5px; 
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Result Tab Section */
.tabs {background: transparent; border-radius: 16px;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);}

.tab-header {display: flex; background: #fff; border-radius: 20px;}

.tab-header button {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: #646464;
    font-family: poppins;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.tab-header button.active {background: linear-gradient(90deg, #FFBC29 0%, #FFD885 100%); color: #000; border-radius: 20px;}
.tab-content {margin-top: 20px; display: none; border-radius: 15px; color: #000;}
.tab-content.active {display: block;}

.brand {background: linear-gradient(to right, #000, #444); padding: 4px 10px;
    color: white; display: flex; align-items: center; border-radius: 10px 10px 0 0;}
.brand img {height: 40px;}
.brand-2 {background: linear-gradient(to right, #A00700, #FE0000); padding: 4px 10px;
    color: white; display: flex; align-items: center; border-radius: 10px 10px 0 0;}
.brand-2 img {height: 40px;}
.brand-3 {background: linear-gradient(to right, #0f1468, #1A3EA2); padding: 4px 10px;
    color: white; display: flex; align-items: center; border-radius: 10px 10px 0 0;}
.brand-3 img {height: 40px;}

.prize-table {padding: 15px 10px 10px; background: #fff;}
.prize-row {background: #FEC10F; padding: 5px 10px; margin: 8px 0; border-radius: 20px; text-align: center; font-weight: 500;}
.prize-row2 {background: #A00700; color: #fff; padding: 5px 10px; margin: 8px 0; border-radius: 20px; text-align: center; font-weight: 500;}
.prize-row3 {background: #0f1468; color: #fff; padding: 5px 10px; margin: 8px 0; border-radius: 20px; text-align: center; font-weight: 500;}
.prize-number {text-align: center; font-size: 18px; font-weight: bold;}
.prize-number-s {text-align: center; font-size: 16px; font-weight: 500;}
.top-row {display: flex; justify-content: space-around; gap: 8px;}
.top-row .prize-row {flex: 1;}

/*Footer*/
.footer-welucky-menu{ width:100%; position: fixed; z-index: 9999; bottom: 0; left: 0; text-align: center; background: linear-gradient(90deg, #FFBC29 0%, #FFD885 100%); padding: 8px 0 0}
.footer-welucky-menu a{ width: 20%; font-size: 10px; vertical-align: text-bottom; font-weight: normal; float: left; text-decoration: none; color:rgba(0,0,0,0.50); padding: 0 0 8px; }
.footer-welucky-menu a img{width: 32px; display: block; margin:0 auto 3px}
.footer-welucky-menu-badge{position:relative; bottom: 35px; right: -20px; padding: 4px 5px; font-size: 9px; border-radius: 50%; background-color: #CC0000; color: white;}
.footer-welucky-menu p{margin:0; padding:0; text-align: center}
.gifsize{width:60px !important; margin-top: -28px !important;}
.wlactive{color:#CC0000!important; font-weight: 600!important;}

.popup {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
}
.popup-inner {
  max-width: 480px;
  width: 80%;
  padding: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
  border-radius: 15px;
  background-color: #f9d29d;
  background-image: linear-gradient(315deg, #f9d29d 0%, #ffd8cb 74%);
}
.popup-inner h2 { font-size: 21px; line-height: 28px; margin:30px 0 20px; font-weight: 600}
.popup-inner p { font-size: 16px; font-weight: normal}
.popup-inner a { font-size: 16px; font-weight: normal; color: #000; text-decoration: none}
.popup-inner img { width: 70px; margin: 0; padding: 0}
.popup-inner-btn { width: 280px; margin: 0 auto; padding: 8px 0px; text-align: center; background-color: #000; color: #fff; -webkit-border-radius: 60px;-moz-border-radius: 60px; border-radius: 60px}
.popup-inner-btn a{color: #fff; font-size: 18px;}

.popup-close {
  width: 45px;
  height: 40px;
  padding-top: 4px;
  display: inline-block;
  position: absolute;
  top: 30px;
  right: 30px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  font-size: 32px!important;
  text-align: center;
  line-height: 100%;
  color: #000!important;
}

.popup-close:hover {
  background: rgba(0,0,0,1);
  text-decoration: none;
  color: #fff!important;
}

.popup-success {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
}
.popup-success-inner {
  width: 18%;
  height: 560px;
  padding: 110px 3% 0 3%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 15px;
  text-align: center;
  background: none;
  background-image:url("../../../images/minigames/welucky-merdeka-2025/bg-popup-congratulation.png");
  background-position: top center; background-size: 100%; background-repeat: no-repeat!important
}
.popup-success h2 { font-size: 24px; color: red; margin: 20px 0 10px; font-weight: 800}
.popup-success h3 { font-size: 18px; color: #000; line-height: 21px; margin: 0px; font-weight: 700}
.popup-success p { font-size: 12px; color: #9D9D9D; font-weight: normal}
.popup-success a { font-size: 12px; font-weight: normal; color: #000; text-decoration: none}
.popup-success img { width: 120px}
.popup-success-btn { width: 280px; margin: 0 auto; padding: 8px 0px; text-align: center; background-color: #000; color: #fff; -webkit-border-radius: 60px;-moz-border-radius: 60px; border-radius: 60px}
.popup-success-btn a{color: #fff; font-size: 18px;}

.popup-success-close {
  width: 35px;
  height: 35px;
  padding-top: 2px;
  display: inline-block;
  position: absolute;
  top: 110px;
  right: 60px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  font-size: 28px!important;
  text-align: center;
  line-height: 100%;
  color: #000!important;
}
.popup-success-close:hover {
  background: rgba(0,0,0,1);
  text-decoration: none;
  color: #fff!important;
}
.btn-success-chat img{width:68px}

.btn-blink-box-rewards {
  width:40%; 
  float:left; 
  margin: 50px 0 10px; 
  padding: 10px 0; 
  border: 1px solid #fff; 
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.popup-blindbox {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
}
.popup-blindbox-inner {
  width: 18%;
  height: 560px;
  padding: 260px 3% 0 3%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 15px;
  text-align: center;
  background: none;
  background-image:url("../../../images/minigames/welucky-merdeka-2025/bg-popup-mbox.png");
  background-position: top center; background-size: 100%; background-repeat: no-repeat!important
}

.popup-blindbox h2 { font-size: 24px; color: #F5B941; margin: 20px 0 10px; font-weight: 800}
.popup-blindbox h3 { font-size: 18px; color: #fff; line-height: 21px; margin: 0px; font-weight: 400}
.popup-success p { font-size: 12px; color: #9D9D9D; font-weight: normal}

.popup-success-btn { width: 280px; margin: 0 auto; padding: 8px 0px; text-align: center; background-color: #000; color: #fff; -webkit-border-radius: 60px;-moz-border-radius: 60px; border-radius: 60px}
.popup-success-btn a{color: #fff; font-size: 18px;}
.popup-blindbox-close {
  width: 35px;
  height: 35px;
  padding-top: 2px;
  display: inline-block;
  position: absolute;
  top: 110px;
  right: 60px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 28px!important;
  text-align: center;
  line-height: 100%;
  color: #000!important;
  text-decoration: none;
}
.popup-blindbox-close:hover {
  background: rgba(0,0,0,1);
  text-decoration: none;
  color: #fff!important;
}

.popup-btn-cashback {
  width:40%; 
  float:left; 
  margin: 50px 0 10px; 
  padding: 10px 0; 
  border: 1px solid #fff; 
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.popup-cashback {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
}
.popup-cashback-inner {
  width: 18%;
  height: 560px;
  padding: 260px 3% 0 3%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 15px;
  text-align: center;
  background: none;
  background-image:url("../../../images/minigames/welucky-merdeka-2025/bg-popup-cashback.png");
  background-position: top center; background-size: 100%; background-repeat: no-repeat!important
}

.popup-cashback h2 { font-size: 24px; color: #F5B941; margin: 20px 0 10px; font-weight: 800}
.popup-cashback h3 { font-size: 18px; color: #fff; line-height: 21px; margin: 0px; font-weight: 400}
.popup-cashback p { font-size: 12px; color: #9D9D9D; font-weight: normal}

.popup-success-btn { width: 280px; margin: 0 auto; padding: 8px 0px; text-align: center; background-color: #000; color: #fff; -webkit-border-radius: 60px;-moz-border-radius: 60px; border-radius: 60px}
.popup-success-btn a{color: #fff; font-size: 18px;}
.popup-cashback-close {
  width: 35px;
  height: 35px;
  padding-top: 2px;
  display: inline-block;
  position: absolute;
  top: 110px;
  right: 60px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 28px!important;
  text-align: center;
  line-height: 100%;
  color: #000!important;
  text-decoration: none;
}
.popup-cashback-close:hover {
  background: rgba(0,0,0,1);
  text-decoration: none;
  color: #fff!important;
}

.lucky-number ul {
    padding: 0;
    margin: 0;
    list-style: none;
	}

.jSlots-wrapper {
    overflow: hidden;
    height: 55px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}

.spinmotion {
    float: left;
}
/* ---------------------------------------------------------------------
   FANCY EXAMPLE
--------------------------------------------------------------------- */
.fancy .jSlots-wrapper {
    overflow: hidden;
    height: 55px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: none;
}

.fancy .spinmotion li {
    width: 90px;
    height: 70px;
    text-align: center;
    font-size: 52px;
    line-height: 1;
    font-weight: bold;
    color: #000;
    font-family: 'Gravitas One', serif;
}

.fancy .spinmotion:first-child li {
    border-left: none;
}

.fancy .spinmotion li span {
    display: block;
}

/* ---------------------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------------------- */

@-webkit-keyframes winnerBox {
        0%, 50%, 100% {
            box-shadow: inset 0 0  0px yellow;
            background-color: #FF0000;
        }
        25%, 75% {
            box-shadow: inset 0 0 30px yellow;
            background-color: aqua;
        }
}
@-moz-keyframes winnerBox {
        0%, 50%, 100% {
            box-shadow: inset 0 0  0px yellow;
            background-color: #FF0000;
        }
        25%, 75% {
            box-shadow: inset 0 0 30px yellow;
            background-color: aqua;
        }
}
@-ms-keyframes winnerBox {
        0%, 50%, 100% {
            box-shadow: inset 0 0  0px yellow;
            background-color: #FF0000;
        }
        25%, 75% {
            box-shadow: inset 0 0 30px yellow;
            background-color: aqua;
        }
}