.gaming-license, #home-livetx{ display:none!important; } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr{ height: 4.2rem!important; } .most-play-container .most-play-title, .header-section .most-play-title, .m-referral-container .referral-title, .app-download .app-download-title{ color:#006F78!important; } .games-tab-content .game-title { color: #000!important; } .icon-joker{ background-image: url(img1829_umenangkiss/joker_menu.png?v=3?v=2)!important; } .icon-playtech{ background-image: url(img1829_umenangkiss/pt_menu.png?v=3?v=2)!important; width: 1.5rem!important; height: 1.5rem!important; } .icon-pragmatic{ background-image: url(img1829_umenangkiss/pra_menu.png?v=3?v=2)!important; } .icon-spadegaming{ background-image: url(img1829_umenangkiss/sg_menu.png?v=3?v=2)!important; width: 1.5rem!important; height: 1.5rem!important; } .icon_home_menu_sport{ background-image: url(img1829_umenangkiss/soccer_menu.png?v=3)!important; } .icon_home_menu_lc{ background-image: url(img1829_umenangkiss/casino_menu.png?v=3)!important; } .icon_home_menu_slot{ background-image: url(img1829_umenangkiss/slot_menu.png?v=3)!important; } .icon_home_menu_711{ background-image: url(img1829_umenangkiss/711_menu.png?v=3)!important; } .icon_home_menu_fishing, .icon_home_menu_more{ background-image: url(img1829_umenangkiss/fish_menu.png?v=3)!important; } .li-lottery .icon_home_menu_lottery{ background-image: url(img1829_umenangkiss/lottery_menu.png?v=3)!important; } .li-lottery4d .icon_home_menu_lottery{ background-image: url(img1829_umenangkiss/4d_menu.png?v=3)!important; } .icon_home_menu_cockfight{ background-image: url(img1829_umenangkiss/cf_menu.png?v=3)!important; } .icon_home_menu_keno{ background-image: url(img1829_umenangkiss/keno_menu.png?v=3)!important; } .fas.fa-luckybox{ background-image: url(img1829_umenangkiss/box_menu.png?v=3)!important; } .fa-dharmachakra:before{ content:none!important; } .fa-dharmachakra{ background-image: url(img1829_umenangkiss/spin_menu.png?v=4)!important; width:37px!important; height:37px!important; background-size: 100%!important; background-repeat: no-repeat!important; } .fa-bars:before{ content:none!important; } .scroll_menu .m-scroll-btn{ margin-top: 27px!important; height: 24%!important; } .fa-bars{ background-image: url("img1829_umenangkiss/setting.png?v=3")!important; display: block; width: 33px; height: 33px; background-size: 46px; background-position: center; background-position-y: 0px; } .fa-qrcode:before{ content:none!important; } .fa-qrcode{ background-image: url("img1829_umenangkiss/qr_icon.png?v=3")!important; display: block; width: 33px; height: 33px; background-size: 46px; background-position: center; background-position-y: 0px; } .icon-account{ background-image: url("img1829_umenangkiss/user_icon.png?v=3?v=2")!important; width: 33px!important; height: 26px!important; background-size: 100%!important; } .games-tab-content .icon_home_logo_sport_sbo { background-image: url(".//img1829_umenangkiss/sbo_sport.png?v=3?v=6"); } .games-tab-content .icon_home_logo_sport_ibc { background-image: url(".//img1829_umenangkiss/ibc_sport.png?v=3?v=6"); } .games-tab-content .icon_home_logo_sport_msport { background-image: url(".//img1829_umenangkiss/msport.png?v=3?v=6"); } .games-tab-content .icon_home_logo_sport_hsport { background-image: url(".//img1829_umenangkiss/hsport.png?v=3?v=6"); } .games-tab-content .icon_home_logo_sport_cmd { background-image: url(".//img1829_umenangkiss/cmd_sport.png?v=3?v=6"); } .games-tab-content .icons{ border-radius: 11px!important; } .games-tab-content .icon_home_logo_casino_XPG { background-image: url(".//img1829_umenangkiss/xpg_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_AB { background-image: url(".//img1829_umenangkiss/allbet_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_SA { background-image: url(".//img1829_umenangkiss/sa_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_EG { background-image: url(".//img1829_umenangkiss/eg_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_AG { background-image: url(".//img1829_umenangkiss/ag_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_BG { background-image: url(".//img1829_umenangkiss/bg_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_PT { background-image: url(".//img1829_umenangkiss/pt_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_BBINC { background-image: url(".//img1829_umenangkiss/bbin_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_DG { background-image: url(".//img1829_umenangkiss/dg_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_GP { background-image: url(".//img1829_umenangkiss/gp_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_SEXYB { background-image: url(".//img1829_umenangkiss/sexyb_casino.png?v=3?v=6"); } .games-tab-content .icon_home_logo_casino_SBOC { background-image: url(".//img1829_umenangkiss/sbo_casino.png?v=3?v=6?v=6"); } .games-tab-content .icon_home_logo_casino_pragmatic { background-image: url(".//img1829_umenangkiss/pra_casino.png?v=3?v=6?v=6"); } .games-tab-content .icon_home_logo_casino_WM { background-image: url(".//img1829_umenangkiss/wm_casino.png?v=3?v=6?v=6"); } .games-tab-content .icon_home_logo_casino_YEEBET { background-image: url(".//img1829_umenangkiss/yeebet_casino.png?v=3?v=6?v=6"); } .games-tab-content .icon_home_logo_casino_EZUGI { background-image: url(".//img1829_umenangkiss/ezugi_casino.png?v=3?v=6?v=6"); } .games-tab-content .icon_home_logo_casino_marbula2 { background-image: url(".//img1829_umenangkiss/mabu2_casino.png?v=3?v=6?v=6"); } .luckyspin_banner { background-image: url(".//img1829_umenangkiss/spin_bg.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_inout { background-image: url(".//img1829_umenangkiss/inout_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_rpsoft { background-image: url(".//img1829_umenangkiss/rpsoft_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_spribe { background-image: url(".//img1829_umenangkiss/spribe_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_naga { background-image: url(".//img1829_umenangkiss/naga_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_kingmaker { background-image: url(".//img1829_umenangkiss/km_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_jili { background-image: url(".//img1829_umenangkiss/jili_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_pocketgame { background-image: url(".//img1829_umenangkiss/pgsoft_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_BETSOFT { background-image: url(".//img1829_umenangkiss/betsoft_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_RT { background-image: url(".//img1829_umenangkiss/rt_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_AGS { background-image: url(".//img1829_umenangkiss/ag_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_SG { background-image: url(".//img1829_umenangkiss/sg_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_PTS { background-image: url(".//img1829_umenangkiss/pt_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_BBINS { background-image: url(".//img1829_umenangkiss/bbin_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_GPS { background-image: url(".//img1829_umenangkiss/gp_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_FG { background-image: url(".//img1829_umenangkiss/fg_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_RTG { background-image: url(".//img1829_umenangkiss/rtg_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_CQ9 { background-image: url(".//img1829_umenangkiss/cq9_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_PRA { background-image: url(".//img1829_umenangkiss/pra_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_PG { background-image: url(".//img1829_umenangkiss/png_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_QS { background-image: url(".//img1829_umenangkiss/qs_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_NETENT { background-image: url(".//img1829_umenangkiss/netent_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_KIRON { background-image: url(".//img1829_umenangkiss/kiron_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_SBOS { background-image: url(".//img1829_umenangkiss/sbo_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_fachai { background-image: url(".//img1829_umenangkiss/fachai_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_blueprint { background-image: url(".//img1829_umenangkiss/bp_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_pocketgame { background-image: url(".//img1829_umenangkiss/pg_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_MG { background-image: url(".//img1829_umenangkiss/mg_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_jdb { background-image: url(".//img1829_umenangkiss/jdb_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_ludobet { background-image: url(".//img1829_umenangkiss/ludo_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_habanero { background-image: url(".//img1829_umenangkiss/habanero_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_dctrelax { background-image: url(".//img1829_umenangkiss/relax_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_rich88 { background-image: url(".//img1829_umenangkiss/rich88_slot.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_advantplay { background-image: url(".//img1829_umenangkiss/ap_slot.png?v=3?v=6"); } #slot_firmcontent .icon_home_logo_slot_gamerbuild{ background: url("img1829_umenangkiss/gamerbuild_slot.png?v=3?v=6") !important; background-size: 100%!important; } .games-tab-content .icon_home_logo_ace333 { background-image: url(".//img1829_umenangkiss/ace333_711.png?v=3"); background-size: 100%; height: 99px; width: 102px; background-repeat: no-repeat; } .games-tab-content .icon_home_logo_lionking { background-image: url(".//img1829_umenangkiss/lk_711.png?v=3"); } .games-tab-content .icon_home_logo_scr_S918 { background-image: url(".//img1829_umenangkiss/918_711.png?v=3?v=6"); } .games-tab-content .icon_home_logo_scr_GW { background-image: url(".//img1829_umenangkiss/gw_711.png?v=3"); } .games-tab-content .icon_home_logo_scr_PB { background-image: url(".//img1829_umenangkiss/pb_711.png?v=3"); } .games-tab-content .icon_home_logo_scr_MEGA { background-position: center!important; background-size: contain!important; background-image: url(".//img1829_umenangkiss/mega_711.png?v=3"); } .games-tab-content .icon_home_logo_scr_PUSSY { background-image: url(".//img1829_umenangkiss/pussy_711.png?v=3"); } .games-tab-content .icon_home_logo_scr_LIVE { background-image: url(".//img1829_umenangkiss/live22_711.png?v=3"); } .games-tab-content .icon_home_logo_slot_XE { background-image: url(".//img1829_umenangkiss/xe88_711.png?v=3"); } .games-tab-content .icon_home_logo_keno_jili { background-image: url(".//img1829_umenangkiss/jili_fish.png?v=3"); } .games-tab-content .icon_home_logo_slot_JOKER { background-image: url(".//img1829_umenangkiss/joker_711.png?v=3?v=6"); } .games-tab-content .icon_home_logo_slot_VP { background-image: url(".//img1829_umenangkiss/vpower_711.png?v=3?v=6"); } .games-tab-content .icon_home_logo_evo888 { background-image: url(".//img1829_umenangkiss/evo_711.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fish_jili { background-image: url(".//img1829_umenangkiss/jili_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fish_jdb { background-image: url(".//img1829_umenangkiss/jdb_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fish_cq9 { background-image: url(".//img1829_umenangkiss/cq9_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_GD4D { background-image: url(".//img1829_umenangkiss/4d_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fishing_GG { background-image: url(".//img1829_umenangkiss/gg_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fishing_SG { background-image: url(".//img1829_umenangkiss/sg_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fishing_JOKER { background-image: url(".//img1829_umenangkiss/joker_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fishing_BBIN { background-image: url(".//img1829_umenangkiss/bbin_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_cockfight_sv388 { background-image: url(".//img1829_umenangkiss/cf_fish.png?v=3?v=6"); } .games-tab-content .icon_home_logo_fishing_CF { background-image: url(".//img1829_umenangkiss/cf_fish.png?v=3?v=6"); } .icon-funds{ background-repeat: no-repeat; background-position-y: 6px; background-image: url(".//img1829_umenangkiss/deposit_menu.png?v=3?v=6"); filter: brightness(1) invert(0)!important; background-size: 100%!important; } .icon-logout{ background-image: url(".//img1829_umenangkiss/logout.png?v=3?v=6"); filter: brightness(1) invert(0)!important; } .icon-language{ background-image: url(".//img1829_umenangkiss/language.png?v=3?v=6"); filter: brightness(1) invert(0)!important; } .icon-livechat{ width: 1.2rem !important; height: 0.84rem !important; background-position-x: -8px; background-size: 96% 100%!important; background-image: url(".//img1829_umenangkiss/livechat.png?v=3?v=6"); filter: brightness(1) invert(0)!important; } .icon-contact{ background-image: url(".//img1829_umenangkiss/contact.png?v=3?v=6"); filter: brightness(1) invert(0)!important; } #pageHome #homePage .home_navBox .home_nav li a .i{ width: 2rem!important; } .lang-selection-en img{ content: url(".//img1829_umenangkiss/aus_flag.png?v=3?v=6"); } .games-tab-content .icon_home_logo_VR { background-image: url(".//img1829_umenangkiss/vr_keno.png?v=3?v=6"); } .games-tab-content .icon_home_logo_BBINF { background-image: url(".//img1829_umenangkiss/bbin_keno.png?v=3?v=6"); } .games-tab-content .icon_home_logo_KY { background-image: url(".//img1829_umenangkiss/ky_keno.png?v=3?v=6"); } .icon-contact{ } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li{ width: 33%!important; height: 103%!important; } .icon-contact{ background: url("./img1829_umenangkiss/contact_menu.png?v=3?v=2")!important; background-size: 100% 100%!important; } .icon-vip{ background: url("./img1829_umenangkiss/vip_menu.png?v=3")!important; background-size: 100% 100%!important; } .icon-language{ background: url("./img1829_umenangkiss/language_menu.png?v=3")!important; background-size: 100% 100%!important; } .icon-logout{ background: url("./img1829_umenangkiss/logout_menu.png?v=3")!important; background-size: 100% 100%!important; } section#progressivejackpot.theme1 .home-jackpot-content.myr { top: 58%!important; left: 19%!important;} #progressivejackpot .show-for-small-only img { content: url(./img1829_umenangkiss/jackpot.png?v=3?v=1) !important; } #loginPage .logo_big img{ content: url("./img1829_umenangkiss/loginbanner.png?v=3?=v4")!important; } .member-action p, .member-wallet p{ color:#000!important; } .account-menu-section .icon-myprofile{ background: url("./img1829_umenangkiss/acc_user.png?v=3?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-referral-program{ background: url("./img1829_umenangkiss/acc_referral.png?v=3?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-changepassword{ background: url("./img1829_umenangkiss/acc_changepassword.png?v=3?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-logout{ background: url("./img1829_umenangkiss/acc_logout.png?v=3?=v4")!important; background-size: 100%!important; width: 1.2rem!important; height: 1.2rem!important; background-repeat: no-repeat!important; } .float-menu.dailyloginreward-floating-icon .floating-icon-image { content:url('./img1829_umenangkiss/checkin.png?v=3?v=7') !important; } .float-menu.luckyspin-floating-icon .floating-icon-image { content:url('./img1829_umenangkiss/spin.png?v=3?v=7') !important; } .home_join_login{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; padding:8px; } /* Common button */ .home_join_login a{ position:relative; display:flex; align-items:center; justify-content:center; height:52px; border-radius:14px; overflow:hidden; font-size:15px; font-weight:800; letter-spacing:.4px; text-decoration:none !important; text-transform:uppercase; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; isolation:isolate; } /* ========================================= JOIN NOW — Champagne Gold + Crystal White ========================================= */ .home_to_join{ color:#0B3045 !important; background: linear-gradient( 180deg, #FFFDF7 0%, #F5DC9B 22%, #E8C477 52%, #C99B4A 100% ) !important; border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 8px rgba(255,215,120,.55), 0 0 20px rgba(232,196,119,.35), inset 0 2px 3px rgba(255,255,255,.95), inset 0 -3px 7px rgba(137,91,24,.25); } /* inner crystal border */ .home_to_join::before{ content:""; position:absolute; inset:4px; border-radius:10px; border:1px solid rgba(255,255,255,.55); pointer-events:none; z-index:-1; } /* ========================================= LOGIN — Tiffany Cyan ========================================= */ .home_to_login{ color:#F8FFFF !important; background: linear-gradient( 135deg, #006F78 0%, #007D86 30%, #00BFC5 62%, #00DDE0 100% ) !important; border:1px solid rgba(143,250,255,.85); text-shadow: 0 1px 2px rgba(0,48,69,.55), 0 0 8px rgba(255,255,255,.25); box-shadow: 0 0 8px rgba(0,241,242,.5), 0 0 20px rgba(0,191,197,.35), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,70,78,.35); } /* inner ice border */ .home_to_login::before{ content:""; position:absolute; inset:4px; border-radius:10px; border:1px solid rgba(234,251,255,.45); pointer-events:none; z-index:-1; } /* ========================================= Moving crystal shine ========================================= */ .home_join_login a::after{ content:""; position:absolute; top:-40%; left:-70%; width:36%; height:180%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.15), rgba(255,255,255,.9), rgba(255,255,255,.15), transparent ); transform:rotate(20deg); animation:iceButtonShine 3.2s infinite; pointer-events:none; } @keyframes iceButtonShine{ 0%{ left:-70%; } 55%{ left:-70%; } 100%{ left:140%; } } /* subtle breathing glow */ .home_to_login{ animation:tiffanyGlow 2.4s ease-in-out infinite alternate; } .home_to_join{ animation:champagneGlow 2.4s ease-in-out infinite alternate; } @keyframes tiffanyGlow{ from{ box-shadow: 0 0 7px rgba(0,241,242,.35), 0 0 16px rgba(0,191,197,.2), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,70,78,.35); } to{ box-shadow: 0 0 11px rgba(0,241,242,.7), 0 0 26px rgba(0,221,224,.45), inset 0 2px 4px rgba(255,255,255,.75), inset 0 -4px 8px rgba(0,70,78,.35); } } @keyframes champagneGlow{ from{ box-shadow: 0 0 7px rgba(255,215,120,.35), 0 0 15px rgba(232,196,119,.22), inset 0 2px 3px rgba(255,255,255,.95), inset 0 -3px 7px rgba(137,91,24,.25); } to{ box-shadow: 0 0 11px rgba(255,215,120,.65), 0 0 25px rgba(232,196,119,.4), inset 0 2px 4px rgba(255,255,255,1), inset 0 -3px 7px rgba(137,91,24,.25); } } .home_join_login a:hover{ transform:translateY(-2px); filter:brightness(1.06); } .home_join_login a:active{ transform:scale(.97); } .btns{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* Hide original image/icon */ .btns .btn .i, .btns .btn i{ display:none !important; } /* ========================= COMMON BUTTON STYLE ========================= */ .btns > a.btn{ position:relative; min-width:115px; height:46px; display:flex; align-items:center; justify-content:center; padding:0 20px !important; /* MORE ROUNDED */ border-radius:18px !important; overflow:hidden; font-size:0 !important; text-decoration:none !important; transform:translateZ(0); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; } /* Wording */ .btns > a.btn::before{ position:relative; z-index:5; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; } /* ========================= DEPOSIT TIFFANY CRYSTAL ========================= */ .btns .btn-deposit{ background: linear-gradient( 145deg, #006F78 0%, #007D86 28%, #00BFC5 60%, #00DDE0 82%, #8FFAFF 100% ) !important; border:1px solid rgba(143,250,255,.95) !important; box-shadow: 0 3px 8px rgba(0,80,90,.30), 0 0 8px rgba(0,241,242,.55), 0 0 18px rgba(0,191,197,.30), inset 0 2px 3px rgba(255,255,255,.70), inset 0 -4px 8px rgba(0,70,78,.40) !important; animation:tiffanyBtnGlow 2.3s ease-in-out infinite alternate; } .btns .btn-deposit::before{ content:"Deposit"; color:#F8FFFF; text-shadow: 0 1px 2px rgba(0,48,69,.7), 0 0 7px rgba(255,255,255,.30); } /* ========================= WITHDRAWAL CHAMPAGNE GOLD ========================= */ .btns .btn-withdrawal{ background: linear-gradient( 145deg, #FFFDF6 0%, #F5DC9B 25%, #FFD778 48%, #E8C477 68%, #C99B4A 100% ) !important; border:1px solid rgba(255,255,255,.95) !important; box-shadow: 0 3px 8px rgba(120,75,20,.25), 0 0 8px rgba(255,215,120,.50), 0 0 18px rgba(232,196,119,.30), inset 0 2px 3px rgba(255,255,255,.95), inset 0 -4px 8px rgba(137,91,24,.30) !important; animation:goldBtnGlow 2.3s ease-in-out infinite alternate; } .btns .btn-withdrawal::before{ content:"Withdrawal"; color:#0B3045; text-shadow: 0 1px 0 rgba(255,255,255,.8); } /* ========================= REFRESH ICE SILVER ========================= */ .btns .btn-refresh{ background: linear-gradient( 145deg, #FFFFFF 0%, #F8FBFC 28%, #E8F1F4 52%, #D7E2E7 75%, #AEBFC8 100% ) !important; border:1px solid rgba(175,200,208,.95) !important; box-shadow: 0 3px 8px rgba(36,70,83,.18), 0 0 8px rgba(0,221,228,.22), 0 0 16px rgba(143,250,255,.20), inset 0 2px 4px rgba(255,255,255,1), inset 0 -4px 7px rgba(36,70,83,.15) !important; } .btns .btn-refresh::before{ content:"Refresh"; color:#007C89; text-shadow: 0 1px 0 #fff, 0 0 6px rgba(0,221,228,.25); } /* ========================= INNER CRYSTAL BORDER ========================= */ .btns > a.btn span{ pointer-events:none; } .btns > a.btn{ isolation:isolate; } .btns > a.btn:after{ content:""; position:absolute; inset:4px; border-radius:14px; border:1px solid rgba(255,255,255,.48); box-shadow: inset 0 0 6px rgba(255,255,255,.25); pointer-events:none; z-index:2; } /* ========================= MOVING SHINE ========================= */ .btns > a.btn{ background-size:100% 100%; } .btns > a.btn .shine{ display:none; } .btns > a.btn:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.08); } /* Shine layer using background */ .btns > a.btn{ --shine:linear-gradient( 110deg, transparent 0%, transparent 35%, rgba(255,255,255,.15) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.15) 58%, transparent 65%, transparent 100% ); } /* click effect */ .btns > a.btn:active{ transform:scale(.96); box-shadow: inset 0 3px 7px rgba(0,0,0,.20) !important; } /* ========================= GLOW ANIMATION ========================= */ @keyframes tiffanyBtnGlow{ from{ box-shadow: 0 3px 8px rgba(0,80,90,.25), 0 0 7px rgba(0,241,242,.35), 0 0 14px rgba(0,191,197,.20), inset 0 2px 3px rgba(255,255,255,.65), inset 0 -4px 8px rgba(0,70,78,.35); } to{ box-shadow: 0 4px 10px rgba(0,80,90,.30), 0 0 12px rgba(0,241,242,.75), 0 0 25px rgba(0,221,224,.40), inset 0 2px 4px rgba(255,255,255,.85), inset 0 -4px 8px rgba(0,70,78,.35); } } @keyframes goldBtnGlow{ from{ box-shadow: 0 3px 8px rgba(120,75,20,.20), 0 0 7px rgba(255,215,120,.30), 0 0 14px rgba(232,196,119,.20), inset 0 2px 3px rgba(255,255,255,.90), inset 0 -4px 8px rgba(137,91,24,.25); } to{ box-shadow: 0 4px 10px rgba(120,75,20,.25), 0 0 12px rgba(255,215,120,.70), 0 0 24px rgba(232,196,119,.38), inset 0 2px 4px rgba(255,255,255,1), inset 0 -4px 8px rgba(137,91,24,.30); } } /* refresh note */ .btns > span{ width:100%; margin-top:3px; font-size:10px; color:#244653; opacity:.75; } /* ========================================================= HOME GAME NAV Glacier Silver + Tiffany Crystal Theme ========================================================= */ .home_navBox.home-nav-1{ position:relative; display:flex !important; align-items:center; gap:6px; padding:8px 6px; background: linear-gradient( 180deg, rgba(255,255,255,.96) 0%, rgba(248,251,252,.96) 45%, rgba(232,241,244,.96) 100% ); border-top:1px solid rgba(255,255,255,.95); border-bottom:1px solid rgba(175,200,208,.65); box-shadow: 0 4px 14px rgba(36,70,83,.10), inset 0 1px 0 rgba(255,255,255,1); } /* ========================================================= SCROLLABLE NAV ========================================================= */ .home_navBox.home-nav-1 .home_nav{ display:flex !important; align-items:stretch; gap:7px; margin:0 !important; padding:3px 2px !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none; scroll-behavior:smooth; } .home_navBox.home-nav-1 .home_nav::-webkit-scrollbar{ display:none; } /* ========================================================= NAV ITEM ========================================================= */ .home_navBox.home-nav-1 .home_nav > li{ flex:0 0 auto; margin:0 !important; padding:0 !important; list-style:none; } /* ========================================================= NORMAL BUTTON ========================================================= */ .home_navBox.home-nav-1 .home_nav > li > a.firmCategory{ position:relative; min-width:76px; height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:7px 9px !important; border-radius:16px !important; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FBFC 30%, #E8F1F4 70%, #D7E2E7 100% ) !important; border:1px solid rgba(175,200,208,.85) !important; box-shadow: 0 3px 7px rgba(36,70,83,.12), inset 0 2px 3px rgba(255,255,255,1), inset 0 -3px 5px rgba(174,191,200,.18); text-decoration:none !important; overflow:hidden; transition: transform .22s ease, filter .22s ease, border-color .22s ease, box-shadow .22s ease; } /* inner crystal border */ .home_navBox.home-nav-1 .home_nav > li > a.firmCategory::before{ content:""; position:absolute; inset:3px; border-radius:12px; border:1px solid rgba(255,255,255,.70); pointer-events:none; } /* ========================================================= ICON AREA ========================================================= */ .home_navBox.home-nav-1 .firmCategory .i{ position:relative; z-index:2; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: radial-gradient( circle at 35% 25%, rgba(255,255,255,.95) 0%, rgba(234,251,255,.8) 30%, rgba(143,250,255,.25) 60%, rgba(0,191,197,.10) 100% ); box-shadow: inset 0 1px 2px rgba(255,255,255,.95), 0 0 7px rgba(0,221,228,.20); } /* icon itself */ .home_navBox.home-nav-1 .firmCategory .i i{ position:relative; z-index:3; transform:scale(1.5); transition: transform .25s ease, filter .25s ease; } /* ========================================================= WORDING ========================================================= */ .home_navBox.home-nav-1 .firmCategory span{ position:relative; z-index:3; font-size:10px !important; line-height:1.1; font-weight:700; color:#0B3045 !important; white-space:nowrap; text-align:center; text-shadow: 0 1px 0 rgba(255,255,255,.9); } /* ========================================================= ACTIVE / SELECTED Tiffany Crystal Glow ========================================================= */ .home_navBox.home-nav-1 .firmCategory.on{ background: linear-gradient( 145deg, #006F78 0%, #007D86 22%, #00BFC7 52%, #00DDE4 78%, #8FFAFF 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 4px 9px rgba(0,111,120,.25), 0 0 8px rgba(0,241,242,.65), 0 0 19px rgba(0,221,228,.38), inset 0 2px 3px rgba(255,255,255,.58), inset 0 -4px 8px rgba(0,75,82,.34) !important; transform:translateY(-2px); animation:homeNavActiveGlow 2.2s ease-in-out infinite alternate; } /* ACTIVE wording */ .home_navBox.home-nav-1 .firmCategory.on span{ color:#000 !important; font-weight:800; text-shadow: 0 1px 2px rgba(0,48,69,.75), 0 0 6px rgba(255,255,255,.40); } /* Active icon circle */ .home_navBox.home-nav-1 .firmCategory.on .i{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 26%, #8FFAFF 60%, #00CBD2 100% ); box-shadow: 0 0 7px rgba(143,250,255,.75), 0 0 14px rgba(0,241,242,.50), inset 0 1px 3px rgba(255,255,255,.95); } /* lift icon slightly */ .home_navBox.home-nav-1 .firmCategory.on .i i{ transform:scale(1.6); filter: brightness(1.08) drop-shadow(0 2px 2px rgba(0,80,90,.18)); } /* ========================================================= ACTIVE BOTTOM GEM LINE ========================================================= */ .home_navBox.home-nav-1 .firmCategory.on::after{ content:""; position:absolute; left:18%; right:18%; bottom:3px; height:2px; border-radius:10px; background: linear-gradient( 90deg, transparent, #FFFFFF, #00F1F2, #FFFFFF, transparent ); box-shadow: 0 0 5px #00F1F2, 0 0 10px rgba(0,241,242,.75); } /* ========================================================= HOVER ========================================================= */ .home_navBox.home-nav-1 .firmCategory:not(.on):hover{ transform:translateY(-2px); border-color:#8FFAFF !important; box-shadow: 0 4px 9px rgba(36,70,83,.14), 0 0 9px rgba(0,221,228,.30), inset 0 2px 3px rgba(255,255,255,1); } /* ========================================================= LEFT / RIGHT SCROLL BUTTON ========================================================= */ .home_navBox.home-nav-1 .m-scroll-btn{ position:relative; flex:0 0 34px; width:34px !important; height:54px !important; display:flex !important; align-items:center; justify-content:center; padding:0 !important; margin:0 !important; border-radius:12px !important; border:1px solid rgba(175,200,208,.85) !important; background: linear-gradient( 180deg, #FFFFFF 0%, #E8F1F4 60%, #BFCED3 100% ) !important; box-shadow: 0 3px 7px rgba(36,70,83,.15), inset 0 2px 3px rgba(255,255,255,.95); overflow:hidden; z-index:8; } /* SVG */ .home_navBox.home-nav-1 .m-scroll-btn svg{ width:16px !important; height:16px !important; } .home_navBox.home-nav-1 .m-scroll-btn svg path{ fill:#007D89 !important; } /* left arrow direction */ .home_navBox.home-nav-1 .arrow-prev svg{ transform:rotate(180deg); } /* arrow hover */ .home_navBox.home-nav-1 .m-scroll-btn:hover{ background: linear-gradient( 145deg, #006F78, #00BFC5, #00DDE0 ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 8px rgba(0,241,242,.55), 0 0 16px rgba(0,221,228,.30), inset 0 1px 3px rgba(255,255,255,.65); } .home_navBox.home-nav-1 .m-scroll-btn:hover svg path{ fill:#FFFFFF !important; } /* ========================================================= ACTIVE GLOW ANIMATION ========================================================= */ @keyframes homeNavActiveGlow{ 0%{ box-shadow: 0 3px 8px rgba(0,111,120,.22), 0 0 7px rgba(0,241,242,.40), 0 0 14px rgba(0,221,228,.25), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,75,82,.30); } 100%{ box-shadow: 0 4px 10px rgba(0,111,120,.28), 0 0 11px rgba(0,241,242,.78), 0 0 24px rgba(0,221,228,.45), inset 0 2px 4px rgba(255,255,255,.72), inset 0 -4px 8px rgba(0,75,82,.32); } } /* ========================================================= BOTTOM NAVBAR Glacier Silver + Tiffany Crystal Theme ========================================================= */ .navbar:before{ content:none!important; }/* ========================================================= BOTTOM NAVBAR Glacier Silver + Tiffany Crystal Theme ========================================================= */ .home_notice .notice-parent .notice-item { background: rgb(0, 0, 0, 0)!important;} ul.navbar{ position:relative; display:grid !important; grid-template-columns:repeat(6, 1fr); width:100%; margin:0 !important; padding:7px 6px 8px !important; background: linear-gradient( 180deg, rgba(250,252,252,.98) 0%, rgba(221,232,235,.98) 52%, rgba(191,206,211,.98) 100% ) !important; border-top:1px solid rgba(255,255,255,.95); box-shadow: 0 -5px 16px rgba(36,70,83,.14), inset 0 1px 0 rgba(255,255,255,1); backdrop-filter:blur(10px); } /* navbar item */ ul.navbar > li{ position:relative; list-style:none; margin:0 !important; padding:0 3px !important; } /* ========================================================= BUTTON BASE ========================================================= */ ul.navbar > li > a.botnavbar{ position:relative; min-height:58px; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:5px 2px !important; border-radius:14px !important; background:transparent !important; border:1px solid transparent !important; text-decoration:none !important; overflow:hidden; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; } /* ========================================================= ICON HOLDER ========================================================= */ ul.navbar .botnavbar .i{ position:relative; z-index:3; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 38%, #D7E2E7 72%, #AFC8D0 100% ); border:1px solid rgba(255,255,255,.9); box-shadow: 0 2px 5px rgba(36,70,83,.12), inset 0 1px 2px rgba(255,255,255,1); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } /* Existing icon */ ul.navbar .botnavbar .i i{ position:relative; z-index:4; transform:scale(.82); transition: transform .25s ease, filter .25s ease; } /* ========================================================= WORDING ========================================================= */ ul.navbar .botnavbar span{ position:relative; z-index:3; font-size:9px !important; line-height:1.05; font-weight:700; color:#244653 !important; white-space:nowrap; text-align:center; text-shadow: 0 1px 0 rgba(255,255,255,.95); } /* ========================================================= ACTIVE BUTTON Tiffany Crystal ========================================================= */ ul.navbar > li > a.botnavbar.on, ul.navbar > li > a.botnavbar:not(.on):hover{ background: linear-gradient( 145deg, #006F78 0%, #007D86 22%, #00BFC7 52%, #00DDE4 76%, #8FFAFF 100% ) !important; border:1px solid rgba(143,250,255,.95) !important; box-shadow: 0 0 8px rgba(0,241,242,.55), 0 0 18px rgba(0,221,228,.28), inset 0 2px 3px rgba(255,255,255,.58), inset 0 -4px 7px rgba(0,75,82,.30) !important; transform:translateY(-3px); animation:bottomNavGlow 2.2s ease-in-out infinite alternate; } /* Active icon */ ul.navbar .botnavbar.on .i{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 25%, #8FFAFF 55%, #00CBD2 100% ); border-color:#FFFFFF; box-shadow: 0 0 6px rgba(255,255,255,.7), 0 0 12px rgba(0,241,242,.75), inset 0 1px 3px rgba(255,255,255,.95); } /* active icon bigger */ ul.navbar .botnavbar.on .i i{ transform:scale(.95); filter: brightness(1.08) drop-shadow(0 1px 2px rgba(0,80,90,.2)); } /* active wording */ ul.navbar .botnavbar.on span{ color:#F8FFFF !important; font-weight:800; text-shadow: 0 1px 2px rgba(0,48,69,.75), 0 0 5px rgba(255,255,255,.45); } /* ========================================================= ACTIVE BOTTOM GLOW LINE ========================================================= */ ul.navbar > li > a.botnavbar.on::after{ content:""; position:absolute; left:22%; right:22%; bottom:2px; height:2px; border-radius:50px; background: linear-gradient( 90deg, transparent, #FFFFFF, #00F1F2, #FFFFFF, transparent ); box-shadow: 0 0 5px #00F1F2, 0 0 10px rgba(0,241,242,.75); } /* ========================================================= GLASS INNER BORDER ========================================================= */ ul.navbar > li > a.botnavbar.on::before{ content:""; position:absolute; inset:3px; border-radius:10px; border:1px solid rgba(255,255,255,.35); pointer-events:none; } /* ========================================================= PRESS ========================================================= */ ul.navbar > li > a.botnavbar:active{ transform:scale(.94); } /* ========================================================= ACTIVE BREATHING GLOW ========================================================= */ @keyframes bottomNavGlow{ 0%{ box-shadow: 0 0 6px rgba(0,241,242,.35), 0 0 12px rgba(0,221,228,.18), inset 0 2px 3px rgba(255,255,255,.52), inset 0 -4px 7px rgba(0,75,82,.28); } 100%{ box-shadow: 0 0 11px rgba(0,241,242,.78), 0 0 23px rgba(0,221,228,.42), inset 0 2px 4px rgba(255,255,255,.72), inset 0 -4px 7px rgba(0,75,82,.30); } } /* ========================================================= SETTINGS ICON Make FontAwesome bars match theme ========================================================= */ ul.navbar .fa-bars{ color:#007C89 !important; font-size:17px !important; } ul.navbar .botnavbar.on .fa-bars{ color:#006F78 !important; } /* ========================================================= HOVER = SAME AS HOME SELECTED White Base + Tiffany Crystal Glow ========================================================= */ ul.navbar > li > a.botnavbar:not(.on):hover{ background: linear-gradient(145deg, #006F78 0%, #007D86 22%, #00BFC7 52%, #00DDE4 76%, #8FFAFF 100%) !important; border: 1px solid rgba(143, 250, 255, .95) !important; border-radius:14px !important; box-shadow: 0 0 7px rgba(0,241,242,.45), 0 0 15px rgba(0,221,228,.22), inset 0 2px 3px rgba(255,255,255,1), inset 0 -3px 5px rgba(174,191,200,.18) !important; transform:translateY(-3px) !important; } /* hover icon circle */ ul.navbar > li > a.botnavbar:not(.on):hover .i{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 32%, #8FFAFF 68%, #00CBD2 100% ) !important; border:1px solid #FFFFFF !important; box-shadow: 0 0 6px rgba(0,241,242,.55), 0 0 12px rgba(0,221,228,.30), inset 0 1px 3px rgba(255,255,255,1) !important; transform:none !important; } /* hover icon */ ul.navbar > li > a.botnavbar:not(.on):hover .i i{ transform:scale(.95) !important; filter: brightness(1.05) drop-shadow(0 1px 2px rgba(0,125,137,.22)) !important; } /* hover wording */ ul.navbar > li > a.botnavbar:not(.on):hover span{ color:#007C89 !important; font-weight:800 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 5px rgba(0,221,228,.20) !important; } /* hover bottom cyan glow line */ ul.navbar > li > a.botnavbar:not(.on):hover::after{ content:""; position:absolute; left:20%; right:20%; bottom:2px; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px #00F1F2, 0 0 10px rgba(0,221,228,.55); } /* hover inner crystal border */ ul.navbar > li > a.botnavbar:not(.on):hover::before{ content:""; position:absolute; inset:3px; border-radius:10px; border:1px solid rgba(255,255,255,.85); pointer-events:none; } /* Settings bars hover */ ul.navbar > li > a.botnavbar:not(.on):hover .fa-bars{ color:#007C89 !important; } /* ========================================================= PROMOTION PAGE Glacier White + Tiffany + Champagne Gold ========================================================= */ #promotionsPage.theme1{ background: linear-gradient( 180deg, #F8FBFC 0%, #E8F1F4 100% ) !important; min-height:100vh; padding-bottom:20px; } /* ========================================================= FILTER TABS ========================================================= */ #promotionsPage .filtering-container{ padding:10px 10px 6px; } #promotionsPage .history_nav{ display:grid !important; grid-template-columns:repeat(2, 1fr); gap:8px; padding:5px !important; margin:0 !important; background: linear-gradient( 180deg, #FFFFFF, #E8F1F4 ) !important; border:1px solid #D7E2E7; border-radius:16px; box-shadow: 0 3px 10px rgba(36,70,83,.10), inset 0 1px 0 rgba(255,255,255,1); } #promotionsPage .history_nav li{ margin:0 !important; padding:0 !important; } /* tab normal */ #promotionsPage .history_nav li a{ position:relative; display:flex !important; align-items:center; justify-content:center; min-height:40px; border-radius:12px !important; background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; border:1px solid rgba(175,200,208,.70); color:#244653 !important; font-size:12px; font-weight:700; text-decoration:none !important; transition:.25s ease; } /* tab selected */ #promotionsPage .history_nav li.active a, #promotionsPage .history_nav li a.on{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #E8F1F4 100% ) !important; border:1px solid #8FFAFF !important; color:#007C89 !important; box-shadow: 0 0 7px rgba(0,241,242,.45), 0 0 15px rgba(0,221,228,.22), inset 0 2px 3px rgba(255,255,255,1) !important; } /* selected bottom glow */ #promotionsPage .history_nav li.active a::after, #promotionsPage .history_nav li a.on::after{ content:""; position:absolute; left:22%; right:22%; bottom:2px; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px #00F1F2; } /* ========================================================= PROMOTION LIST ========================================================= */ #promotionsPage .history_content{ padding:8px 10px; } #promotionsPage .history_list{ display:flex; flex-direction:column; gap:14px; } /* ========================================================= PROMOTION CARD ========================================================= */ #promotionsPage .promotions_item{ position:relative; overflow:hidden; border-radius:18px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 68%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.80) !important; box-shadow: 0 6px 16px rgba(36,70,83,.12), 0 0 8px rgba(0,221,228,.08), inset 0 1px 0 rgba(255,255,255,1) !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } /* hover */ #promotionsPage .promotions_item:hover{ transform:translateY(-3px); border-color:#8FFAFF !important; box-shadow: 0 8px 18px rgba(36,70,83,.14), 0 0 10px rgba(0,241,242,.25), 0 0 20px rgba(0,221,228,.12) !important; } /* ========================================================= IMAGE ========================================================= */ #promotionsPage .promotions_item .img{ overflow:hidden; background:#FFFFFF; } #promotionsPage .promotions_item .img img{ display:block; width:100% !important; height:auto !important; transition: transform .4s ease, filter .4s ease; } #promotionsPage .promotions_item:hover .img img{ transform:scale(1.025); filter:brightness(1.03); } /* small Tiffany line under image */ #promotionsPage .promotions_item .img::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 7px rgba(0,241,242,.45); } /* ========================================================= CONTENT ========================================================= */ #promotionsPage .promotitembottom{ padding:12px 12px 13px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; } /* promotion title */ #promotionsPage .promotitembottom .p1{ margin:0 0 6px !important; font-size:14px !important; line-height:1.3; font-weight:800 !important; color:#0B3045 !important; letter-spacing:.1px; } /* description */ #promotionsPage .promotitembottom .p2{ margin:0 0 11px !important; min-height:18px; font-size:11px !important; line-height:1.4; font-weight:500; color:#55727E !important; } /* ========================================================= BUTTON CONTAINER ========================================================= */ #promotionsPage .m-promotion-button-container{ gap:9px; width:100%; } /* common */ #promotionsPage .btn-common{ position:relative; height:42px; border-radius:14px !important; overflow:hidden; font-size:11px !important; font-weight:800 !important; letter-spacing:.4px; border:none; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } /* ========================================================= DETAILS WHITE TIFFANY CRYSTAL ========================================================= */ #promotionsPage .btn-blue-promo{ color:#007C89 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #E8F1F4 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.32), inset 0 2px 3px rgba(255,255,255,1), inset 0 -3px 5px rgba(174,191,200,.16) !important; } /* ========================================================= APPLY NOW Champagne Gold ========================================================= */ #promotionsPage .btn-red-promo{ color:#0B3045 !important; background: linear-gradient( 145deg, #FFFDF5 0%, #F5DC9B 25%, #FFD778 50%, #E8C477 72%, #C99B4A 100% ) !important; border:1px solid rgba(255,255,255,.95) !important; box-shadow: 0 0 7px rgba(255,215,120,.45), 0 0 15px rgba(232,196,119,.20), inset 0 2px 3px rgba(255,255,255,.95), inset 0 -3px 6px rgba(137,91,24,.20) !important; } /* ========================================================= INNER CRYSTAL BORDER ========================================================= */ #promotionsPage .btn-common::before{ content:""; position:absolute; inset:3px; border-radius:10px; border:1px solid rgba(255,255,255,.48); pointer-events:none; } /* ========================================================= BUTTON SHINE ========================================================= */ #promotionsPage .btn-common::after{ content:""; position:absolute; top:-50%; left:-70%; width:30%; height:200%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.2), rgba(255,255,255,.85), rgba(255,255,255,.2), transparent ); animation:promoButtonShine 3.5s infinite; pointer-events:none; } @keyframes promoButtonShine{ 0%, 55%{ left:-70%; } 100%{ left:140%; } } /* hover */ #promotionsPage .btn-common:hover{ transform:translateY(-2px); filter:brightness(1.06); } /* click */ #promotionsPage .btn-common:active{ transform:scale(.97); } /* ========================================================= OPTIONAL SPECIAL TIFFANY ACCENT ========================================================= */ #promotionsPage .promotions_item::after{ content:""; position:absolute; left:18%; right:18%; bottom:0; height:2px; border-radius:50px; background: linear-gradient( 90deg, transparent, rgba(0,191,197,.25), #00DDE4, rgba(0,191,197,.25), transparent ); opacity:.55; } /* ========================================================= MAIN WEBSITE BACKGROUND Glacier White + Tiffany Soft Glow ========================================================= */ html, body, .ui-page, .ui-content, #pageHome, #pageHome #homePage{ background: radial-gradient( circle at 12% 8%, rgba(143,250,255,.22) 0%, rgba(143,250,255,.08) 18%, transparent 38% ), radial-gradient( circle at 90% 30%, rgba(0,221,228,.12) 0%, rgba(0,221,228,.04) 22%, transparent 42% ), radial-gradient( circle at 50% 85%, rgba(0,191,197,.08) 0%, transparent 36% ), linear-gradient( 180deg, #F8FBFC 0%, #EEF5F7 35%, #E8F1F4 68%, #F8FBFC 100% ) !important; background-attachment:fixed !important; } /* ========================================================= LOGIN PAGE Glacier White + Tiffany Crystal Theme ========================================================= */ #loginPage.theme3{ position:relative; min-height:100vh; padding-bottom:35px; background: radial-gradient( circle at 15% 10%, rgba(143,250,255,.26) 0%, rgba(143,250,255,.08) 20%, transparent 42% ), radial-gradient( circle at 88% 55%, rgba(0,221,228,.13) 0%, transparent 38% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 38%, #E8F1F4 100% ) !important; overflow:hidden; } /* ========================================================= SUBTLE CRYSTAL LIGHT ========================================================= */ #loginPage.theme3::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 120deg, transparent 5%, rgba(255,255,255,.65) 28%, transparent 47% ); opacity:.5; } /* keep contents above effect */ #loginPage.theme3 > *{ position:relative; z-index:2; } /* ========================================================= ANNOUNCEMENT ========================================================= */ #loginPage.theme3 .home_notice{ background: linear-gradient( 90deg, #FFFFFF, #EAFBFF, #FFFFFF ) !important; border-top:1px solid rgba(143,250,255,.55); border-bottom:1px solid rgba(0,191,197,.28); box-shadow: 0 2px 8px rgba(0,191,197,.10); color:#244653 !important; } #loginPage.theme3 .home_notice span{ color:#244653 !important; } /* ========================================================= LOGO ========================================================= */ #loginPage.theme3 .logo_big{ text-align:center; filter: drop-shadow(0 4px 8px rgba(36,70,83,.12)) drop-shadow(0 0 8px rgba(0,221,228,.14)); } #loginPage.theme3 .logo_big img{ display:block; width:100%; border-radius:14px; } /* ========================================================= LOGIN CARD ========================================================= */ #loginPage.theme3 .login_centent{ position:relative; width:calc(100% - 28px); max-width:430px; margin:0 auto; padding:22px 16px 18px; border-radius:22px; background: linear-gradient( 160deg, rgba(255,255,255,.97) 0%, rgba(248,251,252,.97) 58%, rgba(232,241,244,.95) 100% ) !important; border:1px solid rgba(175,200,208,.85); box-shadow: 0 10px 25px rgba(36,70,83,.12), 0 0 10px rgba(0,221,228,.10), inset 0 2px 0 rgba(255,255,255,1); } /* inner crystal border */ #loginPage.theme3 .login_centent::before{ content:""; position:absolute; inset:4px; border-radius:18px; border:1px solid rgba(255,255,255,.85); pointer-events:none; } /* ========================================================= INPUT ROW ========================================================= */ #loginPage.theme3 .login_centent_item.input_item{ position:relative; display:flex; align-items:center; min-height:52px; margin-bottom:13px !important; overflow:hidden; border-radius:15px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border:1px solid #D7E2E7 !important; box-shadow: 0 3px 8px rgba(36,70,83,.07), inset 0 1px 2px rgba(255,255,255,1); transition: border-color .2s ease, box-shadow .2s ease; } /* Focus glow */ #loginPage.theme3 .login_centent_item.input_item:focus-within{ border-color:#00DDE4 !important; box-shadow: 0 0 7px rgba(0,241,242,.38), 0 0 15px rgba(0,221,228,.16), inset 0 1px 2px rgba(255,255,255,1); } /* ========================================================= LEFT ICON AREA ========================================================= */ #loginPage.theme3 .login_centent_item.input_item > label{ width:50px; min-width:50px; height:52px; display:flex; align-items:center; justify-content:center; margin:0 !important; background: linear-gradient( 145deg, #FFFFFF, #EAFBFF, #D7E2E7 ); border-right:1px solid rgba(0,191,197,.18); } /* original login icons */ #loginPage.theme3 .login_centent_item label i{ filter: brightness(1.05) drop-shadow(0 0 3px rgba(0,221,228,.25)); } /* ========================================================= INPUT ========================================================= */ #loginPage.theme3 .standard-form-field-wrapper{ flex:1; background:transparent !important; border:none !important; } #loginPage.theme3 input.standard-input{ width:100% !important; height:50px !important; padding:0 42px 0 13px !important; background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; color:#0B3045 !important; font-size:13px !important; font-weight:600; } #loginPage.theme3 input.standard-input::placeholder{ color:#78909A !important; opacity:.8; } /* ========================================================= PASSWORD EYE ========================================================= */ #loginPage.theme3 .standard-password-eye{ position:absolute; right:13px; top:50%; transform:translateY(-50%); width:20px; height:20px; fill:#007C89 !important; opacity:.75; } /* ========================================================= REMEMBER ME ========================================================= */ #loginPage.theme3 .rememberme-formgroup{ display:flex; align-items:center; margin:3px 0 16px; color:#55727E !important; } #loginPage.theme3 #rememberMe{ width:16px; height:16px; accent-color:#00BFC5; } #loginPage.theme3 .remember-me{ margin-left:6px; font-size:11px; color:#244653 !important; } /* ========================================================= LOGIN BUTTON Tiffany Crystal ========================================================= */ #loginPage.theme3 .login_btn{ width:100%; margin-top:5px; } #loginPage.theme3 .login_btn .btn-blue{ position:relative; display:flex !important; align-items:center; justify-content:center; width:100% !important; height:48px !important; border-radius:16px !important; overflow:hidden; color:#F8FFFF !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.8px; background: linear-gradient( 135deg, #006F78 0%, #007D86 26%, #00BFC5 58%, #00DDE0 82%, #8FFAFF 100% ) !important; border:1px solid #8FFAFF !important; text-shadow: 0 1px 2px rgba(0,48,69,.75); box-shadow: 0 0 8px rgba(0,241,242,.45), 0 0 18px rgba(0,221,228,.22), inset 0 2px 3px rgba(255,255,255,.65), inset 0 -4px 8px rgba(0,75,82,.35) !important; animation:loginCrystalGlow 2.3s ease-in-out infinite alternate; } /* inner border */ #loginPage.theme3 .login_btn .btn-blue::before{ content:""; position:absolute; inset:4px; border-radius:12px; border:1px solid rgba(255,255,255,.42); pointer-events:none; } /* shine */ #loginPage.theme3 .login_btn .btn-blue::after{ content:""; position:absolute; top:-55%; left:-60%; width:28%; height:210%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25), rgba(255,255,255,.95), rgba(255,255,255,.25), transparent ); animation:loginShine 3.2s infinite; } /* ========================================================= FORGOT PASSWORD ========================================================= */ #loginPage.theme3 .login_forgetpsd{ margin-top:13px; text-align:center; } #loginPage.theme3 .login_forgetpsd a, #loginPage.theme3 a.login_forgetpsd{ color:#007C89 !important; font-size:11px; font-weight:700; text-decoration:none !important; } #loginPage.theme3 .login_forgetpsd a:hover{ color:#00BFC5 !important; text-shadow: 0 0 5px rgba(0,221,228,.28); } /* ========================================================= REGISTER AREA ========================================================= */ #loginPage.theme3 .login_toreg{ width:calc(100% - 28px); max-width:430px; margin:14px auto 0; padding:13px; text-align:center; border-radius:15px; background: linear-gradient( 180deg, rgba(255,255,255,.88), rgba(234,251,255,.75) ); border:1px solid rgba(175,200,208,.65); color:#55727E !important; font-size:11px; box-shadow: 0 3px 9px rgba(36,70,83,.07); } /* register HERE */ #loginPage.theme3 .m-register-link{ display:inline-block; margin:0 3px; padding:4px 11px; border-radius:10px; color:#0B3045 !important; font-weight:900; background: linear-gradient( 145deg, #FFFDF5, #F5DC9B, #FFD778, #C99B4A ) !important; border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 5px rgba(255,215,120,.35), inset 0 1px 2px rgba(255,255,255,.95); text-decoration:none !important; } /* ========================================================= ERROR MESSAGE ========================================================= */ #loginPage.theme3 #loginErr{ padding:9px 11px; margin-bottom:12px !important; border-radius:10px; background: linear-gradient( 180deg, #FFF8F8, #FFF0F0 ) !important; border:1px solid rgba(220,70,70,.25) !important; box-shadow:none !important; } /* ========================================================= LOGIN ANIMATIONS ========================================================= */ @keyframes loginCrystalGlow{ 0%{ box-shadow: 0 0 6px rgba(0,241,242,.32), 0 0 13px rgba(0,221,228,.17), inset 0 2px 3px rgba(255,255,255,.58), inset 0 -4px 8px rgba(0,75,82,.30); } 100%{ box-shadow: 0 0 11px rgba(0,241,242,.72), 0 0 24px rgba(0,221,228,.38), inset 0 2px 4px rgba(255,255,255,.78), inset 0 -4px 8px rgba(0,75,82,.33); } } @keyframes loginShine{ 0%, 55%{ left:-60%; } 100%{ left:140%; } } /* ========================================================= REGISTRATION PAGE Glacier White + Tiffany Crystal ========================================================= */ #registrationPage{ position:relative; min-height:100vh; padding:18px 14px 35px; background: radial-gradient( circle at 10% 8%, rgba(143,250,255,.25) 0%, rgba(143,250,255,.08) 22%, transparent 42% ), radial-gradient( circle at 92% 46%, rgba(0,221,228,.12) 0%, transparent 38% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 40%, #E8F1F4 100% ) !important; color:#0B3045; } /* subtle crystal shine */ #registrationPage::before{ content:""; position:fixed; inset:0; pointer-events:none; background: linear-gradient( 125deg, transparent 5%, rgba(255,255,255,.55) 28%, transparent 48% ); opacity:.45; z-index:0; } #registrationPage > *{ position:relative; z-index:1; } /* ========================================================= MAIN REGISTRATION CARD ========================================================= */ #registrationPage .reg-step-container{ width:100%; max-width:460px; margin:0 auto; padding:18px 15px 20px; border-radius:22px; background: linear-gradient( 160deg, rgba(255,255,255,.98) 0%, rgba(248,251,252,.97) 58%, rgba(232,241,244,.95) 100% ) !important; border:1px solid rgba(175,200,208,.85); box-shadow: 0 10px 25px rgba(36,70,83,.12), 0 0 12px rgba(0,221,228,.10), inset 0 2px 0 rgba(255,255,255,1); overflow:hidden; } /* ========================================================= TITLE ========================================================= */ #registrationPage .form-title{ margin:0 0 18px !important; text-align:center; font-size:18px !important; line-height:1.25; font-weight:800 !important; letter-spacing:.2px; color:#0B3045 !important; } #registrationPage .form-title span:last-child{ color:#007C89 !important; font-weight:700; } /* ========================================================= PROGRESS BAR ========================================================= */ #registrationPage .reg-progress-bar-section{ display:flex !important; align-items:center; justify-content:center; width:100%; margin:0 auto 22px; padding:5px 2px; } /* circle */ #registrationPage .step-wrapper{ position:relative; flex:0 0 34px; width:34px !important; height:34px !important; display:flex !important; align-items:center; justify-content:center; border-radius:50% !important; background: linear-gradient( 145deg, #FFFFFF, #F8FBFC, #D7E2E7 ) !important; border:1px solid #AFC8D0 !important; color:#55727E !important; font-size:12px !important; font-weight:800; box-shadow: 0 3px 7px rgba(36,70,83,.12), inset 0 2px 3px rgba(255,255,255,1); z-index:2; } /* active step */ #registrationPage .step-wrapper.on, #registrationPage .step-wrapper.current-step{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 25%, #8FFAFF 60%, #00CBD2 100% ) !important; border:1px solid #00DDE4 !important; color:#006F78 !important; box-shadow: 0 0 7px rgba(0,241,242,.55), 0 0 15px rgba(0,221,228,.28), inset 0 2px 3px rgba(255,255,255,.95) !important; animation:registerStepGlow 2.2s ease-in-out infinite alternate; } /* progress connecting line */ #registrationPage .progressBar{ flex:1; height:3px !important; margin:0 5px; border-radius:50px; background: linear-gradient( 90deg, #D7E2E7, #AFC8D0 ) !important; box-shadow: inset 0 1px 2px rgba(36,70,83,.12); } /* completed / highlighted progress if template adds on */ #registrationPage .progressBar.on, #registrationPage .progressBar.active{ background: linear-gradient( 90deg, #00BFC5, #00F1F2 ) !important; box-shadow: 0 0 6px rgba(0,221,228,.45); } /* check icon */ #registrationPage .step-wrapper svg{ width:15px !important; height:15px !important; } #registrationPage .step-wrapper svg path{ fill:#007C89 !important; } /* ========================================================= FORM SECTIONS ========================================================= */ #registrationPage .reg-form-section{ width:100%; } /* spacing */ #registrationPage .register-input-container{ margin-bottom:13px !important; } /* ========================================================= STANDARD FIELD ========================================================= */ #registrationPage .standard-form-field{ position:relative; border-radius:15px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border:1px solid #D7E2E7 !important; box-shadow: 0 3px 8px rgba(36,70,83,.07), inset 0 1px 2px rgba(255,255,255,1) !important; overflow:visible; transition: border-color .2s ease, box-shadow .2s ease; } #registrationPage .standard-form-field:focus-within{ border-color:#00DDE4 !important; box-shadow: 0 0 7px rgba(0,241,242,.35), 0 0 15px rgba(0,221,228,.15), inset 0 1px 2px rgba(255,255,255,1) !important; } /* wrapper */ #registrationPage .standard-form-field-wrapper{ position:relative; background:transparent !important; border:none !important; } /* ========================================================= INPUT ========================================================= */ #registrationPage input.standard-input{ width:100% !important; min-height:48px !important; padding:0 13px !important; border:none !important; outline:none !important; border-radius:14px !important; background:transparent !important; box-shadow:none !important; color:#0B3045 !important; font-size:13px !important; font-weight:600 !important; } #registrationPage input.standard-input::placeholder{ color:#78909A !important; opacity:.78; } /* password inputs need eye spacing */ #registrationPage .password-field input.standard-input{ padding-right:43px !important; } /* ========================================================= PASSWORD EYE ========================================================= */ #registrationPage .standard-password-eye{ position:absolute; right:13px; top:50%; transform:translateY(-50%); width:20px !important; height:20px !important; fill:#007C89 !important; opacity:.72; transition:.2s ease; } #registrationPage .standard-password-eye:hover{ fill:#00BFC5 !important; opacity:1; } /* ========================================================= LABEL ========================================================= */ #registrationPage .standard-label{ display:block; padding:9px 13px 2px; color:#007C89 !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.15px; } /* ========================================================= ERROR MESSAGE ========================================================= */ #registrationPage .standard-error-validation{ margin:5px 5px 0 !important; padding:0 !important; font-size:9px !important; line-height:1.35 !important; color:#D84C4C !important; } /* ========================================================= SELECT / DROPDOWN ========================================================= */ #registrationPage .standard-select{ min-height:46px !important; display:flex !important; align-items:center; padding:0 34px 0 12px !important; border-radius:13px !important; background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; border:1px solid rgba(175,200,208,.80) !important; color:#0B3045 !important; font-size:12px !important; font-weight:700; box-shadow: inset 0 1px 2px rgba(255,255,255,1); transition:.2s ease; } #registrationPage .standard-select:hover{ border-color:#00DDE4 !important; box-shadow: 0 0 6px rgba(0,221,228,.20), inset 0 1px 2px rgba(255,255,255,1); } /* dropdown arrow */ #registrationPage .standard-select-arrow{ position:absolute; right:12px; border-top-color:#007C89 !important; } /* dropdown popup */ #registrationPage .standard-select-dropdown{ border-radius:13px !important; background:#FFFFFF !important; border:1px solid #AFC8D0 !important; box-shadow: 0 8px 20px rgba(36,70,83,.16), 0 0 10px rgba(0,221,228,.10) !important; overflow:hidden; z-index:50; } /* dropdown option */ #registrationPage .standard-select-options{ padding:10px 12px !important; background:#FFFFFF !important; color:#244653 !important; border-bottom:1px solid rgba(215,226,231,.55); font-size:11px !important; } #registrationPage .standard-select-options:hover, #registrationPage .standard-select-options.active{ background: linear-gradient( 90deg, #FFFFFF, #EAFBFF ) !important; color:#007C89 !important; font-weight:800; box-shadow: inset 3px 0 0 #00BFC5; } /* ========================================================= PHONE FIELD ========================================================= */ #registrationPage .phone-field{ display:flex !important; align-items:center; gap:7px; } #registrationPage .phone-field .standard-select{ flex:0 0 92px !important; } /* ========================================================= DOB FIELD ========================================================= */ #registrationPage .dob-field{ display:flex !important; align-items:center; gap:6px; } #registrationPage .dob-field .standard-select{ flex:1 !important; min-width:0; } /* ========================================================= CAPTCHA ========================================================= */ #registrationPage .dob-field img[alt="Captcha"]{ height:42px !important; object-fit:cover; border-radius:10px !important; border:1px solid #AFC8D0; background:#FFFFFF; box-shadow: 0 2px 6px rgba(36,70,83,.10); } /* ========================================================= BUTTON AREA ========================================================= */ #registrationPage .transaction-button-section{ display:flex !important; align-items:center; gap:8px; margin-top:18px !important; } /* back button */ #registrationPage .back-button{ flex:0 0 46px; width:46px !important; height:46px !important; display:flex; align-items:center; justify-content:center; padding:0 !important; border-radius:14px !important; background: linear-gradient( 180deg, #FFFFFF, #E8F1F4 ) !important; border:1px solid #AFC8D0 !important; box-shadow: 0 3px 8px rgba(36,70,83,.10), inset 0 2px 3px rgba(255,255,255,1) !important; } #registrationPage .back-button svg{ width:16px !important; height:16px !important; } #registrationPage .back-button svg path{ fill:#007C89 !important; } /* button container */ #registrationPage .standard-button-container{ flex:1; width:100%; } /* NEXT / REGISTER */ #registrationPage .standard-submit-form-button{ position:relative; width:100% !important; height:48px !important; border-radius:16px !important; overflow:hidden; border:1px solid #8FFAFF !important; color:#F8FFFF !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.7px; text-transform:uppercase; background: linear-gradient( 135deg, #006F78 0%, #007D86 24%, #00BFC5 56%, #00DDE0 80%, #8FFAFF 100% ) !important; text-shadow: 0 1px 2px rgba(0,48,69,.75); box-shadow: 0 0 8px rgba(0,241,242,.42), 0 0 18px rgba(0,221,228,.20), inset 0 2px 3px rgba(255,255,255,.62), inset 0 -4px 8px rgba(0,75,82,.32) !important; transition: transform .2s ease, filter .2s ease; animation:registerBtnGlow 2.3s ease-in-out infinite alternate; } /* Register final button slightly premium */ #registrationPage .regsub-button{ background: linear-gradient( 135deg, #006F78 0%, #00BFC5 46%, #00F1F2 78%, #8FFAFF 100% ) !important; } /* Disabled button */ #registrationPage .standard-submit-form-button:disabled{ color:#7A949E !important; background: linear-gradient( 180deg, #F8FBFC, #D7E2E7 ) !important; border:1px solid #BFCED3 !important; box-shadow: inset 0 2px 3px rgba(255,255,255,.9) !important; text-shadow:none; opacity:.72; animation:none !important; } /* hover */ #registrationPage .standard-submit-form-button:not(:disabled):hover{ transform:translateY(-2px); filter:brightness(1.07); } /* click */ #registrationPage .standard-submit-form-button:not(:disabled):active{ transform:scale(.97); } /* ========================================================= TERMS NOTICE ========================================================= */ #registrationPage .reg-notice-section{ margin-top:15px !important; padding:11px 12px; border-radius:13px; background: linear-gradient( 180deg, rgba(255,255,255,.90), rgba(234,251,255,.70) ); border:1px solid rgba(175,200,208,.60); color:#55727E !important; font-size:9px !important; line-height:1.45 !important; box-shadow: 0 3px 8px rgba(36,70,83,.06); } #registrationPage .reg-notice-section .text-info{ color:#007C89 !important; font-weight:800 !important; } /* ========================================================= ALREADY HAVE ACCOUNT ========================================================= */ #registrationPage .prompt-login-section{ margin-top:14px !important; padding:12px; text-align:center; border-radius:14px; background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ); border:1px solid rgba(175,200,208,.65); color:#55727E !important; font-size:11px !important; } /* LOGIN link = champagne crystal */ #registrationPage .prompt-login-section > a{ display:inline-block; margin-left:5px; padding:5px 14px; border-radius:10px; color:#0B3045 !important; font-weight:900 !important; text-decoration:none !important; background: linear-gradient( 145deg, #FFFDF5 0%, #F5DC9B 28%, #FFD778 55%, #C99B4A 100% ) !important; border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 6px rgba(255,215,120,.35), inset 0 1px 2px rgba(255,255,255,.95); } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes registerStepGlow{ 0%{ box-shadow: 0 0 5px rgba(0,241,242,.32), 0 0 10px rgba(0,221,228,.18), inset 0 2px 3px rgba(255,255,255,.9); } 100%{ box-shadow: 0 0 9px rgba(0,241,242,.70), 0 0 18px rgba(0,221,228,.32), inset 0 2px 4px rgba(255,255,255,1); } } @keyframes registerBtnGlow{ 0%{ box-shadow: 0 0 6px rgba(0,241,242,.30), 0 0 12px rgba(0,221,228,.16), inset 0 2px 3px rgba(255,255,255,.58), inset 0 -4px 8px rgba(0,75,82,.28); } 100%{ box-shadow: 0 0 11px rgba(0,241,242,.70), 0 0 22px rgba(0,221,228,.35), inset 0 2px 4px rgba(255,255,255,.75), inset 0 -4px 8px rgba(0,75,82,.32); } } /* ========================================================= TERMS & CONDITIONS Glacier White + Tiffany Crystal Theme ========================================================= */ .mobile-tnc{ position:relative; min-height:100vh; padding-bottom:28px; background: radial-gradient( circle at 10% 5%, rgba(143,250,255,.24) 0%, rgba(143,250,255,.07) 20%, transparent 40% ), radial-gradient( circle at 90% 38%, rgba(0,221,228,.10) 0%, transparent 35% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 42%, #E8F1F4 100% ) !important; color:#0B3045 !important; } /* ========================================================= PAGE TITLE ========================================================= */ .mobile-tnc .info-centre-header{ position:relative; padding:16px 15px !important; text-align:center; background: linear-gradient( 135deg, #006F78 0%, #007D86 25%, #00BFC5 58%, #00DDE0 82%, #8FFAFF 100% ) !important; border-bottom:1px solid #8FFAFF; box-shadow: 0 4px 12px rgba(0,111,120,.18), 0 0 12px rgba(0,221,228,.20), inset 0 2px 3px rgba(255,255,255,.45); } .mobile-tnc .info-centre-header span{ color:#F8FFFF !important; font-size:17px !important; font-weight:800 !important; letter-spacing:.4px; text-shadow: 0 1px 2px rgba(0,48,69,.75), 0 0 6px rgba(255,255,255,.30); } /* ========================================================= MAIN CONTENT ========================================================= */ .mobile-tnc .info-centre-container{ padding:12px 10px 20px !important; background:transparent !important; } /* remove bootstrap dark/default backgrounds */ .mobile-tnc .col-lg-12, .mobile-tnc .tab-content, .mobile-tnc .panel-group{ background:transparent !important; } /* ========================================================= INTRO / DESCRIPTION BOX ========================================================= */ .mobile-tnc .ic-navbar-default{ margin:0 0 13px !important; border-radius:16px !important; overflow:hidden; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border:1px solid rgba(175,200,208,.75) !important; box-shadow: 0 5px 14px rgba(36,70,83,.09), inset 0 1px 0 rgba(255,255,255,1) !important; } .mobile-tnc .ic-navbar-collapse{ background:transparent !important; border:none !important; box-shadow:none !important; } .mobile-tnc ul.seperator{ margin:0 !important; padding:13px 14px !important; list-style:none; } .mobile-tnc ul.seperator li{ border:none !important; background:transparent !important; } .mobile-tnc ul.seperator li a{ display:block; padding:0 !important; background:transparent !important; color:#55727E !important; font-size:11px !important; line-height:1.55 !important; text-decoration:none !important; } /* Tiffany accent */ .mobile-tnc ul.seperator li::before{ content:""; display:block; width:42px; height:3px; margin-bottom:10px; border-radius:20px; background: linear-gradient( 90deg, #00BFC5, #00F1F2 ); box-shadow: 0 0 6px rgba(0,221,228,.40); } /* ========================================================= ACCORDION CARD ========================================================= */ .mobile-tnc .panel.accordion-title{ position:relative; margin:0 0 10px !important; overflow:hidden; border-radius:15px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border:1px solid rgba(175,200,208,.78) !important; box-shadow: 0 4px 12px rgba(36,70,83,.08), inset 0 1px 0 rgba(255,255,255,1) !important; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } /* hover */ .mobile-tnc .panel.accordion-title:hover{ border-color:#8FFAFF !important; box-shadow: 0 5px 14px rgba(36,70,83,.10), 0 0 9px rgba(0,221,228,.18), inset 0 1px 0 #FFFFFF !important; } /* ========================================================= ACCORDION HEADER ========================================================= */ .mobile-tnc .panel-heading{ padding:0 !important; border:none !important; background:transparent !important; } .mobile-tnc .panel-title{ margin:0 !important; } .mobile-tnc .accordion-toggle{ position:relative; display:flex !important; align-items:center; min-height:50px; padding:0 44px 0 14px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; color:#0B3045 !important; font-size:12px !important; line-height:1.3; font-weight:800 !important; text-decoration:none !important; border:none !important; transition:.25s ease; } /* ========================================================= OPEN ACCORDION ========================================================= */ .mobile-tnc .accordion-toggle:not(.collapsed){ color:#007C89 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #EAFBFF 50%, #E8F1F4 100% ) !important; box-shadow: inset 4px 0 0 #00BFC5, inset 0 -1px 0 rgba(0,221,228,.18); text-shadow: 0 1px 0 #FFFFFF, 0 0 5px rgba(0,221,228,.14); } /* ========================================================= ACCORDION ARROW ========================================================= */ .mobile-tnc .accordion-toggle::after{ content:""; position:absolute; right:16px; top:50%; width:9px; height:9px; border-right:2px solid #007C89; border-bottom:2px solid #007C89; transform: translateY(-65%) rotate(45deg); transition:transform .25s ease; } /* opened */ .mobile-tnc .accordion-toggle:not(.collapsed)::after{ transform: translateY(-30%) rotate(225deg); border-color:#00BFC5; filter: drop-shadow(0 0 3px rgba(0,221,228,.50)); } /* ========================================================= ACTIVE HEADER BOTTOM GLOW ========================================================= */ .mobile-tnc .accordion-toggle:not(.collapsed)::before{ content:""; position:absolute; left:18px; right:18px; bottom:0; height:2px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px rgba(0,241,242,.45); } /* ========================================================= ACCORDION BODY ========================================================= */ .mobile-tnc .panel-collapse{ background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; } .mobile-tnc .panel-body.accordion-content{ padding:14px 14px 16px !important; border:none !important; background: linear-gradient( 180deg, rgba(255,255,255,.96), rgba(248,251,252,.96) ) !important; color:#445F6B !important; } /* ========================================================= BODY TEXT ========================================================= */ .mobile-tnc .accordion-content p{ margin-top:0 !important; margin-bottom:9px !important; color:#445F6B !important; font-size:10.5px !important; line-height:1.6 !important; } .mobile-tnc .accordion-content span{ color:#445F6B !important; } /* section strong text */ .mobile-tnc .accordion-content b, .mobile-tnc .accordion-content strong{ color:#007C89 !important; font-weight:800; } /* ========================================================= OVERRIDE INLINE LEFT PADDING Make mobile content cleaner ========================================================= */ .mobile-tnc .accordion-content p[style*="padding-left: 30px"]{ padding-left:12px !important; border-left:2px solid rgba(0,191,197,.28); } .mobile-tnc .accordion-content p[style*="padding-left: 60px"]{ padding-left:20px !important; color:#55727E !important; } /* ========================================================= SMALL TIFFANY NUMBER ACCENT ========================================================= */ .mobile-tnc .accordion-content > div > div{ position:relative; } /* ========================================================= LINKS ========================================================= */ .mobile-tnc a{ transition:.2s ease; } .mobile-tnc .accordion-content a{ color:#007C89 !important; font-weight:700; } /* ========================================================= OPEN PANEL SPECIAL GLOW ========================================================= */ .mobile-tnc .panel.accordion-title:has(.panel-collapse.in){ border-color:rgba(0,221,228,.52) !important; box-shadow: 0 5px 15px rgba(36,70,83,.10), 0 0 9px rgba(0,221,228,.18), inset 0 1px 0 #FFFFFF !important; } /* ========================================================= COPYRIGHT ========================================================= */ .mobile-tnc .copyright{ margin:18px 12px 8px !important; padding:12px !important; border-radius:13px; text-align:center; color:#78909A !important; font-size:9px !important; background: linear-gradient( 180deg, rgba(255,255,255,.88), rgba(232,241,244,.82) ); border:1px solid rgba(175,200,208,.55); box-shadow: inset 0 1px 0 #FFFFFF; } /* ========================================================= SCROLLBAR ========================================================= */ .mobile-tnc ::-webkit-scrollbar{ width:5px; } .mobile-tnc ::-webkit-scrollbar-track{ background:#E8F1F4; } .mobile-tnc ::-webkit-scrollbar-thumb{ border-radius:20px; background: linear-gradient( 180deg, #00BFC5, #007D86 ); } /* ========================================================= MOBILE CLEANUP ========================================================= */ @media (max-width:600px){ .mobile-tnc .info-centre-container{ padding-left:8px !important; padding-right:8px !important; } .mobile-tnc .col-lg-12{ padding-left:0 !important; padding-right:0 !important; } .mobile-tnc .accordion-toggle{ min-height:48px; padding-left:13px !important; font-size:11px !important; } .mobile-tnc .panel-body.accordion-content{ padding:13px 12px 15px !important; } .mobile-tnc .accordion-content p{ font-size:10px !important; } } /* ========================================================= DAILY CHECK-IN Glacier White + Tiffany Crystal + Champagne Gold ========================================================= */ .daily-check-in.responsive-box{ position:relative; background: radial-gradient( circle at 15% 8%, rgba(143,250,255,.22) 0%, rgba(143,250,255,.06) 25%, transparent 45% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 42%, #E8F1F4 100% ) !important; border-radius:22px !important; border:1px solid rgba(175,200,208,.85); box-shadow: 0 10px 24px rgba(36,70,83,.12), 0 0 12px rgba(0,221,228,.10), inset 0 2px 0 rgba(255,255,255,1); overflow:hidden; } /* subtle crystal shine */ .daily-check-in.responsive-box::before{ content:""; position:absolute; top:-40%; left:-25%; width:70%; height:180%; background: linear-gradient( 115deg, transparent, rgba(255,255,255,.45), transparent ); transform:rotate(8deg); pointer-events:none; } /* ========================================================= RESET ORIGINAL NEGATIVE POSITION ========================================================= */ .daily-check-in .daily-checkin-home{ position:relative; margin-top:0 !important; padding:8px 3px 0; z-index:2; } /* ========================================================= TOP TNC TEXT ========================================================= */ .daily-check-in .daily-checkin-rewardexplain{ margin:0 0 10px !important; text-align:center; color:#78909A !important; font-size:10px !important; line-height:1.3; font-weight:600; } /* ========================================================= MAIN CONTENT CARD ========================================================= */ .daily-check-in .daily-checkin-content{ position:relative; padding:52px 10px 14px; border-radius:18px; background: linear-gradient( 180deg, rgba(255,255,255,.97) 0%, rgba(248,251,252,.97) 100% ) !important; border:1px solid rgba(175,200,208,.70); box-shadow: 0 5px 15px rgba(36,70,83,.08), inset 0 1px 0 rgba(255,255,255,1); overflow:hidden; } /* top Tiffany accent */ .daily-check-in .daily-checkin-content::before{ content:""; position:absolute; top:0; left:15%; right:15%; height:2px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 7px rgba(0,241,242,.45); } /* ========================================================= TITLE ========================================================= */ .daily-check-in .daily-checkin-content-titlewrap{ text-align:center; margin-bottom:12px; } .daily-check-in .daily-checkin-content-title{ margin:0 !important; color:#0B3045 !important; font-size:14px !important; line-height:1.35; font-weight:800 !important; } /* replace original red 7 */ .daily-check-in .daily-checkin-content-title .red-color{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; margin:0 3px; padding:0 6px; border-radius:8px; color:#007C89 !important; background: linear-gradient( 145deg, #FFFFFF, #EAFBFF, #8FFAFF ) !important; border:1px solid rgba(0,221,228,.65); box-shadow: 0 0 6px rgba(0,221,228,.28), inset 0 1px 2px #FFFFFF; text-shadow:none !important; } /* ========================================================= COLLECT BUTTON Tiffany Crystal ========================================================= */ .daily-check-in .daily-checkin-content-button-activeRed{ position:relative; width:80%; max-width:280px; height:44px; margin:0 auto 20px !important; display:flex; align-items:center; justify-content:center; border-radius:15px !important; overflow:hidden; color:#F8FFFF !important; font-size:12px !important; font-weight:900 !important; letter-spacing:.6px; text-transform:uppercase; background: linear-gradient( 135deg, #006F78 0%, #007D86 24%, #00BFC5 55%, #00DDE0 80%, #8FFAFF 100% ) !important; border:1px solid #8FFAFF !important; text-shadow: 0 1px 2px rgba(0,48,69,.75); box-shadow: 0 0 8px rgba(0,241,242,.45), 0 0 18px rgba(0,221,228,.22), inset 0 2px 3px rgba(255,255,255,.65), inset 0 -4px 8px rgba(0,75,82,.32) !important; animation:dailyCollectGlow 2.3s ease-in-out infinite alternate; } /* inner crystal border */ .daily-check-in .daily-checkin-content-button-activeRed::before{ content:""; position:absolute; inset:4px; border-radius:11px; border:1px solid rgba(255,255,255,.42); pointer-events:none; } /* moving shine */ .daily-check-in .daily-checkin-content-button-activeRed::after{ content:""; position:absolute; top:-60%; left:-65%; width:28%; height:220%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.20), rgba(255,255,255,.95), rgba(255,255,255,.20), transparent ); animation:dailyCollectShine 3.3s infinite; pointer-events:none; } /* ========================================================= PROGRESS AREA ========================================================= */ .daily-check-in .daily-checkin-progress{ position:relative; width:100%; padding-top:3px; overflow:visible; } /* progress line */ .daily-check-in .daily-checkin-progress-line{ position:absolute; left:5%; right:5%; top:23px; height:3px !important; border-radius:20px; background: linear-gradient( 90deg, #00BFC5 0%, #00DDE4 12%, #D7E2E7 12%, #D7E2E7 100% ) !important; box-shadow: 0 0 5px rgba(0,221,228,.25); z-index:0; } /* 7 days layout */ .daily-check-in .daily-checkin-progress-wrap{ position:relative; z-index:2; display:grid !important; grid-template-columns:repeat(7, 1fr); gap:4px; width:100%; } /* ========================================================= DAY ITEM ========================================================= */ .daily-check-in .daily-checkin-progress-day{ position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; } /* image holder */ .daily-check-in .daily-checkin-progress-day > div:first-child{ position:relative !important; width:40px !important; height:40px !important; display:flex !important; align-items:center; justify-content:center; margin:0 auto; border-radius:50%; background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 40%, #D7E2E7 100% ); border:1px solid rgba(175,200,208,.80); box-shadow: 0 3px 6px rgba(36,70,83,.10), inset 0 1px 2px rgba(255,255,255,1); } /* force original images into same size */ .daily-check-in .daily-checkin-progress-day > div:first-child img{ position:static !important; width:30px !important; height:30px !important; object-fit:contain !important; top:auto !important; left:auto !important; } /* ========================================================= DAY 1 ACTIVE ========================================================= */ .daily-check-in .daily-checkin-progress-day:first-child > div:first-child{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 25%, #8FFAFF 60%, #00CBD2 100% ); border-color:#00DDE4; box-shadow: 0 0 7px rgba(0,241,242,.55), 0 0 14px rgba(0,221,228,.25), inset 0 1px 3px rgba(255,255,255,1); } /* ========================================================= DAY TEXT ========================================================= */ .daily-check-in .daily-checkin-progress-day-text{ margin:5px 0 4px !important; color:#55727E !important; font-size:9px !important; line-height:1; font-weight:700 !important; opacity:1 !important; } /* active day text */ .daily-check-in .daily-checkin-progress-day:first-child .daily-checkin-progress-day-text{ color:#007C89 !important; font-weight:900 !important; } /* ========================================================= REWARD AMOUNT ========================================================= */ .daily-check-in .daily-checkin-progress-day-coinbg{ min-width:43px; padding:4px 4px !important; border-radius:9px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 50%, #D7E2E7 100% ) !important; border:1px solid rgba(175,200,208,.75); box-shadow: 0 2px 5px rgba(36,70,83,.08), inset 0 1px 2px #FFFFFF; } /* override inline silver */ .daily-check-in .daily-checkin-progress-day-coinbg[style]{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 50%, #D7E2E7 100% ) !important; } /* active reward = champagne gold */ .daily-check-in .daily-checkin-progress-day:first-child .daily-checkin-progress-day-coinbg{ background: linear-gradient( 145deg, #FFFDF5 0%, #F5DC9B 28%, #FFD778 55%, #C99B4A 100% ) !important; border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 6px rgba(255,215,120,.38), inset 0 1px 2px rgba(255,255,255,.95); } /* reward amount */ .daily-check-in .daily-checkin-progress-day-coin{ margin:0 !important; color:#55727E !important; font-size:8px !important; font-weight:800 !important; } /* active reward wording */ .daily-check-in .daily-checkin-progress-day:first-child .daily-checkin-progress-day-coin{ color:#0B3045 !important; font-weight:900 !important; } /* ========================================================= LAST DAY SPECIAL VIP REWARD ========================================================= */ .daily-check-in .daily-checkin-progress-day:last-child .daily-checkin-progress-day-coinbg{ border-color:rgba(232,196,119,.75); background: linear-gradient( 180deg, #FFFFFF, #FFF8E8, #F5DC9B ) !important; box-shadow: 0 0 6px rgba(255,215,120,.25); } .daily-check-in .daily-checkin-progress-day:last-child .daily-checkin-progress-day-coin{ color:#9A6A1C !important; } /* ========================================================= HOVER ========================================================= */ .daily-check-in .daily-checkin-progress-day:hover > div:first-child{ transform:translateY(-2px); border-color:#8FFAFF; box-shadow: 0 0 8px rgba(0,221,228,.30), inset 0 1px 3px #FFFFFF; } .daily-check-in .daily-checkin-progress-day > div:first-child{ transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } /* ========================================================= COLLECT BUTTON EFFECT ========================================================= */ .daily-check-in .daily-checkin-content-button-activeRed:hover{ transform:translateY(-2px); filter:brightness(1.06); } .daily-check-in .daily-checkin-content-button-activeRed:active{ transform:scale(.97); } /* ========================================================= ANIMATION ========================================================= */ @keyframes dailyCollectGlow{ 0%{ box-shadow: 0 0 6px rgba(0,241,242,.28), 0 0 12px rgba(0,221,228,.15), inset 0 2px 3px rgba(255,255,255,.58), inset 0 -4px 8px rgba(0,75,82,.28); } 100%{ box-shadow: 0 0 11px rgba(0,241,242,.72), 0 0 22px rgba(0,221,228,.35), inset 0 2px 4px rgba(255,255,255,.78), inset 0 -4px 8px rgba(0,75,82,.32); } } @keyframes dailyCollectShine{ 0%, 55%{ left:-65%; } 100%{ left:140%; } } .daily-checkin-content-titlewrap { left: 19.66667vw!important; } /* ========================================================= PAYMENT SCROLL MENU White Base + Tiffany Crystal Theme ========================================================= */ .payment-scroll-menu{ position:relative; display:flex !important; align-items:center; width:100%; padding:7px 6px; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 48%, #E8F1F4 100% ) !important; border-top:1px solid rgba(255,255,255,.95); border-bottom:1px solid rgba(175,200,208,.65); box-shadow: 0 4px 12px rgba(36,70,83,.08), inset 0 1px 0 #FFFFFF; } /* ========================================================= SCROLLABLE MENU ========================================================= */ .payment-scroll-menu .menu_nav{ display:flex !important; align-items:stretch; flex:1; gap:7px; margin:0 !important; padding:3px 2px !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-behavior:smooth; scrollbar-width:none; } .payment-scroll-menu .menu_nav::-webkit-scrollbar{ display:none; } .payment-scroll-menu .menu_nav > li{ flex:0 0 auto; margin:0 !important; padding:0 !important; list-style:none; } /* ========================================================= NORMAL MENU BUTTON ========================================================= */ .payment-scroll-menu .menu_nav .firmCategory{ position:relative; min-width:78px; height:68px; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 8px !important; border-radius:15px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.78) !important; box-shadow: 0 3px 7px rgba(36,70,83,.09), inset 0 2px 3px rgba(255,255,255,1), inset 0 -3px 5px rgba(174,191,200,.13); text-decoration:none !important; overflow:hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease; } /* crystal inner border */ .payment-scroll-menu .menu_nav .firmCategory::before{ content:""; position:absolute; inset:3px; border-radius:11px; border:1px solid rgba(255,255,255,.75); pointer-events:none; } /* ========================================================= ICON HOLDER ========================================================= */ .payment-scroll-menu .firmCategory .i{ position:relative; z-index:2; width: 43px; height: 26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 38%, #D7E2E7 100% ); border:1px solid rgba(255,255,255,.90); box-shadow: 0 2px 5px rgba(36,70,83,.10), inset 0 1px 2px rgba(255,255,255,1); transition:.22s ease; } .payment-scroll-menu .firmCategory .i i{ transform:scale(.88); transition: transform .22s ease, filter .22s ease; } /* ========================================================= TEXT ========================================================= */ .payment-scroll-menu .firmCategory span{ position:relative; z-index:3; color:#244653 !important; font-size:9px !important; line-height:1; font-weight:700 !important; white-space:nowrap; text-align:center; text-shadow: 0 1px 0 rgba(255,255,255,.95); } /* ========================================================= ACTIVE / SELECTED WHITE BASE TIFFANY GLOW ========================================================= */ .payment-scroll-menu .firmCategory.on{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #E8F1F4 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 0 7px rgba(0,241,242,.42), 0 0 15px rgba(0,221,228,.20), inset 0 2px 3px rgba(255,255,255,1), inset 0 -3px 5px rgba(174,191,200,.16) !important; transform:translateY(-2px); } /* active icon */ .payment-scroll-menu .firmCategory.on .i{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 28%, #8FFAFF 65%, #00CBD2 100% ) !important; border-color:#FFFFFF !important; box-shadow: 0 0 6px rgba(0,241,242,.55), 0 0 12px rgba(0,221,228,.28), inset 0 1px 3px rgba(255,255,255,1); } .payment-scroll-menu .firmCategory.on .i i{ transform:scale(.98); filter: brightness(1.08) drop-shadow(0 1px 2px rgba(0,125,137,.20)); } /* active wording */ .payment-scroll-menu .firmCategory.on span{ color:#007C89 !important; font-weight:800 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 5px rgba(0,221,228,.20); } /* ========================================================= ACTIVE BOTTOM CYAN LINE ========================================================= */ .payment-scroll-menu .firmCategory.on::after{ content:""; position:absolute; left:20%; right:20%; bottom:2px; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px #00F1F2, 0 0 9px rgba(0,221,228,.45); } /* ========================================================= HOVER = SAME STYLE AS SELECTED ========================================================= */ .payment-scroll-menu .firmCategory:not(.on):hover{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #E8F1F4 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 7px rgba(0,241,242,.35), 0 0 14px rgba(0,221,228,.18), inset 0 2px 3px rgba(255,255,255,1) !important; transform:translateY(-2px); } .payment-scroll-menu .firmCategory:not(.on):hover .i{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 28%, #8FFAFF 65%, #00CBD2 100% ); box-shadow: 0 0 6px rgba(0,241,242,.45), 0 0 11px rgba(0,221,228,.24); } .payment-scroll-menu .firmCategory:not(.on):hover span{ color:#007C89 !important; font-weight:800 !important; } /* ========================================================= LEFT / RIGHT SCROLL BUTTON ========================================================= */ .payment-scroll-menu .m-scroll-btn{ flex:0 0 32px; width:32px !important; height:52px !important; display:flex !important; align-items:center; justify-content:center; padding:0 !important; margin:0 3px !important; border-radius:12px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #D7E2E7 100% ) !important; border:1px solid #AFC8D0 !important; box-shadow: 0 3px 7px rgba(36,70,83,.10), inset 0 2px 3px rgba(255,255,255,1) !important; color:#007C89 !important; font-size:18px !important; font-weight:900 !important; transition:.22s ease; } .payment-scroll-menu .m-scroll-btn span{ color:#007C89 !important; line-height:1; } /* scroll hover */ .payment-scroll-menu .m-scroll-btn:hover{ border-color:#8FFAFF !important; background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ) !important; box-shadow: 0 0 7px rgba(0,241,242,.40), inset 0 2px 3px #FFFFFF !important; transform:scale(1.04); } /* ========================================================= STANDARD SELECT Wallet / Deposit Type ========================================================= */ .m-forms-page .standard-select{ position:relative; min-height:42px !important; display:flex !important; align-items:center; padding:0 36px 0 11px !important; border-radius:11px !important; background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; border:1px solid #AFC8D0 !important; color:#0B3045 !important; font-size:11px !important; font-weight:700 !important; box-shadow: inset 0 1px 2px #FFFFFF; } .m-forms-page .standard-select:hover{ border-color:#00DDE4 !important; box-shadow: 0 0 6px rgba(0,221,228,.20); } .m-forms-page .standard-select-arrow{ border-top-color:#007C89 !important; } /* dropdown */ .m-forms-page .standard-select-dropdown{ border-radius:12px !important; overflow:hidden; background:#FFFFFF !important; border:1px solid #AFC8D0 !important; box-shadow: 0 8px 20px rgba(36,70,83,.17), 0 0 10px rgba(0,221,228,.10) !important; z-index:99; } .m-forms-page .standard-select-options{ padding:10px 12px !important; color:#244653 !important; background:#FFFFFF !important; border-bottom:1px solid rgba(215,226,231,.55); font-size:10px !important; } .m-forms-page .standard-select-options:hover, .m-forms-page .standard-select-options.active{ color:#007C89 !important; font-weight:800 !important; background: linear-gradient( 90deg, #FFFFFF, #EAFBFF ) !important; box-shadow: inset 3px 0 0 #00BFC5; } /* ========================================================= WALLET BALANCE ========================================================= */ .m-forms-page .wallet-selection .input-group-addon{ color:#007C89 !important; font-weight:900 !important; background: linear-gradient( 145deg, #FFFFFF, #EAFBFF ) !important; border:1px solid rgba(0,221,228,.22); border-radius:9px; padding:5px 10px; } /* withdrawal / restore icon */ .m-forms-page .menu-item-withdrawalall{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:auto; border-radius:12px; background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ); border:1px solid #8FFAFF; box-shadow: 0 0 6px rgba(0,221,228,.20); } /* ========================================================= DATE & TIME ========================================================= */ .m-forms-page .k-datetimepicker, .m-forms-page .k-picker-wrap{ border-radius:11px !important; border:1px solid #AFC8D0 !important; background:#FFFFFF !important; box-shadow:none !important; } .m-forms-page .standard-datetimepicker.k-input{ color:#0B3045 !important; background:#FFFFFF !important; } .m-forms-page .k-select{ background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ) !important; border-left:1px solid #D7E2E7 !important; } /* ========================================================= UPLOAD RECEIPT ========================================================= */ .m-forms-page .bank-statement-wrapper{ margin-top:7px; } .m-forms-page .upload-receipt-btn{ position:relative; width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:13px !important; background: linear-gradient( 180deg, #FFFFFF, #F8FBFC, #E8F1F4 ) !important; border:1px solid #8FFAFF !important; color:#007C89 !important; font-size:11px; font-weight:800; box-shadow: 0 0 6px rgba(0,221,228,.20), inset 0 2px 3px #FFFFFF !important; transition:.2s ease; } .m-forms-page .upload-receipt-btn svg{ width:21px !important; height:21px !important; fill:#007C89 !important; } .m-forms-page .upload-receipt-btn:hover{ transform:translateY(-2px); box-shadow: 0 0 8px rgba(0,241,242,.40), inset 0 2px 3px #FFFFFF !important; } /* ========================================================= PACKAGE TITLE ========================================================= */ .m-forms-page .promotion-list-container .show-more{ min-height:42px; display:flex; align-items:center; gap:8px; padding:0 12px !important; border-radius:13px; background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ) !important; border:1px solid rgba(175,200,208,.75); color:#0B3045 !important; font-weight:800; } .m-forms-page .promotion-list-container .show-more svg{ width:9px !important; height:16px !important; fill:#007C89 !important; } /* ========================================================= PROMOTION PACKAGE CARDS ========================================================= */ .m-forms-page .promotion-list{ display:flex; flex-direction:column; gap:9px; margin-top:9px; } .m-forms-page .promotion-card{ position:relative; overflow:hidden; border-radius:15px !important; background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; border:1px solid #D7E2E7 !important; box-shadow: 0 4px 10px rgba(36,70,83,.07); transition:.22s ease; } /* active promotion */ .m-forms-page .promotion-card.active{ border-color:#8FFAFF !important; background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ) !important; box-shadow: 0 0 7px rgba(0,241,242,.35), 0 0 14px rgba(0,221,228,.14), 0 4px 10px rgba(36,70,83,.08) !important; } /* promo info */ .m-forms-page .promotion-card-desc{ color:#244653 !important; } .m-forms-page .promo-title{ color:#0B3045 !important; font-size:11px !important; font-weight:900 !important; } .m-forms-page .promo-minamount{ color:#007C89 !important; font-size:9px !important; font-weight:700; } .m-forms-page .promo-settings{ color:#78909A !important; font-size:9px !important; } /* ========================================================= RADIO CHECK ========================================================= */ .m-forms-page .radio-input-card{ border-color:#AFC8D0 !important; background:#FFFFFF !important; } .m-forms-page .promotion-card.active .radio-input-card{ border-color:#00DDE4 !important; box-shadow: 0 0 6px rgba(0,221,228,.35); } .m-forms-page .promotion-card.active .checkmark{ background:#00BFC5 !important; border-color:#FFFFFF !important; } /* ========================================================= PROMOTION DETAILS BUTTON ========================================================= */ .m-forms-page .promotion-card .btn-blue-promo{ height:34px !important; border-radius:10px !important; color:#007C89 !important; font-size:9px !important; font-weight:800 !important; background: linear-gradient( 180deg, #FFFFFF, #F8FBFC, #E8F1F4 ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 0 5px rgba(0,221,228,.22), inset 0 1px 2px #FFFFFF !important; } /* ========================================================= DISABLED PROMOTION ========================================================= */ .m-forms-page .promotion-card.isdisabled{ opacity:.48 !important; filter:grayscale(.35); } /* ========================================================= SUBMIT BUTTON ========================================================= */ .m-forms-page .depositsub-button{ position:relative; width:100% !important; min-height:48px; overflow:hidden; border-radius:16px !important; color:#F8FFFF !important; font-size:13px !important; font-weight:900 !important; letter-spacing:.7px; background: linear-gradient( 135deg, #006F78 0%, #007D86 24%, #00BFC5 56%, #00DDE0 80%, #8FFAFF 100% ) !important; border:1px solid #8FFAFF !important; text-shadow: 0 1px 2px rgba(0,48,69,.70); box-shadow: 0 0 8px rgba(0,241,242,.40), 0 0 18px rgba(0,221,228,.20), inset 0 2px 3px rgba(255,255,255,.65), inset 0 -4px 8px rgba(0,75,82,.30) !important; transition:.2s ease; } /* disabled submit */ .m-forms-page .depositsub-button:disabled{ color:#78909A !important; background: linear-gradient( 180deg, #F8FBFC, #D7E2E7 ) !important; border:1px solid #BFCED3 !important; box-shadow: inset 0 2px 3px #FFFFFF !important; text-shadow:none !important; opacity:.78 !important; } /* enabled hover */ .m-forms-page .depositsub-button:not(:disabled):hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow: 0 0 11px rgba(0,241,242,.65), 0 0 22px rgba(0,221,228,.30), inset 0 2px 3px rgba(255,255,255,.7) !important; } /* ========================================================= ERROR ========================================================= */ .m-forms-page .standard-error-validation{ margin-top:4px !important; color:#D84C4C !important; font-size:9px !important; } /* ========================================================= CONTACT US NAV Glacier White + Tiffany Crystal ========================================================= */ .contactus_nav{ display:flex; flex-direction:column; gap:10px; margin:0 !important; padding:12px !important; list-style:none; background: radial-gradient( circle at 10% 10%, rgba(143,250,255,.18), transparent 34% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; } /* ========================================================= CONTACT ITEM ========================================================= */ .contactus_nav > li{ position:relative; margin:0 !important; padding:0 !important; border-radius:17px; overflow:hidden; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.78); box-shadow: 0 5px 13px rgba(36,70,83,.09), inset 0 2px 3px rgba(255,255,255,1); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } /* ========================================================= CLICKABLE AREA ========================================================= */ .contactus_nav > li > a{ position:relative; display:flex !important; align-items:center; min-height:72px; padding:10px 14px !important; text-decoration:none !important; background:transparent !important; overflow:hidden; } /* crystal inner border */ .contactus_nav > li > a::before{ content:""; position:absolute; inset:3px; border-radius:13px; border:1px solid rgba(255,255,255,.78); pointer-events:none; } /* ========================================================= ICON HOLDER ========================================================= */ .contactus_nav .i{ position:relative; flex:0 0 48px; width:48px !important; height:48px !important; display:flex !important; align-items:center; justify-content:center; margin-right:13px; border-radius:50%; background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 35%, #D7E2E7 72%, #AFC8D0 100% ) !important; border:1px solid rgba(255,255,255,.95); box-shadow: 0 3px 7px rgba(36,70,83,.12), inset 0 2px 3px #FFFFFF; transition:.22s ease; z-index:2; } /* icon */ .contactus_nav .i i{ font-size:22px !important; color:#007C89 !important; transition: transform .22s ease, color .22s ease, filter .22s ease; filter: drop-shadow(0 1px 2px rgba(0,125,137,.16)); } /* ========================================================= TEXT ========================================================= */ .contactus_nav .text_box{ position:relative; flex:1; min-width:0; z-index:2; } .contactus_nav .text_box > span{ display:block; margin-bottom:4px; color:#0B3045 !important; font-size:13px !important; line-height:1.2; font-weight:800 !important; } .contactus_nav .text_box > div{ color:#78909A !important; font-size:10px !important; line-height:1.35; font-weight:500; } /* ========================================================= RIGHT ARROW ========================================================= */ .contactus_nav > li > a::after{ content:"›"; position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#007C89; font-size:24px; font-weight:300; opacity:.65; transition:.22s ease; } /* give text space for arrow */ .contactus_nav .text_box{ padding-right:28px; } /* ========================================================= HOVER / ACTIVE Same White Base Tiffany Style ========================================================= */ .contactus_nav > li:hover{ transform:translateY(-2px); border-color:#8FFAFF; box-shadow: 0 0 7px rgba(0,241,242,.36), 0 0 15px rgba(0,221,228,.17), 0 6px 15px rgba(36,70,83,.10), inset 0 2px 3px #FFFFFF; } .contactus_nav > li:hover .i{ background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 25%, #8FFAFF 63%, #00CBD2 100% ) !important; box-shadow: 0 0 7px rgba(0,241,242,.55), 0 0 14px rgba(0,221,228,.24), inset 0 2px 3px #FFFFFF; } .contactus_nav > li:hover .i i{ color:#006F78 !important; transform:scale(1.08); filter: brightness(1.08) drop-shadow(0 0 3px rgba(0,221,228,.32)); } .contactus_nav > li:hover .text_box > span{ color:#007C89 !important; } .contactus_nav > li:hover > a::after{ right:12px; color:#00BFC5; opacity:1; text-shadow: 0 0 5px rgba(0,221,228,.38); } /* ========================================================= BOTTOM TIFFANY GLOW ON HOVER ========================================================= */ .contactus_nav > li::after{ content:""; position:absolute; left:20%; right:20%; bottom:1px; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); opacity:0; box-shadow: 0 0 5px rgba(0,241,242,.55); transition:.22s ease; } .contactus_nav > li:hover::after{ opacity:1; } /* ========================================================= SOCIAL ICON DETAIL Keep same Tiffany theme ========================================================= */ .contactus_nav .fa-weixin, .contactus_nav .fa-telegram, .contactus_nav .fa-whatsapp{ color:#007C89 !important; } /* ========================================================= CLICK EFFECT ========================================================= */ .contactus_nav > li:active{ transform:scale(.985); } /* ========================================================= BALANCE PANEL Glacier White + Tiffany + Champagne Gold ========================================================= */ .idr_box.payment-menu.theme5 .pbalance{ position:relative; padding:14px 12px 12px; border-radius:18px; background: radial-gradient( circle at 12% 10%, rgba(143,250,255,.20) 0%, transparent 36% ), linear-gradient( 160deg, #FFFFFF 0%, #F8FBFC 58%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.82); box-shadow: 0 7px 18px rgba(36,70,83,.10), 0 0 10px rgba(0,221,228,.08), inset 0 2px 0 rgba(255,255,255,1); overflow:hidden; } /* top crystal shine */ .idr_box.payment-menu.theme5 .pbalance::before{ content:""; position:absolute; top:-45%; left:-25%; width:55%; height:180%; transform:rotate(18deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.52), transparent ); pointer-events:none; } /* ========================================================= BALANCE ROW ========================================================= */ .idr_box.payment-menu.theme5 .pbalance > .d-flex{ position:relative; display:flex !important; align-items:center; justify-content:space-between; min-height:54px; padding:9px 12px; margin-bottom:10px; border-radius:14px; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ); border:1px solid rgba(175,200,208,.72); box-shadow: 0 3px 8px rgba(36,70,83,.07), inset 0 1px 2px #FFFFFF; z-index:2; } /* Balance label */ .idr_box.payment-menu.theme5 .pbalance .t1{ margin:0 !important; color:#55727E !important; font-size:11px !important; font-weight:700 !important; } .idr_box.payment-menu.theme5 .pbalance .t1 span{ color:#55727E !important; } /* MYR balance */ .idr_box.payment-menu.theme5 .pbalance .vc-balance{ margin:0 !important; color:#007C89 !important; font-size:18px !important; line-height:1; font-weight:900 !important; letter-spacing:.3px; text-shadow: 0 1px 0 #FFFFFF, 0 0 7px rgba(0,221,228,.22); } /* ========================================================= TIFFANY ACCENT LINE ========================================================= */ .idr_box.payment-menu.theme5 .pbalance > .d-flex::after{ content:""; position:absolute; left:16%; right:16%; bottom:0; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px rgba(0,241,242,.50); } /* ========================================================= VOUCHER Champagne Gold Crystal ========================================================= */ .idr_box.payment-menu.theme5 .menu-item-myvoucher{ position:relative; width:100%!important; display:flex !important; align-items:center; gap:8px; width:max-content; min-height:38px; padding:5px 12px 5px 6px; margin:0 0 10px auto; border-radius:13px; background: linear-gradient( 145deg, #FFFDF5 0%, #F5DC9B 28%, #FFD778 55%, #E8C477 76%, #C99B4A 100% ) !important; border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 6px rgba(255,215,120,.34), 0 3px 7px rgba(137,91,24,.10), inset 0 2px 3px rgba(255,255,255,.85); color:#0B3045 !important; overflow:hidden; } /* voucher icon holder */ .idr_box.payment-menu.theme5 .menu-item-myvoucher .i{ width:30px !important; height:30px !important; display:flex !important; align-items:center; justify-content:center; margin:0 !important; border-radius:9px; background: radial-gradient( circle at 35% 25%, #FFFFFF, #FFF8E8 42%, #FFD778 100% ); box-shadow: inset 0 1px 2px #FFFFFF, 0 0 5px rgba(255,215,120,.30); } /* override fa stack huge size */ .idr_box.payment-menu.theme5 .menu-item-myvoucher .fa-stack{ font-size:inherit !important; } .idr_box.payment-menu.theme5 .menu-item-myvoucher .i i{ position:static !important; width:auto !important; height:auto !important; transform:scale(.72); color:#9A6A1C !important; } /* voucher text */ .idr_box.payment-menu.theme5 .menu-item-myvoucher > span{ color:#0B3045 !important; font-size:10px !important; font-weight:900 !important; } /* ========================================================= VOUCHER COUNT BADGE ========================================================= */ .idr_box.payment-menu.theme5 .voucher-count-badge::after{ content:attr(data-count); position:absolute; top:-4px; right:-5px; min-width:16px; height:16px; padding:0 4px; display:flex; align-items:center; justify-content:center; border-radius:20px; background: linear-gradient( 135deg, #006F78, #00BFC5, #00F1F2 ); border:1px solid #FFFFFF; color:#FFFFFF; font-size:8px; font-weight:900; box-shadow: 0 0 5px rgba(0,221,228,.45); } /* ========================================================= NOTE GRID ========================================================= */ .idr_box.payment-menu.theme5 .vc-note{ display:grid !important; grid-template-columns:repeat(2,1fr); gap:7px; width:100%; position:relative; z-index:2; } /* each info item */ .idr_box.payment-menu.theme5 .vc-note p{ min-width:0; margin:0 !important; padding:8px 9px !important; border-radius:11px; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.68); box-shadow: 0 2px 5px rgba(36,70,83,.06), inset 0 1px 2px #FFFFFF; color:#78909A !important; font-size:8.5px !important; line-height:1.35; } /* labels */ .idr_box.payment-menu.theme5 .vc-note p > span{ display:block; margin-bottom:3px; color:#55727E !important; font-size:8px !important; font-weight:700 !important; } /* value */ .idr_box.payment-menu.theme5 .vc-note p b{ display:block; font-weight:900 !important; } .idr_box.payment-menu.theme5 .vc-note p var{ color:#007C89 !important; font-style:normal !important; font-size:10px !important; font-weight:900 !important; text-shadow: 0 1px 0 #FFFFFF; } /* ========================================================= SPECIAL GOLD FOR MIN WITHDRAW optional premium highlight ========================================================= */ .idr_box.payment-menu.theme5 .vc-note p:nth-child(2){ border-color:rgba(232,196,119,.58); background: linear-gradient( 180deg, #FFFFFF, #FFFDF5 ) !important; } .idr_box.payment-menu.theme5 .vc-note p:nth-child(2) var{ color:#9A6A1C !important; } /* ========================================================= HOVER EFFECT ========================================================= */ .idr_box.payment-menu.theme5 .vc-note p, .idr_box.payment-menu.theme5 .menu-item-myvoucher{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .idr_box.payment-menu.theme5 .vc-note p:hover{ transform:translateY(-2px); border-color:#8FFAFF; box-shadow: 0 0 6px rgba(0,221,228,.20), 0 3px 8px rgba(36,70,83,.07), inset 0 1px 2px #FFFFFF; } .idr_box.payment-menu.theme5 .menu-item-myvoucher:hover{ transform:translateY(-2px); box-shadow: 0 0 9px rgba(255,215,120,.48), 0 5px 10px rgba(137,91,24,.12), inset 0 2px 3px rgba(255,255,255,.90); } .payment-menu.theme5 .pbalance { margin-top: 0px!important;} /* ========================================================= LIVE TRANSACTION TABLE HEADER Glacier White + Tiffany Crystal ========================================================= */ table thead tr:first-child td.title{ position:relative; padding:12px 14px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; color:#0B3045 !important; font-size:13px !important; font-weight:900 !important; letter-spacing:.5px; border:1px solid rgba(175,200,208,.80) !important; border-bottom:none !important; box-shadow: inset 0 2px 3px rgba(255,255,255,1), 0 0 10px rgba(0,221,228,.08); text-align:left; } /* Tiffany accent line */ table thead tr:first-child td.title::after{ content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 6px rgba(0,241,242,.48); } /* ========================================================= LIVE BADGE ========================================================= */ table thead .title .live{ position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:20px; color:#F8FFFF !important; font-size:9px !important; font-weight:900 !important; letter-spacing:.7px; background: linear-gradient( 135deg, #006F78 0%, #00BFC5 58%, #00F1F2 100% ) !important; border:1px solid #8FFAFF; box-shadow: 0 0 6px rgba(0,241,242,.45), inset 0 1px 2px rgba(255,255,255,.65); text-shadow: 0 1px 2px rgba(0,48,69,.65); } /* blinking live dot */ table thead .title .live span{ display:block; width:7px; height:7px; border-radius:50%; background:#FFFFFF; box-shadow: 0 0 5px #FFFFFF, 0 0 9px #00F1F2; animation:liveDotBlink 1s ease-in-out infinite alternate; } @keyframes liveDotBlink{ 0%{ opacity:.35; transform:scale(.75); } 100%{ opacity:1; transform:scale(1); } } /* ========================================================= DEPOSIT / WITHDRAW HEADER ROW ========================================================= */ table thead tr:nth-child(2) td{ padding:9px 8px !important; text-align:center; font-size:10px !important; font-weight:900 !important; letter-spacing:.3px; border-top:none !important; } /* Deposit = Tiffany crystal */ table thead .dep-col{ color:#007C89 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #EAFBFF 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: inset 0 1px 2px #FFFFFF, 0 0 5px rgba(0,221,228,.16); } /* Withdrawal = Champagne crystal */ table thead .with-col{ color:#8B641E !important; background: linear-gradient( 180deg, #FFFDF5 0%, #F5DC9B 100% ) !important; border:1px solid rgba(232,196,119,.75) !important; box-shadow: inset 0 1px 2px rgba(255,255,255,.95), 0 0 5px rgba(255,215,120,.16); } /* ========================================================= PROGRESSIVE JACKPOT RUNNING NUMBER Ice Crystal + Tiffany + Champagne Gold ========================================================= */ section#progressivejackpot.theme1{ position:relative; } /* running number position - middle bottom */ section#progressivejackpot.theme1 .home-jackpot-content.myr{ position:absolute !important; left:50% !important; top:auto !important; bottom:21% !important; transform:translateX(-50%) !important; width:auto; min-width:56%; max-width:78%; z-index:10; display:flex; align-items:center; justify-content:center; } /* ========================================================= NUMBER CRYSTAL PANEL ========================================================= */ section#progressivejackpot.theme1 .home-jackpot-running{ position:relative; display:flex !important; align-items:center; justify-content:center; width:100%; padding:7px 18px 8px; border-radius:14px; white-space:nowrap; color:#007C89 !important; font-family: "Arial Black", "Arial", sans-serif !important; font-size:clamp(17px, 5.2vw, 31px) !important; line-height:1 !important; font-weight:900 !important; letter-spacing:1px; background: linear-gradient( 180deg, rgba(255,255,255,.96) 0%, rgba(248,251,252,.94) 46%, rgba(232,241,244,.92) 100% ) !important; border:1px solid rgba(143,250,255,.92); box-shadow: 0 0 7px rgba(0,241,242,.45), 0 0 18px rgba(0,221,228,.25), 0 4px 10px rgba(36,70,83,.12), inset 0 2px 3px rgba(255,255,255,1), inset 0 -3px 6px rgba(174,191,200,.16); text-shadow: 0 1px 0 #FFFFFF, 0 0 5px rgba(0,241,242,.38), 0 0 12px rgba(0,221,228,.18); overflow:hidden; animation:jackpotNumberGlow 2.1s ease-in-out infinite alternate; } /* inner crystal border */ section#progressivejackpot.theme1 .home-jackpot-running::before{ content:""; position:absolute; inset:3px; border-radius:10px; border:1px solid rgba(255,255,255,.88); pointer-events:none; } /* moving diamond shine */ section#progressivejackpot.theme1 .home-jackpot-running::after{ content:""; position:absolute; top:-80%; left:-35%; width:18%; height:260%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.12), rgba(255,255,255,.95), rgba(255,255,255,.12), transparent ); animation:jackpotNumberShine 3.5s linear infinite; pointer-events:none; } /* ========================================================= MYR BADGE ========================================================= */ section#progressivejackpot.theme1 #jackpot_currency{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; padding:5px 8px; border-radius:8px; color:#0B3045 !important; font-size:.48em !important; font-weight:900 !important; letter-spacing:.7px; background: linear-gradient( 145deg, #FFFDF5 0%, #F5DC9B 28%, #FFD778 53%, #E8C477 76%, #C99B4A 100% ) !important; border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 5px rgba(255,215,120,.48), inset 0 1px 2px rgba(255,255,255,.95); text-shadow: 0 1px 0 rgba(255,255,255,.65); z-index:2; } /* ========================================================= LOADING ========================================================= */ section#progressivejackpot.theme1 .home-jackpot-loading{ color:#00BFC5 !important; font-size:22px; text-shadow: 0 0 7px rgba(0,241,242,.55); } /* ========================================================= ANIMATION ========================================================= */ @keyframes jackpotNumberGlow{ 0%{ box-shadow: 0 0 6px rgba(0,241,242,.32), 0 0 14px rgba(0,221,228,.18), 0 4px 10px rgba(36,70,83,.10), inset 0 2px 3px #FFFFFF; } 100%{ box-shadow: 0 0 10px rgba(0,241,242,.68), 0 0 23px rgba(0,221,228,.32), 0 4px 12px rgba(36,70,83,.12), inset 0 2px 4px #FFFFFF; } } @keyframes jackpotNumberShine{ 0%,55%{ left:-35%; } 100%{ left:125%; } } .m-forms-page .st-title, .m-forms-page .standard-label, .m-forms-page .promotion-list-container .show-more p{ color:#007C89 !important; font-family: "Poppins", "Arial", sans-serif !important; font-size:12px !important; line-height:1.3 !important; font-weight:800 !important; letter-spacing:.15px !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 4px rgba(0,221,228,.12) !important; } /* ========================================================= FIX PROVIDER BUTTON HEIGHT ========================================================= */ .gamelogo-scroll-menu .swiper-slide{ height:96px !important; min-height:96px !important; display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; } /* Provider Button */ .gamelogo-scroll-menu .button-style-1{ width:100% !important; height:88px !important; min-height:88px !important; max-height:88px !important; padding:10px 14px !important; display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; background: linear-gradient( 160deg, #FFFFFF 0%, #F8FBFC 35%, #EAFBFF 65%, #D7E2E7 100% ) !important; border:1px solid #AFC8D0 !important; border-radius:16px !important; overflow:hidden !important; box-shadow: 0 4px 10px rgba(36,70,83,.10), 0 0 5px rgba(0,221,228,.10), inset 0 2px 3px #FFFFFF, inset 0 -4px 7px rgba(174,191,200,.18) !important; } /* ========================================================= PROVIDER LOGO SIZE ========================================================= */ .gamelogo-scroll-menu .button-style-1 i.provider{ display:block !important; width:85% !important; height:64px !important; max-width:150px !important; max-height:64px !important; margin:auto !important; background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important; transform:none !important; } /* ========================================================= ACTIVE / HOVER ========================================================= */ .gamelogo-scroll-menu .button-style-1:hover, .gamelogo-scroll-menu .swiper-slide.active .button-style-1, .gamelogo-scroll-menu .swiper-slide.on .button-style-1{ height:88px !important; min-height:88px !important; transform:translateY(-2px); border-color:#8FFAFF !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 38%, #EAFBFF 100% ) !important; box-shadow: 0 0 8px rgba(0,241,242,.48), 0 0 17px rgba(0,221,228,.20), 0 5px 11px rgba(36,70,83,.10), inset 0 2px 3px #FFFFFF !important; } /* ========================================================= PROVIDER FILTER BUTTON Same style / same height as provider buttons ========================================================= */ .gamelogo-scroll-menu .product-filter-item.button-filter.button-style-2{ position:relative; width:72px !important; min-width:72px !important; height:88px !important; min-height:88px !important; max-height:88px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; box-sizing:border-box !important; border-radius:16px !important; background: linear-gradient( 160deg, #FFFFFF 0%, #F8FBFC 35%, #EAFBFF 68%, #D7E2E7 100% ) !important; border:1px solid #AFC8D0 !important; box-shadow: 0 4px 10px rgba(36,70,83,.10), 0 0 5px rgba(0,221,228,.10), inset 0 2px 3px #FFFFFF, inset 0 -4px 7px rgba(174,191,200,.18) !important; color:#007C89 !important; overflow:hidden; cursor:pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; } /* inner crystal frame */ .gamelogo-scroll-menu .product-filter-item.button-filter.button-style-2::before{ content:""; position:absolute; inset:4px; border-radius:12px; border:1px solid rgba(255,255,255,.88); pointer-events:none; } /* bottom Tiffany glow */ .gamelogo-scroll-menu .product-filter-item.button-filter.button-style-2::after{ content:""; position:absolute; left:18%; right:18%; bottom:3px; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 6px rgba(0,241,242,.50); opacity:.65; } /* ========================================================= FILTER ICON ========================================================= */ .gamelogo-scroll-menu .product-filter-item.button-filter.button-style-2 .fa-filter{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; color:#007C89 !important; font-size:19px !important; background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 30%, #8FFAFF 68%, #00CBD2 100% ); border:1px solid #FFFFFF; box-shadow: 0 0 6px rgba(0,241,242,.40), 0 0 12px rgba(0,221,228,.18), inset 0 2px 3px #FFFFFF; text-shadow: 0 1px 0 #FFFFFF; } /* ========================================================= HOVER ========================================================= */ .gamelogo-scroll-menu .product-filter-item.button-filter.button-style-2:hover{ transform:translateY(-2px); border-color:#8FFAFF !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 38%, #EAFBFF 100% ) !important; box-shadow: 0 0 8px rgba(0,241,242,.48), 0 0 17px rgba(0,221,228,.20), 0 5px 11px rgba(36,70,83,.10), inset 0 2px 3px #FFFFFF !important; } /* ========================================================= OPEN / EXPANDED STATE ========================================================= */ .gamelogo-scroll-menu .product-filter-item.button-filter.button-style-2[aria-expanded="true"]{ border-color:#00DDE4 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #EAFBFF 55%, #D7F8FA 100% ) !important; box-shadow: 0 0 8px rgba(0,241,242,.58), 0 0 18px rgba(0,221,228,.25), inset 0 2px 3px #FFFFFF !important; } .gamelogo-scroll-menu .product-filter-item.button-filter.button-style-2[aria-expanded="true"] .fa-filter{ color:#006F78 !important; transform:scale(1.06); box-shadow: 0 0 9px rgba(0,241,242,.65), 0 0 17px rgba(0,221,228,.28), inset 0 2px 3px #FFFFFF; } /* ========================================================= GAME SEARCH BAR Glacier White + Tiffany Crystal ========================================================= */ .gamelogo-scroll-menu .input-group.row{ display:flex !important; align-items:center !important; gap:7px; margin:0 !important; padding:7px !important; border-radius:15px; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.72); box-shadow: 0 3px 9px rgba(36,70,83,.08), inset 0 1px 2px #FFFFFF; } /* ========================================================= SEARCH INPUT ========================================================= */ .gamelogo-scroll-menu .filter-gamecode{ height:42px !important; padding:0 14px !important; border-radius:12px !important; border:1px solid #AFC8D0 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; color:#0B3045 !important; font-size:12px !important; font-weight:600 !important; outline:none !important; box-shadow: inset 0 2px 3px rgba(174,191,200,.10), 0 1px 3px rgba(36,70,83,.05); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* Placeholder */ .gamelogo-scroll-menu .filter-gamecode::placeholder{ color:#78909A !important; opacity:1; } /* Focus */ .gamelogo-scroll-menu .filter-gamecode:focus{ border-color:#00DDE4 !important; background:#FFFFFF !important; box-shadow: 0 0 0 2px rgba(143,250,255,.18), 0 0 8px rgba(0,221,228,.25), inset 0 1px 2px #FFFFFF !important; } /* ========================================================= SEARCH BUTTON COLUMN ========================================================= */ .gamelogo-scroll-menu .input-group-button{ padding:0 !important; display:flex !important; align-items:center; justify-content:center; } /* ========================================================= SEARCH BUTTON ========================================================= */ .gamelogo-scroll-menu .input-group-button .button-style-1{ width:42px !important; min-width:42px !important; height:42px !important; min-height:42px !important; max-height:42px !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:12px !important; background: linear-gradient( 145deg, #FFFFFF 0%, #EAFBFF 35%, #8FFAFF 72%, #00BFC5 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.25), 0 3px 7px rgba(36,70,83,.08), inset 0 2px 3px #FFFFFF !important; color:#007C89 !important; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; } /* Search icon */ .gamelogo-scroll-menu .input-group-button .fa-search{ font-size:15px !important; color:#007C89 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 4px rgba(0,241,242,.20); } /* Hover */ .gamelogo-scroll-menu .input-group-button .button-style-1:hover{ transform:translateY(-1px); border-color:#00F1F2 !important; box-shadow: 0 0 9px rgba(0,241,242,.50), 0 4px 9px rgba(36,70,83,.09), inset 0 2px 3px #FFFFFF !important; } /* Press */ .gamelogo-scroll-menu .input-group-button .button-style-1:active{ transform:scale(.96); } .gamelobby-content .button-style-2.is-active, .gamelobby-content .button-style-2, .gamelobby-content .button-filter, .gamelobby-content .button-style-1{ position:relative; color:#007C89 !important; background: linear-gradient( 160deg, #FFFFFF 0%, #F8FBFC 38%, #EAFBFF 68%, #D7E2E7 100% ) !important; border:1px solid #AFC8D0 !important; border-radius:14px !important; box-shadow: 0 3px 8px rgba(36,70,83,.10), 0 0 5px rgba(0,221,228,.12), inset 0 2px 3px #FFFFFF, inset 0 -3px 6px rgba(174,191,200,.16) !important; box-sizing:border-box !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* active / selected */ .gamelobby-content .button-style-2.is-active, .gamelobby-content .button-style-2.active, .gamelobby-content .button-style-1.is-active, .gamelobby-content .button-style-1.active, .gamelobby-content .button-filter.is-active, .gamelobby-content .button-filter.active{ color:#006F78 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 40%, #EAFBFF 100% ) !important; border-color:#00DDE4 !important; box-shadow: 0 0 8px rgba(0,241,242,.48), 0 0 17px rgba(0,191,197,.20), inset 0 2px 3px #FFFFFF !important; } /* hover */ .gamelobby-content .button-style-2:hover, .gamelobby-content .button-filter:hover, .gamelobby-content .button-style-1:hover{ border-color:#8FFAFF !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #EAFBFF 100% ) !important; box-shadow: 0 0 7px rgba(0,241,242,.38), 0 4px 9px rgba(36,70,83,.08), inset 0 2px 3px #FFFFFF !important; } .product-filter { height: 2.2rem!important; } /* ========================================================= BOTTOM NAVBAR - CUSTOM IMAGE ICON ========================================================= */ ul.navbar{ display:flex !important; align-items:stretch !important; width:100% !important; padding:5px 4px 4px !important; margin:0 !important; background: linear-gradient( 180deg, #F8FBFC 0%, #EAF1F4 100% ) !important; } /* each menu */ ul.navbar > li{ flex:1 1 0 !important; display:flex !important; justify-content:center !important; min-width:0 !important; } /* menu link */ ul.navbar .botnavbar{ width:100% !important; min-height:86px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; padding:4px 2px !important; border-radius:14px !important; text-decoration:none !important; } /* ========================================================= ICON HOLDER ========================================================= */ ul.navbar .botnavbar .i{ width:60px !important; height:60px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 auto !important; padding:0 !important; background:none !important; } /* actual icon image */ ul.navbar .botnavbar .i > i{ display:block !important; width:58px !important; height:58px !important; margin:0 !important; padding:0 !important; background-color:transparent !important; background-position:center !important; background-repeat:no-repeat !important; background-size:contain !important; font-size:0 !important; border:0 !important; transform:none !important; filter: drop-shadow(0 2px 3px rgba(36,70,83,.12)); transition: transform .2s ease, filter .2s ease; } /* remove existing FontAwesome / sprite content */ ul.navbar .botnavbar .i > i::before, ul.navbar .botnavbar .i > i::after{ content:none !important; display:none !important; } /* ========================================================= YOUR OWN PNG IMAGES change URL according to your folder ========================================================= */ .ui-footer .navbar{ height: 2.6rem!important; } ul.navbar .icon-home-big{ background-image: url(img1829_umenangkiss/home.png?v=3?v=2)!important; } ul.navbar .icon-funds{ background-image: url(img1829_umenangkiss/deposit_menu.png?v=3?v=2)!important; } ul.navbar .icon-account{ background-image: url(img1829_umenangkiss/user_icon.png?v=3?v=2)!important; } ul.navbar .icon-promotion-big{ background-image: url(img1829_umenangkiss/treasure_menu.png?v=3?v=2)!important; } ul.navbar .icon-contact{ background-image: url(img1829_umenangkiss/support_icon.png?v=3?v=2)!important; } ul.navbar .fa-bars{ background-image: url(img1829_umenangkiss/setting_menu.png?v=3?v=2)!important; } .payment-scroll-menu .icon{ width: 1rem!important; height: 1rem!important; background-size: 100%!important; background-position-y: 6px!important; } .payment-scroll-menu .icon-funds{ background-image: url(img1829_umenangkiss/deposit_menu2.png?v=3?v=2)!important; } .payment-scroll-menu .icon-withdrawal{ background-image: url(img1829_umenangkiss/withdraw_menu2.png?v=3?v=2)!important; } .payment-scroll-menu .icon-wallettransfer{ background-image: url(img1829_umenangkiss/transfer_menu.png?v=3?v=2)!important; } .payment-scroll-menu .icon-statement{ background-image: url(img1829_umenangkiss/statement_menu.png?v=3?v=2)!important; } .payment-scroll-menu .icon-history{ background-image: url(img1829_umenangkiss/history_menu.png?v=3?v=2)!important; }.payment-scroll-menu .icon-wallets{ background-image: url(img1829_umenangkiss/wallet_menu.png?v=3?v=2)!important; } /* ========================================================= MENU WORDING ========================================================= */ ul.navbar .botnavbar > span{ display:block !important; margin:0 !important; color:#244653 !important; font-size:10px !important; line-height:1.15 !important; font-weight:700 !important; white-space:nowrap !important; text-align:center !important; } /* ========================================================= ACTIVE MENU still White Base + Tiffany glow ========================================================= */ ul.navbar .botnavbar.on, ul.navbar .botnavbar.active, ul.navbar .botnavbar.ui-btn-active{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 42%, #EAFBFF 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 0 8px rgba(0,241,242,.48), 0 0 16px rgba(0,191,197,.18), inset 0 2px 3px #FFFFFF !important; } /* active icon slightly bigger */ ul.navbar .botnavbar.on .i > i, ul.navbar .botnavbar.active .i > i, ul.navbar .botnavbar.ui-btn-active .i > i{ transform:scale(1.08) !important; filter: brightness(1.05) drop-shadow(0 0 5px rgba(0,221,228,.35)); } /* active wording */ ul.navbar .botnavbar.on > span, ul.navbar .botnavbar.active > span, ul.navbar .botnavbar.ui-btn-active > span{ color:#007C89 !important; font-weight:900 !important; } /* hover */ ul.navbar .botnavbar:hover .i > i{ transform:scale(1.07); } /* ========================================================= LUCKY SPIN SECTION Glacier White + Tiffany Crystal ========================================================= */ #luckyspin_firmcontent{ position:relative; width:100%; padding:10px !important; background: radial-gradient(circle at 15% 10%, rgba(143,250,255,.20) 0%, transparent 38% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.70); border-radius:18px; box-shadow: 0 6px 16px rgba(36,70,83,.10), inset 0 2px 3px rgba(255,255,255,.95); overflow:hidden; } /* ========================================================= BANNER ========================================================= */ #luckyspin_firmcontent .home_firms_tr{ margin:0 !important; padding:0 !important; list-style:none !important; } #luckyspin_firmcontent .game-item-luckyspin{ position:relative; width:100%; margin:0 !important; padding:0 !important; overflow:hidden; border-radius:16px; } #luckyspin_firmcontent .game-item-luckyspin > a{ display:block !important; width:100% !important; } #luckyspin_firmcontent .game-item-luckyspin .i{ width:100% !important; height:auto !important; aspect-ratio:825 / 450; margin:0 !important; padding:0 !important; border-radius:16px; overflow:hidden; background:none !important; border:1px solid rgba(143,250,255,.90); box-shadow: 0 0 8px rgba(0,241,242,.22), inset 0 1px 2px #FFFFFF; } #luckyspin_firmcontent { margin-bottom: 100px;} /* Lucky Spin banner image */ #luckyspin_firmcontent .luckyspin_banner{ display:block !important; width:100% !important; height:100% !important; background-image: url(img1829_umenangkiss/spin_bg.png?v=3?v=2)!important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; } /* ========================================================= PLAY NOW BUTTON ========================================================= */ #luckyspin_firmcontent .spinplaynow-btn{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); min-width:125px; padding:9px 24px !important; text-align:center; border-radius:30px; background: linear-gradient( 135deg, #006F78 0%, #00BFC5 48%, #00F1F2 100% ) !important; border:1px solid #8FFAFF; box-shadow: 0 0 9px rgba(0,241,242,.58), 0 4px 10px rgba(36,70,83,.18), inset 0 2px 3px rgba(255,255,255,.70); overflow:hidden; cursor:pointer; z-index:3; animation:spinPlayGlow 1.8s ease-in-out infinite alternate; } #luckyspin_firmcontent .spinplaynow-btn span{ position:relative; z-index:2; color:#FFFFFF !important; font-size:12px !important; font-weight:900 !important; letter-spacing:.4px; text-transform:uppercase; text-shadow: 0 1px 2px rgba(0,48,69,.65); } /* moving shine */ #luckyspin_firmcontent .spinplaynow-btn::after{ content:""; position:absolute; top:-80%; left:-40%; width:20%; height:260%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.90), transparent ); animation:spinBtnShine 3s linear infinite; } /* ========================================================= SPIN TICKET ========================================================= */ #luckyspin_firmcontent .lucky-spin_ticket{ display:flex !important; align-items:center !important; gap:7px; margin-top:10px !important; padding:10px 12px !important; border-radius:14px; background: linear-gradient( 180deg, #FFFFFF 0%, #FFFDF5 100% ) !important; border:1px solid rgba(232,196,119,.75); box-shadow: 0 3px 8px rgba(137,91,24,.08), inset 0 2px 3px #FFFFFF; color:#0B3045 !important; } /* ticket icon holder */ #luckyspin_firmcontent .lucky-spin_ticket .i{ width:34px !important; height:34px !important; display:flex !important; align-items:center; justify-content:center; border-radius:10px; background: linear-gradient( 145deg, #FFFDF5, #FFD778, #E8C477 ); box-shadow: inset 0 1px 2px #FFFFFF, 0 0 6px rgba(255,215,120,.32); } #luckyspin_firmcontent .lucky-spin_ticket .icon-ticket{ color:#8B641E !important; font-size:17px !important; } /* title */ #luckyspin_firmcontent .lucky-spin_ticket .title{ color:#55727E !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.3px; } /* ticket count */ #luckyspin_firmcontent .lucky-spin_ticket .tk-count{ min-width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; margin-left:auto; border-radius:50%; color:#FFFFFF !important; font-size:13px !important; font-weight:900 !important; background: linear-gradient( 135deg, #006F78, #00BFC5, #00F1F2 ); border:1px solid #8FFAFF; box-shadow: 0 0 7px rgba(0,241,242,.42); } /* ========================================================= RULE BOX ========================================================= */ #luckyspin_firmcontent .lucky-spin_rule{ margin-top:8px; padding:10px 12px; border-radius:14px; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ); border:1px solid rgba(175,200,208,.72); box-shadow: inset 0 2px 3px #FFFFFF, 0 3px 8px rgba(36,70,83,.06); } #luckyspin_firmcontent .lucky-spin_rule pre{ margin:0 !important; padding:0 !important; white-space:pre-wrap !important; background:none !important; border:0 !important; color:#55727E !important; font-family:"Poppins","Arial",sans-serif !important; font-size:9px !important; line-height:1.8 !important; font-weight:700 !important; text-align:center; } /* emphasize MYR / ticket numbers */ #luckyspin_firmcontent .lucky-spin_rule pre{ text-shadow: 0 1px 0 #FFFFFF; } /* ========================================================= ANIMATION ========================================================= */ @keyframes spinPlayGlow{ from{ box-shadow: 0 0 6px rgba(0,241,242,.35), 0 4px 9px rgba(36,70,83,.15), inset 0 2px 3px rgba(255,255,255,.70); } to{ box-shadow: 0 0 12px rgba(0,241,242,.72), 0 0 20px rgba(0,191,197,.25), 0 4px 10px rgba(36,70,83,.18), inset 0 2px 3px rgba(255,255,255,.80); } } @keyframes spinBtnShine{ 0%,55%{ left:-40%; } 100%{ left:130%; } } /* ========================================================= 4D PAGE Glacier White + Tiffany Crystal + Champagne Gold ========================================================= */ #lottery4d_firmcontent{ width:100%; padding:10px !important; background: radial-gradient( circle at 15% 5%, rgba(143,250,255,.22) 0%, transparent 35% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #E8F1F4 100% ) !important; box-sizing:border-box; } /* ========================================================= TOP ACTION SECTION ========================================================= */ #lottery4d_firmcontent .lotto-place-bet{ position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; padding:10px; border-radius:17px; background: linear-gradient( 160deg, #FFFFFF 0%, #F8FBFC 55%, #EAF1F4 100% ); border:1px solid rgba(175,200,208,.75); box-shadow: 0 5px 14px rgba(36,70,83,.09), inset 0 2px 3px #FFFFFF; } /* ========================================================= BET NOW ========================================================= */ #lottery4d_firmcontent .lotto-bet-btn{ padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; } #lottery4d_firmcontent .lotto-bet-btn .btn-common{ position:relative; min-width:105px; height:40px; display:flex; align-items:center; justify-content:center; padding:0 18px; border-radius:20px; text-decoration:none !important; background: linear-gradient( 135deg, #006F78 0%, #00AEB7 42%, #00DDE4 72%, #8FFAFF 100% ) !important; border:1px solid #8FFAFF; color:#FFFFFF !important; font-size:11px; font-weight:900; text-transform:uppercase; box-shadow: 0 0 8px rgba(0,241,242,.48), 0 4px 9px rgba(36,70,83,.14), inset 0 2px 3px rgba(255,255,255,.55); overflow:hidden; } /* shine */ #lottery4d_firmcontent .lotto-bet-btn .btn-common::after{ content:""; position:absolute; top:-80%; left:-35%; width:18%; height:260%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.92), transparent ); animation:lottoBtnShine 3s linear infinite; } /* ========================================================= RULE / PAYOUT BUTTONS ========================================================= */ #lottery4d_firmcontent .lotto-rules, #lottery4d_firmcontent .lotto-payout{ display:inline-flex; } #lottery4d_firmcontent .lotto-rules a, #lottery4d_firmcontent .lotto-payout a{ height:38px; display:flex; align-items:center; justify-content:center; padding:0 13px; border-radius:18px; text-decoration:none !important; color:#007C89 !important; font-size:9px; font-weight:800; background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ); border:1px solid #AFC8D0; box-shadow: 0 3px 7px rgba(36,70,83,.07), inset 0 1px 2px #FFFFFF; transition:.2s ease; } #lottery4d_firmcontent .lotto-rules a:hover, #lottery4d_firmcontent .lotto-payout a:hover{ transform:translateY(-1px); border-color:#8FFAFF; box-shadow: 0 0 7px rgba(0,241,242,.35), inset 0 1px 2px #FFFFFF; } /* Payout = champagne accent */ #lottery4d_firmcontent .lotto-payout a{ color:#8B641E !important; background: linear-gradient( 180deg, #FFFFFF, #FFF8E5 ); border-color:#E8C477; } /* ========================================================= RESULT AREA ========================================================= */ #lottery4dresultslider{ margin-top:10px !important; padding:10px 0 12px; border-radius:18px; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ); border:1px solid rgba(175,200,208,.72); box-shadow: 0 5px 14px rgba(36,70,83,.08), inset 0 2px 3px #FFFFFF; overflow:hidden; } /* ========================================================= HORIZONTAL SCROLL do not break scrolling ========================================================= */ #lottery4dresultslider .most-play-game-container{ width:100%; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; } #lottery4dresultslider .most-play-game-container::-webkit-scrollbar{ display:none; } #lottery4dresultslider .most-play-game-container > div{ display:flex !important; gap:10px; width:max-content; min-width:100%; padding:4px 10px 8px; } #lottery4dresultslider .most-play-game-container-scroll{ flex:0 0 260px !important; width:260px !important; } /* ========================================================= LOTTO RESULT CARD ========================================================= */ #lottery4dresultslider .lotto-result{ position:relative; width:100%; padding:10px; border-radius:16px; background: radial-gradient( circle at 15% 5%, rgba(143,250,255,.16), transparent 35% ), linear-gradient( 160deg, #FFFFFF 0%, #F8FBFC 58%, #E8F1F4 100% ) !important; border:1px solid #AFC8D0; box-sizing:border-box; box-shadow: 0 5px 12px rgba(36,70,83,.09), 0 0 5px rgba(0,221,228,.08), inset 0 2px 3px #FFFFFF; overflow:hidden; } /* crystal inner border */ #lottery4dresultslider .lotto-result::before{ content:""; position:absolute; inset:3px; border-radius:13px; border:1px solid rgba(255,255,255,.88); pointer-events:none; } /* Tiffany bottom line */ #lottery4dresultslider .lotto-result::after{ content:""; position:absolute; left:18%; right:18%; bottom:2px; height:2px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px rgba(0,241,242,.40); } /* ========================================================= HEADER - LOGO + LOTTO NAME + DATE ========================================================= */ #lottery4dresultslider .lheader{ position:relative; z-index:2; display:flex !important; align-items:center !important; gap:9px; margin-bottom:9px; padding:7px; border-radius:12px; background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ); border:1px solid rgba(143,250,255,.75); } #lottery4dresultslider .lheader img{ width:46px !important; height:46px !important; object-fit:contain !important; padding:3px; border-radius:50%; background:#FFFFFF; border:1px solid #D7E2E7; box-shadow: 0 0 6px rgba(0,221,228,.20); } #lottery4dresultslider .lheader .right{ min-width:0; } /* Lotto name */ #lottery4dresultslider .lheader h2{ margin:0 0 2px !important; color:#0B3045 !important; font-family:"Poppins","Arial",sans-serif; font-size:12px !important; line-height:1.2; font-weight:900 !important; letter-spacing:.2px; } /* date */ #lottery4dresultslider .lheader h3{ margin:0 !important; color:#007C89 !important; font-size:8px !important; font-weight:700 !important; } /* ========================================= HEADER COLOR ONLY White Base + Glacier + Tiffany ========================================= */ #headerMain.mobile-navbar-header, #headerMain .mobile-nav, #headerMain .header.header4{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 45%, #E8F1F4 100% ) !important; border-color:rgba(175,200,208,.65) !important; box-shadow: 0 2px 8px rgba(36,70,83,.08), 0 0 6px rgba(0,221,228,.08) !important; } /* language button color only */ #headerMain .lang-round-btn{ background: linear-gradient( 145deg, #FFFFFF 0%, #EAFBFF 45%, #8FFAFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.30), inset 0 1px 2px #FFFFFF !important; } /* hover */ #headerMain .lang-round-btn:hover{ background: linear-gradient( 145deg, #FFFFFF 0%, #DDFBFD 42%, #00DDE4 100% ) !important; border-color:#00F1F2 !important; box-shadow: 0 0 9px rgba(0,241,242,.48), inset 0 1px 2px #FFFFFF !important; } /* ========================================================= SIDE MENU COLOR ONLY White Base + Glacier Silver + Tiffany Cyan ========================================================= */ #leftmenu, #leftmenu .ui-panel-inner{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 48%, #E8F1F4 100% ) !important; color:#0B3045 !important; } /* ========================================================= TOP LOGO AREA ========================================================= */ #leftmenu .sidemenu-logo{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border-color:rgba(175,200,208,.65) !important; box-shadow: 0 2px 7px rgba(36,70,83,.07), 0 0 5px rgba(0,221,228,.07) !important; } /* back icon */ #leftmenu .sidemenu-back-logo{ background: linear-gradient( 145deg, #FFFFFF, #EAFBFF ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.20), inset 0 1px 2px #FFFFFF !important; } /* ========================================================= MENU ITEM ========================================================= */ #leftmenu ul li, #leftmenu ul li a, #leftmenu .sm-item{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border-color:rgba(175,200,208,.50) !important; color:#244653 !important; } /* menu wording */ #leftmenu .sm-item .title{ color:#244653 !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* ========================================================= MENU ICON COLOR ========================================================= */ #leftmenu .sm-item > i{ color:#007C89 !important; text-shadow: 0 0 4px rgba(0,221,228,.18) !important; } /* ========================================================= HOVER ========================================================= */ #leftmenu ul li:hover, #leftmenu ul li:hover a, #leftmenu ul li:hover .sm-item{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 42%, #EAFBFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 7px rgba(0,241,242,.22), inset 0 1px 2px #FFFFFF !important; } #leftmenu ul li:hover .title{ color:#007C89 !important; } #leftmenu ul li:hover .sm-item > i{ color:#00AEB7 !important; text-shadow: 0 0 6px rgba(0,241,242,.32) !important; } /* ========================================================= ACTIVE / SELECTED still white base ========================================================= */ #leftmenu ul li.active, #leftmenu ul li.on, #leftmenu ul li.ui-btn-active, #leftmenu ul li.active a, #leftmenu ul li.on a{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 40%, #EAFBFF 100% ) !important; border-color:#00DDE4 !important; box-shadow: 0 0 8px rgba(0,241,242,.38), 0 0 15px rgba(0,191,197,.15), inset 0 1px 2px #FFFFFF !important; } #leftmenu ul li.active .title, #leftmenu ul li.on .title{ color:#007C89 !important; } #leftmenu ul li.active .sm-item > i, #leftmenu ul li.on .sm-item > i{ color:#00BFC5 !important; text-shadow: 0 0 7px rgba(0,241,242,.40) !important; } .sidemenu ul li{ padding-left: 31px!important; } .sidemenu ul{ padding-left:0px!important; } /* ========================================================= HOME ANNOUNCEMENT COLOR / EFFECT ONLY ========================================================= */ .home_notice{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 48%, #E8F1F4 100% ) !important; border-color:rgba(175,200,208,.70) !important; box-shadow: 0 2px 7px rgba(36,70,83,.08), inset 0 1px 2px #FFFFFF !important; color:#244653 !important; } /* announcement icon */ .home_notice .icon_home_notice{ color:#00AEB7 !important; filter: drop-shadow(0 0 3px rgba(0,241,242,.38)); text-shadow: 0 0 5px rgba(0,241,242,.35) !important; } /* announcement wording */ .home_notice .notice-parent, .home_notice .notice-item, .home_notice .notice-item span{ color:#244653 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 3px rgba(0,221,228,.08) !important; } /* Tiffany accent line */ .home_notice{ position:relative; } .home_notice::after{ content:""; position:absolute; left:8%; right:8%; bottom:0; height:1px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px rgba(0,241,242,.35); pointer-events:none; } /* optional lightning emoji slightly brighter */ .home_notice .notice-item span{ font-weight:600; } #pageHome #homePage .home_navBox .home_nav { background: #fff!important; } /* ========================================================= LUCKY BOX SECTION Glacier White + Tiffany Crystal + Champagne Gold ========================================================= */ #luckybox_firmcontent{ position:relative; width:100%; padding:10px !important; background: radial-gradient( circle at 15% 8%, rgba(143,250,255,.20) 0%, transparent 38% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 46%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.72); border-radius:18px; box-shadow: 0 6px 16px rgba(36,70,83,.10), inset 0 2px 3px #FFFFFF; overflow:hidden; } /* ========================================================= BANNER AREA ========================================================= */ #luckybox_firmcontent .home_firms_tr{ margin:0 !important; padding:0 !important; list-style:none !important; } #luckybox_firmcontent .game-item-luckyspin{ position:relative; width:100%; margin:0 !important; padding:0 !important; border-radius:16px; overflow:hidden; } #luckybox_firmcontent .game-item-luckyspin > a{ display:block !important; width:100% !important; } #luckybox_firmcontent .icon_home_logo_bg{ width:100% !important; height:auto !important; aspect-ratio:825 / 450; margin:0 !important; padding:0 !important; background:none !important; border-radius:16px; overflow:hidden; border:1px solid rgba(143,250,255,.92); box-shadow: 0 0 8px rgba(0,241,242,.24), inset 0 1px 2px #FFFFFF; } /* ========================================================= YOUR LUCKY BOX BANNER IMAGE ========================================================= */ #luckybox_firmcontent .luckybox_banner{ display:block !important; width:100% !important; height:100% !important; background-image: url(".//img1829_umenangkiss/boxbanner.png?v=3?v=6?v=6"); background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; } /* ========================================================= PLAY NOW BUTTON ========================================================= */ #luckybox_firmcontent .spinplaynow-btn{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); min-width:130px; padding:9px 24px !important; text-align:center; border-radius:30px; background: linear-gradient( 135deg, #006F78 0%, #00AEB7 40%, #00DDE4 72%, #8FFAFF 100% ) !important; border:1px solid #8FFAFF; box-shadow: 0 0 9px rgba(0,241,242,.56), 0 4px 10px rgba(36,70,83,.18), inset 0 2px 3px rgba(255,255,255,.70); overflow:hidden; z-index:3; cursor:pointer; animation:luckyBoxPlayGlow 1.8s ease-in-out infinite alternate; } #luckybox_firmcontent .spinplaynow-btn span{ position:relative; z-index:2; color:#FFFFFF !important; font-size:12px !important; font-weight:900 !important; letter-spacing:.5px; text-transform:uppercase; text-shadow: 0 1px 2px rgba(0,48,69,.65); } /* button shine */ #luckybox_firmcontent .spinplaynow-btn::after{ content:""; position:absolute; top:-80%; left:-40%; width:20%; height:260%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); animation:luckyBoxShine 3s linear infinite; } /* ========================================================= LUCKY BOX TICKET / COUNT BAR ========================================================= */ #luckybox_firmcontent .lucky-spin_ticket{ position:relative; display:flex !important; align-items:center !important; gap:8px; margin-top:10px !important; padding:10px 12px !important; border-radius:14px; background: linear-gradient( 180deg, #FFFFFF 0%, #FFFDF5 100% ) !important; border:1px solid rgba(232,196,119,.78); box-shadow: 0 3px 8px rgba(137,91,24,.09), inset 0 2px 3px #FFFFFF; } /* ticket icon container */ #luckybox_firmcontent .lucky-spin_ticket .i{ width:34px !important; height:34px !important; display:flex !important; align-items:center; justify-content:center; border-radius:10px; background: linear-gradient( 145deg, #FFFFFF 0%, #FFF3CF 38%, #FFD778 70%, #E8C477 100% ); border:1px solid rgba(255,255,255,.95); box-shadow: 0 0 6px rgba(255,215,120,.30), inset 0 1px 2px #FFFFFF; } #luckybox_firmcontent .icon-ticket{ color:#8B641E !important; font-size:17px !important; letter-spacing:.5px; filter: invert(100%); text-shadow: 0 1px 0 #FFFFFF; } /* LUCKY BOX title */ #luckybox_firmcontent .lucky-spin_ticket .title{ color:#0B3045 !important; font-size:11px !important; font-weight:900 !important; margin: 0 auto; text-transform:uppercase; } /* ========================================================= LUCKY BOX COUNT ========================================================= */ #luckybox_firmcontent .tk-count{ margin-left:auto; min-width:30px; height:30px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; border-radius:30px; color:#FFFFFF !important; font-size:13px !important; font-weight:900 !important; background: linear-gradient( 135deg, #006F78 0%, #00BFC5 58%, #00F1F2 100% ); border:1px solid #8FFAFF; box-shadow: 0 0 7px rgba(0,241,242,.45), inset 0 1px 2px rgba(255,255,255,.55); } /* ========================================================= RULE PANEL ========================================================= */ #luckybox_firmcontent .lucky-spin_rule{ position:relative; margin-top:8px; padding:12px; border-radius:14px; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #EEF5F7 100% ) !important; border:1px solid rgba(175,200,208,.72); box-shadow: 0 3px 8px rgba(36,70,83,.06), inset 0 2px 3px #FFFFFF; overflow:hidden; } /* Tiffany decorative top line */ #luckybox_firmcontent .lucky-spin_rule::before{ content:""; position:absolute; left:12%; right:12%; top:0; height:2px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 6px rgba(0,241,242,.40); } /* rule text */ #luckybox_firmcontent .lucky-spin-rule, #luckybox_firmcontent .lucky-spin_rule pre{ color:#55727E !important; } #luckybox_firmcontent .lucky-spin_rule pre{ margin:0 !important; padding:0 !important; border:0 !important; background:none !important; white-space:pre-wrap !important; word-break:normal !important; overflow:visible !important; font-family: "Poppins", "Arial", sans-serif !important; font-size:9px !important; line-height:1.75 !important; font-weight:600 !important; color:#55727E !important; text-shadow: 0 1px 0 #FFFFFF; } /* ========================================================= FIRST NUMBER / EMOJI SLIGHTLY STAND OUT ========================================================= */ #luckybox_firmcontent .lucky-spin_rule{ color:#244653; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes luckyBoxPlayGlow{ 0%{ box-shadow: 0 0 6px rgba(0,241,242,.35), 0 4px 9px rgba(36,70,83,.14), inset 0 2px 3px rgba(255,255,255,.70); } 100%{ box-shadow: 0 0 12px rgba(0,241,242,.75), 0 0 20px rgba(0,191,197,.26), 0 4px 10px rgba(36,70,83,.18), inset 0 2px 3px rgba(255,255,255,.82); } } @keyframes luckyBoxShine{ 0%,55%{ left:-40%; } 100%{ left:130%; } } /* ========================================================= TABS Glacier White + Tiffany Crystal ========================================================= */ .tabs{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:5px; padding:5px !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 50%, #E8F1F4 100% ) !important; border:1px solid rgba(175,200,208,.65); border-radius:14px; box-shadow: 0 3px 8px rgba(36,70,83,.07), inset 0 1px 2px #FFFFFF; } /* Normal tab */ .tabs .tab{ width:calc(33.33% - 5px) !important; padding:9px 5px !important; box-sizing:border-box; text-align:center; border-radius:10px; color:#55727E !important; font-size:11px !important; font-weight:800 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border:1px solid #D7E2E7; box-shadow: inset 0 1px 2px #FFFFFF; cursor:pointer; transition: .2s ease; } /* Selected tab - keep white base */ .tabs .tab.selected, .tabs .tab.active{ color:#007C89 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 42%, #EAFBFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 7px rgba(0,241,242,.40), 0 0 14px rgba(0,191,197,.14), inset 0 2px 3px #FFFFFF !important; font-weight:900 !important; } /* Tiffany bottom glow */ .tabs .tab.selected::after, .tabs .tab.active::after{ content:""; position:absolute; left:20%; right:20%; bottom:2px; height:2px; border-radius:20px; background: linear-gradient( 90deg, transparent, #00BFC5, #00F1F2, #00BFC5, transparent ); box-shadow: 0 0 5px rgba(0,241,242,.48); } /* Needed for ::after */ .tabs .tab{ position:relative; } /* Hover */ .tabs .tab:hover{ color:#007C89 !important; border-color:#8FFAFF !important; background: linear-gradient( 180deg, #FFFFFF, #EAFBFF ) !important; } .btn.play-btn-1{ position:relative; width:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-direction:row; flex-wrap:nowrap; padding:9px 14px !important; border:1px solid #8FFAFF !important; border-radius:12px !important; background-image:none !important; background: linear-gradient( 135deg, #006F78 0%, #00AEB7 38%, #00DDE4 72%, #8FFAFF 100% ) !important; color:#FFFFFF !important; font-size:13px !important; font-weight:900 !important; letter-spacing:.3px; text-shadow: 0 1px 2px rgba(0,48,69,.65) !important; box-shadow: 0 0 7px rgba(0,241,242,.42), 0 3px 8px rgba(36,70,83,.14), inset 0 2px 3px rgba(255,255,255,.55) !important; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } /* shine effect */ .btn.play-btn-1::after{ content:""; position:absolute; top:-100%; left:-35%; width:18%; height:300%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.90), transparent ); animation:playBtnShine 3s linear infinite; pointer-events:none; } /* text / icon above shine */ .btn.play-btn-1 > *{ position:relative; z-index:2; } /* hover */ .btn.play-btn-1:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow: 0 0 10px rgba(0,241,242,.62), 0 0 18px rgba(0,191,197,.22), 0 4px 9px rgba(36,70,83,.15), inset 0 2px 3px rgba(255,255,255,.65) !important; } /* click */ .btn.play-btn-1:active{ transform:scale(.98); } @keyframes playBtnShine{ 0%,55%{ left:-35%; } 100%{ left:125%; } } #leftmenu .icon{ width: 1rem!important; height: 1rem!important; } #leftmenu .icon-home-big{ background-image: url(img1829_umenangkiss/homes.png?v=3?v=2)!important; } #leftmenu .icon-voucher{ background-image: url(img1829_umenangkiss/promotions.png?v=3?v=2)!important; } #leftmenu .icon-promotion-big{ background-image: url(img1829_umenangkiss/homes.png?v=3?v=2)!important; } #leftmenu .icon-tnc{ background-image: url(img1829_umenangkiss/infos.png?v=3?v=2)!important; } #leftmenu .icon-contact{ background-image: url(img1829_umenangkiss/contacts.png?v=3?v=2)!important; } #leftmenu .icon-language{ background-image: url(img1829_umenangkiss/languages.png?v=3?v=2)!important; } #leftmenu .icon-logout{ background-image: url(img1829_umenangkiss/logouts.png?v=3?v=2)!important; } [data-page="myaccount"] .icon-language{ background-image: url(./img1829_umenangkiss/acc_language.png?=v5?v=1) !important; background-size: 100%!important; width: 1.2rem !important; height: 1.2rem !important; } [data-page="myaccount"] .icon-voucher{ background-image: url(./img1829_umenangkiss/voucher_user.png?=v5?=v5) !important; background-size: 100%!important; width: 1.2rem !important; height: 1.2rem !important; } /* ========================================================= MY CREDIT / WALLET MENU COLOR ONLY White + Glacier Silver + Tiffany Cyan + Champagne Gold ========================================================= */ .mobile-wallet-section.mycredit-menu{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 48%, #E8F1F4 100% ) !important; border-color:rgba(175,200,208,.68) !important; color:#244653 !important; box-shadow: 0 3px 10px rgba(36,70,83,.08), inset 0 1px 2px #FFFFFF !important; } /* ========================================================= WALLET TOP AREA ========================================================= */ .mobile-wallet-section.mycredit-menu .wallet-info, .mobile-wallet-section.mycredit-menu .top-content, .mobile-wallet-section.mycredit-menu .member-wallet{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 58%, #EAFBFF 100% ) !important; border-color:rgba(175,200,208,.62) !important; color:#244653 !important; } /* Balance title */ .mobile-wallet-section.mycredit-menu .wallet-header .title{ color:#55727E !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* Currency */ .mobile-wallet-section.mycredit-menu .currency-label{ color:#78909A !important; } /* Balance amount */ .mobile-wallet-section.mycredit-menu .member-balance{ color:#007C89 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 5px rgba(0,221,228,.20) !important; } /* ========================================================= EYE ICON ========================================================= */ .mobile-wallet-section.mycredit-menu .eye-icon{ color:#007C89 !important; filter: brightness(0) saturate(100%) invert(38%) sepia(53%) saturate(1046%) hue-rotate(137deg) brightness(89%) contrast(101%) !important; } /* ========================================================= REFRESH SVG ========================================================= */ .mobile-wallet-section.mycredit-menu .mobile-beta-refresh{ filter: drop-shadow(0 0 3px rgba(0,241,242,.28)); } .mobile-wallet-section.mycredit-menu .mobile-beta-refresh .st0{ fill:#00BFC5 !important; } .mobile-wallet-section.mycredit-menu .mobile-beta-refresh .st1{ fill:#007C89 !important; } /* Override SVG gradient stops where possible */ .mobile-wallet-section.mycredit-menu .mobile-beta-refresh stop:first-child{ stop-color:#00F1F2 !important; } .mobile-wallet-section.mycredit-menu .mobile-beta-refresh stop:last-child{ stop-color:#007C89 !important; } /* ========================================================= RETRIEVE / TRANSFER ========================================================= */ .mobile-wallet-section.mycredit-menu .action-box{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #EAFBFF 100% ) !important; border-color:#AFC8D0 !important; color:#244653 !important; box-shadow: inset 0 1px 2px #FFFFFF, 0 2px 5px rgba(36,70,83,.06) !important; } /* labels */ .mobile-wallet-section.mycredit-menu .action-label{ color:#244653 !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* Retrieve / Transfer icons */ .mobile-wallet-section.mycredit-menu .action-box .i, .mobile-wallet-section.mycredit-menu .action-box .i i{ color:#007C89 !important; filter: brightness(0) saturate(100%) invert(38%) sepia(53%) saturate(1046%) hue-rotate(137deg) brightness(89%) contrast(101%) !important; } /* Hover / active */ .mobile-wallet-section.mycredit-menu .action-box:hover, .mobile-wallet-section.mycredit-menu .action-box.active, .mobile-wallet-section.mycredit-menu .action-box.on{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 42%, #EAFBFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 7px rgba(0,241,242,.28), inset 0 1px 2px #FFFFFF !important; } .mobile-wallet-section.mycredit-menu .action-box:hover .action-label, .mobile-wallet-section.mycredit-menu .action-box.active .action-label, .mobile-wallet-section.mycredit-menu .action-box.on .action-label{ color:#007C89 !important; } /* ========================================================= BOTTOM CONTENT ========================================================= */ .mobile-wallet-section.mycredit-menu .bottom-content{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border-color:rgba(175,200,208,.62) !important; } .mobile-wallet-section.mycredit-menu .idr_content_bottom{ background:transparent !important; } /* Withdrawal / Statement / History / Wallet */ .mobile-wallet-section.mycredit-menu .idr_content_bottom li, .mobile-wallet-section.mycredit-menu .idr_content_bottom li a{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; color:#244653 !important; border-color:rgba(175,200,208,.55) !important; } /* menu wording */ .mobile-wallet-section.mycredit-menu .idr_content_bottom li span{ color:#244653 !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* ========================================================= BOTTOM MENU ICON COLOR ========================================================= */ .mobile-wallet-section.mycredit-menu .idr_content_bottom li .i, .mobile-wallet-section.mycredit-menu .idr_content_bottom li .i i{ color:#007C89 !important; filter: brightness(0) saturate(100%) invert(38%) sepia(53%) saturate(1046%) hue-rotate(137deg) brightness(89%) contrast(101%) !important; } /* hover */ .mobile-wallet-section.mycredit-menu .idr_content_bottom li:hover, .mobile-wallet-section.mycredit-menu .idr_content_bottom li:hover a{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 45%, #EAFBFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.22), inset 0 1px 2px #FFFFFF !important; } .mobile-wallet-section.mycredit-menu .idr_content_bottom li:hover span{ color:#007C89 !important; } /* ========================================================= SELECTED / ACTIVE BOTTOM ITEM ========================================================= */ .mobile-wallet-section.mycredit-menu .idr_content_bottom li.active, .mobile-wallet-section.mycredit-menu .idr_content_bottom li.on{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 40%, #EAFBFF 100% ) !important; border-color:#00DDE4 !important; box-shadow: 0 0 7px rgba(0,241,242,.34), inset 0 1px 2px #FFFFFF !important; } .mobile-wallet-section.mycredit-menu .idr_content_bottom li.active span, .mobile-wallet-section.mycredit-menu .idr_content_bottom li.on span{ color:#007C89 !important; } /* ========================================================= MORE / LESS APPLICATIONS ========================================================= */ .mobile-wallet-section.mycredit-menu + .collapse{ background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; color:#007C89 !important; border-color:rgba(175,200,208,.55) !important; } .mobile-wallet-section.mycredit-menu + .collapse p{ color:#007C89 !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* collapse arrow */ .mobile-wallet-section.mycredit-menu + .collapse svg path, .mobile-wallet-section.mycredit-menu + .collapse svg .st0{ fill:#007C89 !important; } /* ========================================================= OPTIONAL GOLD ACCENT FOR RETRIEVE ========================================================= */ .mobile-wallet-section.mycredit-menu .action-withdrawalall{ border-color:rgba(232,196,119,.65) !important; background: linear-gradient( 180deg, #FFFFFF 0%, #FFFDF5 100% ) !important; } .mobile-wallet-section.mycredit-menu .action-withdrawalall .action-label{ color:#8B641E !important; } /* ========================================================= PLAYTECH DETAIL PAGE COLOR ONLY ========================================================= */ #gameDetail_playtech{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 48%, #E8F1F4 100% ) !important; color:#244653 !important; } /* Header */ .mobile-main-content #headerMain, .mobile-main-content #headerMain .mobile-nav, .mobile-main-content #headerMain .header4{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 52%, #E8F1F4 100% ) !important; border-color:rgba(175,200,208,.65) !important; color:#0B3045 !important; box-shadow: 0 2px 7px rgba(36,70,83,.08), 0 0 5px rgba(0,221,228,.07) !important; } /* PLAYTECH title */ .mobile-main-content #headerMain .header4 > span{ color:#007C89 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 4px rgba(0,221,228,.14) !important; } /* ========================================================= CASINO HEADER / BODY ========================================================= */ #gameDetail_playtech .casino-header-bg{ background: linear-gradient( 180deg, #FFFFFF 0%, #EAFBFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 7px rgba(0,241,242,.16), inset 0 1px 2px #FFFFFF !important; } #gameDetail_playtech .casino-usrpwd-body, #gameDetail_playtech .body-container{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #E8F1F4 100% ) !important; border-color:rgba(175,200,208,.68) !important; box-shadow: 0 4px 12px rgba(36,70,83,.08), inset 0 1px 2px #FFFFFF !important; } /* ========================================================= USERNAME / PASSWORD ========================================================= */ #gameDetail_playtech .usrpwd-container{ background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; border-color:#D7E2E7 !important; box-shadow: inset 0 1px 2px #FFFFFF, 0 2px 6px rgba(36,70,83,.06) !important; } #gameDetail_playtech .usrpwd-container table, #gameDetail_playtech .usrpwd-container td{ background:transparent !important; border-color:#E8F1F4 !important; } /* Label */ #gameDetail_playtech .titletxt{ color:#55727E !important; } /* Username / Password value */ #gameDetail_playtech .detailtxt{ color:#007C89 !important; font-weight:800 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 4px rgba(0,221,228,.10) !important; } /* Copy icon */ #gameDetail_playtech .icon_various_files{ color:#00AEB7 !important; filter: drop-shadow(0 0 3px rgba(0,241,242,.28)) !important; } /* ========================================================= DOWNLOAD BUTTON White / Glacier ========================================================= */ #gameDetail_playtech .download-btn{ color:#007C89 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 45%, #EAFBFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.22), inset 0 2px 3px #FFFFFF !important; text-shadow:none !important; } /* ========================================================= PLAY NOW BUTTON Tiffany Primary CTA ========================================================= */ #gameDetail_playtech .play-btn{ color:#FFFFFF !important; background: linear-gradient( 135deg, #006F78 0%, #00AEB7 42%, #00DDE4 72%, #8FFAFF 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 8px rgba(0,241,242,.45), 0 4px 9px rgba(36,70,83,.12), inset 0 2px 3px rgba(255,255,255,.55) !important; text-shadow: 0 1px 2px rgba(0,48,69,.55) !important; } /* ========================================================= SWEETALERT POPUP - COLOR ONLY Glacier White + Tiffany Crystal ========================================================= */ .swal2-popup.app-popup-popup{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 52%, #E8F1F4 100% ) !important; border-color:#8FFAFF !important; color:#244653 !important; box-shadow: 0 0 10px rgba(0,241,242,.22), 0 10px 28px rgba(36,70,83,.16), inset 0 1px 2px #FFFFFF !important; } /* ========================================================= ERROR ICON Change original red into Tiffany + Champagne ========================================================= */ .swal2-popup.app-popup-popup .swal2-icon.swal2-error{ border-color:#00BFC5 !important; background: radial-gradient( circle at 35% 25%, #FFFFFF 0%, #EAFBFF 48%, #8FFAFF 100% ) !important; box-shadow: 0 0 8px rgba(0,241,242,.35), inset 0 1px 2px #FFFFFF !important; } /* X mark */ .swal2-popup.app-popup-popup .swal2-error .swal2-x-mark-line-left, .swal2-popup.app-popup-popup .swal2-error .swal2-x-mark-line-right{ background: linear-gradient( 90deg, #C99B4A, #FFD778, #E8C477 ) !important; box-shadow: 0 0 5px rgba(255,215,120,.42) !important; } /* ========================================================= MESSAGE ========================================================= */ .swal2-popup.app-popup-popup .swal2-html-container{ color:#0B3045 !important; font-weight:800 !important; text-shadow: 0 1px 0 #FFFFFF, 0 0 4px rgba(0,221,228,.10) !important; } /* optional title */ .swal2-popup.app-popup-popup .swal2-title{ color:#007C89 !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* ========================================================= OK BUTTON ========================================================= */ .swal2-popup.app-popup-popup .swal2-confirm.app-popup-confirm{ color:#FFFFFF !important; background: linear-gradient( 135deg, #006F78 0%, #00AEB7 42%, #00DDE4 72%, #8FFAFF 100% ) !important; border-color:#8FFAFF !important; text-shadow: 0 1px 2px rgba(0,48,69,.60) !important; box-shadow: 0 0 8px rgba(0,241,242,.45), 0 3px 8px rgba(36,70,83,.12), inset 0 2px 3px rgba(255,255,255,.55) !important; } /* hover */ .swal2-popup.app-popup-popup .swal2-confirm.app-popup-confirm:hover{ background: linear-gradient( 135deg, #007C89, #00BFC5, #00F1F2 ) !important; box-shadow: 0 0 11px rgba(0,241,242,.65), 0 4px 10px rgba(36,70,83,.14), inset 0 2px 3px rgba(255,255,255,.65) !important; } /* ========================================================= ACTION AREA ========================================================= */ .swal2-popup.app-popup-popup .swal2-actions{ background:transparent !important; } /* ========================================================= OVERLAY ========================================================= */ .swal2-container.swal2-backdrop-show{ background: rgba(11,48,69,.42) !important; backdrop-filter: blur(3px); } .game-playtech .casino-logo{ filter: brightness(1) invert(1)!important; } .app-popup-popup.is-error:before { background: linear-gradient(135deg, #006F78 0%, #00AEB7 42%, #00DDE4 72%, #8FFAFF 100%) !important; } /* ========================================================= JOKER MOBILE GUIDE Glacier White + Tiffany + Champagne Gold ========================================================= */ .kiss918_mainBox_outer, .kiss918_mainBox{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 50%, #E8F1F4 100% ) !important; color:#244653 !important; } /* Main content card */ .kiss918_mainBox .textbox{ background: radial-gradient( circle at 15% 5%, rgba(143,250,255,.18), transparent 35% ), linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 100% ) !important; border-color:rgba(175,200,208,.72) !important; box-shadow: 0 5px 14px rgba(36,70,83,.08), inset 0 2px 3px #FFFFFF !important; } /* ========================================================= MAIN TITLE ========================================================= */ .kiss918_mainBox .textbox .p1{ color:#007C89 !important; font-weight:900 !important; letter-spacing:.3px; text-shadow: 0 1px 0 #FFFFFF, 0 0 5px rgba(0,221,228,.15) !important; } /* ========================================================= USERNAME / PASSWORD ========================================================= */ .kiss918_mainBox .userandpwd{ background: linear-gradient( 180deg, #FFFFFF, #F8FBFC ) !important; border-color:#D7E2E7 !important; box-shadow: 0 2px 6px rgba(36,70,83,.06), inset 0 1px 2px #FFFFFF !important; } .kiss918_mainBox .userandpwd tr, .kiss918_mainBox .userandpwd td{ border-color:#E8F1F4 !important; } /* Labels */ .kiss918_mainBox .userandpwd .label{ color:#55727E !important; font-weight:700 !important; } /* Username / password value */ .kiss918_mainBox .userandpwd td:nth-child(2){ color:#007C89 !important; font-weight:900 !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* Copy icon */ .kiss918_mainBox .icon_various_files{ color:#00AEB7 !important; filter: drop-shadow(0 0 3px rgba(0,241,242,.30)) !important; } /* Copy area hover */ .kiss918_mainBox .userandpwd td[role="button"]:hover .icon_various_files{ color:#00DDE4 !important; filter: drop-shadow(0 0 5px rgba(0,241,242,.55)) !important; } /* ========================================================= STEP BOX ========================================================= */ .kiss918_mainBox .step_box{ background:transparent !important; } .kiss918_mainBox .step_box li{ background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFC 55%, #EAFBFF 100% ) !important; border-color:rgba(175,200,208,.68) !important; box-shadow: 0 3px 8px rgba(36,70,83,.06), inset 0 1px 2px #FFFFFF !important; } /* Step 1 / 2 / 3 badge */ .kiss918_mainBox .step_box li > span{ color:#FFFFFF !important; background: linear-gradient( 135deg, #006F78 0%, #00BFC5 60%, #00F1F2 100% ) !important; border-color:#8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.35), inset 0 1px 2px rgba(255,255,255,.55) !important; font-weight:900 !important; text-shadow: 0 1px 2px rgba(0,48,69,.55) !important; } /* Step description */ .kiss918_mainBox .step_box li p{ color:#55727E !important; text-shadow: 0 1px 0 #FFFFFF !important; } /* ========================================================= DOWNLOAD BUTTON White Crystal ========================================================= */ .kiss918_mainBox .download-btn{ color:#007C89 !important; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FFFF 45%, #EAFBFF 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 0 6px rgba(0,241,242,.24), 0 3px 8px rgba(36,70,83,.08), inset 0 2px 3px #FFFFFF !important; text-shadow:none !important; } /* ========================================================= PLAY NOW Tiffany Primary ========================================================= */ .kiss918_mainBox .play-btn{ color:#FFFFFF !important; background: linear-gradient( 135deg, #006F78 0%, #00AEB7 38%, #00DDE4 72%, #8FFAFF 100% ) !important; border:1px solid #8FFAFF !important; box-shadow: 0 0 8px rgba(0,241,242,.48), 0 4px 9px rgba(36,70,83,.12), inset 0 2px 3px rgba(255,255,255,.55) !important; text-shadow: 0 1px 2px rgba(0,48,69,.60) !important; } /* ========================================================= RESET ID Champagne Gold ========================================================= */ .kiss918_mainBox .generateloginid-btn{ color:#5C4215 !important; background: linear-gradient( 135deg, #FFFDF5 0%, #FFD778 42%, #E8C477 72%, #C99B4A 100% ) !important; border:1px solid #F5DC9B !important; box-shadow: 0 0 7px rgba(255,215,120,.35), inset 0 2px 3px rgba(255,255,255,.75) !important; text-shadow: 0 1px 0 rgba(255,255,255,.65) !important; } /* ========================================================= BUTTON HOVER ========================================================= */ .kiss918_mainBox .download-btn:hover{ border-color:#00F1F2 !important; box-shadow: 0 0 9px rgba(0,241,242,.42), inset 0 2px 3px #FFFFFF !important; } .kiss918_mainBox .play-btn:hover{ background: linear-gradient( 135deg, #007C89, #00BFC5, #00F1F2 ) !important; box-shadow: 0 0 11px rgba(0,241,242,.65), 0 4px 10px rgba(36,70,83,.13), inset 0 2px 3px rgba(255,255,255,.60) !important; } /* ========================================================= WEB VERSION LINK ========================================================= */ .kiss918_mainBox .userandpwd a{ color:#007C89 !important; text-decoration:none !important; } .kiss918_mainBox .userandpwd a:hover{ color:#00BFC5 !important; } /* ===================================================== PARTNERSHIP PAGE - 2ND SCREENSHOT STYLE ===================================================== */ .partnership-container { width: 100%; max-width: 880px; margin: 0 auto; box-sizing: border-box; background: #fff !important; position: relative; padding: 24px; } /* ===================================================== PARTNERSHIP HEADER ===================================================== */ /* ===================================================== TOP LARGE BANNERS ===================================================== */ .partnership-container .headertitle-contactus { width: 100%; padding: 0 !important; overflow: hidden; border-radius: 22px; background: transparent !important; height: 220px; } .partnership-container .headertitle-contactus a { display: block; width: 100%; text-decoration: none; } .partnership-container .headertitle-contactus .banner-img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1.75 / 1; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; border-radius: 22px; } /* second big banner */ .partnership-container .headertitle-secondarybanner { margin-bottom: 18px !important; } /* ===================================================== PARTNER GRID ===================================================== */ .partnership-container .partner-container { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 28px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box; align-items: stretch; } /* ===================================================== EACH COMPANY CARD ===================================================== */ .partnership-container .partnerlogo-item { display: block !important; width: 100% !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; border-radius: 18px; background: transparent !important; text-decoration: none; box-sizing: border-box; } /* ===================================================== COMPANY IMAGE ===================================================== */ .partnership-container .partnerlogo-item .banner-img { display: block !important; width: 100% !important; height: auto !important; /* square card like screenshot */ aspect-ratio: 1 / 1; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; border-radius: 18px; overflow: hidden; } /* ===================================================== REMOVE OLD POSITION / FLOAT / FLEX SETTINGS ===================================================== */ .partnership-container .partner-container > a { float: none !important; flex: none !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; } /* ===================================================== OPTIONAL - SMALL TAP EFFECT ===================================================== */ .partnership-container .partnerlogo-item, .partnership-container .headertitle-contactus a { transition: transform .18s ease, opacity .18s ease; } .partnership-container .partnerlogo-item:active, .partnership-container .headertitle-contactus a:active { transform: scale(.98); opacity: .92; } .headertitle-contactus .banner-img { background-image: url(./img1829_umenangkiss/umenang_tele.jpg?v=8) !important; } .headertitle-secondarybanner .banner-img { background-image: url(./img1829_umenangkiss/umenang_m.png?v=8) !important; } .partner-container .partnerlogo-item .banner-img { width: 50%; height: 100%; min-height: 90px; background-position: center; background-repeat: no-repeat; background-size: contain; } /* 1 - UVIP */ .partner-container .company-myrs9gs .banner-img { background-image: url(./img1829_umenangkiss/uvip.png?v=8) !important; } /* 2 - UMENANG */ .partner-container .company-Myrs9sk .banner-img { background-image: url(./img1829_umenangkiss/umenang.png?v=8) !important; } /* 3 - UCUCI */ .partner-container .company-myrs9lc .banner-img { background-image: url(./img1829_umenangkiss/ucuci.png?v=8) !important; } /* 4 - ULUCKY */ .partner-container .company-myrs9gw .banner-img { background-image: url(./img1829_umenangkiss/ulucky.png?v=8) !important; } /* 5 - UKAYA */ .partner-container .company-myrs9wt .banner-img { background-image: url(./img1829_umenangkiss/ukaya.png?v=8) !important; } /* 6 - USUKA */ .partner-container .company-myrs9sw .banner-img { background-image: url(./img1829_umenangkiss/usuka.png?v=8) !important; } /* 6 - U99 */ .partner-container .company-myrs9pw .banner-img { background-image: url(./img1829_umenangkiss/u99.png?v=8) !important; } .icon-partnership { background-image: url(img1829_umenangkiss/partnership.png) !important; }