/* PERSENAN GAME */
.percent {
height: 27px;
display: flex;
overflow: hidden;
line-height: 0;
font-size: 0.75rem;
background-color: #e9ecef;
/* border-radius: .25rem; */
position: relative;
z-index: 1;
border-radius: 18px;
width: 90%;
margin: 0 auto;
}
.percent p {
z-index: 15;
position: absolute;
text-align: center;
width: 100%;
font-size: 14px;
font-weight: bold;
transform: translateY(14px);
color: black;
}
.percent-bar {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: transparent;
text-align: center;
white-space: nowrap;
/* background-color: #007bff; */
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
transition: width 0.6s ease;
animation: progress-bar-stripes 1s linear infinite;
background-size: 1rem 1rem;
/* animation: ; */
z-index: 10;
}
.green {
background-color: #28a745;
}

.yellow {
background-color: rgb(255, 193, 7);
}

.red {
background-color: red;
}
/* HOVER CARD EFFECTS */
.hovercard {
position: absolute;
opacity: 0;
background-color: rgba(0, 0, 0, 0.9);
transition: all 0.1s ease-in-out;
z-index: 10;
width: 100%;
height: 45%;
}
.hovercard:hover {
opacity: 100%;
}
.maincard {
font-size: 15px;
text-decoration: none;
color: white;
text-align: center;
align-items: center;
margin: 33% 30px;
color: #fff;
transition: all 0.3s ease;
}
.maincardm {
font-size: 12px;
color: white;
text-align: center;
align-items: center;
color: #fff;
transition: all 0.3s ease;
width: 100%;
}
/* TOMBOL DEMO & MAIN PAS HOVER */
.main {
background: linear-gradient(to bottom, #b44dd3 0%, #303131 88%);
padding: 8px;
display: block;
margin: 5px 0;
border-radius: 18px;
}
.main1 {
margin: 42% 30px 42% 30px;
}
.main:hover {
background: linear-gradient(to top, #aaff95 0%, #29b816 88%);
color: black;
}
/*       LINK        */
.mainm {
background-color: #6e1b8a;
display: none;
color: #44ED12;
}
.demom {
background: linear-gradient(#c300ff,#16b882);
display: none;
color: #ffffff;
}
.mainm {
margin: 5px 0;
padding: 3px 0;
}
.demom {
padding: 8px;
margin: 0 11px;
border-radius: 18px;
}
.wrapslot {
background-color: #0d0d0d;
}
@keyframes progress-bar-stripes {
from {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
img {
max-width: 100%;
}
.progress {
display: flex;
height: 1rem;
overflow: hidden;
line-height: 0;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
}
/* BORDER GAME */
.imgslot {
border-radius: 5px;
}
.card {
background-color: transparent;
display: flex;
display: -ms-flexbox;
flex-direction: column;
position: relative;
float: left;
width: 18%;
margin: 1%;
}
.card:last-child {
margin-bottom: 0;
}
.wrapslot {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top:10px;
}
/* JAM GACOR */
.jam {
margin: 8px 0;
}
.jamgacor {
border-radius: 6px 6px 0 0;
border: 0.1px solid rgb(20, 20, 20);
}
/* POLA GACOR */
.pola {
border-radius: 0 0 12px 12px;
border: 0.1px solid black;
}
.pola.jamBg {
height: 100px;
line-height: 1;
}
.slot h1, .slot h2, .slot h3, .slot h4, .slot h5, .slot h6 {
margin: 0.5rem;
}
.pola1, .pola2, .pola3{
margin-bottom: 6px !important;
}
/* icons */
.lni {
margin-right:7px; /* Adds spacing to the right of each icon */
}
.number-spacing {
margin-right: 10px; /* Adjust the value as needed for your design */
}
@media (max-width: 1200px) {
.ard-sosmed{
left: 30px;
}
}
@media (max-width: 700px) {
.card {
width: 30%;
}

.jam {
margin: 40px 6% 0 6%;
width: 88%;
word-wrap: wrap;
font-size: 12px;
}

.jamgacor {
position: relative;
top: -25px;
clear: left;
}

.pola.jamBg {
height: 85px;
position: relative;
top: -25px;
}
.hovercard {
display: none;
}
.main {
display: none;
}
.mainm {
opacity: 0.8;
font-weight: bold;
}
.mainm, .demom {
display: block;
float: left;
position: relative;
width: 100%;
top: -29px;
}
.demom {
margin: 0 6%;
width: 88%;
}
.percent {
margin-top: -20px;
}
}
.span-jam{
font-size:24px;
}
.jackpot-wrapper{
display:flex;
vertical-align:middle;
align-items: center;
}
.progressive-jackpot{
position: relative;
text-align: center;
margin:0 auto;
margin-top: 20px;
background-size: 100% 100%;
}
.progressive-jackpot h2{
position: absolute;
top:0;
left:0;
right:0;
display:inline-block;
outline:0;
box-sizing:border-box;
border:none;
border-radius:0.3em;
text-transform:uppercase;
box-shadow:0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(179 179 179 / 40%), inset 0 -2px 5px 1px rgb(0 0 0), inset 0 -1px 1px 3px rgb(151 151 151);
background-image:linear-gradient(160deg, #424242, #595959, #787878, #4f4f4f, #000);
border:1px solid #000;
color:#Eee;
font-weight:700;
text-shadow:0 2px 2px rgb(0 0 0);
transition:all 0.2s ease-in-out;
background-size:100% 100%;
background-position:center;
font-size:16px;
max-width:290px;
z-index:5;
letter-spacing: 0;
margin: 0 auto;
line-height: 1.5;
}
.progressive-jackpot img{
filter:contrast(100%) hue-rotate(132deg) grayscale(0%) saturate(2.0);
}
#jackpot-amount{
font-family:"Space Mono", monospace;
background-image:linear-gradient(160deg, #fff, #515151, #f7f7f7, #dfdfdf, #fff, #575757, #e9e9e9);
color:#eee;
}
.jackpot-wrapper span{
position:absolute;
width:100%;
font-size: 3rem;
}