:root {
--white-00: #FFFFFF00;
--white-10: #FFFFFF1A;
--white-20: #FFFFFF33;
--color-accent-100: #FFFFFF;
--color-accent-300: #CCCCCC;
--color-accent-500: #808080;
--color-accent-600: #666666;
--color-accent-800: #333333;
--color-accent-900: #1A1A1A;
--black-05: #0000000D;
--black-10: #0000001A;
--black-16: #00000029;
--black-25: #00000040;
--black-30: #0000004D;
--black-50: #00000080;
--black-60: #00000999;
--black-80: #000000CC;
--black-90: #000000E6;
--black-100: #000000;
--color-gold: #D4AF37;
--color-bronze: #FE9B00;
--color-bronze02: #7B4C0A;
--color-danger: #FF453A;
/* invalid input */
--color-other-danger: #2C1B1B;
/* deposit page checkbox */
--surface-brand: #00C596;
/* leaderboard */
--border02: #FE9B0033;
--bg-color-01 :#FE9B001A;
--color-other-yellow: #EAB308;
/* side menu */
--shadow: #EACBE340;
/* icon */
--icon-eye-open: url("data:image/svg+xml;utf8,");
--icon-eye-closed: url("data:image/svg+xml;utf8,");
--icon-speaker: url("data:image/svg+xml;utf8,");
--icon-search: url("data:image/svg+xml;utf8,");
--icon-arrow: url("data:image/svg+xml;utf8,");
--icon-plus: url("data:image/svg+xml;utf8,");
--icon-info-one: url("data:image/svg+xml;utf8,");
--icon-info-two: url("data:image/svg+xml;utf8,");
--icon-info-three: url("data:image/svg+xml;utf8,");
--icon-favourite: url("data:image/svg+xml;utf8,");
--icon-favourite-active: url("data:image/svg+xml;utf8,");
--icon-home: url("data:image/svg+xml;utf8,");
--icon-promo: url("data:image/svg+xml;utf8,");
--icon-contact: url("data:image/svg+xml;utf8,");
--icon-user: url("data:image/svg+xml;utf8,");
--icon-account: url("data:image/svg+xml;utf8,");
--icon-slot: url("data:image/svg+xml;utf8,");
--icon-slot-dark: url("data:image/svg+xml;utf8,");
--icon-casino: url("data:image/svg+xml;utf8,");
--icon-casino-dark: url("data:image/svg+xml;utf8,");
--icon-sports: url("data:image/svg+xml;utf8,");
--icon-sports-dark: url("data:image/svg+xml;utf8,");
--icon-esports: url("data:image/svg+xml;utf8,");
--icon-esports-dark: url("data:image/svg+xml;utf8,");
--icon-fast: url("data:image/svg+xml;utf8,");
--icon-fast-dark: url("data:image/svg+xml;utf8,");
--icon-fish: url("data:image/svg+xml;utf8,");
--icon-fish-dark: url("data:image/svg+xml;utf8,");
--icon-hot: url("data:image/svg+xml;utf8,");
--icon-hot-dark: url("data:image/svg+xml;utf8,");
--icon-poker: url("data:image/svg+xml;utf8,");
--icon-poker-dark: url("data:image/svg+xml;utf8,");
--icon-lottery: url("data:image/svg+xml;utf8,");
--icon-lottery-dark: url("data:image/svg+xml;utf8,");
--icon-horse: url("data:image/svg+xml;utf8,");
--icon-horse-dark: url("data:image/svg+xml;utf8,");
--icon-bingo: url("data:image/svg+xml;utf8,");
--icon-bingo-dark: url("data:image/svg+xml;utf8,");
--icon-hash: url("data:image/svg+xml;utf8,");
--icon-hash-dark: url("data:image/svg+xml;utf8,");
--icon-sabong: url("data:image/svg+xml;utf8,");
--icon-sabong-dark: url("data:image/svg+xml;utf8,");
--icon-arcade: url("data:image/svg+xml;utf8,");
--icon-arcade-dark: url("data:image/svg+xml;utf8,");
--icon-crash: url("data:image/svg+xml;utf8,");
--icon-crash-dark: url("data:image/svg+xml;utf8,");
--icon-free: url("data:image/svg+xml;utf8,");
--icon-free-dark: url("data:image/svg+xml;utf8,");
--icon-others: url("data:image/svg+xml;utf8,");
--icon-others-dark: url("data:image/svg+xml;utf8,");
--icon-about: url("data:image/svg+xml;utf8,");
--icon-vip: url("data:image/svg+xml;utf8,");
--icon-referral: url("data:image/svg+xml;utf8,");
--icon-partner: url("data:image/svg+xml;utf8,");
--icon-faq: url("data:image/svg+xml;utf8,");
--icon-banking: url("data:image/svg+xml;utf8,");
--icon-privacy: url("data:image/svg+xml;utf8,");
--icon-responsible: url("data:image/svg+xml;utf8,");
--icon-deposit: url("data:image/svg+xml;utf8,");
--icon-withdrawal: url("data:image/svg+xml;utf8,");
--icon-transaction: url("data:image/svg+xml;utf8,");
--icon-reward: url("data:image/svg+xml;utf8,");
--icon-statement: url("data:image/svg+xml;utf8,");
--icon-bank: url("data:image/svg+xml;utf8,");
--icon-bank2: url("data:image/svg+xml;utf8,");
--icon-promotion: url("data:image/svg+xml;utf8,");
--icon-password: url("data:image/svg+xml;utf8,");
--icon-affiliate: url("data:image/svg+xml;utf8,");
--icon-plus-deposit: url("data:image/svg+xml;utf8,");
--icon-level-up: url("data:image/svg+xml;utf8,");
--icon-rebate: url("data:image/svg+xml;utf8,");
--icon-cashback: url("data:image/svg+xml;utf8,");
--icon-commission: url("data:image/svg+xml;utf8,");
--icon-info: url("data:image/svg+xml;utf8,");
--icon-edit: url("data:image/svg+xml;utf8,");
--vip-bootstrap-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
--icon-bar: url("data:image/svg+xml;utf8,");
--icon-chat: url("data:image/svg+xml;utf8,");
--icon-wallet: url("data:image/svg+xml;utf8,");
--icon-round-right: url("data:image/svg+xml;utf8,");
--icon-player: url("data:image/svg+xml;utf8,");
--icon-cash: url("data:image/svg+xml;utf8,");
--icon-delete: url("data:image/svg+xml;utf8,");
--icon-telegram: url("data:image/svg+xml;utf8,");
/* --icon-: url("data:image/svg+xml;utf8,"); */
/* footer */
--filter-icon: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(628%) hue-rotate(338deg) brightness(101%) contrast(97%) opacity(0.4);
--text-light-300: #FBF0CE66;
}
body {
font-family: "Google Sans Flex", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, sans-serif;
font-size: 14px;
font-weight: 400;
color: var(--color-accent-100);
background: var(--bg-body);
}
html {
background: var(--black-80);
}
body.fixed {
overflow: hidden;
height: 100%;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a:focus {
outline: 0;
}
/* icons */
.icon-svg,
.icon-svg-dark {
display: inline-block;
vertical-align: middle;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.icon-svg {
background: linear-gradient(to top,
var(--color-stop-1) var(--position-1),
var(--color-stop-2) var(--position-2),
var(--color-stop-3) var(--position-3),
var(--color-stop-4) var(--position-4)
);
}
.icon-svg-dark {
background: var(--color-primary-900);
}
.icon-eye {
width: 20px;
height: 14px;
-webkit-mask-image: var(--icon-eye-open);
mask-image: var(--icon-eye-open);
cursor: pointer;
}
.icon-eye.closed {
-webkit-mask-image: var(--icon-eye-closed);
mask-image: var(--icon-eye-closed);
}
.icon-speaker {
width: 22px;
height: 22px;
-webkit-mask-image: var(--icon-speaker);
mask-image: var(--icon-speaker);
}
.icon-search {
width: 26px;
height: 26px;
-webkit-mask-image: var(--icon-search);
mask-image: var(--icon-search);
}
.icon-arrow {
width: 19px;
height: 19px;
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
}
.icon-plus {
width: 32px;
height: 32px;
-webkit-mask-image: var(--icon-plus);
mask-image: var(--icon-plus);
}
.icon-info-one,
.icon-info-two,
.icon-info-three {
width: 26px;
height: 26px;
}
.icon-info-one {
-webkit-mask-image: var(--icon-info-one);
mask-image: var(--icon-info-one);
}
.icon-info-two {
-webkit-mask-image: var(--icon-info-two);
mask-image: var(--icon-info-two);
}
.icon-info-three {
-webkit-mask-image: var(--icon-info-three);
mask-image: var(--icon-info-three);
}
.icon-favourite,
.icon-favourite-active {
width: 16px;
height: 16px;
}
.icon-favourite {
-webkit-mask-image: var(--icon-favourite);
mask-image: var(--icon-favourite);
}
.icon-favourite-active {
background: linear-gradient(
to bottom,
var(--color-stop-1a) 10%,
var(--color-stop-2a) 40%,
var(--color-stop-3a) 70%,
var(--color-stop-4a) 100%
);
-webkit-mask-image: var(--icon-favourite-active);
mask-image: var(--icon-favourite-active);
}
.icon-home {
width: 16px;
height: 18px;
-webkit-mask-image: var(--icon-home);
mask-image: var(--icon-home);
}
.icon-promo {
width: 19px;
height: 19px;
-webkit-mask-image: var(--icon-promo);
mask-image: var(--icon-promo);
}
.icon-contact {
width: 15px;
height: 15px;
-webkit-mask-image: var(--icon-contact);
mask-image: var(--icon-contact);
}
.icon-user {
width: 18px;
height: 18px;
-webkit-mask-image: var(--icon-user);
mask-image: var(--icon-user);
}
.icon-account {
width: 41px;
height: 41px;
-webkit-mask-image: var(--icon-account);
mask-image: var(--icon-account);
}
.icon-slot,
.icon-slot-dark {
width: 26px;
height: 26px;
}
.icon-slot {
-webkit-mask-image: var(--icon-slot);
mask-image: var(--icon-slot);
}
.icon-slot-dark {
-webkit-mask-image: var(--icon-slot-dark);
mask-image: var(--icon-slot-dark);
}
.icon-casino,
.icon-casino-dark {
width: 26px;
height: 27px;
}
.icon-casino {
-webkit-mask-image: var(--icon-casino);
mask-image: var(--icon-casino);
}
.icon-casino-dark {
-webkit-mask-image: var(--icon-casino-dark);
mask-image: var(--icon-casino-dark);
}
.icon-sports,
.icon-sports-dark {
width: 26px;
height: 26px;
}
.icon-sports {
-webkit-mask-image: var(--icon-sports);
mask-image: var(--icon-sports);
}
.icon-sports-dark {
-webkit-mask-image: var(--icon-sports-dark);
mask-image: var(--icon-sports-dark);
}
.icon-esports,
.icon-esports-dark {
width: 30px;
height: 22px;
}
.icon-esports {
-webkit-mask-image: var(--icon-esports);
mask-image: var(--icon-esports);
}
.icon-esports-dark {
-webkit-mask-image: var(--icon-esports-dark);
mask-image: var(--icon-esports-dark);
}
.icon-fast,
.icon-fast-dark {
width: 24px;
height: 28px;
}
.icon-fast {
-webkit-mask-image: var(--icon-fast);
mask-image: var(--icon-fast);
}
.icon-fast-dark {
-webkit-mask-image: var(--icon-fast-dark);
mask-image: var(--icon-fast-dark);
}
.icon-fish,
.icon-fish-dark {
width: 28px;
height: 28px;
}
.icon-fish {
-webkit-mask-image: var(--icon-fish);
mask-image: var(--icon-fish);
}
.icon-fish-dark {
-webkit-mask-image: var(--icon-fish-dark);
mask-image: var(--icon-fish-dark);
}
.icon-hot,
.icon-hot-dark {
width: 22px;
height: 27px;
}
.icon-hot {
-webkit-mask-image: var(--icon-hot);
mask-image: var(--icon-hot);
}
.icon-hot-dark {
-webkit-mask-image: var(--icon-hot-dark);
mask-image: var(--icon-hot-dark);
}
.icon-poker,
.icon-poker-dark {
width: 28px;
height: 27px;
}
.icon-poker {
-webkit-mask-image: var(--icon-poker);
mask-image: var(--icon-poker);
}
.icon-poker-dark {
-webkit-mask-image: var(--icon-poker-dark);
mask-image: var(--icon-poker-dark);
}
.icon-lottery,
.icon-lottery-dark {
width: 26px;
height: 26px;
}
.icon-lottery {
-webkit-mask-image: var(--icon-lottery);
mask-image: var(--icon-lottery);
}
.icon-lottery-dark {
-webkit-mask-image: var(--icon-lottery-dark);
mask-image: var(--icon-lottery-dark);
}
.icon-horse,
.icon-horse-dark {
width: 28px;
height: 26px;
}
.icon-horse {
-webkit-mask-image: var(--icon-horse);
mask-image: var(--icon-horse);
}
.icon-horse-dark {
-webkit-mask-image: var(--icon-horse-dark);
mask-image: var(--icon-horse-dark);
}
.icon-bingo,
.icon-bingo-dark {
width: 26px;
height: 20px;
}
.icon-bingo {
-webkit-mask-image: var(--icon-bingo);
mask-image: var(--icon-bingo);
}
.icon-bingo-dark {
-webkit-mask-image: var(--icon-bingo-dark);
mask-image: var(--icon-bingo-dark);
}
.icon-hash,
.icon-hash-dark {
width: 24px;
height: 24px;
}
.icon-hash {
-webkit-mask-image: var(--icon-hash);
mask-image: var(--icon-hash);
}
.icon-hash-dark {
-webkit-mask-image: var(--icon-hash-dark);
mask-image: var(--icon-hash-dark);
}
.icon-sabong,
.icon-sabong-dark {
width: 27px;
height: 32px;
}
.icon-sabong {
-webkit-mask-image: var(--icon-sabong);
mask-image: var(--icon-sabong);
}
.icon-sabong-dark {
-webkit-mask-image: var(--icon-sabong-dark);
mask-image: var(--icon-sabong-dark);
}
.icon-arcade,
.icon-arcade-dark {
width: 24px;
height: 25px;
}
.icon-arcade {
-webkit-mask-image: var(--icon-arcade);
mask-image: var(--icon-arcade);
}
.icon-arcade-dark {
-webkit-mask-image: var(--icon-arcade-dark);
mask-image: var(--icon-arcade-dark);
}
.icon-crash,
.icon-crash-dark {
width: 30px;
height: 23px;
}
.icon-crash {
-webkit-mask-image: var(--icon-crash);
mask-image: var(--icon-crash);
}
.icon-crash-dark {
-webkit-mask-image: var(--icon-crash-dark);
mask-image: var(--icon-crash-dark);
}
.icon-free,
.icon-free-dark {
width: 32px;
height: 32px;
}
.icon-free {
-webkit-mask-image: var(--icon-free);
mask-image: var(--icon-free);
}
.icon-free-dark {
-webkit-mask-image: var(--icon-free-dark);
mask-image: var(--icon-free-dark);
}
.icon-others,
.icon-others-dark {
width: 24px;
height: 24px;
}
.icon-others {
-webkit-mask-image: var(--icon-others);
mask-image: var(--icon-others);
}
.icon-others-dark {
-webkit-mask-image: var(--icon-others-dark);
mask-image: var(--icon-others-dark);
}
.icon-about {
-webkit-mask-size: 24px 22px;
mask-size: 24px 22px;
-webkit-mask-image: var(--icon-about);
mask-image: var(--icon-about);
}
.icon-vip {
-webkit-mask-size: 24px 18px;
mask-size: 24px 18px;
-webkit-mask-image: var(--icon-vip);
mask-image: var(--icon-vip);
}
.icon-referral {
-webkit-mask-size: 22px 22px;
mask-size: 22px 22px;
-webkit-mask-image: var(--icon-referral);
mask-image: var(--icon-referral);
}
.icon-partner {
-webkit-mask-size: 24px 18px;
mask-size: 24px 18px;
-webkit-mask-image: var(--icon-partner);
mask-image: var(--icon-partner);
}
.icon-faq {
-webkit-mask-size: 21px 21px;
mask-size: 21px 21px;
-webkit-mask-image: var(--icon-faq);
mask-image: var(--icon-faq);
}
.icon-banking {
-webkit-mask-size: 24px 19px;
mask-size: 24px 19px;
-webkit-mask-image: var(--icon-banking);
mask-image: var(--icon-banking);
}
.icon-privacy {
-webkit-mask-size: 21px 22px;
mask-size: 21px 22px;
-webkit-mask-image: var(--icon-privacy);
mask-image: var(--icon-privacy);
}
.icon-responsible {
-webkit-mask-size: 22px 22px;
mask-size: 22px 22px;
-webkit-mask-image: var(--icon-responsible);
mask-image: var(--icon-responsible);
}
.icon-deposit {
width: 25px;
height: 22px;
-webkit-mask-image: var(--icon-deposit);
mask-image: var(--icon-deposit);
}
.icon-withdrawal {
width: 30px;
height: 24px;
-webkit-mask-image: var(--icon-withdrawal);
mask-image: var(--icon-withdrawal);
}
.icon-transaction {
width: 22px;
height: 26px;
-webkit-mask-image: var(--icon-transaction);
mask-image: var(--icon-transaction);
}
.icon-reward {
width: 26px;
height: 25px;
-webkit-mask-image: var(--icon-reward);
mask-image: var(--icon-reward);
}
.icon-statement {
width: 26px;
height: 22px;
-webkit-mask-image: var(--icon-statement);
mask-image: var(--icon-statement);
}
.icon-bank {
width: 30px;
height: 24px;
-webkit-mask-image: var(--icon-bank);
mask-image: var(--icon-bank);
}
.icon-bank2 {
width: 24px;
height: 24px;
-webkit-mask-image: var(--icon-bank2);
mask-image: var(--icon-bank2);
}
.icon-promotion {
width: 26px;
height: 22px;
-webkit-mask-image: var(--icon-promotion);
mask-image: var(--icon-promotion);
transform: scaleX(-1)
}
.icon-password {
width: 24px;
height: 27px;
-webkit-mask-image: var(--icon-password);
mask-image: var(--icon-password);
}
.icon-affiliate {
width: 32px;
height: 32px;
-webkit-mask-image: var(--icon-affiliate);
mask-image: var(--icon-affiliate);
}
.icon-plus-deposit {
width: 16px;
height: 16px;
-webkit-mask-image: var(--icon-plus-deposit);
mask-image: var(--icon-plus-deposit);
}
.icon-level-up {
width: 17px;
height: 11px;
-webkit-mask-image: var(--icon-level-up);
mask-image: var(--icon-level-up);
}
.icon-rebate {
width: 16px;
height: 15px;
-webkit-mask-image: var(--icon-rebate);
mask-image: var(--icon-rebate);
}
.icon-cashback {
width: 16px;
height: 16px;
-webkit-mask-image: var(--icon-cashback);
mask-image: var(--icon-cashback);
}
.icon-commission {
width: 19px;
height: 16px;
-webkit-mask-image: var(--icon-commission);
mask-image: var(--icon-commission);
}
.icon-info {
width: 15px;
height: 15px;
-webkit-mask-image: var(--icon-info);
mask-image: var(--icon-info);
}
.icon-bar {
width: 28px;
height: 28px;
-webkit-mask-image: var(--icon-bar);
mask-image: var(--icon-bar);
}
.icon-chat {
width: 25px;
height: 25px;
-webkit-mask-image: var(--icon-chat);
mask-image: var(--icon-chat);
}
.icon-wallet {
width: 25px;
height: 22px;
-webkit-mask-image: var(--icon-wallet);
mask-image: var(--icon-wallet);
}
.icon-round-right {
width: 16px;
height: 16px;
-webkit-mask-image: var(--icon-round-right);
mask-image: var(--icon-round-right);
}
.icon-player {
width: 16px;
height: 16px;
-webkit-mask-image: var(--icon-player);
mask-image: var(--icon-player);
}
.icon-cash {
width: 13px;
height: 10px;
-webkit-mask-image: var(--icon-cash);
mask-image: var(--icon-cash);
}
.icon-delete {
width: 15px;
height: 16px;
-webkit-mask-image: var(--icon-delete);
mask-image: var(--icon-delete);
}
.icon-telegram {
width: 49px;
height: 41px;
-webkit-mask-image: var(--icon-telegram);
mask-image: var(--icon-telegram);
}
.icon-edit {
width: 25px;
height: 25px;
-webkit-mask-image: var(--icon-edit);
mask-image: var(--icon-edit);
}
/* btn */
.btn-main {
padding: 10px 20px;
color: var(--color-primary-1000);
font-weight: 700;
text-transform: uppercase;
background: var(--gradient-bg-body);
box-shadow: 0 4px 10px 0 var(--black-16);
line-height: 18px;
display: block;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 15px;
cursor: pointer;
}
.btn-main:hover,
.btn-main:active,
.btn-main:focus,
.btnform:hover,
.btnform:active,
.btnform:focus {
position: relative;
background: var(--black-30);
color: var(--color-accent-100);
}
.btn-main:hover::before,
.btn-main:active::before,
.btn-main:focus::before,
.btnform:hover::before,
.btnform:active::before,
.btnform:focus::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-bg-body);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* table */
table {
--bs-table-bg: transparent;
width: 100%;
display: block;
overflow-x: auto;
table-layout: fixed;
}
table th {
white-space: nowrap;
}
table>:not(caption)>*>* {
border: 1px solid var(--color-accent-100);
padding: 10px 14px;
width: 1%;
}
/* gradient bg */
.gradient-bg {
position: relative;
background: var(--color-primary-10);
}
.gradient-bg::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-bg-body);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* scrollbar */
.up-down {
overflow-x: hidden;
overflow-y: overlay;
}
.left-right {
overflow-x: overlay;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
display: none;
}
.up-down::-webkit-scrollbar,
.left-right::-webkit-scrollbar {
display: block;
}
.up-down::-webkit-scrollbar-track,
.left-right::-webkit-scrollbar-track {
background: var(--black-80);
}
.up-down::-webkit-scrollbar-thumb,
.left-right::-webkit-scrollbar-thumb {
background: var(--color-primary-400);
}
.mobile-view {
max-width: 480px;
margin: 0 auto;
height: 100dvh;
background: var(--bg-mobile);
box-shadow: 0 2.4px 4.8px 0 var(--shadow);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mobile-view.fixed {
height: initial;
overflow: hidden;
}
/* modal */
.modal-content {
position: relative;
border-radius: 16px;
background-color: var(--color-primary-10);
isolation: isolate;
}
.modal-content::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: var(--gradient-bg-body);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
.modal-dialog {
max-width: 320px;
margin: 0 auto;
}
.modal-backdrop {
--bs-backdrop-opacity: .85;
}
.modal-title {
font-size: 20px;
font-weight: 700;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
position: absolute;
z-index: 2;
top: -33px;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-content .btn-close {
position: absolute;
right: 0;
top: -81px;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid transparent;
background: linear-gradient(var(--black-100), var(--black-100)) padding-box, var(--gradient-bg-body) border-box;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
padding: 0;
opacity: 1;
}
.modal-content .btn-close::before {
content: "×";
font-size: 28px;
line-height: 1;
position: relative;
left: 7px;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top: -1px;
}
/* app download */
.app-download {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1002;
backdrop-filter: blur(7px);
width: 100%;
max-width: 480px;
height: 100%;
}
.app-content {
padding: 16px 24px;
position: fixed;
bottom: 0;
border-radius: 20px 20px 0px 0px;
background-color: var(--black-80);
width: 100%;
border-top: 2px solid var(--color-primary-30);
background: var(--black-80);
}
.app-close {
position: absolute;
top: 8px;
right: 12px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid transparent;
background: linear-gradient(var(--black-100), var(--black-100)) padding-box, var(--gradient-bg-body) border-box;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
}
.app-close::before {
content: "×";
font-size: 28px;
line-height: 1;
position: relative;
left: 7px;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top: -1px;
}
.app-content-top {
display: flex;
align-items: center;
width: 90%;
align-self: stretch;
gap: 10px;
}
.app-content-top .logo-app {
background: var(--color-primary-900);
width: 65px;
height: 65px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
flex-shrink: 0;
}
.app-content-top .logo-app img {
width: 55px;
max-width: 55px;
}
.app-description {
font-size: 12px;
line-height: 18px;
}
.app-continue {
color: var(--color-primary-400);
text-decoration: underline;
font-weight: 600;
margin: 6px 0;
text-align: center;
cursor: pointer;
}
.app-content-bottom {
display: flex;
justify-content: center;
align-items: center;
}
.app-content-bottom .btn {
border-radius: 8px;
width: 130px;
margin: 0 6px;
font-size: 24px;
padding: 5px 12px;
display: flex;
align-items: center;
justify-content: center;
}
.app-content-bottom .btn:only-child {
width: inherit;
}
.app-content-bottom .btn-primary,
.app-content-bottom .btn-primary:hover,
.app-content-bottom .btn-primary:focus,
.app-content-bottom .btn-primary:active {
background-image: var(--gradient-bg-body);
background-origin: border-box;
border-color: transparent;
color: var(--color-primary-1000);
}
.app-content-bottom .btn-outline-primary,
.app-content-bottom .btn-outline-primary:hover,
.app-content-bottom .btn-outline-primary:focus,
.app-content-bottom .btn-outline-primary:active {
border-color: var(--color-primary-400);
color: var(--color-primary-400);
background-color: transparent;
}
.app-content-bottom .btn span {
text-transform: uppercase;
font-size: 14px;
margin-left: 8px;
}
.download-bar {
display: flex;
align-items: center;
padding: 10px 20px;
background: var(--bg-download);
}
.download-bar .logo-app {
margin-right: 10px;
background: var(--color-primary-900);
width: 50px;
height: 50px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.download-bar .logo-app img {
width: 40px;
max-width: 40px;
}
.app-name {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
flex-direction: column;
line-height: 1;
gap: 3px;
font-weight: 700;
}
.app-name span {
font-size: 10px;
font-weight: 400;
}
.download-bar-btn,
.download-bar-btn:hover,
.download-bar-btn:focus,
.download-bar-btn:active {
background: var(--gradient-bg-body);
color: var(--color-primary-1000) !important;
font-weight: 700;
border-radius: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 0;
font-size: 12px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
}
.download-bar-btn span {
display: none;
}
.download-bar-close {
margin-left: 10px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid transparent;
background: linear-gradient(var(--black-100), var(--black-100)) padding-box, var(--gradient-bg-body) border-box;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
}
.download-bar-close::before {
content: "×";
font-size: 28px;
line-height: 1;
position: relative;
left: 7px;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (min-width: 1200px) {
.app-download,
.download-bar {
display: none;
}
}
/* ios-tutorial */
#ios-tutorial .modal-dialog {
padding: 84px 0 32px;
width: initial;
}
#ios-tutorial .btn-close-ios {
position: absolute;
top: -81px;
position: absolute;
right: 0;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid transparent;
background: linear-gradient(var(--black-100), var(--black-100)) padding-box, var(--gradient-bg-body) border-box;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
}
#ios-tutorial .btn-close-ios::before {
content: "×";
font-size: 28px;
line-height: 1;
position: relative;
left: 7px;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ios-tutorial img {
border-radius: 16px;
width: 100%;
}
/* partner floating */
.partner {
position: fixed;
right: calc(50% - 240px);
top: 50%;
transform: translateY(-50%);
background: var(--black-100);
border-radius: 10px 0 0 10px;
width: 45px;
z-index: 11;
text-align: center;
border: 1px solid var(--color-primary-400);
border-right: 0;
padding: 0px;
overflow: hidden;
cursor: pointer;
box-shadow: inset 0px 0px 7px var(--color-primary-400);
}
@media (max-width: 480px) {
.partner {
right: 0;
}
}
.partner .icon {
padding: 5px;
border-radius: 7px;
margin: 5px;
}
.partner .icon img {
width: 100%;
}
.partner span {
font-size: 0.8rem;
writing-mode: vertical-lr;
margin: 15px 0 0px 0;
}
.partner .arrow {
color: var(--color-primary-400);
font-size: 1rem;
padding: 5px 3px;
position: relative;
}
.partner .icon-wrapper {
display: block;
}
.partner.close {
width: 25px;
box-shadow: inset 0px 0px 3px var(--rchat-theme-color);
}
.partner.close .icon-wrapper {
display: none;
}
.partner.close .arrow {
font-size: 1rem;
margin: 0px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.partner.close .arrow i {
height: 12px;
}
#modal-partner .modal-content {
padding: 15px;
}
.partner-title {
font-size: 32px;
font-weight: 700;
height: 50px;
line-height: 50px;
text-align: center;
text-transform: uppercase;
position: absolute;
z-index: 2;
top: -60px;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 100%;
}
.partner-logo-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.partner-logo-wrapper .partner-logo {
border-radius: 12px;
box-shadow: 5px 0px 10px rgb(0 0 0 / 70%);
transition: all 0.3s ease-in-out;
border: 2px solid transparent;
background: var(--partner-box-bg) padding-box, var(--partner-boder) border-box;
margin-bottom: 15px;
align-self: start;
justify-self: start;
min-width: 0;
min-height: 0;
width: 100%;
}
.partner-logo-wrapper .partner-logo:hover {
transform: translateY(-5px);
}
.partner-logo-wrapper .partner-logo a {
display: block;
min-width: 0;
}
.partner-logo-wrapper .partner-logo img {
width: 100%;
border-radius: 10px 10px 0 0;
}
.partner-logo-wrapper .partner-name {
text-align: center;
padding: 5px;
position: relative;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 0;
}
.partner-logo-wrapper .partner-name:before {
content: "";
height: 1px;
width: 100%;
background: var(--partner-name-line);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.partner-logo-wrapper .partner-btn {
text-align: center;
padding: 3px 10px;
font-size: clamp(12px, 3vw, 14px);
border-radius: 20px;
width: 90%;
margin: 0 auto -15px auto;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: var(--gradient-bg-body);
color: var(--color-primary-1000);
}
#modal-partner .btn-close {
position: absolute;
right: 0;
top: -100px;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid transparent;
background: linear-gradient(var(--black-100), var(--black-100)) padding-box, var(--gradient-bg-body) border-box;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
padding: 0;
opacity: 1;
}
#modal-partner .btn-close::before {
content: "×";
font-size: 28px;
line-height: 1;
position: relative;
left: 7px;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* rewards */
.reward {
position: fixed;
right: calc(50% - 240px + 20px);
bottom: 150px;
z-index: 9;
animation: upDown 1s ease-in-out infinite;
}
@media (max-width: 480px) {
.reward {
right: 20px;
}
}
.reward a {
display: block;
}
.reward-close {
cursor: pointer;
line-height: 1;
position: absolute;
top: -32px;
right: 0;
font-size: 24px;
}
@keyframes upDown {
0%, 100% {
bottom: 150px;
}
50% {
bottom: 156px;
}
}
.reward img {
height: 80px;
}
/* live chat */
.live-chat-floating {
position: fixed;
right: calc(50% - 240px + 20px);
bottom: 80px;
z-index: 10;
cursor: pointer;
}
@media (max-width: 480px) {
.live-chat-floating {
right: 20px;
}
}
.live-chat-wrapper {
border-radius: 100%;
width: 56px;
height: 56px;
background-color: var(--color-chat);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
.live-chat-wrapper img {
width: 25px;
}
.live-chat-wrapper .icon-chat {
background: var(--color-accent-100);
}
.live-chat-floating:after {
content: "";
position: absolute;
width: 0px;
height: 0px;
background-color: rgba(255,255,255,0.2);
animation: blink 5s infinite ease-in-out;
border-radius: 100%;
opacity: 0;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
@keyframes blink {
20% {
width: 70px;
height: 70px;
opacity: 1;
}
30% {
width: 50px;
height: 50px;
opacity: 0;
}
}
/* header */
.content-top {
z-index: 1001;
position: relative;
flex-shrink: 0;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border-bottom: 1px solid var(--color-primary-30);
backdrop-filter: blur(2px);
height: 59px;
}
.header-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
min-width: 0;
gap: 8px;
}
.header-wrapper .logo {
overflow: hidden;
}
.header-wrapper .logo img {
width: 100%;
max-width: 81px;
max-height: 42px;
}
.logo-text {
font-size: 28px;
text-transform: uppercase;
font-weight: 700;
}
.logo-text span {
color: var(--color-primary-400);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-wrapper {
display: flex;
flex-direction: row;
gap: 8px;
}
.btn-wrapper .btn {
display: flex;
padding: 8px 10px;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
border-radius: 8px;
min-width: 56px;
max-height: 27px;
overflow: hidden;
}
@media (min-width: 393px) {
.btn-wrapper .btn-login {
min-width: 75px;
}
.btn-wrapper .btn-register {
min-width: 95px;
}
}
.btn-wrapper .btn-login,
.btn-wrapper .btn-login:active,
.btn-wrapper .btn-login:hover,
.btn-wrapper .btn-login:focus {
background-color: var(--color-primary-400);
color: var(--black-100);
}
.btn-wrapper .btn-register,
.btn-wrapper .btn-register:active,
.btn-wrapper .btn-register:hover,
.btn-wrapper .btn-register:focus {
border: 1px solid var(--color-primary-400);
color: var(--color-primary-400);
}
.icon-nav {
width: 28px;
height: 28px;
cursor: pointer;
}
.icon-nav .icon-bar {
background: var(--color-primary-400);
}
/* side menu */
.side-menu {
width: 100%;
max-width: 480px;
top: 0;
bottom: 0;
position: fixed;
overflow-y: hidden;
left: 50%;
transform: translateX(240px);
background: var(--bg-body);
z-index: 1049;
transition: tright 0.3s ease;
box-shadow: 0 2.4px 4.8px 0 var(--shadow);
backdrop-filter: blur(12px);
display: none;
}
.side-menu.open {
transform: translateX(240px) translateX(-100%);
display: block;
}
@media (max-width: 480px) {
.side-menu {
left: 100%;
transform: none;
}
.side-menu.open {
left: 0;
transform: none;
}
}
.side-top {
background-size: cover;
position: sticky;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 58px;
z-index: 99;
padding: 8px 16px;
border-bottom: 1px solid var(--color-primary-30);
backdrop-filter: blur(2px);
}
.side-logo img {
height: 42px;
max-height: 42px;
}
.side-icon {
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
font-weight: 200;
}
.side-icon::before {
content: "×";
font-size: 58px;
line-height: 1;
position: relative;
left: 7px;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.side-top-wrapper {
height: calc(100% - 59px);
padding-top: 10px;
}
.side-center {
display: flex;
flex-direction: column;
gap: 10px;
}
.language-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 10px;
gap: 20px;
}
.language-flag {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
row-gap: 10px;
flex-wrap: wrap;
row-gap: 10px;
max-width: 190px;
}
.language-flag > div {
border: 2px solid transparent;
border-radius: 50%;
padding: 2px;
}
.language-flag > div:hover,
.language-flag .active {
/* border: 2px solid transparent; */
background: linear-gradient(var(--black-100), var(--black-100)) padding-box, var(--gradient-bg-body) border-box;
}
.language-flag img {
height: 32px;
width: 32px;
border-radius: 50%;
cursor: pointer;
}
.side-special {
display: flex;
gap: 10px;
font-size: 10px;
}
.side-special:has(> div:nth-child(n+2)) {
display: grid;
}
.side-special:has(> div:nth-child(2):last-child),
.side-special:has(> div:nth-child(4):last-child) {
grid-template-columns: repeat(2, 1fr);
}
.side-special:has(> div:nth-child(3):last-child),
.side-special:has(> div:nth-child(5):last-child),
.side-special:has(> div:nth-last-child(n+6)) {
grid-template-columns: repeat(3, 1fr);
}
.minigames {
flex: 1;
border-radius: 12px;
background: linear-gradient(var(--color-primary-900), var(--color-primary-900)) padding-box, var(--gradient-bg-body) border-box;
border: 1px solid transparent;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
gap: 4px;
cursor: pointer;
}
.minigames img {
height: 42px;
flex-shrink: 0;
}
.minigames span {
display: flex;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
align-items: flex-end;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
text-align: center;
line-height: 13px;
}
.games {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px 0px 0px;
gap: 16px;
}
.game-categories {
align-self: stretch;
text-transform: uppercase;
text-align: center;
font-weight: 700;
}
.gamescat,
.gamescat .menu {
width: 100%;
}
.gamescat ul {
align-self: stretch;
overflow: auto;
display: grid;
grid-template-columns: repeat(4,1fr);
align-content: start;
column-gap: 16px;
row-gap: 10px;
padding-bottom: 8px;
font-size: 10px;
}
.gamescat ul li {
display: flex;
justify-content: center;
}
.gamescat .menu ul li {
width: 100%;
margin-bottom: 0;
}
.gamescat .menu ul li a:hover .menu-icon {
/* display: flex; */
}
.side-link {
border-top: 2px solid var(--color-primary-30);
padding: 10px 0;
}
.side-link ul {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 10px;
}
.side-link ul li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
}
.side-link ul li a .icon-svg {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
flex-shrink: 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.side-link ul li a img {
height: 24px;
}
/* content */
.content-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
align-self: stretch;
flex-grow: 1;
overflow-y: auto;
padding-bottom: 56px;
}
/* announcement */
.announcement-wrapper {
padding: 9px 0;
border-bottom: 1px solid var(--color-primary-30);
width: 100%;
}
.announcement-content {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.announcement-left {
padding: 0 16px;
border-right: 1px solid var(--color-primary-400);
display: flex;
align-items: center;
gap: 8px;
}
.announcement-left span {
text-transform: uppercase;
font-weight: 700;
color: var(--color-primary-400);
white-space: nowrap;
}
.announcement-left img {
width: 22px;
height: 22px;
}
.announcement-right {
display: flex;
}
.announcement-right {
font-weight: 700;
}
.announcement-right span {
font-weight: 700;
color: var(--color-primary-400);
}
/* main banner */
.main-banner {
border-radius: 12px;
}
.main-banner .swiper-slide img {
border: 1px solid transparent;
background-image: linear-gradient(to right, #ffffff, #ffffff), var(--gradient-bg-body);
background-origin: border-box;
background-clip: content-box, border-box;
width: 100%;
border-radius: 12px;
}
.banner-lg {
display: none;
}
.banner-sm {
display: block;
}
@media (min-width: 960px) {
.banner-lg {
display: block;
}
.banner-sm {
display: none;
}
}
/* search */
.search-div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.search-container {
display: flex;
align-items: center;
width: 100%;
padding: 11px 16px;
gap: 12px;
border-radius: 12px;
margin: 16px 0;
backdrop-filter: blur(2px);
height: 56px;
position: relative;
background: var(--black-30);
}
.search-container::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-bg-body);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
.search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--color-accent-100);
font-size: 16px;
}
::placeholder {
color: var(--color-primary-200);
opacity: 1;
}
:-ms-input-placeholder {
color: var(--color-primary-200);
}
::-ms-input-placeholder {
color: var(--color-primary-200);
}
.fav-wrap {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.fav-wrap .game-favourite {
position: inherit;
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--black-30);
border: 1px solid var(--color-primary-30);
}
.fav-wrap .game-favourite .icon-favourite,
.fav-wrap .game-favourite .icon-favourite-active {
width: 30px;
height: 30px;
}
/* slot game */
.game-center {
display: flex;
gap: 14px;
width: 100%;
position: relative;
}
.sticky {
position: fixed;
top: 165px;
left: 12px;
z-index: 10;
}
@media (min-width: 480px) {
.sticky {
left: calc(50% - 240px + 12px);
}
}
.menu {
width: 56px;
flex-shrink: 0;
}
.game-center .menu ul {
display: inline-block;
}
.menu ul li {
margin-bottom: 10px;
width: 56px;
}
.menu ul li:last-child {
margin-bottom: 0;
}
.menu ul li a {
display: inline-block;
text-align: center;
}
.menu-icon,
.menu-icon-dark {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1/1;
border-radius: 16px;
}
.menu-icon {
background: var(--color-primary-30);
}
.menu ul li a.active .menu-icon-dark,
.menu ul li a:hover .menu-icon-dark {
background: var(--gradient-bg-body);
}
.menu-icon-dark,
.menu ul li a.active .menu-icon,
.menu ul li a:hover .menu-icon {
display: none;
}
.menu ul li a.active .menu-icon-dark,
.menu ul li a:hover .menu-icon-dark {
display: flex;
}
.menu-icon img {
width: 26px;
height: 26px;
}
.menu-text {
font-size: 10px;
text-transform: capitalize;
width: 56px;
margin-top: 2px;
line-height: 13px;
text-align: center;
}
.all-games {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 10px;
flex-grow: 1;
min-width: 0;
}
.btn-load {
display: flex;
padding: 8px 10px;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
border-radius: 8px;
min-width: 100px;
max-width: 50%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid var(--color-primary-400);
color: var(--color-primary-400);
cursor: pointer;
gap: 4px;
}
.btn-load-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.btn-count {
flex-shrink: 0;
}
.btn-count span {
color: var(--color-accent-100);
}
.game-wrapper {
display: grid;
/* grid-template-columns: repeat(2, 1fr); */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
align-content: start;
}
.game-wrapper:not(:has(.game-single)) {
grid-template-columns: unset;
}
.game-center:has(.menu.fixme.sticky) .game-wrapper {
padding-left: 70px;
}
.box-empty {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 200px;
border-radius: 12px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
color: var(--color-accent-300);
}
.game-single {
position: relative;
/* height: max-content; */
border-radius: 12px;
border: 1px solid var(--color-primary-30);
cursor: pointer;
background: var(--black-60);
}
.game-single:hover {
border-color: var(--color-primary-400);
}
.game-thumb {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
}
.game-thumb img {
border-radius: 12px;
width: 100%;
}
.game-name {
font-size: 10px;
text-transform: uppercase;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: var(--black-60);
color: var(--color-primary-400);
border-radius: 0 0 12px 12px;
display: block;
width: 100%;
padding: 6px;
backdrop-filter: blur(2px);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.game-new {
background: var(--color-chat);
border-radius: 0 12px 0 8px;
padding: 2px 8px;
position: absolute;
top: 0;
right: 0;
text-transform: uppercase;
font-size: 10px;
line-height: 15px;
}
.game-favourite {
display: flex;
width: 32px;
height: 32px;
border-radius: 50%;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
position: absolute;
top: 4px;
left: 4px;
z-index: 11;
background: var(--black-60);
backdrop-filter: blur(2px);
}
.game-favourite.active {
color: var(--color-primary-400);
}
.game-provider {
position: absolute;
top: 0;
right: 4px;
}
.game-provider img {
height: 26px;
}
/* footer */
footer {
background: var(--black-80);
border-top: 1px solid var(--color-primary-30);
backdrop-filter: blur(10px);
position: relative;
width: 100%;
z-index: 10;
flex-shrink: 0;
}
footer ul {
display: flex;
padding: 1px 8px 1px;
}
footer ul li {
width: 20%;
flex-shrink: 0;
position: relative;
}
footer ul li a {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 6px;
line-height: 1;
border-top: 5px solid transparent;
justify-content: flex-end;
min-height: 61px;
}
footer ul li a.active {
border-top: 5px solid var(--color-primary-400);
}
footer ul li:nth-child(3) a.active {
border-top: 0;
}
footer ul li a span {
font-size: 10px;
text-transform: uppercase;
color: var(--text-light-300);
line-height: 13px;
text-align: center;
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
footer ul li a.active span {
color: var(--color-primary-400);
}
footer ul li a img {
height: 20px;
filter: var(--filter-icon);
}
footer ul li a.active img {
filter: none;
}
footer ul li a .nav-deposit {
width: 56px;
height: 56px;
border-radius: 50%;
margin: -28px auto 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-deposit);
background-repeat: no-repeat;
position: absolute;
top: 0;
}
footer ul li a .nav-deposit::after {
content: "";
position: absolute;
top: 2px;
left: 50%;
transform: translateX(-50%);
width: 50.488px;
height: 24.266px;
background: var(--bg-deposit-top) no-repeat center;
background-size: contain;
z-index: 1;
mix-blend-mode: screen;
}
footer ul li a .nav-deposit .icon-wallet {
background: var(--color-primary-1000);
position: relative;
z-index: 2;
filter: none;
}
footer ul li a .nav-deposit img {
height: 26px;
filter: none;
}
.avatar .my-account,
footer ul li a .my-account {
position: relative;
background: var(--color-accent-800);
border-radius: 50%;
margin-top: -1px;
}
.avatar .my-account .my-account-border,
footer ul li a .my-account .my-account-border {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid var(--black-100);
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
overflow: hidden;
}
.avatar .my-account img,
footer ul li a .my-account img {
width: 32px;
height: 32px;
filter: none;
position: relative;
top: 3px;
}
footer ul li a .icon-svg {
filter: var(--filter-icon);
}
footer ul li a .icon-svg.icon-account {
filter: none;
}
footer ul li a.active .icon-svg {
filter: none;
}
/* after login */
.af-box {
display: flex;
flex-direction: column;
padding: 40px 4px 0;
gap: 24px;
margin-bottom: 0;
max-width: inherit;
}
.logged-in .af-box {
gap: 16px;
}
.af-box-head {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
}
.af-box .af-box-head h4 {
padding: 0;
line-height: 23px;
font-size: 18px;
font-weight: 600;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.af-box .af-box-head p {
text-align: center;
line-height: 18px;
}
.af-box .af-box-head h4,
.af-box .af-box-head p {
margin-bottom: 0;
text-align: center;
}
.form-box {
background: transparent;
border: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 32px;
align-self: stretch;
}
.af-form {
display: flex;
flex-direction: column;
gap: 32px;
align-self: stretch;
}
.form-container {
display: flex;
flex-direction: column;
gap: 18px;
align-self: stretch;
}
.input-single {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
align-self: stretch;
}
.input-single .input-parent {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.input-single .input-parent label {
line-height: 18px;
}
.input-single .error {
color: var(--color-danger);
font-size: 10px;
text-align: start;
}
.custom-forgot-wrapper {
display: flex;
justify-content: flex-end;
gap: 18px;
align-self: stretch;
line-height: 18px;
}
.af-form .form-remark {
color: var(--color-primary-400);
}
.btnform {
display: flex;
padding: 14px 20px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 12px;
background: var(--gradient-bg-body);
box-shadow: 0 4px 10px 0 var(--black-16);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary-1000);
line-height: 18px;
}
.btnform.btn-max {
max-width: 360px;
margin: 0 auto;
}
.actarea {
color: var(--color-accent-100);
font-size: 14px;
}
.actarea a {
color: var(--color-primary-400);
font-weight: 400;
}
.af-form .form-check-label {
color: var(--color-accent-100);
}
.af-form .form-check-label[for="tnc"] {
line-height: 18px;
}
.af-form .form-check-label a {
color: var(--color-primary-400);
}
.af-form .form-check {
display: flex;
align-items: center;
margin-bottom: 0;
gap: 8px;
flex: 1 0 0;
line-height: 1;
}
.af-form .remark-group .form-check {
min-height: 18px;
}
.af-form .form-check-input:checked,
.af-form .form-check-input {
border-radius: 4px;
width: 18px;
height: 18px;
background: var(--color-accent-100);
border: 0;
margin-top: 0;
}
.af-form .form-check-input[name="tnc"] {
border-radius: 8px;
width: 32px;
height: 32px;
}
.af-form .form-check-input:focus {
box-shadow: none;
}
.af-form .form-check-input:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.af-form .input-group .input-group-text {
fill: var(--gradient-bg-body);
}
.af-form .input-group {
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
padding: 0;
}
.af-form .input-group:focus-within {
border-color: var(--color-primary-400);
}
.af-form .input-group:has(.invalid),
.af-form .input-group:has(input:invalid),
.af-form .input-group:focus-within:has(.invalid) {
border-color: var(--color-danger);
background-color: var(--color-other-danger);
}
.af-form .input-group:has([disabled]) {
border-color: var(--white-10);
}
.af-form .input-group:has([disabled]) .form-control .language-div {
border-right-color: var(--white-10);
}
.af-form .input-group .form-control {
padding: 9px 12px;
font-size: 16px;
caret-color: var(--color-primary-400);
color: var(--color-accent-100);
}
.af-form .input-group input:-webkit-autofill {
-webkit-text-fill-color: var(--color-accent-100);
}
.af-form .input-group input:autofill {
color: var(--color-accent-100);
}
.af-form .input-group input:-webkit-autofill,
.af-form .input-group input:-webkit-autofill:hover,
.af-form .input-group input:-webkit-autofill:focus,
.af-form .input-group input:-webkit-autofill:active {
box-shadow: 0 0 0 40px var(--black-100) inset !important;
-webkit-box-shadow: 0 0 0 40px var(--black-100) inset !important;
border-radius: 8px;
}
.af-form .input-group .form-control:disabled {
color: var(--color-accent-500);
}
.input-group-otp {
align-self: stretch;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.input-group-otp .input-group {
flex: 1;
}
.input-group-otp .btnform {
width: 81px;
height: 44px;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
overflow: hidden;
}
.af-form .input-group .btnform:first-child {
margin: 0;
border-radius: 8px 0 0 8px;
padding: 12px 20px;
}
.af-form .input-group .btnform:last-child {
margin: 0;
border-radius: 0 8px 8px 0;
padding: 12px 20px;
}
.language-div {
display: flex;
align-items: center;
padding: 0 12px;
width: 78px;
}
.input-single .language-div + .form-control {
border-left: 1px solid var(--color-primary-30) !important;
}
.input-single .language-div + .form-control:focus {
border-left: 1px solid var(--color-primary-400) !important;
}
.input-single .language-div + .form-control:disabled {
border-left: 1px solid var(--white-10) !important;
}
.language-div .dropdown {
line-height: 1;
}
.language-div button.dropdown-toggle,
.language-div .btn.show {
background-color: transparent;
border: 0;
width: 40px;
padding: 0;
-webkit-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
.language-div .btn:first-child:active {
background-color: transparent;
}
.language-div button.dropdown-toggle:focus {
box-shadow: none;
}
.language-div .dropdown-toggle::after {
position: absolute;
top: 10px;
right: 0;
border-top: 5px solid;
border-right: 5px solid transparent;
border-bottom: 0;
border-left: 5px solid transparent;
color: var(--color-accent-300);
}
.language-div .dropdown-menu {
border: 1px solid var(--color-primary-30);
border-radius: 8px;
min-width: 65px;
transform: none !important;
top: calc(100% + 12px) !important;
left: -12px !important;
background: var(--color-primary-1000);
width: 78px;
}
.language-div .dropdown-menu .dropdown-item:hover,
.language-div .dropdown-menu .dropdown-item:focus {
background-color: transparent;
}
.language-div .dropdown-menu .dropdown-item {
margin-bottom: 10px;
padding: 0;
}
.language-div .dropdown-menu .dropdown-item .country-selection {
padding: 0 12px;
}
.language-div .dropdown-menu li:last-child .dropdown-item {
margin-bottom: 0;
}
.country-selection {
display: flex;
align-items: center;
font-size: 14px;
line-height: 1;
}
.country-flag img {
width: 21px;
}
.af-form .input-group .btnform:first-child:hover,
.af-form .input-group .btnform:first-child:active,
.af-form .input-group .btnform:first-child:focus,
.af-form .input-group .btnform:last-child:hover,
.af-form .input-group .btnform:last-child:active,
.af-form .input-group .btnform:last-child:focus {
color: var(--color-primary-1000);
background: var(--gradient-bg-body);
}
.code-box {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.af-form .code-box .input-group {
border-radius: 14px;
max-width: 52px;
background: transparent;
transition: border-color 0.2s ease;
}
.af-form .code-box .input-group .form-control.code-box-single {
height: 56px;
font-size: 21px;
font-weight: 600;
text-align: center;
}
.code-wrapper {
color: var(--color-accent-600);
}
.code-wrapper span {
color: var(--color-accent-100);
}
.af-form .input-group .form-control::placeholder {
color: var(--color-accent-600);
opacity: 1;
}
.af-form .input-group .form-control:-ms-input-placeholder {
color: var(--color-accent-600);
}
.af-form .input-group .form-control::-ms-input-placeholder {
color: var(--color-accent-600);
}
.help-msg {
margin: 0;
font-size: 10px;
color: var(--color-accent-600);
line-height: 13px;
}
/* pages */
.page-div {
display: flex;
flex-direction: column;
padding: 40px 4px 0;
gap: 24px;
}
.page-div-top {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
gap: 4px;
}
.page-div-top h4 {
text-transform: capitalize;
line-height: 23px;
font-size: 18px;
font-weight: 600;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-div-top p {
line-height: 18px;
color: var(--color-primary-0);
}
.page-div-top h4,
.page-div-top p {
margin-bottom: 0;
text-align: center;
}
.page-div-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* minigames */
.minigames-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.minigames-head {
display: flex;
align-items: center;
justify-content: space-between;
align-self: stretch;
}
.minigames-token {
position: relative;
height: 31px;
display: flex;
align-items: center;
padding: 0 12px 0 48px;
cursor: pointer;
}
.minigames-token::before {
content: "";
position: absolute;
top: 0;
left: 10px;
right: 0;
bottom: 0;
background: url(../images/minigames/bg-token.png) repeat-x;
z-index: 0;
}
.minigames-token::after {
content: "";
position: absolute;
right: -2px;
top: 50%;
transform: translateY(-50%);
background: var(--gradient-bg-body);
width: 4px;
height: 29px;
border-radius: 0 2px 2px 0;
}
.minigames-token img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.token-total {
color: var(--color-primary-1000);
z-index: 0;
font-weight: 700;
}
.minigames-body {
display: inline-grid;
padding: 10px 0;
row-gap: 20px;
column-gap: 20px;
align-self: stretch;
grid-template-rows: repeat(2,fit-content(100%));
grid-template-columns: repeat(2,minmax(0,1fr));
grid-auto-flow: row;
}
.minigames-single {
cursor: pointer;
}
.minigames-thumb img {
width: 100%;
}
.minigames-btn {
padding: 14px 20px;
border-radius: 0 0 12px 12px;
line-height: 18px;
}
#token-history .modal-title {
line-height: 25px;
top: -25px;
}
#token-history .modal-content .btn-close {
top: -65px;
}
#token-history table tr th,
#token-history table tr td {
text-align: center;
font-size: 8px;
padding: 8px 10px;
}
#token-history table tr td span {
display: block;
}
/* leaderboard */
.leaderboard-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.leaderboard-banner {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 12px;
border: 1px solid transparent;
background: linear-gradient(var(--white-00), var(--white-00)) padding-box, var(--gradient-bg-body) border-box;
box-shadow: 0 10px 15px -3px var(--black-50), 0 4px 6px -4px var(--black-50);
position: relative;
border-radius: 12px;
overflow: hidden;
}
.banner-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 10px;
padding: 26px 13px;
}
.banner-text h6 {
white-space: nowrap;
font-size: 10px;
margin-bottom: 0;
}
.banner-text h1 {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0;
}
.banner-text p {
font-size: 8px;
margin-bottom: 10px;
}
.banner-text p.small {
font-size: 8px;
margin-bottom: 0;
}
.leaderboard-wrap h3 {
color: var(--color-primary-0);
font-size: 14px;
font-weight: 700;
text-transform: capitalize;
line-height: 18px;
margin-bottom: 0;
}
.tornament-head {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
}
.tournament-term {
background: var(--color-primary-400);
color: var(--black-100);
border-radius: 8px;
align-items: center;
text-transform: capitalize;
cursor: pointer;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 44px;
padding: 0 10px;
text-align: center;
}
.campaign-tournament {
padding: 10px;
border-radius: 8px;
background: var(--color-primary-20);
}
.campaign-tournament h1 {
position: relative;
padding-bottom: 10px;
font-size: 14px;
font-weight: 700;
color: var(--color-primary-100);
}
.campaign-tournament h1::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--color-primary-600);
height: 1px;
width: 100%;
}
.tournament-info {
display: flex;
justify-content: space-between;
}
.tournament-info h6 {
font-size: 10px;
width: 50%;
position: relative;
padding-right: 5px;
margin: 0;
line-height: 13px;
}
.tournament-info h6:after {
content: ":";
position: absolute;
top: 0;
right: 0;
}
.tournament-info p {
margin: 0;
text-align: left;
width: 50%;
padding-left: 5px;
line-height: 13px;
}
.campaign-tournament-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
.campaign-tournament-wrapper .col-md-5 {
width: 100%;
}
.campaign-tournament-wrapper .btn-earn {
padding: 10px 20px;
color: var(--color-primary-1000);
font-weight: 700;
text-transform: uppercase;
background: var(--gradient-bg-body);
box-shadow: 0 4px 10px 0 var(--black-16);
line-height: 18px;
display: block;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 15px;
cursor: pointer;
font-size: 12px;
}
.campaign-wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.leaderboard-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
align-self: stretch;
}
.leaderboard-list .top3 {
display: flex;
padding: 15px 16px 15px 20px;
justify-content: space-between;
align-items: center;
align-self: stretch;
background: var(--black-30);
border-radius: 12px;
box-shadow: 0 25px 50px -12px var(--black-25);
position: relative;
overflow: hidden;
}
.leaderboard-list .top3::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
}
.leaderboard-list .top3 .top3-left {
display: flex;
align-items: center;
gap: 16px;
}
.leaderboard-list .top3 .top3-left .top3-trophy {
display: flex;
flex-direction: column;
width: 48px;
height: 48px;
justify-content: center;
align-items: center;
border-radius: 50%;
background: var(--color-accent-800);
position: relative;
}
.leaderboard-list .top3 .top3-left .top3-trophy img {
height: 28px;
}
.leaderboard-list .top3 .top3-left .top3-trophy .top3-text {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
display: flex;
padding: 2px 6px;
flex-direction: column;
align-items: center;
border-radius: 6px;
box-shadow: 0 1px 2px 0 var(--black-05);
font-size: 8px;
line-height: 10px;
}
.leaderboard-list .top3 .top3-left .top3-details {
display: flex;
flex-direction: column;
font-size: 10px;
color: var(--color-accent-500);
line-height: 13px;
}
.leaderboard-list .top3 .top3-left .top3-details h5 {
font-size: 14px;
font-weight: 700;
margin-bottom: 0;
line-height: 18px;
color: var(--color-accent-100);
}
.leaderboard-list .top3 .top3-left .top3-details span {
display: block;
}
.leaderboard-list .top3 .top3-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.leaderboard-list .top3 .top3-right .top3-prize {
display: flex;
padding: 2px 8px;
align-items: center;
gap: 4px;
font-size: 10px;
text-transform: uppercase;
border-radius: 4px;
}
.leaderboard-list .top3 .top3-right .top3-cash {
display: flex;
flex-direction: column;
align-items: flex-end;
font-size: 20px;
font-weight: 700;
line-height: 25px;
}
.leaderboard-list .top3.leaderboard-gold .top3-left .top3-trophy {
border: 2px solid var(--color-other-yellow);
}
.leaderboard-list .top3.leaderboard-gold::before {
background: var(--color-other-yellow);
}
.leaderboard-list .top3.leaderboard-gold .top3-left .top3-trophy .top3-text {
background: var(--color-other-yellow);
color: var(--color-primary-1000);
}
.leaderboard-list .top3.leaderboard-gold .top3-right .top3-prize {
border: 1px solid var(--color-primary-10);
background: var(--color-primary-10);
color: var(--color-other-yellow);
}
.leaderboard-list .top3.leaderboard-gold .top3-right .top3-prize .icon-cash {
background: var(--color-other-yellow);
}
.leaderboard-list .top3.leaderboard-gold .top3-right .top3-cash {
color: var(--color-other-yellow);
}
.leaderboard-list .top3.leaderboard-silver .top3-left .top3-trophy {
border: 2px solid var(--color-accent-500);
}
.leaderboard-list .top3.leaderboard-silver .top3-left .top3-trophy .icon-player {
background: var(--color-accent-500);
}
.leaderboard-list .top3.leaderboard-silver::before {
background: var(--color-accent-500);
}
.leaderboard-list .top3.leaderboard-silver .top3-left .top3-trophy .top3-text {
background: var(--color-accent-500);
color: var(--color-accent-100);
}
.leaderboard-list .top3.leaderboard-silver .top3-right .top3-prize {
border: 1px solid var(--white-10);
background: var(--white-10);
color: var(--color-accent-500);
}
.leaderboard-list .top3.leaderboard-silver .top3-right .top3-prize .icon-cash {
background: var(--color-accent-500);
}
.leaderboard-list .top3.leaderboard-silver .top3-right .top3-cash {
color: var(--color-accent-100);
}
.leaderboard-list .top3.leaderboard-bronze .top3-left .top3-trophy {
border: 2px solid var(--color-bronze02);
}
.leaderboard-list .top3.leaderboard-bronze .top3-left .top3-trophy .icon-player {
background: var(--color-bronze02);
}
.leaderboard-list .top3.leaderboard-bronze::before {
background: var(--color-bronze02);
}
.leaderboard-list .top3.leaderboard-bronze .top3-left .top3-trophy .top3-text {
background: var(--color-bronze02);
color: var(--color-accent-100);
}
.leaderboard-list .top3.leaderboard-bronze .top3-right .top3-prize {
border: 1px solid var(--border02);
background: var(--bg-color-01);
color: var(--color-bronze);
}
.leaderboard-list .top3.leaderboard-bronze .top3-right .top3-prize .icon-cash {
background: var(--color-bronze);
}
.leaderboard-list .top3.leaderboard-bronze .top3-right .top3-cash {
color: var(--color-bronze02);
}
.fourth-onward {
display: flex;
flex-direction: column;
gap: 4px;
align-self: stretch;
}
.winner-row {
display: flex;
padding: 8px 16px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.winner-row-left {
display: flex;
align-items: center;
gap: 16px;
}
.fourth-ranking {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 700;
}
.fourth-details {
display: flex;
flex-direction: column;
font-size: 10px;
line-height: 13px;
}
.fourth-details h5 {
font-size: 14px;
line-height: 18px;
margin-bottom: 0;
}
.winner-row-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
}
.fourth-cash {
color: var(--color-primary-400);
font-weight: 700;
line-height: 18px;
}
.fourth-bonus {
font-size: 10px;
line-height: 13px;
}
.row-divider {
display: flex;
height: 0;
justify-content: center;
align-items: center;
align-self: stretch;
background: var(--color-primary-600);
height: 1px;
}
.leaderboard-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
align-self: stretch;
}
.leaderboard-info-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.leaderboard-info-top h3 {
color: var(--color-primary-0);
font-size: 14px;
font-weight: 700;
line-height: 18px;
}
.leaderboard-info-top p {
font-size: 10px;
line-height: 13px;
}
.leaderboard-info-top h3,
.leaderboard-info-top p {
margin-bottom: 0;
text-align: center;
}
.leaderboard-item {
display: flex;
padding: 10px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-primary-400);
background: var(--color-primary-20);
}
.reward-icon {
order: 1;
}
.reward-icon img {
height: 48px;
}
.reward-detail {
order: 2;
color: var(--color-primary-100);
}
.reward-detail h4 {
font-size: 14px;
font-weight: 700;
line-height: 18px;
}
.reward-detail p {
font-size: 10px;
line-height: 13px;
color: var(--color-accent-100);
}
.reward-detail h4,
.reward-detail p {
margin-bottom: 0;
}
a.leaderboard-more,
a.link-more {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
color: var(--color-primary-400);
text-transform: capitalize;
}
#tournament-tnc .modal-body {
padding-right: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
align-self: stretch;
}
.tnc-tournament,
.tnc-referral {
padding-right: 10px;
font-size: 10px;
max-height: 60dvh;
}
.tnc-tournament ol {
padding-left: 14px;
}
.tnc-tournament ol > li {
list-style: decimal;
padding-left: 4px;
}
.btn-agree-tnc {
width: 100%;
border-radius: 8px;
font-size: 12px;
}
/* vip */
.vip-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.vip-progress {
display: flex;
padding: 10px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--color-primary-400);
background: var(--color-primary-20);
}
.vip-level {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.vip-level img {
height: 68px;
}
.vip-level span {
color: var(--color-gold);
font-size: 10px;
font-weight: 700;
text-transform: capitalize;
}
.vip-progress-detail {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
flex: 1 0 0;
}
.vip-detail-text {
line-height: 13px;
}
.vip-detail-text h5 {
font-size: 14px;
font-weight: 700;
color: var(--color-primary-100);
}
.vip-detail-text p {
font-size: 10px;
}
.vip-detail-text h5,
.vip-detail-text p {
margin-bottom: 0;
}
.vip-bar {
padding: 3px 4px;
background: var(--bg-vip-bar);
border-radius: 10px;
}
.logged-in .vip-bar {
background: var(--gradient-bg-body);
}
.vip-bar .progress {
background: var(--bg-progress);
height: 7px;
width: 100%;
}
.logged-in .vip-bar .progress {
background: var(--bg-progress-logged-in);
}
.progress-bar {
height: 5px;
transform: translate(1px, 1px);
border-radius: 10px;
background: url(../images/vip/bg-progress-bar.png) repeat-x;
}
.viptabs {
display: flex;
flex-direction: column;
gap: 24px;
align-self: stretch;
}
.vip-label,
.tabss1 img,
.vip-benefit img {
display: none;
}
.viptabs .form-box {
border: 0;
}
.viptabs .nav-tabs {
border-bottom: 1px solid var(--color-primary-700);
background: var(--black-30);
border-radius: 12px 12px 0 0;
}
.viptabs .nav-tabs .nav-link {
display: flex;
padding: 12px;
justify-content: center;
align-items: center;
flex: 1 0 0;
line-height: 17px;
width: 100%;
border-radius: 0;
border: 0;
}
.viptabs .nav-tabs .nav-item.show .nav-link,
.viptabs .nav-tabs .nav-link.active,
.viptabs .nav-tabs .nav-link:focus,
.viptabs .nav-tabs .nav-link:hover {
border-radius: 12px 12px 0 0;
background: var(--gradient-bg-body);
border-color: transparent;
}
.viptabs .nav-tabs .nav-item.show .nav-link .tabss1 span,
.viptabs .nav-tabs .nav-link.active .tabss1 span,
.viptabs .nav-tabs .nav-link:focus .tabss1 span,
.viptabs .nav-tabs .nav-link:hover .tabss1 span {
color: var(--color-primary-1000);
font-weight: 700;
}
.tabss1 span {
color: var(--color-primary-400);
white-space: nowrap;
}
.vip-benefit {
padding: 10px;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
margin-bottom: 12px;
}
.vip-benefit .vip-binfo .form-til {
font-weight: 700;
font-size: 14px;
line-height: 18px;
}
.s-label {
color: var(--color-accent-100);
}
.vip-benefit .vip-binfo .s-label {
font-size: 10px;
line-height: 16px;
}
.vip-benefit .vip-binfo .s-label .bal {
font-size: 14px;
font-weight: 700;
color: var(--color-primary-400);
}
.rebate-rate-wrapper {
background: var(--black-30);
border: 1px solid var(--color-primary-30);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
align-self: stretch;
padding: 10px;
}
.rebate-rate-wrapper .vip-benefit {
margin-bottom: 0;
border: 0;
border-radius: 8px 8px 0 0;
border-bottom: 1px solid var(--vip-border);
justify-content: space-between;
}
.rebate-rate-wrapper .vip-benefit.collapsed {
border-bottom: 0;
}
.rebate-rate-wrapper > .vip-benefit {
background: transparent;
padding: 0;
}
.rebate-rate-wrapper > .vip-benefit.collapsed {
border-bottom: 0 !important;
}
.rebate-rate-wrapper .rebate-info-wrapper {
border: 1px solid var(--color-accent-100);
}
.rebate-rate-wrapper .rebate-info-row {
display: flex;
}
.rebate-rate-wrapper .rebate-info-row:first-child {
background-color: transparent;
}
.rebate-rate-wrapper .rebate-info-row:last-child .rebate-info-col {
border-bottom: 0;
}
.rebate-rate-wrapper .rebate-info-row:first-child .rebate-info-col {
font-size: 8px;
padding: 9px 10px;
}
.rebate-rate-wrapper .rebate-info-row:first-child .rebate-info-col:last-child {
border-right: 0;
}
.rebate-rate-wrapper .rebate-info-col {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
font-size: 8px;
padding: 8px 10px;
border-right: 1px solid var(--color-accent-100);
border-bottom: 1px solid var(--color-accent-100);
}
.rebate-rate-wrapper .rebate-info-col:first-child {
padding: 0 10px;
display: flex;
justify-content: center;
}
.rebate-rate-wrapper .rebate-info-col:last-child {
border-right: 0;
}
.rebate-rate-wrapper .rebate-info-col .provider-logo {
height: 100%;
max-height: 30px;
width: auto;
}
.rebate-rate-wrapper > .vip-benefit::after {
content: "\f107";
font-size: 16px;
line-height: 1;
position: relative;
right: 0;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/* referral */
.referral-wrap {
display: flex;
padding-top: 30px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.referral-item {
width: 100%;
}
.referral-item h1 {
text-align: center;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
}
.referral-item h1 span {
font-size: 20px;
padding: 0 8px;
}
.referral-item h2 {
color: var(--color-primary-0);
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-bottom: 12px;
}
.referral-item h2 span {
color: var(--color-primary-200);
text-transform: uppercase;
font-weight: 700;
}
.referral-benefit {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 12px;
position: relative;
}
.referred-plus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.benefit-item {
background: var(--color-primary-30);
border-radius: 8px;
padding: 10px;
position: relative;
}
.benefit-icon {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
.benefit-icon img {
height: 60px;
}
.benefit-item:nth-child(2) .benefit-icon {
top: -37px;
}
.benefit-item:nth-child(2) .benefit-icon img {
height: 70px;
}
.benefit-cash {
padding-top: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
}
.benefit-cash h4 {
font-weight: 700;
font-size: 14px;
margin-bottom: 0;
color: var(--color-primary-100);
text-align: center;
}
.benefit-item p {
margin-bottom: 0;
font-size: 10px;
text-align: center;
}
.referral-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
align-self: stretch;
}
.step-item {
display: flex;
padding: 10px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-primary-400);
background: var(--black-30);
}
.step-item:last-child {
margin-bottom: 0;
}
.step-wrap {
display: flex;
align-items: center;
width: 32px;
height: 32px;
}
.step-details h6 {
font-size: 10px;
color: var(--color-primary-100);
font-weight: 700;
}
.step-details p {
font-size: 10px;
}
.step-details h6,
.step-details p {
margin-bottom: 0;
line-height: 13px;
}
.step-details span {
font-weight: 700;
}
.step-wrap span.dot {
padding: 0 10px;
font-size: 20px;
}
.referral-share {
border-radius: 16px;
position: relative;
border-radius: 16px;
margin-bottom: 12px;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.referral-share img {
position: absolute;
}
.referral-share img.earn-bg {
border-radius: 16px 16px 0 0;
}
.referral-share img.earn-arrow {
left: 10px;
top: -14px;
}
.referral-share img.earn-rocket {
right: 10px;
top: -20px;
}
.referral-share img.earn-arrow,
.referral-share img.earn-rocket {
height: 50px;
}
.share-earn {
padding: 32px 16px;
z-index: 1;
position: relative;
border-radius: 16px;
}
.btn-earn {
border: 0;
width: 100%;
padding: 14px 20px;
border-radius: 12px;
}
.btn-tnc {
padding: 7px 12px;
border-radius: 5px;
text-transform: capitalize;
font-weight: 500;
}
.referral-news {
display: flex;
align-items: center;
justify-content: center;
width: 75%;
margin: 0 auto;
}
.referral-news svg,
.referral-news i {
font-size: 22px;
}
.referral-news p {
font-weight: 500;
padding-left: 8px;
}
.referral-copy {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.copy-info h6 {
font-weight: 700;
text-transform: uppercase;
}
.copy-info p {
text-align: start;
}
.btn-copy .btn-tnc {
padding: 5px 12px;
text-transform: uppercase;
font-size: 12px;
}
.referral-summary {
border-radius: 16px;
padding: 16px;
}
.referral-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.referral-head p {
text-transform: capitalize;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
margin-bottom: 0;
}
.referral-head p span {
padding-left: 4px;
text-transform: capitalize;
}
.referral-head img {
height: 35px;
}
.referral-body p {
text-align: start;
font-weight: 500;
}
.referral-row {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
padding-bottom: 12px;
margin-bottom: 12px;
}
.referral-row:last-child {
border-bottom: 0;
margin-bottom: 0;
}
.referral-summary.record .referral-row {
border-bottom: 0;
margin-bottom: 0;
}
#tnc-referral .modal-dialog {
height: initial;
border-radius: 10px;
}
#tnc-referral .modal-body {
margin: 0;
padding: 16px;
border-radius: 0;
box-shadow: none;
}
#tnc-referral .modal-header .btn-close {
background: none;
opacity: 1;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.tnc-referral h6 {
font-weight: 700;
font-size: 14px;
}
.tnc-referral ol {
padding-left: 14px;
margin-bottom: 0;
}
.tnc-referral ol > li {
list-style: decimal;
margin-bottom: 10px;
padding-left: 8px;
}
.tnc-referral ul {
padding-left: 14px;
}
.tnc-referral ul > li {
list-style: disc;
margin-bottom: 10px;
}
ul.dash {
padding-left: 14px;
}
ul.dash > li {
list-style: none;
margin-bottom: 2px;
}
ul.dash > li::before {
content: "-";
margin-right: 8px;
margin-left: -12px;
}
/* page partner */
.partner-wrap {
display: grid;
row-gap: 6px;
column-gap: 6px;
align-self: stretch;
grid-template-rows: repeat(6,minmax(0,1fr));
grid-template-columns: repeat(3,minmax(0,1fr));
grid-auto-flow: row;
}
.partner-thumb {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
grid-row: span 1;
grid-column: span 1;
justify-self: stretch;
border-radius: 12px;
border: 1px solid transparent;
background: linear-gradient(var(--black-100), var(--black-100)) padding-box, var(--gradient-bg-body) border-box;
}
.partner-thumb img {
height: 40px;
}
.partner-thumb a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
position: relative;
padding: 18px 18px 24px;
}
.partner-thumb a span {
position: absolute;
bottom: 0;
display: flex;
padding: 4px 6px;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--color-primary-400);
font-size: 10px;
text-transform: uppercase;
line-height: 13px;
border-radius: 0 0 12px 12px;
background: var(--black-60);
backdrop-filter: blur(2px);
width: 100%;
text-align: center;
}
.partner-thumb a:hover span {
background: var(--color-primary-200);
color: var(--color-primary-1000);
}
/* faq */
.faq-wrap {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
}
.faq-wrap .accordion {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
align-self: stretch;
}
.faq-wrap .accordion-item {
width: 100%;
background-color: var(--black-30);
border: 0;
border-radius: 4px !important;
}
.faq-wrap .accordion-button {
border-radius: 4px 4px 0 0;
background-color: transparent;
color: var(--color-accent-100);
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid var(--color-primary-600);
padding: 19px 16px;
}
.faq-wrap .accordion-button:not(.collapsed) {
box-shadow: none;
}
.faq-wrap .accordion-button:focus {
box-shadow: none;
}
.faq-wrap .accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.faq-wrap .accordion-body {
color: var(--color-primary-0);
line-height: 18px;
}
.faq-wrap .accordion-button::after {
background-image: none;
width: 14px;
height: 14px;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-width='1.2' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-width='1.2' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 14px;
mask-size: 14px;
background-size: 14px;
background: var(--gradient-bg-body);
}
.faq-wrap .accordion-button:not(.collapsed)::after {
background-image: none;
background: var(--gradient-bg-body);
}
/* promotion */
.promotion-wrapper ul::-webkit-scrollbar {
display: none;
}
@media (min-width: 480px) {
.promotion-wrapper ul::-webkit-scrollbar {
display: block;
}
}
.promotion-wrapper {
width: 100%;
}
.promotion-wrapper ul {
padding: 0;
margin-bottom: 24px;
display: flex;
align-items: center;
overflow-x: auto;
display: flex;
padding: 12px;
align-items: center;
gap: 6px;
border-radius: 16px;
background: var(--black-30);
}
.promotion-wrapper ul li {
list-style: none;
text-transform: capitalize;
padding: 8px 32px;
cursor: pointer;
text-align: center;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary-400);
line-height: 18px;
white-space: nowrap;
}
.promotion-wrapper ul li:last-child {
margin-right: 0;
}
.promotion-wrapper ul li.mixitup-control-active {
background: var(--gradient-bg-body);
box-shadow: 0 4px 4px 0 var(--black-25);
color: var(--color-primary-1000);
font-weight: 700;
}
.filter-content .grid .row {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.filter-content .grid .row .col {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 12px;
position: relative;
background: var(--black-30);
box-shadow: 0 10px 15px -3px var(--black-50), 0 4px 6px -4px var(--black-50);
}
.filter-content .grid .row .col::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-bg-body);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
.promotion-single {
display: flex;
flex-direction: column;
cursor: pointer;
align-self: stretch;
}
.promotion-single-top {
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.promotion-banner {
text-align: center;
}
.promotion-banner img {
width: 100%;
}
.promotion-single-bottom {
border-radius: 0px 0px 12px 12px;
display: flex;
padding: 10px 20px;
flex-direction: column;
align-items: center;
gap: 10px;
align-self: stretch;
}
.promotion-detail {
font-size: 10px;
align-self: stretch;
line-height: 13px;
}
.promotion-detail p {
margin-bottom: 0;
}
.promotion-single-btn {
width: 100%;
border-radius: 8px;
font-size: 12px;
}
.tnc-promo-banner img {
width: 100%;
max-height: 115px;
}
.tnc-promotion {
padding-right: 10px;
font-size: 10px;
max-height: 33dvh;
align-self: stretch;
}
.modal-promo {
font-size: 10px;
}
.modal-promo ul,
.modal-promo ol,
.tnc-promotion ul,
.tnc-promotion ol {
padding-left: 14px;
margin-bottom: 0;
}
.modal-promo ul li,
.modal-promo ol li,
.tnc-promotion ul li,
.tnc-promotion ol li {
list-style: decimal;
padding-left: 4px;
}
.modal-promo .modal-body p {
gap: 0;
}
.modal-promo .modal-body p,
.tnc-promotion p {
margin-bottom: 0;
line-height: 13px;
}
.modal-promo .modal-content .btn-close::before {
left: 5px;
}
#modal-promotion .modal-title {
font-size: 32px;
line-height: 40px;
top: -48px;
}
#modal-promotion .modal-content .btn-close {
top: -96px;
}
#modal-promotion .modal-body {
padding-right: 12px;
display: flex;
flex-direction: column;
gap: 20px;
align-self: stretch;
}
.tnc-promotion-wrap {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 0 0;
}
.tnc-promotion-wrap h3 {
margin-bottom: 0;
line-height: 18px;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}
.promo-period {
padding: 10px;
border-radius: 8px;
background: var(--color-primary-20);
}
.promo-period-row {
display: flex;
align-items: center;
gap: 10px;
}
.promo-period-row > div {
flex: 1;
}
.tnc-list {
text-transform: uppercase;
}
.tnc-list h6 {
font-size: 10px;
color: var(--color-primary-400);
font-weight: 700;
}
.tnc-list ol {
padding-left: 14px;
font-size: 8px;
margin-bottom: 0;
}
.tnc-list ol li {
list-style: decimal;
padding-left: 4px;
}
.tnc-promotion-wrap p {
display: list-item;
list-style-type: decimal;
margin-left: 14px;
margin-bottom: 0;
}
.tnc-promotion-wrap table {
border: 0;
margin-bottom: 10px;
}
/* contact */
.contact-wrap {
display: grid;
row-gap: 6px;
column-gap: 6px;
align-self: stretch;
grid-template-rows: repeat(1,minmax(0,1fr));
grid-template-columns: repeat(3,minmax(0,1fr));
grid-auto-flow: row;
}
.contact-thumb {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
align-self: stretch;
grid-row: span 1;
grid-column: span 1;
justify-self: stretch;
border-radius: 12px;
border: 1px solid transparent;
}
.contact-thumb.telegram {
background: linear-gradient(#27A3E2, #27A3E2) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.whatsapp {
background: linear-gradient(#25D366, #25D366) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.facebook {
background: linear-gradient(#1877F2, #1877F2) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.instagram {
background: linear-gradient(#E1306C, #E1306C) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.weixin {
background: linear-gradient(#07C160, #07C160) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.youtube {
background: linear-gradient(#FF0000, #FF0000) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.skype {
background: linear-gradient(#00AFF0, #00AFF0) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.tiktok {
background: linear-gradient(#010101, #010101) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
position: relative;
padding: 33px;
font-size: 50px;
}
.contact-thumb.facebook a {
font-size: 45px;
}
.contact-thumb.tiktok a {
font-size: 45px;
}
.contact-thumb a .icon-svg {
background: var(--color-accent-100);
}
.contact-thumb a span {
position: absolute;
bottom: 0;
display: block;
padding: 6px;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--color-primary-400);
font-size: 10px;
line-height: 13px;
border-radius: 0 0 12px 12px;
background: var(--black-60);
backdrop-filter: blur(2px);
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact-thumb,
.contact-thumb a svg,
.contact-thumb a .icon-svg {
transition: background 0.3s ease, color 0.3s ease;
}
.contact-thumb:hover {
background: linear-gradient(var(--black-90), var(--black-90)) padding-box, var(--gradient-bg-body) border-box;
}
.contact-thumb.telegram:hover a .icon-svg,
.contact-thumb.telegram:hover a svg {
background: #27A3E2;
}
.contact-thumb.whatsapp:hover a .icon-svg,
.contact-thumb.whatsapp:hover a svg {
color: #25D366;
}
.contact-thumb.facebook:hover a .icon-svg,
.contact-thumb.facebook:hover a svg {
color: #1877F2;
}
.contact-thumb.instagram:hover a .icon-svg,
.contact-thumb.instagram:hover a svg {
color: #E1306C;
}
.contact-thumb.youtube:hover a .icon-svg,
.contact-thumb.youtube:hover a svg {
color: #FF0000;
}
.contact-thumb.weixin:hover a .icon-svg,
.contact-thumb.weixin:hover a svg {
color: #07C160;
}
.contact-thumb.skype:hover a .icon-svg,
.contact-thumb.skype:hover a svg {
color: #00AFF0;
}
/* info page */
.info-page-wrap {
display: flex;
padding: 28px 20px;
flex-direction: column;
align-items: flex-start;
border-radius: 16px;
position: relative;
background: var(--color-primary-10);
line-height: 18px;
gap: 16px;
}
.info-page-wrap::before {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
padding: 2px;
background: var(--gradient-bg-body);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
.info-page-wrap h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
}
.info-page-wrap p {
font-weight: 400;
margin-bottom: 0;
}
.info-page-wrap ul {
padding-left: 24px;
}
.info-page-wrap ul > li {
list-style: disc;
}
/* account page */
.account-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
align-self: stretch;
margin-top: -8px;
}
.account-progress {
display: flex;
padding: 10px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--color-primary-400);
background: var(--black-30);
}
.account-level {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.account-level img {
height: 68px;
}
.account-level span {
color: var(--color-gold);
font-size: 10px;
font-weight: 700;
text-transform: capitalize;
}
.account-progress-detail {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
flex: 1 0 0;
}
.account-detail-text {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
cursor: pointer;
}
.account-detail-text .icon-arrow {
width: 16px;
height: 16px;
}
.account-detail-more {
display: flex;
flex-direction: column;
gap: 4px;
}
.account-detail-more h5,
.account-detail-more p {
margin-bottom: 0;
line-height: 13px;
}
.account-detail-more h5 {
font-size: 14px;
font-weight: 700;
color: var(--color-primary-100);
}
.account-detail-more p {
font-size: 10px;
}
.account-detail-text.bottom p {
color: var(--color-accent-500);
}
.account-center {
display: flex;
padding: 10px 20px;
flex-direction: column;
justify-content: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-primary-400);
background: var(--black-30);
}
.account-center-top {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.account-center-top img {
height: 30px;
}
.total-balance {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.total-balance p,
.total-balance h4 {
margin-bottom: 0;
}
.total-balance p {
font-size: 10px;
line-height: 13px;
}
.total-balance h4 {
display: flex;
align-items: center;
gap: 4px;
align-self: stretch;
color: var(--color-primary-300);
font-size: 20px;
font-weight: 700;
line-height: 25px;
padding: 0;
}
.account-center-body .menu ul {
padding-bottom: 0;
}
.account-center-body .menu ul li {
margin-bottom: 0;
}
.account-center-body .menu ul li a:hover .menu-icon {
display: flex;
}
.account-bottom {
display: flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-primary-400);
background: var(--black-30);
cursor: pointer;
}
.account-bottom img {
height: 48px;
}
.account-bottom-detail {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.account-bottom-detail h4,
.account-bottom-detail p {
margin-bottom: 0;
text-align: center;
}
.account-bottom-detail h4 {
font-size: 18px;
line-height: 23px;
font-weight: 600;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.account-bottom-detail p {
font-size: 10px;
line-height: 13px;
color: var(--color-primary-0);
}
/* deposit */
.af-box-wrap {
display: flex;
flex-direction: column;
gap: 24px;
align-self: stretch;
}
.af-box-wrap .tab-menu {
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 0;
border-radius: 12px 12px 0 0;
border-bottom: 1px solid var(--color-primary-700);
background: var(--black-30);
gap: 0;
font-weight: 400;
}
.af-box-wrap .tab-menu a {
line-height: 18px;
background: transparent;
padding: 12px;
border-radius: 12px 12px 0 0;
filter: none;
color: var(--color-primary-400);
}
.af-box-wrap .tab-menu a.active {
border-radius: 12px 12px 0 0;
background: var(--gradient-bg-body);
border-color: transparent;
color: var(--color-primary-1000);
font-weight: 700;
}
.af-box-wrap .form-box {
justify-content: center;
gap: 6px;
}
.af-box-wrap .form-box p.form-til {
margin-bottom: 0;
font-size: 10px;
text-transform: uppercase;
font-weight: 700;
color: var(--color-primary-0);
line-height: 13px;
}
.af-box-wrap .form-box .statistic {
display: inline-grid;
gap: 6px;
align-self: stretch;
grid-template-rows: repeat(2,fit-content(100%));
grid-template-columns: repeat(4,minmax(0,1fr));
grid-auto-flow: row;
}
.af-box-wrap .form-box .statistic .s-data {
border-radius: 8px;
padding: 8px;
cursor: pointer;
background: var(--color-primary-10);
}
.af-box-wrap .form-box .statistic .s-data.active {
background: var(--gradient-bg-body);
box-shadow: 0 4px 4px 0 var(--black-25);
}
.af-box-wrap .form-box .statistic .s-data .s-amount {
font-size: 10px;
font-weight: 400;
color: var(--color-primary-400);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.af-box-wrap .form-box .statistic .s-data.active .s-amount {
color: var(--color-primary-1000);
font-weight: 700;
}
.af-box-wrap .af-form {
display: flex;
flex-direction: column;
gap: 24px;
align-self: stretch;
}
.af-box-wrap .af-form .af-form-amount {
display: flex;
flex-direction: column;
gap: 8px;
align-self: stretch;
}
.af-box-wrap .af-form .af-form-amount .d-amount a {
border: 1px solid var(--color-primary-30);
background: var(--black-30);
line-height: 1;
}
.af-box-wrap .af-form .af-form-amount .d-amount a:focus {
border-color: var(--color-primary-400);
}
.af-box-wrap .af-form .form-til {
margin-bottom: 0;
font-weight: 400;
font-size: 14px;
line-height: 18px;
}
.af-box-wrap .af-form .d-promo .form-check-label {
background: var(--black-30);
padding: 10px 10px 10px 16px;
}
.d-promo .form-check .more-info-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.d-promo .form-check {
margin-bottom: 8px;
}
.d-promo .form-check:last-child {
margin-bottom: 0;
}
.af-box-wrap .af-form .form-check-input:checked {
background: var(--surface-brand);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-select {
font-size: 14px;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background-color: var(--black-30);
color: var(--color-accent-100);
padding: 9px 12px;
line-height: 24px;
background-image: var(--bs-form-select-bg-img);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px 6px;
--bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M9.49738 0.747032L5.12238 5.12203C5.08174 5.16271 5.03349 5.19498 4.98038 5.217C4.92727 5.23901 4.87034 5.25034 4.81284 5.25034C4.75535 5.25034 4.69842 5.23901 4.64531 5.217C4.5922 5.19498 4.54395 5.16271 4.50331 5.12203L0.128313 0.747032C0.0670583 0.685845 0.025335 0.607859 0.00842549 0.522947C-0.00848406 0.438035 0.000180466 0.350014 0.0333222 0.270029C0.0664639 0.190044 0.122593 0.121691 0.194602 0.0736225C0.266612 0.025554 0.351265 -6.79995e-05 0.437845 1.35538e-07H9.18784C9.27442 -6.79995e-05 9.35908 0.025554 9.43109 0.0736225C9.5031 0.121691 9.55923 0.190044 9.59237 0.270029C9.62551 0.350014 9.63417 0.438035 9.61726 0.522947C9.60035 0.607859 9.55863 0.685845 9.49738 0.747032Z' fill='%23808080'/%3E%3C/svg%3E");
}
.form-select:focus {
box-shadow: none;
border-color: var(--color-primary-400);
}
.form-select option {
background-color: var(--black-100);
}
.af-box-wrap .form-box.w-type .af-form {
gap: 32px;
}
.bank-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.bank-info {
display: flex;
flex-direction: column;
gap: 12px;
align-self: stretch;
}
.bank-type {
display: flex;
padding: 10px;
align-items: center;
justify-content: space-between;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.bank-detail h5 {
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-bottom: 6px;
}
.bank-detail p {
font-size: 10px;
line-height: 13px;
margin-bottom: 0;
}
.bank-detail p span {
color: var(--color-primary-400);
font-weight: 700;
}
.bank-type .icon-delete {
background: var(--color-chat);
cursor: pointer;
}
.form-box.statement {
padding: 10px;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.form-box.statement .s-label {
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 18px;
color: var(--color-primary-200);
margin-bottom: 5px;
}
.form-box.statement .t-type {
background: transparent;
margin-bottom: 0;
padding: 0;
border-radius: 0;
font-size: 10px;
line-height: 18px;
padding-bottom: 5px;
border-bottom: 1px solid var(--color-primary-600);
}
.form-box.statement .t-type:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.form-box.statement .t-type .icon-round-right {
background: var(--color-primary-100);
margin-left: 8px;
}
.form-box.statement .t-type.bal {
color: var(--color-primary-400);
}
.history-tab {
padding: 10px 0;
display: flex;
gap: 6px;
overflow-x: auto;
}
.history-tab .history-thumb {
border-radius: 8px;
padding: 7px 26px;
cursor: pointer;
font-size: 10px;
color: var(--color-primary-400);
}
.history-tab .history-thumb.active {
background: var(--gradient-bg-body);
box-shadow: 0 4px 4px 0 var(--black-25);
color: var(--color-primary-1000);
font-weight: 700;
}
.history-tab::-webkit-scrollbar {
display: none;
}
.af-box-wrap.hitory {
gap: 10px;
}
.af-box-wrap.hitory .form-box {
gap: 10px;
}
.af-box-wrap.hitory .form-box .h-record {
padding: 9px 10px;
gap: 10px;
margin-bottom: 0;
align-self: stretch;
font-size: 10px;
border-bottom: 0;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.af-box-wrap.hitory .form-box .h-record .h-type:first-child {
text-align: start;
}
.af-box-wrap.hitory .form-box .h-record .h-type:last-child {
text-align: end;
}
.af-box-wrap.hitory .form-box .h-record .h-type span {
line-height: 13px;
}
.af-box-wrap.hitory .form-box .h-record .h-type span,
.af-box-wrap.hitory .form-box .h-record .h-type span.s-label {
font-size: 10px;
}
.af-box-wrap.hitory .form-box .h-record .h-type .s-label {
color: var(--color-accent-600);
}
/* reward */
.reward-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.reward-top {
display: flex;
padding: 10px 20px;
align-items: center;
gap: 10px;
align-self: stretch;
cursor: pointer;
border-radius: 12px;
background: var(--color-primary-20);
}
.reward-top::before {
border-radius: 12px;
}
.reward-body {
display: flex;
padding: 10px;
flex-direction: column;
justify-content: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.reward-body .form-box {
gap: 0;
}
.reward-body .form-box .form-til {
margin-bottom: 10px;
font-size: 14px;
font-weight: 700;
line-height: 18px;
color: var(--color-primary-200);
}
.reward-body .form-box .b-type {
background: transparent;
padding: 0;
border-radius: 0;
margin-bottom: 0;
padding-bottom: 6px;
margin-bottom: 6px;
line-height: 18px;
border-bottom: 1px solid var(--color-primary-600);
}
.reward-body .form-box .b-type:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.reward-body .form-box .b-type,
.reward-body .form-box .b-type .s-label {
font-size: 10px;
}
.reward-bottom {
display: flex;
padding: 10px;
flex-direction: column;
justify-content: center;
gap: 10px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.reward-bottom .form-box {
gap: 10px;
}
.reward-bottom .form-box .form-til {
font-size: 14px;
font-weight: 700;
line-height: 18px;
color: var(--color-primary-400);
margin-bottom: 0;
}
.reward-bottom .form-box .s-label {
font-size: 10px;
line-height: 13px;
}
.b-table table,
.b-table table thead {
font-size: 8px;
}
.b-table table {
color: var(--color-accent-100);
}
.b-table table th,
.b-table table td {
padding: 9px 10px;
}
.b-table table td.date span {
display: block;
text-align: center;
}
.b-table .btn-main.btn-claim {
background: var(--gradient-bg-body);
font-size: 8px;
text-transform: capitalize;
border-radius: 8px;
padding: 1px 5px;
}
.b-table .btn-main.btn-claim:hover,
.b-table .btn-main.btn-claim:focus,
.b-table .btn-main.btn-claim:active {
background: var(--black-30);
}
.reward-bottom .form-box .more-info-btn {
cursor: pointer;
}
.tnc-reward {
display: flex;
flex-direction: column;
gap: 10px;
align-self: stretch;
}
.tnc-reward .inbox-title {
text-align: center;
}
.tnc-reward .formula-wrapper {
display: flex;
padding: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
align-self: stretch;
border-radius: 8px;
background: var(--color-primary-20);
}
.tnc-reward .formula-wrapper h4,
.tnc-reward .example-wrapper h4 {
font-size: 10px;
font-weight: 700;
line-height: 13px;
margin-bottom: 0;
color: var(--color-primary-400);
}
.tnc-reward .formula-wrapper h4 {
text-transform: uppercase;
}
.tnc-reward .formula-wrapper .box {
text-align: center;
line-height: 18px;
}
.tnc-reward .example-wrapper {
line-height: 20px;
}
/* lobby */
.lobby-wrap {
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 1;
min-width: 0;
}
.lobby-category {
display: flex;
align-items: center;
flex-direction: row;
gap: 10px;
padding-bottom: 4px;
}
.lobby-category::-webkit-scrollbar {
display: none;
}
@media (min-width: 480px) {
.lobby-category::-webkit-scrollbar {
display: block;
}
}
.provider-thumb {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
width: 100px;
height: 56px;
padding: 8px;
cursor: pointer;
flex-shrink: 0;
}
.provider-thumb img {
height: 40px;
}
.provider-thumb span {
text-align: center;
line-height: 13px;
font-size: 12px;
text-transform: uppercase;
}
.provider-thumb.active {
background: var(--gradient-bg-body);
box-shadow: 0 4px 4px 0 var(--black-25);
}
.provider-thumb.active span {
color: var(--color-primary-1000);
font-weight: 700;
}
.product-select {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
}
.product-thumb {
position: relative;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
flex-grow: 1;
padding: 7px 16px;
border-radius: 12px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
min-width: 0;
}
.product-thumb::after {
content: "\f107";
font-size: 16px;
line-height: 1;
position: relative;
right: 0;
background: var(--gradient-bg-body);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.product-thumb img {
height: 40px;
}
.product-thumb span {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-primary-400);
}
.product-thumb img + span {
border-left: 1px solid var(--color-primary-30);
padding-left: 10px;
}
.popup-provider .product-thumb.active {
background: var(--gradient-bg-body);
border-color: var(--color-primary-400);
}
.popup-provider .product-thumb.active span {
color: var(--color-primary-1000);
border-left-color: var(--black-30);
}
.popup-provider {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: start;
gap: 10px;
max-height: 60dvh;
padding-right: 10px;
}
.popup-provider .product-thumb {
padding: 6px 8px;
gap: 6px;
background: var(--black-50);
}
.popup-provider .product-thumb::after {
display: none;
}
.popup-provider .product-thumb img {
height: 30px;
}
.popup-provider .product-thumb span {
color: var(--color-accent-100);
}
.form-box.profile {
padding: 10px 20px;
border-radius: 8px;
border: 1px solid var(--color-primary-400);
background: var(--black-30);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
}
.profile .vip-lv {
gap: 4px;
}
.profile .vip-lv img {
max-width: inherit;
height: 45px;
}
.profile .vip-lv span {
color: var(--color-gold);
font-size: 10px;
font-weight: 700;
text-transform: capitalize;
}
.return-bar {
padding: 0;
}
.return-bar a {
display: flex;
align-items: center;
gap: 10px;
line-height: 20px;
}
.return-bar,
.return-bar a {
color: var(--color-primary-0);
}
.return-bar svg {
font-size: 20px;
}
.return-bar div:last-child {
font-size: 14px;
}
.profile .p-info .username {
font-size: 14px;
font-weight: 700;
color: var(--color-primary-100);
line-height: 18px;
}
.profile .p-info {
justify-content: center;
font-size: 10px;
margin: 0;
gap: 4px;
line-height: 13px;
color: var(--color-accent-100);
}
.avatar .my-account .my-account-border,
.avatar .my-account .icon-account {
width: 70px;
height: 70px;
}
.avatar .my-account .my-account-border img {
width: 58px;
height: 58px;
top: 50%;
transform: translateY(-50%);
}
.top-fav {
display: flex;
flex-direction: column;
gap: 10px;
}
.top-fav-title {
display: flex;
align-items: center;
line-height: 13px;
gap: 8px;
color: var(--color-primary-0);
}
.top-fav .game-wrapper {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wallet2 {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 480px) {
.wallet2 {
grid-template-columns: repeat(2, 1fr);
}
}
.wallet2 .box-wrapper {
padding: 10px;
width: 100%;
border-radius: 8px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
height: 100%;
}
.wallet2 .box-wrapper h5 {
font-size: 14px;
font-weight: 700;
color: var(--color-primary-100);
margin-bottom: 0;
line-height: 18px;
text-align: center;
}
.wallet2 .w2-logo {
height: 30px;
margin-bottom: 5px;
}
.wallet2 .box-wrapper .box-text {
font-size: 10px;
line-height: 13px;
}
.wallet2 .box-wrapper .box-text .copy-btn {
background: var(--color-primary-100);
color: var(--color-primary-1000);
cursor: pointer;
border-radius: 6px;
min-width: 30px;
width: auto !important;
}
.user-setting .acc-status.mb-3 {
margin-bottom: 0 !important;
}
.acc-status p {
margin-bottom: 0;
}
.acc-status p span {
font-weight: 700;
}
.green {
color: #00ff42;
}
.red {
color: #f20;
}
.form-check-group {
display: none;
margin-left: 28px;
}
.form-check-group.aaa {
display: block;
}
.af-box-wrap .form-box.w-bar {
display: flex;
padding: 10px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--color-primary-400);
background: var(--color-primary-20);
}
.af-box-wrap .form-box.w-bar p {
width: 100%;
text-align: start;
}
.w-bar .form-label {
margin-bottom: 0;
font-size: 14px;
color: var(--color-primary-100);
}
.progress-container {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.progress-container .progress-label {
font-size: 12px;
line-height: 13px;
position: absolute;
right: 0; /* Aligns to the right edge of the current fill width */
top: -20px; /* Lifts the label directly above the bar */
transform: translateX(50%); /* Centers the text over the tip of the bar */
white-space: nowrap;
z-index: 10;
}
.w-bar-progress {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
padding: 3px 4px;
background: var(--gradient-bg-body);
border-radius: 10px;
margin-top: 16px;
overflow: visible;
}
.w-bar .progress {
background: var(--bg-progress-logged-in);
height: 7px;
width: 100%;
overflow: visible;
}
.w-bar .progress .progress-bar {
position: relative;
overflow: visible;
}
.w-bar .actarea {
font-size: 10px;
line-height: 13px;
text-align: start;
}
.rstep {
background: var(--black-30);
border: 1px solid var(--color-primary-30);
color: var(--color-accent-100);
font-size: 14px;
font-weight: 500;
}
.rstep::after {
background: var(--color-primary-30);
}
.rstep.active {
background: var(--gradient-bg-body);
color: var(--color-primary-1000);
font-size: 16px;
font-weight: 700;
}
.af-form.regbox {
display: none;
}
.af-form.regbox.active {
display: flex;
}
/* free game */
.fg-info-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.fg-info-wrapper .balance-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.fg-info-wrapper .balance-group {
border: 1px solid var(--color-primary-400);
background: var(--color-primary-20);
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1;
gap: 10px;
}
.fg-info-wrapper .balance-group .b-title {
display: block;
}
.fg-info-wrapper .balance-group .ammount {
font-weight: 700;
color: var(--color-primary-400);
display: block;
}
.fg-input-wrapper {
flex: 1;
padding: 6px 10px;
border-radius: 10px 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
border-right: 0;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.fg-input-wrapper:focus-within {
border-color: var(--color-primary-400);
border-right: 0;
}
.fg-input-wrapper input {
width: 100%;
font-size: 16px;
background: transparent;
border: 0;
color: var(--color-accent-100);
}
.fg-input-wrapper input:focus {
outline: 0;
}
.fg-info-wrapper .fg-right {
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.fg-info-wrapper .fg-right .fg-right-wrapper {
display: flex;
width: 100%;
}
.fg-info-wrapper .fg-right .submit-btn {
border: 0;
white-space: nowrap;
border-radius: 0 10px 10px 0;
display: flex;
padding: 13px 20px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
background: var(--gradient-bg-body);
box-shadow: 0 4px 10px 0 var(--black-16);
font-size: 14px;
font-weight: 700;
text-transform: capitalize;
color: var(--color-primary-1000);
line-height: 18px;
}
.fg-info-wrapper .msg-group {
text-align: left;
justify-content: flex-start;
align-items: normal;
flex: 1;
white-space: nowrap;
padding: 10px;
margin-bottom: 4px;
padding: 0 10px;
border-radius: 10px;
border: 1px solid var(--color-primary-30);
background: var(--black-30);
}
.fg-info-wrapper .msg-group .m-text {
border-bottom: 1px solid var(--color-primary-30);
padding: 5px;
display: block;
color: var(--color-accent-300);
font-size: 12px;
}
.fg-info-wrapper .msg-group .m-text strong {
color: var(--color-primary-100);
font-size: 14px;
}
.fg-info-wrapper .msg-group .m-text:last-child {
border: 0;
}
.fg-info-wrapper .currency {
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--color-primary-30);
padding-right: 10px;
font-size: 12px;
line-height: 12px;
}
/* datepicker */
.dp__main * {
border-radius: 8px !important;
}
.dp__arrow_top {
border-radius: initial !important;
}
.dp__input {
padding: 9px 30px 9px 36px !important;
border-radius: 8px !important;
background-color: var(--black-30) !important;
border: 1px solid var(--color-primary-30) !important;
color: var(--color-accent-100) !important;
}
.dp__action_button {
border-radius: 4px !important;
}
.dp__theme_light {
--dp-border-radius: 8px !important;
--dp-background-color: var(--black-100) !important;
--dp-text-color: var(--color-accent-100) !important;
--dp-primary-color: var(--color-primary-400) !important;
--dp-primary-text-color: var(--black-100) !important;
--dp-secondary-color: var(--color-accent-500) !important;
--dp-border-color: var(--color-primary-30) !important;
--dp-menu-border-color: var(--color-primary-30) !important;
}
.dp__pointer.dp__input_readonly.dp__input.dp__input_icon_pad.dp__input_reg {
border: 0 !important;
}
/* game-loader */
@property --loader-color-start {
syntax: '';
inherits: false;
initial-value: #FFFFFF;
}
@property --loader-color-end {
syntax: '';
inherits: false;
initial-value: #FFFFFF;
}
.game-loader {
width: 40px;
--b: 8px;
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;
position: relative;
top: -13px;
/* Consume the registered CSS properties inside the conic-gradient */
background: conic-gradient(#0000 10%, var(--loader-color-start)) content-box;
/* Standard Mask Syntax */
mask:
repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
mask-composite: intersect;
/* WebKit Mask Syntax */
-webkit-mask:
repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
-webkit-mask-composite: source-in;
/* Combine rotation and color shifting animations */
animation:
l4 1s infinite steps(10),
color-shift 3s infinite alternate ease-in-out;
}
/* Keyframes for rotation */
@keyframes l4 {
to { transform: rotate(1turn); }
}
/* Keyframes for smooth color interpolation */
@keyframes color-shift {
0% {
--loader-color-start: var(--color-primary-1000);
}
50% {
--loader-color-start: var(--color-primary-400);
}
100% {
--loader-color-start: var(--color-primary-100);
}
}
.tnc-promotion > div {
display: flex;
flex-direction: column;
gap: 10px;
}
#modal-promotion table {
max-width: 100% !important;
overflow-y: hidden !important;
white-space: nowrap;
padding-bottom: 10px;
border: 0 !important;
border-radius: 8px;
background: var(--color-primary-20);
}
#modal-promotion table>:not(caption)>*>* {
border: 0;
}
#modal-promotion table::-webkit-scrollbar {
display: block !important;
height: 7px;
}
#modal-promotion table::-webkit-scrollbar-thumb {
background: var(--color-primary-400);
}
#modal-promotion table::-webkit-scrollbar-track {
background: var(--black-80);
}
#modal-promotion .modal-title h5 {
line-height: 40px;
font-weight: 700;
}