.upcoming-sport-matches-slider-container, .daily-checkin-progress-day-coinbg{ display:none!important; } .reset-request-container .reset-request-form .reset-reqeust-top .reset-email-label, .reset-request-container .reset-request-form .reset-reqeust-top .reset-username-label{ color:#08421d!important; } body, #pageHome #homePage .home_navBox .home_nav{ background:#000!important; } .header{ background: linear-gradient(180deg, #0b5aa5 0%, #073d7d 45%, #041f4d 100%) !important; } .m-deposit-landing-container .standard-content-container .m-standard-transaction-container .m-transaction-form .bank-list-container .bank-list .active .bank-name{ color:#fff!important; } .luckybox-tab-content .icon_home_logo_bg { height: 359px!important;} #pageHome #homePage .home_navBox .home_nav { height: 2.9rem;} .home_nav .icon{ width: 1.94rem!important; height: 1.94rem!important; } .reset-request-container .reset-request-form .reset-reqeust-top .reset-email-label, .reset-request-container .reset-request-form .reset-reqeust-top .reset-username-label{ color:#08421d!important; } #loginPage .login_centent .login_forgetpsd{ color:#fff!important; } #pageHome #homePage .home_navBox .home_nav li a.on, .scroll_menu .menu_nav li a.on, .btn-blue { background: linear-gradient( to bottom, #8be5ff 10%, #32bfe9 55%, #0875ad 100% ) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 8px rgba(8, 117, 173, 0.22) !important; text-shadow: 0 1px 2px rgba(0, 70, 120, 0.35) !important; } #pageHome #homePage .home_navBox .home_nav li{ width: 27.8%!important; } #pageHome #homePage .home_navBox{ border-bottom: solid 2px #fd9404!important; } #home-livetx table td.dep-col{ background: linear-gradient(to bottom, #08421d 10%, #8dfaac 66%, #106529 100%)!important; color: #000!important; padding: 10px; font-weight: bolder!important; text-align: center!important; } #home-livetx table td.with-col{ background: linear-gradient(to bottom, #08421d 10%, #8dfaac 66%, #106529 100%)!important; color: #000!important; padding: 10px; font-weight: bolder!important; text-align: center!important; } .ui-footer .navbar{ height: 68px; background: #fff!important; border: 2px solid #9beaff!important; -webkit-box-shadow: 0px 0px 18px 5px rgb(6 19 39)!important; -moz-box-shadow: 0px 0px 18px 5px rgba(6,19,39,1)!important; box-shadow: 0px 0px 18px 5px rgb(6 19 39)!important; } .masthead-images{ height:295px!important; background-image: url(img1824_u99kiss/mobile.jpg?v=3)!important; background-size: 100%!important; margin: 32px auto 0px auto!important; } .masthead-images .bg-item1, .masthead-images .bg-item2, .masthead-images .bg-item3, .masthead-images .bg-item4, .masthead-images .bg-item5 { display:none!important; } /* ========================================================= VERIFICATION / SMS CODE PAGE MATCH REGISTRATION THEME ICE WHITE + SKY BLUE + DEEP BLUE CSS ONLY - KEEP EXISTING STRUCTURE / LAYOUT ========================================================= */ /* MAIN CONTAINER */ .content-container { background: linear-gradient( 180deg, #f9feff 0%, #eefbff 52%, #dff7ff 100% ) !important; border: 1.5px solid #6ed8f3 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 20px rgba(0,102,160,.14), 0 0 10px rgba(73,205,240,.12) !important; color: #076ea8 !important; } /* FORM */ #verificationForm { background: transparent !important; } /* ========================================================= DESCRIPTION TEXT ========================================================= */ #verificationForm #lang_sms, #verificationForm #lang_whatsapp { color: #0875af !important; font-weight: 600 !important; line-height: 1.45 !important; text-shadow: 0 1px 0 rgba(255,255,255,.9) !important; } /* MOBILE NUMBER */ #verificationForm [data-value="mobile_no"] { color: #009fd3 !important; font-weight: 800 !important; text-shadow: 0 0 5px rgba(41,188,231,.18) !important; } /* ========================================================= ERROR ========================================================= */ #verificationForm #errorLabel { color: #e53945 !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255,255,255,.7) !important; } /* ========================================================= VERIFICATION INPUT ========================================================= */ #verificationForm #smsVerifyInput { background: linear-gradient( 180deg, #ffffff 0%, #f1fbff 100% ) !important; border: 1.5px solid #69d6f2 !important; box-shadow: inset 0 2px 5px rgba(0,85,125,.08), 0 0 6px rgba(62,197,234,.18) !important; } /* LOCK ICON AREA */ #verificationForm .input-group-addon { background: linear-gradient( 180deg, #55d8f5 0%, #27bfe8 50%, #0a93cb 100% ) !important; border-color: #58d4f1 !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important; } /* LOCK ICON */ #verificationForm .glyphicon-lock { color: #ffffff !important; text-shadow: 0 0 4px rgba(255,255,255,.35), 0 1px 2px rgba(0,81,121,.28) !important; } /* INPUT */ #verificationForm #val-verificationCode { background: linear-gradient( 180deg, #ffffff 0%, #f4fcff 100% ) !important; color: #0874ae !important; border-color: #6ad6f2 !important; outline: none !important; box-shadow: inset 0 2px 5px rgba(0,93,135,.08) !important; } /* PLACEHOLDER */ #verificationForm #val-verificationCode::placeholder { color: #8db7c8 !important; opacity: 1 !important; } /* FOCUS */ #verificationForm #smsVerifyInput:focus-within, #verificationForm #val-verificationCode:focus { border-color: #20bce8 !important; box-shadow: 0 0 5px rgba(42,194,233,.45), 0 0 11px rgba(17,156,215,.18), inset 0 1px 4px rgba(0,98,145,.06) !important; } /* ========================================================= ACTIVATE BUTTON ========================================================= */ #verificationForm #btnActivate { margin-left: 25px!important; background: linear-gradient( 180deg, #6fe4fa 0%, #37c9ed 42%, #159fd5 72%, #0878b3 100% ) !important; color: #ffffff !important; border: 1px solid #72def5 !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,80,124,.35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 3px 8px rgba(0,126,181,.22), 0 0 7px rgba(57,204,239,.24) !important; } #verificationForm #btnActivate:hover, #verificationForm #btnActivate:active { background: linear-gradient( 180deg, #88edff 0%, #46d2f2 45%, #19a9dc 100% ) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 9px rgba(52,202,240,.42) !important; } /* ========================================================= LOGOUT BUTTON ========================================================= */ #verificationForm #btnSignout { background: linear-gradient( 180deg, #ffffff 0%, #eefaff 100% ) !important; color: #0875af !important; border: 1px solid #68d4f1 !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(0,112,167,.12) !important; } #verificationForm #btnSignout:hover, #verificationForm #btnSignout:active { background: linear-gradient( 180deg, #eafaff 0%, #d7f4ff 100% ) !important; color: #006b9f !important; } /* ========================================================= LIVE CHAT ========================================================= */ #verificationForm #btnLiveChat { color: #0879b3 !important; font-weight: 700 !important; cursor: pointer !important; text-shadow: 0 1px 0 rgba(255,255,255,.85) !important; } #verificationForm #btnLiveChat:hover { color: #09a8db !important; text-shadow: 0 0 5px rgba(42,192,230,.25) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .content-container { background: linear-gradient( 180deg, #fbfeff 0%, #edfaff 55%, #ddf6ff 100% ) !important; } #verificationForm #val-verificationCode { font-size: 16px !important; } } .icon-joker{ background-image: url(img1824_topwin/joker_menu.png?v=3)!important; } .icon-playtech{ background-image: url(img1824_topwin/pt_menu.png?v=3)!important; width: 1.5rem!important; height: 1.5rem!important; } .icon-pragmatic{ background-image: url(img1824_topwin/pra_menu.png?v=3)!important; } .icon-spadegaming{ background-image: url(img1824_topwin/sg_menu.png?v=3)!important; width: 1.5rem!important; height: 1.5rem!important; } .icon_home_menu_sport{ background-image: url(img1824_u99kiss/soccer_menu.png)!important; } .icon_home_menu_esport{ background-image: url(img1824_u99kiss/esport_menu.png)!important; } .icon_home_menu_lc{ background-image: url(img1824_u99kiss/casino_menu.png)!important; } .icon_home_menu_slot{ background-image: url(img1824_u99kiss/slot_menu.png)!important; } .icon_home_menu_711{ background-image: url(img1824_u99kiss/711_menu.png)!important; } .icon_home_menu_fishing, .icon_home_menu_more{ background-image: url(img1824_u99kiss/fish_menu.png)!important; } .icon_home_menu_cockfight{ background-image: url(img1824_u99kiss/cf_menu.png)!important; } .icon_home_menu_keno{ background-image: url(img1824_u99kiss/keno_menu.png)!important; } .fas.fa-luckybox{ background-image: url(img1824_u99kiss/luckybox_menu.png)!important; } .icon-partnership { background-image: url("img1824_u99kiss/partnership.png")!important; } .li-lottery .icon_home_menu_lottery{ background-image: url(img1824_u99kiss/lottery_menu.png)!important; } .li-lottery4d .icon_home_menu_lottery{ background-image: url(img1824_u99kiss/4d_menu.png)!important; } .float-menu.luckybox-floating-icon .floating-icon-image { content:url('./img1824_u99kiss/luckyboxs.png?v=3?v=7') !important; } .fa-dharmachakra:before{ content:none!important; } .fa-dharmachakra{ background-image: url(img1824_topwin/spin_menu.png)!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("img1824_topwin/setting.png")!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("img1824_topwin/qr_icon.png")!important; display: block; width: 33px; height: 33px; background-size: 46px; background-position: center; background-position-y: 0px; } .icon-account{ background-image: url("img1824_u99kiss/user_icon.png")!important; width: 64px !important; height: 39px !important; } .icon-home-big{ background-image: url("img1824_u99kiss/home.png")!important; width: 64px !important; height: 44px !important; } .license_container.gaming-license { padding: 6px 0px 4px 35px!important; } .icon-promotion-big{background-image: url("img1824_u99kiss/treasure.png?v=3")!important; width: 64px !important; height: 39px !important; background-repeat: no-repeat !important; } #promotionsPage .history_nav, .login_btn .btn-blue, .download-btn{ color: #106529!important; text-align: center!important; text-decoration: none!important; border-radius: 8px!important; border: 2px solid #233a5d!important; background: #000!important; box-shadow: 0px 0px 25px 0px rgb(53 88 142 / 75%) inset!important; -webkit-box-shadow: 0px 0px 25px 0px rgb(53 88 142 / 75%) inset!important; -moz-box-shadow: 0px 0px 25px 0px rgba(53,88,142,0.75) inset!important; text-align: center; text-transform: uppercase; text-decoration: none; text-shadow: 0px 1px 5px rgb(0 0 0 / 50%); font-weight: bolder!important; } .btn-blue-promo { background: linear-gradient(to bottom, #08421d 10%, #8dfaac 66%, #106529 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#0d115b",GradientType=1); box-shadow: 1px -1px 10px 3px rgb(255 255 255 / 75%) inset; -webkit-box-shadow: 1px -1px 10px 3px rgb(255 255 255 / 75%) inset; text-align: center; text-transform: uppercase; text-decoration: none; text-shadow: 0px 1px 5px rgb(0 0 0 / 50%); font-weight: bolder!important; } .btn-red-promo, .gamelobby-tab-content .tabs .tab.selected{ background: linear-gradient(to bottom, #08421d 10%, #8dfaac 66%, #106529 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c86d0c",endColorstr="#c5680a",GradientType=1)!important; box-shadow: 1px -1px 10px 3px rgb(255 255 118 / 75%) inset!important; -webkit-box-shadow: 1px -1px 10px 3px rgb(255 255 118 / 75%) inset!important; text-align: center; text-transform: uppercase; text-decoration: none; text-shadow: 0px 1px 5px rgb(0 0 0 / 50%); font-weight: bolder!important; } .games-tab-content .icon_home_logo_sport_sbo { background-image: url(".//img1824_topwin/sbo_sport.png?v=8"); } .games-tab-content .icon_home_logo_sport_ibc { background-image: url(".//img1824_topwin/ibc_sport.png?v=8"); } .games-tab-content .icon_home_logo_sport_msport { background-image: url(".//img1824_topwin/m_sport.png?v=8"); } .games-tab-content .icon_home_logo_sport_hsport { background-image: url(".//img1824_topwin/hsport.png?v=8"); } .games-tab-content .icon_home_logo_sport_cmd { background-image: url(".//img1824_topwin/cmd_sport.png?v=8"); } .games-tab-content .icon_home_logo_casino_XPG { background-image: url(".//img1824_topwin/xpg_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_AB { background-image: url(".//img1824_topwin/allbet_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_SA { background-image: url(".//img1824_topwin/sa_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_EG { background-image: url(".//img1824_topwin/eg_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_AG { background-image: url(".//img1824_topwin/ag_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_BG { background-image: url(".//img1824_topwin/bg_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_PT { background-image: url(".//img1824_topwin/pt_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_BBINC { background-image: url(".//img1824_topwin/bbin_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_DG { background-image: url(".//img1824_topwin/dg_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_GP { background-image: url(".//img1824_topwin/gp_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_SEXYB { background-image: url(".//img1824_topwin/sexyb_casino.png?v=8"); } .games-tab-content .icon_home_logo_casino_SBOC { background-image: url(".//img1824_topwin/sbo_casino.png?v=8?v=8"); } .games-tab-content .icon_home_logo_casino_pragmatic { background-image: url(".//img1824_topwin/pra_casino.png?v=8?v=8"); } .games-tab-content .icon_home_logo_casino_WM { background-image: url(".//img1824_topwin/wm_casino.png?v=8?v=8"); } .games-tab-content .icon_home_logo_casino_YEEBET { background-image: url(".//img1824_topwin/yeebet_casino.png?v=8?v=8"); } .games-tab-content .icon_home_logo_casino_EZUGI { background-image: url(".//img1824_topwin/ezugi_casino.png?v=8?v=8"); } .games-tab-content .icon_home_logo_casino_marbula2 { background-image: url(".//img1824_topwin/mabu2_casino.png?v=8?v=8"); } .luckyspin_banner { background-image: url(".//img1824_topwin/spin_bg.png?v=8"); } .luckybox_banner { background-image: url(".//img1824_u99kiss/luckybox_2.png?v=8"); } .games-tab-content .icon_home_logo_cockfight_sv388 { background-image: url(".//img1824_topwin/cf_fish.png?v=8"); } .games-tab-content .icon_home_logo_keno_jili { background-image: url(".//img1824_topwin/jili_keno.png?v=8"); } .games-tab-content .icon_home_logo_slot_spribe { background-image: url(".//img1824_topwin/spribe_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_rpsoft { background-image: url(".//img1824_topwin/rpsoft_slot2.png?v=8"); } .games-tab-content .icon_home_logo_slot_naga { background-image: url(".//img1824_topwin/naga_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_kingmaker { background-image: url(".//img1824_topwin/km_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_jili { background-image: url(".//img1824_topwin/jili_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_pocketgame { background-image: url(".//img1824_topwin/pgsoft_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_BETSOFT { background-image: url(".//img1824_topwin/betsoft_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_RT { background-image: url(".//img1824_topwin/rt_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_AGS { background-image: url(".//img1824_topwin/ag_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_SG { background-image: url(".//img1824_topwin/sg_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_PTS { background-image: url(".//img1824_topwin/pt_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_BBINS { background-image: url(".//img1824_topwin/bbin_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_GPS { background-image: url(".//img1824_topwin/gp_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_FG { background-image: url(".//img1824_topwin/fg_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_RTG { background-image: url(".//img1824_topwin/rtg_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_CQ9 { background-image: url(".//img1824_topwin/cq9_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_PRA { background-image: url(".//img1824_topwin/pra_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_PG { background-image: url(".//img1824_topwin/png_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_QS { background-image: url(".//img1824_topwin/qs_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_NETENT { background-image: url(".//img1824_topwin/netent_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_KIRON { background-image: url(".//img1824_topwin/kiron_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_SBOS { background-image: url(".//img1824_topwin/sbo_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_blueprint { background-image: url(".//img1824_topwin/bp_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_pocketgame { background-image: url(".//img1824_topwin/pg_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_MG { background-image: url(".//img1824_topwin/mg_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_jdb { background-image: url(".//img1824_topwin/jdb_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_ludobet { background-image: url(".//img1824_topwin/ludo_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_habanero { background-image: url(".//img1824_topwin/habanero_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_dctrelax { background-image: url(".//img1824_topwin/relax_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_rich88 { background-image: url(".//img1824_topwin/rich88_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_advantplay { background-image: url(".//img1824_topwin/ap_slot.png?v=8"); } #slot_firmcontent .icon_home_logo_slot_gamerbuild{ background: url("img1824_topwin/gamerbuild_slot.png?v=3") !important; background-size: 100%!important; } .games-tab-content .icon_home_logo_slot_fachai { background-image: url(".//img1824_topwin/fachai_slot.png?v=8"); } .games-tab-content .icon_home_logo_slot_inout { background-image: url(".//img1824_topwin/inout_slot.png?v=8"); } .games-tab-content .icon_home_logo_ace333 { background-image: url(".//img1824_topwin/ace333_711.png"); background-size: 100%; height: 99px; width: 102px; background-repeat: no-repeat; } .games-tab-content .icon_home_logo_lionking { background-image: url(".//img1824_topwin/lk_711.png"); } .games-tab-content .icon_home_logo_scr_S918 { background-image: url(".//img1824_topwin/918_slot.png?v=8"); } .games-tab-content .icon_home_logo_scr_GW { background-image: url(".//img1824_topwin/gw_711.png"); } .games-tab-content .icon_home_logo_scr_PB { background-image: url(".//img1824_topwin/pb_711.png"); } .games-tab-content .icon_home_logo_scr_MEGA { background-position: center!important; background-size: contain!important; background-image: url(".//img1824_topwin/mega_711.png"); } .games-tab-content .icon_home_logo_scr_PUSSY { background-image: url(".//img1824_topwin/pussy_711.png"); } .games-tab-content .icon_home_logo_scr_LIVE { background-image: url(".//img1824_topwin/live22_711.png"); } .games-tab-content .icon_home_logo_slot_XE { background-image: url(".//img1824_topwin/xe88_711.png"); } .games-tab-content .icon_home_logo_sport_tfgaming { background-image: url(".//img1824_topwin/tf_esport.png?v=8"); } .games-tab-content .icon_home_logo_slot_JOKER { background-image: url(".//img1824_topwin/joker_711.png?v=8"); } .games-tab-content .icon_home_logo_slot_VP { background-image: url(".//img1824_topwin/vp_711.png?v=8"); } .games-tab-content .icon_home_logo_evo888 { background-image: url(".//img1824_topwin/evo_711.png?v=8"); } .games-tab-content .icon_home_logo_fish_jili { background-image: url(".//img1824_topwin/jili_fish.png?v=8"); } .games-tab-content .icon_home_logo_fish_jdb { background-image: url(".//img1824_topwin/jdb_fish.png?v=8"); } .games-tab-content .icon_home_logo_fish_cq9 { background-image: url(".//img1824_topwin/cq9_fish.png?v=8"); } .games-tab-content .icon_home_logo_GD4D { background-image: url(".//img1824_topwin/4d_fish.png?v=8"); } .games-tab-content .icon_home_logo_fishing_GG { background-image: url(".//img1824_topwin/gg_fish.png?v=8"); } .games-tab-content .icon_home_logo_fishing_SG { background-image: url(".//img1824_topwin/sg_fish.png?v=8"); } .games-tab-content .icon_home_logo_fishing_JOKER { background-image: url(".//img1824_topwin/joker_fish.png?v=8"); } .games-tab-content .icon_home_logo_fishing_BBIN { background-image: url(".//img1824_topwin/bbin_fish.png?v=8"); } #progressivejackpot .show-for-small-only img { content: url(./img1824_u99kiss/jackpot2.jpg?v=8) !important; } .games-tab-content .icon_home_logo_fishing_CF { background-image: url(".//img1824_topwin/cf_fish.png?v=8"); } .footermenu .icon-funds{ background-image: url(".//img1824_u99kiss/deposit_menu.png?v=8"); width: 64px !important; height: 39px !important; background-repeat: no-repeat!important; } .icon-logout{ background-image: url(".//img1824_topwin/logout.png?v=8"); filter: brightness(1) invert(0)!important; } .icon-language{ background-image: url(".//img1824_topwin/language.png?v=8"); filter: brightness(1) invert(0)!important; } .icon-livechat{ background-image: url(".//img1824_u99kiss/livechat.png?v=8"); background-repeat: no-repeat; width: 64px !important; height: 39px !important; } .icon-contact{ background-image: url(".//img1824_topwin/contact.png?v=8"); filter: brightness(1) invert(0)!important; } #pageHome #homePage .home_navBox .home_nav li a .i{ width: 2rem!important; } .lang-selection-en img{ content: url(".//img1824_topwin/aus_flag.png?v=8"); } .games-tab-content .icon_home_logo_VR { background-image: url(".//img1824_topwin/vr_keno.png?v=8"); } .games-tab-content .icon_home_logo_BBINF { background-image: url(".//img1824_topwin/bbin_keno.png?v=8"); } .games-tab-content .icon_home_logo_KY { background-image: url(".//img1824_topwin/ky_keno.png?v=8"); } .icon-contact{ } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li{ width: 33%!important; height: 112%!important; } .button-style-2.is-active, .button-style-2, .button-filter, .button-style-1{ background-color: #946a21!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5ebaf), to(#c8a458))!important; background-image: -webkit-linear-gradient(top, #946a21, #5e3f08, #946a21)!important; background-image: -moz-linear-gradient(top, #946a21, #5e3f08, #946a21)!important; background-image: -ms-linear-gradient(top, #946a21, #5e3f08, #946a21)!important; background-image: -o-linear-gradient(top, #c19637, #5e3f08, #c19637)!important; color:#fff!important; } #product-filter .fa-angle-left{ color:#c19637!important; } .payment-scroll-menu .icon { filter: brightness(0) invert(1)!important; } .payment-scroll-menu .on .icon { filter: brightness(0) invert(0)!important; } .icon-contact{ background: url("./img1824_u99kiss/contact2.png?v=2")!important; width: 64px !important; height: 39px !important; background-size: 100% 100% !important; background-repeat: no-repeat!important; } .icon-vip{ background: url("./img1824_topwin/vip_menu.png")!important; background-size: 100% 100%!important; } .icon-language{ background: url("./img1824_topwin/language_menu.png")!important; background-size: 100% 100%!important; } .icon-logout{ background: url("./img1824_topwin/logout_menu.png")!important; background-size: 100% 100%!important; } #loginPage .logo_big img{ content: url("./img1824_u99kiss/loginbanner2.png?=v4")!important; }#loginPage .logo_big { height: 10.1rem;} .member-action p, .member-wallet p{ color:#000!important; } .account-menu-section .icon-myprofile{ background: url("./img1824_topwin/acc_user.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-referral-program{ background: url("./img1824_topwin/acc_referral.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-changepassword{ background: url("./img1824_topwin/acc_changepassword.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-logout{ background: url("./img1824_topwin/acc_logout.png?=v4")!important; background-size: 100%!important; width: 1.2rem!important; height: 1.2rem!important; background-repeat: no-repeat!important; } section#progressivejackpot.theme1 .home-jackpot-content { color: #fff!important;} section#progressivejackpot.theme1 .home-jackpot-content.myr { top: 78% !important; left: 26% !important; } .slotgamesluckypickslider-section .most-play-game-title { color: #fff;} .slotgamesslider-section .most-play-game-title { color: #000;} section#progressivejackpot.theme1 .home-jackpot-content .home-jackpot-running { font-size: 4vw!important; } .home-jackpot-running { color: #fff !important; font-weight: 900 !important; text-shadow: 0 1px 0 #ffffff, 0 0 4px #8be5ff, 0 0 8px #32bfe9, 0 0 14px #159bd5, 0 0 22px rgba(8, 117, 173, 0.75) !important; filter: drop-shadow( 0 0 5px rgba(50, 191, 233, 0.55) ) !important; animation: oceanJackpotGlow 1.8s ease-in-out infinite; } /* MYR */ .home-jackpot-running #jackpot_currency { color: #dff8ff !important; font-weight: 800 !important; margin-right: 5px !important; text-shadow: 0 0 4px #ffffff, 0 0 8px #8be5ff, 0 0 12px #32bfe9 !important; } /* OCEAN NEON PULSE */ @keyframes oceanJackpotGlow { 0%, 100% { color: #8be5ff; text-shadow: 0 1px 0 #ffffff, 0 0 4px #8be5ff, 0 0 8px #32bfe9, 0 0 14px #159bd5, 0 0 20px rgba(8, 117, 173, .55); } 50% { color: #dff8ff; text-shadow: 0 1px 0 #ffffff, 0 0 6px #ffffff, 0 0 12px #8be5ff, 0 0 20px #32bfe9, 0 0 30px rgba(21, 155, 213, .85); } } .luckypick-popup .luckypick-title { background: #000!important; background-clip: text !important; -webkit-text-fill-color: transparent; } .selector-frame.idle { background: #08421d!important; box-shadow: 0 0 0 2px rgba(0,154,56, .6), 0 0 16px rgba(0,154,56, .55), inset 0 0 10px rgba(0,154,56, .3); border: 2px solid rgba(0,154,56, .7); } .swal2-container .luckypick-popup .luckypick-confirm-btn, .luckypick-popup .luckypick-vendor{ background: linear-gradient(to bottom, #000 0%, #000 100%) !important; border: 1px solid #000 !important; color: #08421d !important; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; box-shadow: 0 0 0 2px rgba(0,154,56, .6), 0 0 16px rgba(0,154,56, .55), inset 0 0 10px rgba(0,154,56, .3); } .luckypick-popup .luckypick-vendor{ width:50%!important; margin: 0 auto!important; display: flex !important; align-items: center; } .luckypick-popup .luckypick-title{ color:#fff!important; } .luckypick-popup{ background: linear-gradient(to bottom, #08421d 0%, #08421d 100%) !important; border: 2px solid #000!important; } .luckypick-popup .luckypick-rounded-image{ border: 2px solid #000!important; } .luckypick-popup .luckypick-close-btn { color: #fff !important; } .luckypick-popup .luckypick-title{ padding: 7px 36px!important; color: #fff; margin-bottom: 10px!important; } .slotgamesluckypickslider-section .btn-spin{ background: linear-gradient(to bottom, #08421d 0%, #08421d 100%) !important; color:#fff!important; padding: 7px 36px!important; font-size: 13px!important; margin-bottom: 10px!important; } /* ========================================= OCEAN BLUE PROMOTION CARD Target: promotions_item ========================================= */ .promotions_item { background: linear-gradient( 145deg, #061b2c 0%, #082e49 45%, #064a6c 100% ) !important; border: 1px solid rgba(62, 204, 255, 0.35) !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(0, 98, 155, 0.35), 0 0 20px rgba(0, 183, 255, 0.15) !important; transition: all 0.3s ease !important; } /* Hover Effect */ .promotions_item:hover { transform: translateY(-4px) !important; border-color: rgba(73, 210, 255, 0.75) !important; box-shadow: 0 15px 35px rgba(0, 98, 155, 0.45), 0 0 28px rgba(0, 195, 255, 0.25) !important; } /* ========================================= IMAGE ========================================= */ .promotions_item .img { position: relative !important; overflow: hidden !important; background: #06253b !important; } .promotions_item .img img { display: block !important; width: 100% !important; height: auto !important; transition: transform 0.4s ease, filter 0.4s ease !important; } .promotions_item:hover .img img { transform: scale(1.025) !important; filter: brightness(1.05) saturate(1.08) !important; } /* Ocean blue overlay */ .promotions_item .img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(0, 105, 160, 0) 50%, rgba(3, 35, 55, 0.18) 75%, rgba(3, 24, 39, 0.55) 100% ); } /* ========================================= BOTTOM CONTENT ========================================= */ .promotions_item .promotitembottom { position: relative !important; padding: 18px 18px 20px !important; background: radial-gradient( circle at top right, rgba(0, 190, 255, 0.18), transparent 42% ), linear-gradient( 135deg, #07304a 0%, #041f32 100% ) !important; border-top: 1px solid rgba(77, 207, 255, 0.25) !important; } /* Small highlight line */ .promotions_item .promotitembottom::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; background: linear-gradient( 90deg, transparent, #32caff, #00a6df, transparent ); box-shadow: 0 0 10px rgba(50, 202, 255, 0.6); } /* ========================================= TITLE ========================================= */ .promotions_item .p1 { margin: 0 0 7px !important; color: #ffffff !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; text-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 10px rgba(37, 201, 255, 0.2) !important; } /* ========================================= DESCRIPTION ========================================= */ .promotions_item .p2 { margin: 0 !important; color: #aad9eb !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; } /* ========================================= BUTTON CONTAINER ========================================= */ .promotions_item .m-promotion-button-container { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 16px !important; } /* ========================================= COMMON BUTTON ========================================= */ .promotions_item .btn-common { flex: 1 !important; min-height: 40px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; cursor: pointer !important; transition: all 0.25s ease !important; } /* ========================================= DETAILS BUTTON ========================================= */ .promotions_item .btn-blue-promo { color: #bcecff !important; border: 1px solid #20bce9 !important; background: linear-gradient( 180deg, rgba(17, 119, 164, 0.28), rgba(5, 65, 96, 0.55) ) !important; box-shadow: inset 0 0 12px rgba(37, 198, 255, 0.08), 0 3px 10px rgba(0, 0, 0, 0.18) !important; } .promotions_item .btn-blue-promo:hover { color: #ffffff !important; background: linear-gradient( 180deg, #159bc9, #08739d ) !important; border-color: #53d8ff !important; box-shadow: 0 5px 14px rgba(0, 165, 220, 0.35), 0 0 12px rgba(48, 202, 255, 0.25) !important; transform: translateY(-2px) !important; } /* ========================================= APPLY NOW BUTTON ========================================= */ .promotions_item .btn-red-promo { color: #ffffff !important; border: 1px solid #56ddff !important; background: linear-gradient( 135deg, #08a9d8 0%, #0079af 55%, #005f92 100% ) !important; box-shadow: 0 5px 14px rgba(0, 147, 201, 0.32), inset 0 1px 0 rgba(255,255,255,0.2) !important; } .promotions_item .btn-red-promo:hover { background: linear-gradient( 135deg, #32d0f7 0%, #0aa0d1 50%, #0478a7 100% ) !important; border-color: #8beaff !important; box-shadow: 0 7px 18px rgba(0, 184, 230, 0.45), 0 0 15px rgba(59, 215, 255, 0.3) !important; transform: translateY(-2px) !important; } /* ========================================= ACTIVE BUTTON EFFECT ========================================= */ .promotions_item .btn-common:active { transform: translateY(0) scale(0.98) !important; } #pagePromotionsDetail #promotionsDetailPage .promodetailContent { background-color: #000; } #pagePromotionsDetail #promotionsDetailPage .promodetailContent .promodetail_textbox .p_title.blue { color: #fff; } /* ========================================= MOBILE ========================================= */ @media (max-width: 600px) { .promotions_item { border-radius: 12px !important; } .promotions_item .promotitembottom { padding: 14px 14px 16px !important; } .promotions_item .p1 { font-size: 15px !important; } .promotions_item .p2 { font-size: 12px !important; } .promotions_item .btn-common { min-height: 38px !important; font-size: 11px !important; } } /* ========================================================= SAPPHIRE → OCEAN BLUE THEME Promotion Detail Override ========================================================= */ :root { --sky: #5bc8f5; --lightBlue: #27aee4; --ocean: #087fc1; --ocean2: #05639f; --deep: #03365f; --sapphire: #064d8f; --sapphireDark: #03294f; --white: #ffffff; --gold: #ffe13b; --goldDark: #a86d00; --text: #d8f4ff; } /* ========================================================= PAGE BACKGROUND ========================================================= */ body { background: radial-gradient( 700px 350px at 20% 5%, rgba(74, 199, 255, .22), transparent 65% ), linear-gradient( 180deg, #052d50 0%, #064d7d 42%, #0879b5 100% ) !important; color: #ffffff; } /* ========================================================= MAIN SAPPHIRE CARD ========================================================= */ .card { background: radial-gradient( circle at 85% 8%, rgba(71, 198, 255, .18), transparent 32% ), radial-gradient( circle at 10% 45%, rgba(31, 151, 220, .14), transparent 38% ), linear-gradient( 160deg, #075d9c 0%, #064b83 28%, #053968 58%, #03284f 100% ) !important; border: 1px solid rgba(91, 205, 255, .42) !important; box-shadow: 0 18px 40px rgba(0, 25, 55, .48), 0 0 25px rgba(0, 129, 205, .16), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 30px rgba(25, 146, 216, .08) !important; } /* ========================================================= MAIN MOVING SHINE ========================================================= */ .card:before { background: linear-gradient( 90deg, transparent, rgba(80, 200, 255, .03), rgba(180, 235, 255, .20), rgba(255,255,255,.40), rgba(180, 235, 255, .20), rgba(80, 200, 255, .03), transparent ) !important; } /* ========================================================= SPARKLES ========================================================= */ .spark { color: #dff8ff !important; text-shadow: 0 0 5px #ffffff, 0 0 10px #5fd8ff, 0 0 18px rgba(30, 170, 240, .65) !important; } /* ========================================================= BUBBLES ========================================================= */ .main-bubble { border: 2px solid rgba(129, 222, 255, .55) !important; background: radial-gradient( circle at 30% 25%, rgba(255,255,255,.80), rgba(125,220,255,.22) 28%, rgba(23,139,205,.10) 60%, transparent 75% ) !important; box-shadow: inset 0 0 6px rgba(255,255,255,.46), 0 0 8px rgba(45,178,238,.18) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .title { color: #ffffff !important; text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 2px 3px rgba(0,20,50,.65), 0 0 12px rgba(53,188,255,.24) !important; } /* ========================================================= GOLD TITLE / RM99 / IMPORTANT WORDS ========================================================= */ .gold-title, .rm99, .gold, .danger, .centerGold{ color: #ffe13b !important; -webkit-text-stroke: .3px #9d6500 !important; text-shadow: 0 1px 0 #fff4a8, 0 2px 0 #bd8100, 0 3px 3px rgba(0,20,50,.42), 0 0 7px rgba(255,221,59,.22) !important; } /* ========================================================= RULE TEXT ========================================================= */ .rules { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,15,40,.55) !important; } /* ========================================================= RULE BOXES ========================================================= */ .rule-main, .rule { background: linear-gradient( 135deg, rgba(30, 143, 207, .25), rgba(4, 50, 91, .36) ) !important; border: 1px solid rgba(111, 208, 255, .24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,20,45,.12) !important; } /* ========================================================= OCEAN DIVIDER ========================================================= */ .ocean-line { background: linear-gradient( 90deg, transparent, #0a82c7, #5ddcff, #ffffff, #5ddcff, #0a82c7, transparent ) !important; box-shadow: 0 0 10px rgba(52,196,255,.45) !important; } /* ========================================================= TERMS BUTTON ========================================================= */ .terms-button { color: #ffffff !important; background: linear-gradient( 135deg, #087fc1 0%, #05649f 48%, #043d72 100% ) !important; border: 1px solid rgba(104,211,255,.56) !important; box-shadow: 0 6px 15px rgba(0,25,60,.28), inset 0 1px 0 rgba(255,255,255,.18) !important; text-shadow: 0 1px 2px rgba(0,20,50,.55) !important; } /* TERMS SHINE */ .terms-button:before { background: linear-gradient( 90deg, transparent, rgba(111, 221, 255, .15), rgba(255,255,255,.60), rgba(111,221,255,.15), transparent ) !important; } /* ========================================================= VIEW / HIDE ========================================================= */ .view-button, .hide-button { color: #074a79 !important; background: linear-gradient( 180deg, #e8faff, #a9e8ff ) !important; border: 1px solid rgba(111, 216, 255, .65) !important; box-shadow: 0 2px 8px rgba(0,90,150,.25) !important; } /* ========================================================= TERMS CONTENT ========================================================= */ .terms-content { color: #dff6ff !important; background: radial-gradient( circle at 85% 0%, rgba(52,186,245,.20), transparent 35% ), linear-gradient( 160deg, #075a95 0%, #064675 45%, #032f58 100% ) !important; border: 1px solid rgba(92,205,255,.48) !important; box-shadow: 0 12px 28px rgba(0,20,50,.34), inset 0 0 25px rgba(30,150,215,.08) !important; } /* ========================================================= MOVING TERMS BORDER ========================================================= */ .terms-content:before { background: linear-gradient( 90deg, #087fc1, #54d8ff, #ffffff, #159bd5, #0875ad, #ffffff, #54d8ff, #087fc1 ) !important; background-size: 300% 100% !important; } /* ========================================================= TERMS WATER SHINE ========================================================= */ .water-shine { background: linear-gradient( 90deg, transparent 0%, rgba(54,193,255,.02) 10%, rgba(92,210,255,.08) 25%, rgba(149,228,255,.16) 40%, rgba(255,255,255,.35) 50%, rgba(149,228,255,.16) 60%, rgba(92,210,255,.08) 75%, transparent 100% ) !important; } /* ========================================================= TERMS BUBBLES ========================================================= */ .term-bubble { border: 2px solid rgba(82,203,255,.48) !important; background: radial-gradient( circle at 30% 25%, rgba(255,255,255,.75) 0%, rgba(113,221,255,.24) 20%, rgba(22,138,205,.10) 55%, transparent 78% ) !important; box-shadow: inset 0 0 5px rgba(255,255,255,.45), 0 0 7px rgba(43,181,239,.20) !important; } /* ========================================================= TERMS SPARKLES ========================================================= */ .term-spark { color: #74ddff !important; text-shadow: 0 0 5px #ffffff, 0 0 12px rgba(54,199,255,.85) !important; } /* ========================================================= TERM ROWS ========================================================= */ .term-rule { color: #e7f8ff !important; border-bottom: 1px solid rgba(95,200,255,.16) !important; } .term-rule:hover { background: rgba(38, 145, 205, .18) !important; } /* ========================================================= PIRATE ICON ========================================================= */ .pirate-icon { background: linear-gradient( 145deg, #49c7f7, #0875ad 55%, #054b82 ) !important; border: 1px solid rgba(181,235,255,.72) !important; box-shadow: 0 0 12px rgba(43,184,242,.30), inset 0 1px 4px rgba(255,255,255,.25) !important; } /* ========================================================= WITHDRAW WHITE TEXT ========================================================= */ .centerWhiteBold { color: #ffffff !important; text-shadow: 0 2px 3px rgba(0,20,55,.65) !important; } .tickBlue { color: #73dcff !important; text-shadow: 0 0 7px rgba(64,199,255,.45) !important; } /* ========================================================= GENERAL TERMS BOX ========================================================= */ .box { color: #e8f8ff !important; background: linear-gradient( 135deg, rgba(19,117,178,.28), rgba(3,46,83,.42) ) !important; border: 1px solid rgba(98,205,255,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,20,45,.15) !important; text-shadow: 0 1px 2px rgba(0,15,40,.55) !important; } /* ========================================================= SHIP ========================================================= */ .pirate-ship { filter: drop-shadow( 0 4px 4px rgba(0,20,50,.45) ) !important; } /* ========================================================= BACK WAVE ========================================================= */ .wave-back { background: rgba(75, 196, 242, .30) !important; box-shadow: inset 0 8px 18px rgba(136,225,255,.06) !important; } /* ========================================================= FRONT WAVE ========================================================= */ .wave-front { background: linear-gradient( 90deg, rgba(3,70,130,.78), rgba(5,114,177,.80), rgba(4,78,141,.78) ) !important; box-shadow: inset 0 4px 12px rgba(74,201,255,.12) !important; } /* ========================================================= FOAM ========================================================= */ .wave-foam { background: linear-gradient( 90deg, transparent, rgba(105,220,255,.35), rgba(255,255,255,.80), rgba(105,220,255,.42), transparent, rgba(255,255,255,.65), transparent ) !important; filter: drop-shadow( 0 0 4px rgba(78,205,255,.35) ) !important; } .btn-red-promo { color: #075f8d !important; background: linear-gradient( 180deg, #e9fbff 0%, #bcefff 38%, #72dfff 72%, #43c8f4 100% ) !important; border: 1px solid rgba(255,255,255,.95) !important; box-shadow: 0 5px 14px rgba(0,130,190,.22), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 5px rgba(0,140,200,.10) !important; text-shadow: 0 1px 0 rgba(255,255,255,.8) !important; border-radius: 10px !important; font-weight: 900 !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } .btn-red-promo:hover { color: #054f78 !important; background: linear-gradient( 180deg, #ffffff 0%, #d8f7ff 32%, #8be5ff 68%, #32bfe9 100% ) !important; border-color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 7px 18px rgba(0,145,205,.30), 0 0 12px rgba(90,215,255,.28), inset 0 1px 0 #ffffff !important; } .btn-red-promo:active { transform: scale(.97) !important; } /* ========================================== JOIN NOW — LIGHT OCEAN BLUE ========================================== */ .home_join_login .home_to_join { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 105px !important; height: 40px !important; padding: 0 18px !important; border-radius: 10px !important; color: #075f8d !important; background: linear-gradient( 180deg, #f3fdff 0%, #c9f3ff 35%, #84e3ff 70%, #45c8f3 100% ) !important; border: 1px solid rgba(255,255,255,.95) !important; box-shadow: 0 5px 14px rgba(0,140,200,.22), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 5px rgba(0,135,195,.10) !important; font-size: 13px !important; font-weight: 900 !important; text-decoration: none !important; text-shadow: 0 1px 0 rgba(255,255,255,.8) !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } /* JOIN NOW HOVER */ .home_join_login .home_to_join:hover { background: linear-gradient( 180deg, #ffffff 0%, #ddf8ff 35%, #9beaff 70%, #59d4f7 100% ) !important; transform: translateY(-2px) !important; box-shadow: 0 7px 18px rgba(0,145,205,.30), 0 0 12px rgba(85,215,255,.28), inset 0 1px 0 #ffffff !important; } /* ========================================== LOGIN — DEEP OCEAN / SAPPHIRE BLUE ========================================== */ .home_join_login .home_to_login { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 105px !important; height: 40px !important; padding: 0 18px !important; border-radius: 10px !important; color: #ffffff !important; background: linear-gradient( 180deg, #159bd5 0%, #0875ad 42%, #055b91 70%, #033e6d 100% ) !important; border: 1px solid rgba(99,210,255,.65) !important; box-shadow: 0 6px 15px rgba(0,72,125,.34), 0 0 10px rgba(0,145,215,.15), inset 0 1px 0 rgba(255,255,255,.22) !important; font-size: 13px !important; font-weight: 900 !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0,20,50,.5) !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } /* LOGIN HOVER */ .home_join_login .home_to_login:hover { background: linear-gradient( 180deg, #28baf0 0%, #0b88c2 42%, #08669e 72%, #044a7d 100% ) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 19px rgba(0,95,155,.42), 0 0 14px rgba(55,200,255,.25), inset 0 1px 0 rgba(255,255,255,.28) !important; } /* ========================================== BUTTON WRAPPER ========================================== */ .home_join_login { display: flex !important; align-items: center !important; gap: 10px !important; } /* CLICK EFFECT */ .home_join_login a:active { transform: scale(.97) !important; } /* ========================================================= REGISTRATION PAGE — LIGHT OCEAN BLUE THEME ========================================================= */ #registrationPage { --ocean-light: #dff8ff; --ocean-soft: #bcefff; --ocean-mid: #7edcff; --ocean: #32bfe9; --ocean-dark: #0875ad; --text-blue: #000; color: var(--text-blue) !important; } /* ========================================================= MAIN REGISTER CONTAINER ========================================================= */ #registrationPage .reg-step-container { position: relative !important; padding: 22px 18px !important; border-radius: 20px !important; background: radial-gradient( circle at 85% 5%, rgba(255,255,255,.8), transparent 30% ), linear-gradient( 180deg, #f8feff 0%, #e9faff 38%, #d5f5ff 100% ) !important; border: 1px solid rgba(118,215,250,.75) !important; box-shadow: 0 12px 30px rgba(20,145,200,.15), inset 0 1px 0 rgba(255,255,255,.95) !important; } /* ========================================================= TITLE ========================================================= */ #registrationPage .form-title { color: #0875ad !important; font-size: 20px !important; font-weight: 900 !important; text-align: center !important; text-shadow: 0 1px 0 #ffffff, 0 2px 4px rgba(25,145,200,.12) !important; } /* ========================================================= PROGRESS BAR ========================================================= */ #registrationPage .reg-progress-bar-section { display: flex !important; align-items: center !important; justify-content: center !important; } #registrationPage .step-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; color: #0875ad !important; background: linear-gradient( 180deg, #ffffff 0%, #d9f7ff 100% ) !important; border: 2px solid #73d9f7 !important; box-shadow: 0 3px 10px rgba(16,155,210,.18), inset 0 1px 0 #ffffff !important; font-weight: 900 !important; } /* ACTIVE STEP */ #registrationPage .step-wrapper.on, #registrationPage .step-wrapper.current-step { color: #ffffff !important; background: linear-gradient( 180deg, #7ee6ff 0%, #32bfe9 50%, #159bd5 100% ) !important; border-color: #ffffff !important; box-shadow: 0 4px 12px rgba(20,160,215,.32), 0 0 12px rgba(80,215,255,.28), inset 0 1px 0 rgba(255,255,255,.6) !important; } /* CHECK ICON */ #registrationPage .step-wrapper svg { width: 15px !important; height: 15px !important; } #registrationPage .step-wrapper svg path { fill: #0875ad !important; } #registrationPage .step-wrapper.on svg path { fill: #ffffff !important; } /* PROGRESS LINE */ #registrationPage .progressBar { width: 70px !important; height: 4px !important; margin: 0 6px !important; border-radius: 999px !important; background: linear-gradient( 90deg, #9fe8fa, #55cef2 ) !important; box-shadow: inset 0 1px 2px rgba(0,90,140,.12) !important; } /* ========================================================= FORM FIELD ========================================================= */ #registrationPage .standard-form-field { margin-bottom: 8px !important; } /* ========================================================= FIELD WRAPPER ========================================================= */ #registrationPage .standard-form-field-wrapper { position: relative !important; border-radius: 11px !important; background: linear-gradient( 180deg, #ffffff 0%, #f0fbff 100% ) !important; border: 1px solid #9ee8fa !important; box-shadow: inset 0 1px 3px rgba(0,110,160,.06), 0 3px 10px rgba(0,130,180,.08) !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important; } /* FOCUS */ #registrationPage .standard-form-field-wrapper:focus-within { border-color: #32bfe9 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(50,191,233,.12), 0 5px 14px rgba(20,145,200,.12) !important; } /* ========================================================= INPUT ========================================================= */ #registrationPage .standard-input { width: 100% !important; color: #000 !important; background: transparent !important; border: none !important; outline: none !important; font-weight: 600 !important; } #registrationPage .standard-input::placeholder { color: #000 !important; opacity: 1 !important; } .gamelobby-content .games-tab-content .game-title{ color:#fff!important; } #pageHome #homePage .home_firmcontent_box .home_firmcontent{ background: linear-gradient( 135deg, #B9F4FF 0%, #E9FCFF 25%, #FFFFFF 48%, #D9F9FF 70%, #9EEBFA 100% ); } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li a span{ color: #061A4A; font-weight: 900; text-shadow: 0 1px 1px rgba(255,255,255,0.7); } /* ========================================================= LABEL ========================================================= */ #registrationPage .standard-label { color: #0875ad !important; font-size: 12px !important; font-weight: 800 !important; margin-bottom: 6px !important; } /* ========================================================= PASSWORD EYE ========================================================= */ #registrationPage .standard-password-eye { fill: #000 !important; opacity: .8 !important; transition: opacity .2s ease, fill .2s ease !important; } #registrationPage .standard-password-eye:hover { fill: #0875ad !important; opacity: 1 !important; } /* ========================================================= SELECT ========================================================= */ #registrationPage .standard-select { color: #0875ad !important; background: linear-gradient( 180deg, #ffffff, #e7f9ff ) !important; border: 1px solid #9ee8fa !important; border-radius: 10px !important; font-weight: 800 !important; } /* SELECT ARROW */ #registrationPage .standard-select-arrow { border-top-color: #159bd5 !important; } /* DROPDOWN */ #registrationPage .standard-select-dropdown { background: #f8fdff !important; border: 1px solid #90dff7 !important; border-radius: 10px !important; box-shadow: 0 8px 20px rgba(0,120,180,.16) !important; } #registrationPage .standard-select-options { color: #000 !important; } #registrationPage .standard-select-options:hover, #registrationPage .standard-select-options.active { color: #ffffff !important; background: linear-gradient( 90deg, #59d7f7, #32bfe9 ) !important; } /* ========================================================= ERROR MESSAGE ========================================================= */ #registrationPage .standard-error-validation, #registrationPage .text-danger { color: #e54e5f !important; font-size: 11px !important; font-weight: 600 !important; margin-top: 5px !important; } /* ========================================================= NEXT / REGISTER BUTTON ========================================================= */ #registrationPage .standard-submit-form-button { color: #ffffff !important; min-height: 42px !important; border-radius: 11px !important; background: linear-gradient( 180deg, #77e3ff 0%, #32bfe9 48%, #159bd5 100% ) !important; border: 1px solid rgba(255,255,255,.95) !important; box-shadow: 0 6px 15px rgba(20,150,210,.28), inset 0 1px 0 rgba(255,255,255,.7) !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(0,80,130,.30) !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } /* BUTTON HOVER */ #registrationPage .standard-submit-form-button:hover:not(:disabled) { background: linear-gradient( 180deg, #a0edff 0%, #55cef2 45%, #159bd5 100% ) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 19px rgba(20,150,210,.34), 0 0 12px rgba(72,210,255,.22) !important; } /* DISABLED BUTTON */ #registrationPage .standard-submit-form-button:disabled { color: #77a5b6 !important; background: linear-gradient( 180deg, #edfaff, #d2f1fa ) !important; border: 1px solid #bae7f2 !important; box-shadow: inset 0 1px 0 #ffffff !important; text-shadow: none !important; opacity: .75 !important; } /* ========================================================= BACK BUTTON ========================================================= */ #registrationPage .back-button { width: 42px !important; height: 42px !important; border-radius: 11px !important; background: linear-gradient( 180deg, #ffffff, #d9f5ff ) !important; border: 1px solid #9be4f7 !important; box-shadow: 0 4px 12px rgba(0,130,180,.12) !important; } #registrationPage .back-button svg path { fill: #0875ad !important; } /* ========================================================= NOTICE ========================================================= */ #registrationPage .reg-notice-section { margin-top: 18px !important; padding: 12px !important; border-radius: 12px !important; color: #000 !important; background: rgba(220,247,255,.65) !important; border: 1px solid rgba(107,210,243,.42) !important; font-size: 11px !important; line-height: 1.5 !important; } /* ========================================================= TERMS LINK ========================================================= */ #registrationPage .reg-notice-section .text-info { color: #0875ad !important; font-weight: 900 !important; text-decoration: none !important; } /* ========================================================= ALREADY HAVE ACCOUNT ========================================================= */ #registrationPage .prompt-login-section { margin-top: 14px !important; text-align: center !important; color: #000 !important; } #registrationPage .prompt-login-section a { color: #0875ad !important; font-weight: 900 !important; text-decoration: none !important; } #registrationPage .prompt-login-section a:hover { color: #159bd5 !important; } /* ========================================================= CAPTCHA ========================================================= */ #registrationPage .dob-field img { border: 1px solid #9ee8fa !important; border-radius: 8px !important; box-shadow: 0 3px 9px rgba(0,120,175,.12) !important; } /* ========================================================= BUTTON SECTION ========================================================= */ #registrationPage .transaction-button-section { margin-top: 20px !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { #registrationPage .reg-step-container { padding: 18px 14px !important; border-radius: 16px !important; } #registrationPage .form-title { font-size: 18px !important; } #registrationPage .step-wrapper { width: 31px !important; height: 31px !important; } #registrationPage .progressBar { width: 48px !important; } #registrationPage .standard-submit-form-button { min-height: 40px !important; } } /* ========================================================= LOGIN PAGE — LIGHT OCEAN BLUE ========================================================= */ #loginPage.theme1 { --ocean-white: #f8fdff; --ocean-ice: #e8faff; --ocean-light: #c9f3ff; --ocean-soft: #91e5fb; --ocean-main: #32bfe9; --ocean-mid: #159bd5; --ocean-deep: #0875ad; --ocean-text: #000; min-height: 100% !important; padding: 24px 18px !important; background: radial-gradient( circle at 85% 5%, rgba(255,255,255,.95), transparent 28% ), linear-gradient( 180deg, #ffffff 0%, #eefbff 42%, #dff7ff 100% ) !important; color: var(--ocean-text) !important; } /* ========================================================= LOGO ========================================================= */ #loginPage .logo_big { text-align: center !important; margin-bottom: 24px !important; } #loginPage .logo_big img { max-width: 190px !important; border-radius: 12px !important; filter: drop-shadow( 0 5px 12px rgba(0,130,180,.12) ) !important; } /* ========================================================= LOGIN CARD ========================================================= */ #loginPage .login_centent { position: relative !important; padding: 22px 18px !important; border-radius: 20px !important; background: radial-gradient( circle at 90% 0%, rgba(255,255,255,.92), transparent 30% ), linear-gradient( 180deg, #ffffff 0%, #f2fcff 50%, #e1f8ff 100% ) !important; border: 1px solid #a8e8f8 !important; box-shadow: 0 12px 28px rgba(0,126,180,.13), inset 0 1px 0 #ffffff !important; } /* ========================================================= INPUT ROW ========================================================= */ #loginPage .login_centent_item.input_item { align-items: center !important; gap: 10px !important; margin-bottom: 15px !important; } /* ========================================================= LEFT ICON ========================================================= */ #loginPage .login_centent_item.input_item > label { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 11px !important; background: linear-gradient( 180deg, #eafdff 0%, #c8f1fc 100% ) !important; border: 1px solid #a0e4f5 !important; box-shadow: 0 3px 9px rgba(0,130,180,.08), inset 0 1px 0 #ffffff !important; } #loginPage .login_centent_item label .icons { color: #159bd5 !important; filter: brightness(0) saturate(100%) invert(55%) sepia(80%) saturate(650%) hue-rotate(155deg) brightness(92%) !important; } /* ========================================================= INPUT WRAPPER ========================================================= */ #loginPage .standard-form-field-wrapper { position: relative !important; flex: 1 !important; min-height: 43px !important; border-radius: 11px !important; background: linear-gradient( 180deg, #ffffff 0%, #f4fcff 100% ) !important; border: 1px solid #a7e5f5 !important; box-shadow: 0 3px 9px rgba(0,124,175,.07), inset 0 1px 2px rgba(0,120,170,.03) !important; transition: border-color .2s ease, box-shadow .2s ease !important; } #loginPage .standard-form-field-wrapper:focus-within { border-color: #32bfe9 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(50,191,233,.12), 0 4px 12px rgba(0,135,190,.10) !important; } /* ========================================================= INPUT ========================================================= */ #loginPage .standard-input { width: 100% !important; color: #000 !important; background: transparent !important; border: none !important; outline: none !important; font-weight: 600 !important; } #loginPage .standard-input::placeholder { color: #83adbd !important; opacity: 1 !important; } /* ========================================================= PASSWORD EYE ========================================================= */ #loginPage .standard-password-eye { fill: #32bfe9 !important; opacity: .85 !important; } #loginPage .standard-password-eye:hover { fill: #0875ad !important; opacity: 1 !important; } /* ========================================================= REMEMBER ME ========================================================= */ #loginPage .rememberme-formgroup { display: flex !important; align-items: center !important; margin: 5px 0 18px !important; color: #000 !important; font-size: 12px !important; } #loginPage #rememberMe { accent-color: #32bfe9 !important; width: 16px !important; height: 16px !important; margin-right: 7px !important; } #loginPage .remember-me { color: #000 !important; font-weight: 600 !important; } /* ========================================================= LOGIN BUTTON ========================================================= */ #loginPage .login_btn .btn-blue { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 43px !important; border-radius: 11px !important; color: #ffffff !important; background: linear-gradient( 180deg, #7ee7ff 0%, #3bc7ec 48%, #159bd5 100% ) !important; border: 1px solid rgba(255,255,255,.95) !important; box-shadow: 0 6px 15px rgba(0,140,195,.24), inset 0 1px 0 rgba(255,255,255,.70) !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(0,85,130,.25) !important; cursor: pointer !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } #loginPage .login_btn .btn-blue:hover { transform: translateY(-2px) !important; background: linear-gradient( 180deg, #a0edff 0%, #55d5f4 45%, #159bd5 100% ) !important; box-shadow: 0 8px 18px rgba(0,140,195,.30), 0 0 12px rgba(74,211,247,.18) !important; } #loginPage .login_btn .btn-blue:active { transform: scale(.98) !important; } /* ========================================================= FORGOT PASSWORD ========================================================= */ #loginPage .login_forgetpsd { margin-top: 14px !important; text-align: center !important; } #loginPage .login_forgetpsd a { color: #0875ad !important; font-size: 12px !important; font-weight: 800 !important; text-decoration: none !important; } #loginPage .login_forgetpsd a:hover { color: #32bfe9 !important; } /* ========================================================= REGISTER AREA ========================================================= */ #loginPage .login_toreg { margin-top: 16px !important; padding: 13px !important; border-radius: 12px !important; text-align: center !important; color: #000 !important; background: linear-gradient( 180deg, rgba(239,251,255,.92), rgba(216,246,253,.85) ) !important; border: 1px solid #b5e8f4 !important; font-size: 12px !important; } #loginPage .login_toreg .m-register-link { color: #0875ad !important; font-weight: 900 !important; text-decoration: none !important; margin: 0 3px !important; } #loginPage .login_toreg .m-register-link:hover { color: #32bfe9 !important; } /* ========================================================= LOGIN ERROR ========================================================= */ #loginPage #loginErr { margin-bottom: 14px !important; padding: 10px 12px !important; border-radius: 10px !important; background: #fff2f4 !important; border: 1px solid #ffc1c8 !important; box-shadow: 0 3px 8px rgba(210,70,90,.08) !important; } #loginPage #loginErr, #loginPage #loginErr div { color: #d84858 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:600px) { #loginPage.theme1 { padding: 18px 14px !important; } #loginPage .login_centent { padding: 18px 14px !important; border-radius: 16px !important; } #loginPage .logo_big img { max-width: 415px !important; } #loginPage .login_centent_item.input_item > label { width: 40px !important; height: 40px !important; flex-basis: 40px !important; } #loginPage .standard-form-field-wrapper { min-height: 40px !important; } #loginPage .login_btn .btn-blue { min-height: 41px !important; } } /* ========================================================= HOME NAV — LIGHT OCEAN BLUE ========================================================= */ .home_nav.tabs { display: flex !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; padding: 8px 10px !important; overflow-x: auto !important; overflow-y: hidden !important; background: linear-gradient( 180deg, #f8fdff 0%, #e9faff 50%, #d9f5ff 100% ) !important; border-top: 1px solid rgba(126, 220, 248, .55) !important; border-bottom: 1px solid rgba(126, 220, 248, .55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 15px rgba(0,125,180,.08) !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } /* HIDE SCROLLBAR */ .home_nav.tabs::-webkit-scrollbar { display: none !important; } /* ========================================================= NAV ITEM ========================================================= */ .home_nav.tabs > li { flex: 0 0 auto !important; min-width: 78px !important; list-style: none !important; } /* ========================================================= BUTTON ========================================================= */ .home_nav.tabs .firmCategory { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-width: 78px !important; min-height: 72px !important; padding: 8px 9px !important; border-radius: 12px !important; color: #4f8298 !important; text-decoration: none !important; background: linear-gradient( 180deg, #ffffff 0%, #eefbff 100% ) !important; border: 1px solid #b7eaf6 !important; box-shadow: 0 4px 10px rgba(0,125,175,.08), inset 0 1px 0 rgba(255,255,255,.95) !important; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease !important; } /* ========================================================= ICON AREA ========================================================= */ .home_nav.tabs .firmCategory .i { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: linear-gradient( 180deg, #e9fbff, #c8f2fc ) !important; border: 1px solid rgba(120,215,245,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px rgba(0,125,180,.08) !important; } /* ICON */ .home_nav.tabs .firmCategory .icon { transition: transform .2s ease, filter .2s ease !important; } /* ========================================================= TEXT ========================================================= */ .home_nav.tabs .firmCategory span { color: inherit !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: center !important; } /* ========================================================= ACTIVE TAB ========================================================= */ .home_nav.tabs .firmCategory.on { color: #ffffff !important; background: linear-gradient( 180deg, #7fe7ff 0%, #32bfe9 48%, #159bd5 100% ) !important; border: 1px solid rgba(255,255,255,.92) !important; box-shadow: 0 6px 15px rgba(0,145,200,.26), 0 0 12px rgba(77,210,248,.18), inset 0 1px 0 rgba(255,255,255,.65) !important; transform: translateY(-1px) !important; text-shadow: 0 1px 2px rgba(0,90,140,.30) !important; } /* ACTIVE ICON CIRCLE */ .home_nav.tabs .firmCategory.on .i { background: linear-gradient( 180deg, rgba(255,255,255,.95), rgba(215,247,255,.90) ) !important; border: 1px solid rgba(255,255,255,.95) !important; box-shadow: 0 4px 10px rgba(0,105,160,.18), inset 0 1px 0 #ffffff !important; } /* ========================================================= HOVER ========================================================= */ .home_nav.tabs .firmCategory:hover { transform: translateY(-2px) !important; background: linear-gradient( 180deg, #ffffff 0%, #dcf8ff 100% ) !important; color: #0875ad !important; border-color: #82dcf3 !important; box-shadow: 0 6px 14px rgba(0,135,185,.13), inset 0 1px 0 #ffffff !important; } /* KEEP ACTIVE STYLE ON HOVER */ .home_nav.tabs .firmCategory.on:hover { color: #ffffff !important; background: linear-gradient( 180deg, #92ebff 0%, #42caed 45%, #159bd5 100% ) !important; } /* ICON HOVER */ .home_nav.tabs .firmCategory:hover .icon { transform: scale(1.08) !important; } /* ========================================================= ACTIVE BOTTOM INDICATOR ========================================================= */ .home_nav.tabs .firmCategory.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 3px; height: 3px !important; border-radius: 999px !important; background: linear-gradient( 90deg, transparent, #ffffff, transparent ) !important; box-shadow: 0 0 6px rgba(255,255,255,.45) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .home_nav.tabs { gap: 6px !important; padding: 7px 8px !important; } .home_nav.tabs > li { min-width: 70px !important; } .home_nav.tabs .firmCategory { min-width: 70px !important; min-height: 66px !important; padding: 7px 7px !important; border-radius: 10px !important; } .home_nav.tabs .firmCategory .i { width: 34px !important; height: 74px !important; } .home_nav.tabs .firmCategory span { font-size: 10px !important; } } /* ========================================== BOTTOM NAVBAR — LIGHT OCEAN BLUE ========================================== */ .navbar { display: flex !important; align-items: stretch !important; justify-content: space-around !important; width: 100% !important; padding: 6px 6px 8px !important; background: linear-gradient( 180deg, #f8fdff 0%, #e8faff 50%, #d7f5ff 100% ) !important; border-top: 1px solid rgba(126, 220, 248, .65) !important; box-shadow: 0 -4px 14px rgba(0, 120, 175, .10), inset 0 1px 0 rgba(255,255,255,.95) !important; } /* ========================================== NAV ITEM ========================================== */ .navbar li { flex: 1 1 0 !important; list-style: none !important; } /* ========================================== LINK ========================================== */ .navbar .botnavbar { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; min-height: 58px !important; padding: 6px 4px !important; border-radius: 11px !important; color: #5f8fa3 !important; text-decoration: none !important; background: transparent !important; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important; } /* ========================================== ICON AREA ========================================== */ .navbar .botnavbar .i { display: flex !important; align-items: center !important; justify-content: center !important; width: 41px !important; height: 34px !important; border-radius: 50% !important; background: linear-gradient( 180deg, #ffffff 0%, #ddf7ff 100% ) !important; border: 1px solid #a8e7f7 !important; box-shadow: 0 3px 8px rgba(0,125,180,.08), inset 0 1px 0 #ffffff !important; } /* ========================================== TEXT ========================================== */ .navbar .botnavbar span { color: inherit !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; } /* ========================================== ACTIVE ITEM ========================================== */ .navbar .botnavbar.on { color: #ffffff !important; background: linear-gradient( 180deg, #8be5ff 0%, #32bfe9 52%, #0875ad 100% ) !important; border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 5px 13px rgba(0,130,190,.22), inset 0 1px 0 rgba(255,255,255,.58) !important; transform: translateY(-2px) !important; text-shadow: 0 1px 2px rgba(0,70,120,.30) !important; } /* ACTIVE ICON */ .navbar .botnavbar.on .i { background: linear-gradient( 180deg, #ffffff 0%, #d8f8ff 100% ) !important; border-color: #ffffff !important; box-shadow: 0 4px 10px rgba(0,100,150,.20), inset 0 1px 0 #ffffff !important; } /* ========================================== ACTIVE INDICATOR ========================================== */ .navbar .botnavbar.on::after { content: ""; position: absolute; bottom: 2px; left: 25%; right: 25%; height: 3px !important; border-radius: 999px !important; background: linear-gradient( 90deg, transparent, #ffffff, transparent ) !important; box-shadow: 0 0 6px rgba(255,255,255,.55) !important; } /* ========================================== HOVER ========================================== */ .navbar .botnavbar:hover { color: #0875ad !important; background: linear-gradient( 180deg, #ffffff 0%, #e1f8ff 100% ) !important; transform: translateY(-1px) !important; } /* KEEP ACTIVE STYLE ON HOVER */ .navbar .botnavbar.on:hover { color: #ffffff !important; background: linear-gradient( 180deg, #9beaff 0%, #42caed 50%, #0875ad 100% ) !important; } /* ========================================== MOBILE ========================================== */ @media (max-width:600px) { .navbar { padding: 5px 4px 7px !important; } .navbar .botnavbar { min-height: 55px !important; padding: 5px 2px !important; } .navbar .botnavbar .i { width: 41px !important; height: 31px !important; } .navbar .botnavbar span { font-size: 9px !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(./img1824_u99kiss/u99_tele.jpg?v=8) !important; } .headertitle-secondarybanner .banner-img { background-image: url(./img1824_u99kiss/u99_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(./img1824_u99kiss/uvip.png?v=8) !important; } /* 2 - UMENANG */ .partner-container .company-Myrs9sk .banner-img { background-image: url(./img1824_u99kiss/umenang.png?v=8) !important; } /* 3 - UCUCI */ .partner-container .company-myrs9lc .banner-img { background-image: url(./img1824_u99kiss/ucuci.png?v=8) !important; } /* 4 - ULUCKY */ .partner-container .company-myrs9gw .banner-img { background-image: url(./img1824_u99kiss/ulucky.png?v=8) !important; } /* 5 - UKAYA */ .partner-container .company-myrs9wt .banner-img { background-image: url(./img1824_u99kiss/ukaya.png?v=8) !important; } /* 6 - USUKA */ .partner-container .company-myrs9sw .banner-img { background-image: url(./img1824_u99kiss/usuka.png?v=8) !important; } /* ========================================================= LUCKY BOX - SAPPHIRE OCEAN + GOLD STYLE CSS ONLY - HTML STRUCTURE REMAINS UNCHANGED ========================================================= */ #luckybox_firmcontent { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.20) 0%, rgba(0, 132, 255, 0.10) 28%, transparent 55%), linear-gradient( 180deg, #06275a 0%, #031839 45%, #020c22 100% ) !important; border: 1px solid rgba(77, 216, 255, 0.55); border-radius: 16px; box-shadow: inset 0 0 25px rgba(0, 183, 255, 0.15), 0 0 12px rgba(0, 183, 255, 0.30), 0 8px 25px rgba(0, 0, 0, 0.35); padding-bottom: 14px; } /* subtle ocean glow */ #luckybox_firmcontent::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 25%, rgba(69, 220, 255, 0.18) 0 2px, transparent 3px), radial-gradient(circle at 82% 20%, rgba(255, 218, 92, 0.16) 0 2px, transparent 3px), radial-gradient(circle at 65% 68%, rgba(76, 217, 255, 0.12) 0 2px, transparent 3px); background-size: 55px 55px, 70px 70px, 85px 85px; animation: luckyOceanMove 8s linear infinite; opacity: .9; } @keyframes luckyOceanMove { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 55px 55px, -70px 70px, 85px -85px; } } /* ========================================================= BANNER AREA ========================================================= */ #luckybox_firmcontent .home_firms_tr { position: relative; z-index: 2; margin: 0 !important; padding: 10px 10px 6px !important; } #luckybox_firmcontent .game-item-luckyspin { position: relative; background: linear-gradient( 180deg, rgba(9, 75, 145, .72), rgba(2, 19, 52, .88) ); border: 1px solid rgba(82, 220, 255, 0.55); border-radius: 14px; box-shadow: inset 0 0 18px rgba(0, 206, 255, .15), 0 0 12px rgba(0, 174, 255, .28); padding: 7px; } /* image / icon glow */ #luckybox_firmcontent .game-item-luckyspin .i { border-radius: 12px; filter: drop-shadow(0 0 5px rgba(76, 217, 255, .45)) drop-shadow(0 0 9px rgba(34, 132, 255, .25)); transition: .3s ease; } #luckybox_firmcontent .game-item-luckyspin:hover .i { filter: drop-shadow(0 0 7px rgba(120, 235, 255, .70)) drop-shadow(0 0 14px rgba(30, 136, 255, .45)); } /* ========================================================= PLAY NOW BUTTON ========================================================= */ #luckybox_firmcontent .spinplaynow-btn { position: relative; overflow: hidden; background: linear-gradient( 180deg, #fff4ae 0%, #ffd44d 34%, #e8a817 70%, #a86606 100% ) !important; color: #06224c !important; border: 1px solid #ffe98e !important; border-radius: 9px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.80), inset 0 -2px 5px rgba(112,69,0,.30), 0 0 6px rgba(255,203,45,.65), 0 0 14px rgba(255,181,0,.35); font-weight: 900 !important; letter-spacing: .5px; text-shadow: 0 1px 0 rgba(255,255,255,.45); transition: .25s ease; } /* shine */ #luckybox_firmcontent .spinplaynow-btn::before { content: ""; position: absolute; top: -60%; left: -35%; width: 25%; height: 220%; background: rgba(255,255,255,.7); transform: rotate(25deg); filter: blur(2px); animation: luckyBtnShine 2.8s linear infinite; } @keyframes luckyBtnShine { 0% { left: -40%; opacity: 0; } 15% { opacity: 1; } 35% { left: 125%; opacity: 0; } 100% { left: 125%; opacity: 0; } } #luckybox_firmcontent .spinplaynow-btn:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 10px rgba(255,218,70,.85), 0 0 20px rgba(255,183,0,.45); } /* ========================================================= TICKET AREA ========================================================= */ #luckybox_firmcontent .lucky-spin_ticket { position: relative; z-index: 2; margin: 8px 10px !important; padding: 9px 12px !important; background: linear-gradient( 90deg, rgba(3, 35, 80, .95), rgba(7, 91, 155, .88), rgba(3, 35, 80, .95) ) !important; border: 1px solid rgba(96, 221, 255, .60); border-radius: 10px; color: #e8faff !important; box-shadow: inset 0 0 14px rgba(58, 207, 255, .16), 0 0 9px rgba(0, 184, 255, .28); } /* ticket icon */ #luckybox_firmcontent .lucky-spin_ticket .i { color: #ffd85c !important; text-shadow: 0 0 5px rgba(255, 218, 92, .75), 0 0 10px rgba(255, 174, 0, .50); } /* LUCKY BOX title */ #luckybox_firmcontent .lucky-spin_ticket .title { color: #ffffff !important; font-weight: 900; letter-spacing: .7px; text-shadow: 0 0 4px #3cddff, 0 0 8px rgba(0, 175, 255, .75); } /* ticket number */ #luckybox_firmcontent .lucky-spin_ticket .tk-count { display: inline-block; min-width: 25px; padding: 2px 8px; margin-left: 4px; border-radius: 20px; background: linear-gradient( 180deg, #fff7b2, #ffcb36 55%, #c17c04 ); color: #08254e !important; font-weight: 900; box-shadow: 0 0 6px rgba(255, 208, 56, .8), 0 0 12px rgba(255, 166, 0, .35); } /* ========================================================= RULE BOX ========================================================= */ #luckybox_firmcontent .lucky-spin_rule { position: relative; z-index: 2; margin: 9px 10px 2px !important; background: linear-gradient( 180deg, rgba(6, 35, 75, .96), rgba(2, 15, 39, .98) ); border: 1px solid rgba(70, 202, 255, .40); border-radius: 12px; box-shadow: inset 0 0 20px rgba(0, 170, 255, .10), 0 5px 14px rgba(0, 0, 0, .25); overflow: hidden; } /* gold top line */ #luckybox_firmcontent .lucky-spin_rule::before { content: ""; display: block; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, #68dcff, #fff3a5, #ffd24a, #68dcff, transparent ); box-shadow: 0 0 8px rgba(89, 217, 255, .75); } /* RULE TEXT */ #luckybox_firmcontent .lucky-spin_rule pre { margin: 0 !important; padding: 12px 13px 13px !important; background: transparent !important; color: #dff8ff !important; font-family: Arial, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.85 !important; white-space: pre-wrap !important; text-shadow: 0 0 4px rgba(64, 205, 255, .30); } /* highlight first line */ #luckybox_firmcontent .lucky-spin-rule, #luckybox_firmcontent pre { border: 0 !important; } /* HEADER COLOR ONLY - OCEAN / SAPPHIRE + GOLD */ .header.header1.defaultnavbar { background: linear-gradient( 180deg, #0b5aa5 0%, #073d7d 45%, #041f4d 100% ) !important; border-bottom: 1px solid rgba(255, 215, 75, .55) !important; box-shadow: inset 0 -1px 0 rgba(80, 220, 255, .18), 0 2px 10px rgba(0, 40, 95, .28) !important; } /* left menu icon */ /* center logo area */ .header.header1.defaultnavbar .center { background: transparent !important; } /* hover / active color only */ .header.header1.defaultnavbar .btn-partnership:hover, .header.header1.defaultnavbar .btn-partnership:active { background: linear-gradient( 180deg, #178ed3 0%, #0757a5 55%, #033268 100% ) !important; color: #ffffff !important; border-color: #ffe57a !important; box-shadow: inset 0 0 10px rgba(75, 225, 255, .20), 0 0 8px rgba(255, 215, 65, .35) !important; } /* ========================================================= LEFT SIDE MENU FONT ICONS + SAPPHIRE / OCEAN BLUE / GOLD HTML STRUCTURE UNCHANGED ========================================================= */ /* MAIN PANEL COLOR */ #leftmenu.sidemenu, #leftmenu .ui-panel-inner { background: linear-gradient( 180deg, #084c91 0%, #06366d 35%, #031f49 70%, #02132f 100% ) !important; color: #fff !important; } /* ========================================================= TOP LOGO AREA ========================================================= */ #leftmenu .sidemenu-logo { background: linear-gradient( 180deg, #0b5da7 0%, #063d79 100% ) !important; border-bottom: 1px solid rgba(255, 216, 82, .55) !important; box-shadow: 0 3px 10px rgba(0, 28, 72, .35), inset 0 -1px 0 rgba(79, 221, 255, .15); } /* back icon image recolor */ #leftmenu .sidemenu-back-logo img { filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(86, 219, 255, .55)); } /* ========================================================= MENU ROW ========================================================= */ #leftmenu ul li { background: transparent !important; border-bottom: 1px solid rgba(85, 190, 235, .16) !important; } #leftmenu ul li a { background: linear-gradient( 90deg, rgba(8, 72, 133, .30), rgba(2, 28, 68, .15) ) !important; color: #e9faff !important; } /* hover */ #leftmenu ul li a:hover, #leftmenu ul li a:active { background: linear-gradient( 90deg, rgba(15, 135, 205, .65), rgba(5, 72, 140, .45) ) !important; box-shadow: inset 3px 0 0 #ffd657, inset 0 0 15px rgba(53, 207, 255, .12); } /* TEXT */ #leftmenu .sm-item .title { color: #eefcff !important; text-shadow: 0 1px 2px rgba(0,0,0,.50); } #leftmenu ul li a:hover .title { color: #fff2ad !important; text-shadow: 0 0 5px rgba(255, 213, 65, .38); } /* ========================================================= REMOVE ORIGINAL IMAGE / SPRITE ICONS ========================================================= */ #leftmenu .sm-item > .icon { background: none !important; background-image: none !important; font-size: 0 !important; width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center; justify-content: center; color: transparent !important; } /* ========================================================= COMMON FONT AWESOME ICON STYLE ========================================================= */ #leftmenu .sm-item > .icon::before { font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-size: 18px !important; color: #68ddff !important; line-height: 1; text-shadow: 0 0 4px rgba(81, 219, 255, .80), 0 0 8px rgba(0, 139, 255, .35); transition: .25s ease; } /* ========================================================= INDIVIDUAL ICONS ========================================================= */ /* HOME */ #leftmenu .list-item-home .icon::before { content: "\f015"; } /* PROMOTION / GIFT */ #leftmenu .list-item-promotion .icon::before { content: "\f06b"; } /* ABOUT US */ #leftmenu .list-item-aboutus .icon::before { content: "\f129"; } /* INFO CENTRE */ #leftmenu .list-item-infocentre .icon::before { content: "\f02d"; } /* DOWNLOAD */ #leftmenu .list-item-gamesappdownload .icon::before { content: "\f019"; } /* CONTACT US */ #leftmenu .list-item-contactus .icon::before { content: "\f2b9"; } /* LANGUAGE */ #leftmenu .list-item-language .icon::before { content: "\f1ab"; } /* ========================================================= HOVER ICON = GOLD ========================================================= */ #leftmenu ul li a:hover .icon::before, #leftmenu ul li a:active .icon::before { color: #ffd75a !important; text-shadow: 0 0 5px rgba(255, 218, 82, .85), 0 0 11px rgba(255, 170, 0, .40); } /* ========================================================= OPTIONAL ACTIVE PAGE ========================================================= */ #leftmenu ul li.active > a, #leftmenu ul li.on > a { background: linear-gradient( 90deg, #0a7fc1 0%, #075197 55%, #05386f 100% ) !important; box-shadow: inset 3px 0 0 #ffd85a, inset 0 0 14px rgba(74, 218, 255, .15); } #leftmenu ul li.active .icon::before, #leftmenu ul li.on .icon::before { color: #ffd95c !important; text-shadow: 0 0 5px rgba(255, 218, 82, .8), 0 0 10px rgba(255, 178, 0, .35); } #leftmenu ul li.active .title, #leftmenu ul li.on .title { color: #fff3ae !important; } /* ========================================= FIX PROVIDER LOGO NOT SHOWING ========================================= */ .product-filter .logo-img { display: flex !important; align-items: center !important; justify-content: center !important; /* use darker background so provider logo stays visible */ background: linear-gradient( 180deg, #0d66aa 0%, #07457f 55%, #032b5d 100% ) !important; border: 1px solid rgba(86, 218, 255, .55) !important; box-shadow: inset 0 0 8px rgba(65, 211, 255, .12), 0 0 6px rgba(0, 157, 220, .20) !important; } /* IMPORTANT: DO NOT MODIFY PROVIDER SPRITE */ .product-filter .logo-img .provider, .product-filter .logo-img .provider-top, .product-filter .logo-img .logo-jdb-icon { display: inline-block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; /* preserve original sprite */ background-color: transparent !important; transform: none !important; } /* FILTER BUTTON COLOR */ .product-filter .button-filter { background: linear-gradient( 180deg, #55dfff 0%, #159ed6 50%, #0872ad 100% ) !important; border: 1px solid rgba(255,255,255,.65) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 8px rgba(43, 202, 255, .30) !important; } /* ACTIVE / OPEN */ .product-filter .button-filter[aria-expanded="true"] { background: linear-gradient( 180deg, #fff2a2 0%, #ffd350 50%, #c98b0b 100% ) !important; color: #073768 !important; border-color: #ffe982 !important; } .product-filter .button-filter[aria-expanded="true"] .fa-filter { color: #073768 !important; } /* ========================================= GAME SEARCH INPUT OCEAN BLUE + GOLD STRUCTURE UNCHANGED ========================================= */ .input-group.row { background: linear-gradient( 180deg, rgba(7, 69, 128, .95) 0%, rgba(4, 42, 86, .96) 100% ) !important; border-top: 1px solid rgba(83, 215, 255, .35); border-bottom: 1px solid rgba(255, 213, 75, .28); box-shadow: inset 0 0 12px rgba(0, 190, 255, .08); } /* SEARCH INPUT */ .input-group .filter-gamecode { background: linear-gradient( 180deg, #f7fdff 0%, #dff7ff 100% ) !important; color: #073a68 !important; border: 1px solid #66d7f5 !important; border-radius: 8px 0 0 8px !important; outline: none !important; box-shadow: inset 0 1px 3px rgba(0, 76, 120, .10), 0 0 5px rgba(54, 200, 245, .18) !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* PLACEHOLDER */ .input-group .filter-gamecode::placeholder { color: #000 !important; opacity: 1; } /* INPUT FOCUS */ .input-group .filter-gamecode:focus { background: #ffffff !important; border-color: #ffd95a !important; box-shadow: inset 0 1px 3px rgba(0, 70, 115, .08), 0 0 5px rgba(255, 216, 80, .55), 0 0 10px rgba(51, 204, 255, .30) !important; } /* ========================================= SEARCH BUTTON ========================================= */ .input-group-button .button-style-1 { height: 100%; background: linear-gradient( 180deg, #55dfff 0%, #159fd8 50%, #0872ad 100% ) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.65) !important; border-radius: 0 8px 8px 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 7px rgba(40, 198, 245, .25) !important; transition: filter .2s ease, box-shadow .2s ease; } /* SEARCH ICON */ .input-group-button .button-style-1 .fa-search { color: #ffffff !important; text-shadow: 0 0 4px rgba(116, 229, 255, .80), 0 1px 2px rgba(0, 48, 90, .50); } /* HOVER */ .input-group-button .button-style-1:hover { background: linear-gradient( 180deg, #fff3a7 0%, #ffd653 50%, #c98b0d 100% ) !important; border-color: #ffe67a !important; box-shadow: 0 0 7px rgba(255, 214, 75, .65), 0 0 12px rgba(255, 175, 0, .25) !important; } .input-group-button .button-style-1:hover .fa-search { color: #073969 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55); } /* ========================================================= GAME PROVIDER SWIPER SAPPHIRE / OCEAN BLUE + GOLD KEEP ORIGINAL STRUCTURE ========================================================= */ .gamelogo-scroll-menu { position: relative; background: linear-gradient( 180deg, #0a589f 0%, #063b78 50%, #032552 100% ) !important; border-top: 1px solid rgba(82, 214, 255, .35); border-bottom: 1px solid rgba(255, 214, 75, .40); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0, 35, 80, .25); padding-top: 7px; padding-bottom: 7px; } /* ========================================================= SWIPER ========================================================= */ .gamelogo-scroll-menu .swiper { background: transparent !important; } .gamelogo-scroll-menu .swiper-wrapper { align-items: center; } /* ========================================================= PROVIDER CARD ========================================================= */ .gamelogo-scroll-menu .swiper-slide .button-style-1 { position: relative; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient( 180deg, rgba(19, 115, 181, .95) 0%, rgba(7, 70, 128, .98) 52%, rgba(3, 42, 87, .98) 100% ) !important; border: 1px solid rgba(80, 211, 255, .50) !important; border-radius: 10px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 9px rgba(58, 207, 255, .08), 0 3px 7px rgba(0, 24, 62, .25) !important; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease; } /* ========================================================= IMPORTANT: KEEP ORIGINAL PROVIDER SPRITE / LOGO ========================================================= */ .gamelogo-scroll-menu .provider { display: inline-block !important; visibility: visible !important; opacity: 1 !important; /* don't recolor provider logos */ filter: none !important; /* keep original sprite settings */ transform: none; background-color: transparent !important; } /* ========================================================= ACTIVE PROVIDER ========================================================= */ /* active subtle glow */ .gamelogo-scroll-menu .swiper-slide-active { z-index: 3; } .gamelogo-scroll-menu .swiper-slide-active .button-style-1::after { content: ""; position: absolute; inset: 2px; pointer-events: none; border-radius: 7px; border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 0 7px rgba(255, 241, 170, .20); } /* ========================================================= HOVER ========================================================= */ .gamelogo-scroll-menu .swiper-slide:not(.swiper-slide-active) .button-style-1:hover { background: linear-gradient( 180deg, #19a7df 0%, #087abd 52%, #04528e 100% ) !important; border-color: #78e3ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 7px rgba(60, 211, 255, .40), 0 4px 8px rgba(0, 40, 82, .26) !important; } /* ========================================================= PREVIOUS / NEXT BUTTON ========================================================= */ .gamelogo-scroll-menu .swiper-button-prev, .gamelogo-scroll-menu .swiper-button-next { background: linear-gradient( 180deg, #3dd6f5 0%, #159bd3 50%, #0871ac 100% ) !important; border: 1px solid rgba(255,255,255,.65); color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 7px rgba(40, 202, 255, .38), 0 3px 8px rgba(0, 30, 70, .28); transition: .2s ease; } /* swiper arrow color */ .gamelogo-scroll-menu .swiper-button-prev::after, .gamelogo-scroll-menu .swiper-button-next::after { color: #ffffff !important; text-shadow: 0 0 4px rgba(91, 221, 255, .75); font-weight: 900; } /* arrow hover */ .gamelogo-scroll-menu .swiper-button-prev:hover, .gamelogo-scroll-menu .swiper-button-next:hover { background: linear-gradient( 180deg, #fff3a9 0%, #ffd655 50%, #c88b0c 100% ) !important; border-color: #ffed93; box-shadow: 0 0 8px rgba(255, 218, 70, .65), 0 0 13px rgba(255, 174, 0, .30); } .gamelogo-scroll-menu .swiper-button-prev:hover::after, .gamelogo-scroll-menu .swiper-button-next:hover::after { color: #06396a !important; text-shadow: none; } /* ========================================================= DISABLED ARROW ========================================================= */ .gamelogo-scroll-menu .swiper-button-disabled { opacity: .35 !important; background: linear-gradient( 180deg, #54758c, #304e67 ) !important; box-shadow: none !important; } /* ========================================================= OPTIONAL SOFT OCEAN GLOW ========================================================= */ .gamelogo-scroll-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 30% 0%, rgba(70, 220, 255, .13), transparent 38% ), radial-gradient( circle at 80% 100%, rgba(255, 210, 66, .08), transparent 35% ); } /* ========================================================= TOP LIVE CASINO SAPPHIRE / OCEAN BLUE + GOLD COLOR & STYLE ONLY NO SIZE / POSITION / STRUCTURE CHANGES ========================================================= */ /* Scope only to the Top Live Casino block */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) { position: relative; background: radial-gradient( circle at 50% 0%, rgba(51, 215, 255, .15), transparent 42% ), linear-gradient( 180deg, #075ba3 0%, #063d78 35%, #032653 72%, #021b40 100% ) !important; border-top: 1px solid rgba(100, 224, 255, .42) !important; border-bottom: 1px solid rgba(255, 215, 78, .42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 25px rgba(0,15,50,.20), 0 4px 12px rgba(0,30,70,.18) !important; } /* ========================================================= HEADER TITLE ========================================================= */ /* crown icon */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .header-section .title img { filter: brightness(0) saturate(100%) invert(84%) sepia(93%) saturate(700%) hue-rotate(340deg) brightness(105%) drop-shadow(0 0 4px rgba(255, 215, 70, .60)) !important; } /* TOP LIVE CASINO text */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-title { color: #fff4b8 !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 5px rgba(255, 213, 68, .45), 0 0 10px rgba(38, 195, 255, .22) !important; } /* ========================================================= GAME CARD ========================================================= */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-game { background: linear-gradient( 180deg, #0b65ad 0%, #064985 45%, #032b5d 100% ) !important; border: 1px solid rgba(73, 210, 255, .48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 12px rgba(37, 194, 255, .08), 0 3px 8px rgba(0,20,55,.30), 0 0 7px rgba(21, 171, 230, .14) !important; } /* empty decorative box if existing theme uses it */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-game-box { border-color: rgba(255, 214, 72, .35) !important; background: linear-gradient( 135deg, rgba(255,215,70,.12), rgba(0,177,255,.08) ) !important; } /* ========================================================= GAME IMAGE ========================================================= */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-game-image-container { background: #031e47 !important; border-bottom: 1px solid rgba(83, 212, 255, .25) !important; box-shadow: inset 0 -8px 16px rgba(0,25,65,.16) !important; } /* image enhancement only */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-game-image-container img { filter: saturate(1.06) contrast(1.04) brightness(1.03); } /* ========================================================= TITLE AREA ========================================================= */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-game-title-container { background: linear-gradient( 180deg, #0864a6 0%, #064079 45%, #032858 100% ) !important; border-top: 1px solid rgba(89, 216, 255, .20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } /* provider title */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-game-title { color: #fff1ae !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 4px rgba(255, 209, 57, .32) !important; } /* game name */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-game-desc { color: #ccefff !important; text-shadow: 0 1px 2px rgba(0,0,0,.48) !important; } /* ========================================================= PLAY NOW BUTTON ========================================================= */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-button { color: #052b58 !important; background: linear-gradient( 180deg, #fff7bd 0%, #ffdd67 30%, #eab329 62%, #bc7d08 100% ) !important; border: 1px solid #ffec91 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 4px rgba(118,71,0,.22), 0 0 6px rgba(255, 216, 72, .40), 0 3px 7px rgba(0,28,64,.30) !important; transition: filter .2s ease, box-shadow .2s ease; } /* button hover - NO movement / size changes */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-button:hover, .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .most-play-button:active { background: linear-gradient( 180deg, #fffbd5 0%, #ffe675 32%, #f2be30 65%, #c78a0d 100% ) !important; color: #052650 !important; filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 0 8px rgba(255, 221, 80, .70), 0 0 14px rgba(255, 178, 0, .26) !important; } /* ========================================================= ACTIVE / VISIBLE OWL CARDS ONLY ADD A LITTLE MORE GLOW ========================================================= */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .owl-item.active .most-play-game { border-color: rgba(255, 216, 80, .50) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 7px rgba(255, 212, 60, .22), 0 3px 8px rgba(0,20,55,.30) !important; } /* ========================================================= TOP ARROW BUTTONS ========================================================= */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .header-section button { background: linear-gradient( 180deg, #107cbe, #064980 ) !important; border: 1px solid rgba(90, 218, 255, .42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 5px rgba(44, 192, 245, .20) !important; } /* recolor SVG arrows */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .header-section button img { filter: brightness(0) invert(1) sepia(.3) saturate(4) drop-shadow(0 0 2px rgba(87, 218, 255, .65)) !important; } /* hover becomes gold */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .header-section button:hover { background: linear-gradient( 180deg, #ffe879, #d59a17 ) !important; border-color: #fff1a5 !important; box-shadow: 0 0 7px rgba(255, 214, 69, .55) !important; } /* ========================================================= OWL PREV / NEXT ========================================================= */ .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .owl-prev, .most-play-container:has(.most-play-title[data-lang="TopLiveCasino"]) .owl-next { background: linear-gradient( 180deg, #21bce7, #0874b0 ) !important; color: #fff !important; border-color: rgba(255,255,255,.55) !important; box-shadow: 0 0 6px rgba(34, 197, 244, .38) !important; } .most-play-button{ padding-top: .2rem; } /* ========================================================= MOST PLAYED OF THE MONTH SAPPHIRE / OCEAN BLUE + LUXURY GOLD COLOR + STYLE ONLY NO STRUCTURE / SIZE / POSITION CHANGES ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ #slotgamesslider, #slotgamesslider .most-play-container { background: radial-gradient( circle at 50% 0%, rgba(48, 215, 255, .13), transparent 42% ), linear-gradient( 180deg, #075a9e 0%, #063e78 35%, #032a5a 68%, #021b3e 100% ) !important; border-color: rgba(78, 210, 255, .35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -15px 28px rgba(0, 18, 55, .16), 0 3px 10px rgba(0, 25, 65, .15) !important; } /* ========================================================= HEADER KEEP TRANSPARENT ========================================================= */ #slotgamesslider .header-section { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* crown */ #slotgamesslider .header-section .title img { filter: brightness(0) saturate(100%) invert(84%) sepia(87%) saturate(750%) hue-rotate(340deg) brightness(108%) contrast(103%) drop-shadow(0 0 4px rgba(255, 216, 70, .60)) !important; } /* title */ #slotgamesslider .most-play-title { color: #fff3b2 !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(255, 216, 74, .55), 0 0 9px rgba(45, 201, 255, .20) !important; } /* ========================================================= GAME CARD ========================================================= */ #slotgamesslider .most-play-game { background: linear-gradient( 180deg, #0c69b1 0%, #074b88 48%, #032c60 100% ) !important; border-color: rgba(75, 210, 255, .48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 0 12px rgba(48, 202, 255, .08), 0 3px 8px rgba(0, 20, 55, .28), 0 0 7px rgba(0, 170, 235, .12) !important; } /* decorative existing box */ #slotgamesslider .most-play-game-box { background: linear-gradient( 135deg, rgba(255, 215, 72, .10), rgba(27, 190, 255, .08) ) !important; border-color: rgba(255, 216, 76, .30) !important; } /* ========================================================= GAME IMAGE ========================================================= */ #slotgamesslider .most-play-game-image-container { background: #031f48 !important; border-color: rgba(68, 210, 255, .22) !important; box-shadow: inset 0 -8px 15px rgba(0, 24, 65, .16) !important; } #slotgamesslider .most-play-game-image-container img { filter: brightness(1.03) contrast(1.04) saturate(1.08) !important; } /* ========================================================= TITLE AREA ========================================================= */ #slotgamesslider .most-play-game-title-container { background: linear-gradient( 180deg, #0a65a7 0%, #06447e 50%, #032d60 100% ) !important; border-color: rgba(79, 216, 255, .20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } /* game name */ #slotgamesslider .most-play-game-title { color: #ffffff !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 4px rgba(55, 209, 255, .24) !important; } /* provider name */ #slotgamesslider .most-play-game-desc { color: #ffe99a !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(255, 209, 65, .28) !important; } /* ========================================================= PLAY NOW BUTTON ========================================================= */ #slotgamesslider .most-play-button { background: linear-gradient( 180deg, #fff8c6 0%, #ffdf69 30%, #eab42a 62%, #b97a08 100% ) !important; color: #052d5b !important; border-color: #ffed91 !important; font-weight: 800 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -2px 4px rgba(118,71,0,.20), 0 0 6px rgba(255, 215, 70, .40), 0 3px 7px rgba(0, 28, 65, .28) !important; transition: filter .2s ease, box-shadow .2s ease; } /* hover - color only, no movement */ #slotgamesslider .most-play-button:hover, #slotgamesslider .most-play-button:active { background: linear-gradient( 180deg, #fffbdc 0%, #ffe879 30%, #f2bf32 65%, #c8890c 100% ) !important; color: #04284f !important; filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 0 8px rgba(255, 220, 77, .72), 0 0 14px rgba(255, 174, 0, .24) !important; } /* ========================================================= VISIBLE / ACTIVE OWL ITEMS JUST ADD PREMIUM GOLD ACCENT ========================================================= */ #slotgamesslider .owl-item.active .most-play-game { border-color: rgba(255, 217, 77, .48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 6px rgba(255, 215, 70, .22), 0 3px 8px rgba(0, 20, 55, .28) !important; } /* ========================================================= OWL ARROWS IF ENABLED ========================================================= */ #slotgamesslider .owl-prev, #slotgamesslider .owl-next { background: linear-gradient( 180deg, #28c7ed, #0876b1 ) !important; color: #ffffff !important; border-color: rgba(255,255,255,.55) !important; box-shadow: 0 0 6px rgba(36, 200, 245, .38) !important; } #slotgamesslider .owl-prev:hover, #slotgamesslider .owl-next:hover { background: linear-gradient( 180deg, #ffed8a, #d69a17 ) !important; color: #063568 !important; border-color: #fff1a5 !important; box-shadow: 0 0 7px rgba(255, 214, 68, .55) !important; } #selector-frame { background: linear-gradient( 180deg, rgba(16, 104, 176, .96) 0%, rgba(7, 69, 132, .98) 52%, rgba(3, 35, 79, .98) 100% ) !important; border: 2px solid #ffd75a !important; box-shadow: 0 0 5px rgba(255, 215, 90, .85), 0 0 12px rgba(255, 184, 0, .45), 0 0 18px rgba(0, 190, 255, .30), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 10px rgba(72, 214, 255, .12) !important; animation: selectorFrameGlow 1.8s ease-in-out infinite; } /* idle state */ #selector-frame.idle { background: linear-gradient( 180deg, #126fb5 0%, #07508f 52%, #033466 100% ) !important; border-color: #63dfff !important; box-shadow: 0 0 5px rgba(99, 223, 255, .75), 0 0 11px rgba(0, 164, 255, .38), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 8px rgba(80, 214, 255, .15) !important; } @keyframes selectorFrameGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } .spin-btn-wrap .btn-spin { background: linear-gradient( 180deg, #fff8c6 0%, #ffe06e 28%, #e9b52c 62%, #b97a08 100% ) !important; color: #062d5b !important; border: 1px solid #ffec91 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 5px rgba(116,68,0,.22), 0 0 7px rgba(255,216,70,.55), 0 0 14px rgba(255,171,0,.25), 0 4px 9px rgba(0,28,65,.28) !important; text-shadow: 0 1px 0 rgba(255,255,255,.55) !important; font-weight: 900 !important; transition: filter .2s ease, box-shadow .2s ease !important; } /* HOVER */ .spin-btn-wrap .btn-spin:hover { background: linear-gradient( 180deg, #fffbdc 0%, #ffe979 30%, #f2bf35 65%, #c98a0c 100% ) !important; color: #052752 !important; filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 0 9px rgba(255,222,80,.80), 0 0 17px rgba(255,175,0,.34), 0 4px 10px rgba(0,28,65,.30) !important; } /* ACTIVE / PRESS */ .spin-btn-wrap .btn-spin:active { filter: brightness(.98); box-shadow: inset 0 2px 5px rgba(105,63,0,.25), 0 0 6px rgba(255,210,65,.55) !important; } /* DISABLED */ .spin-btn-wrap .btn-spin:disabled { background: linear-gradient( 180deg, #66839a, #3a5369 ) !important; color: rgba(255,255,255,.60) !important; border-color: rgba(255,255,255,.20) !important; box-shadow: none !important; filter: none !important; } /* ========================================================= LUCKY PICK POPUP SAPPHIRE / OCEAN BLUE + GOLD STYLE ONLY — NO STRUCTURE / SIZE CHANGES ========================================================= */ .swal2-popup.luckypick-popup { background: radial-gradient( circle at 50% 0%, rgba(67, 218, 255, .18), transparent 38% ), linear-gradient( 180deg, #0a5fa8 0%, #063d78 38%, #032857 72%, #021a3d 100% ) !important; border: 1px solid rgba(255, 217, 78, .58) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 22px rgba(44, 202, 255, .08), 0 0 10px rgba(47, 205, 255, .25), 0 0 22px rgba(255, 191, 34, .16), 0 12px 35px rgba(0, 18, 50, .48) !important; } /* ========================================================= CLOSE BUTTON ========================================================= */ .swal2-popup.luckypick-popup .luckypick-close-btn { color: #fff3ad !important; background: linear-gradient( 180deg, #127bbd, #064578 ) !important; border-color: rgba(255, 220, 90, .55) !important; text-shadow: 0 0 4px rgba(255, 214, 70, .60) !important; box-shadow: 0 0 6px rgba(52, 205, 255, .25), inset 0 1px 0 rgba(255,255,255,.14) !important; } .swal2-popup.luckypick-popup .luckypick-close-btn:hover { color: #062f5e !important; background: linear-gradient( 180deg, #fff4a7, #dca41f ) !important; border-color: #fff0a0 !important; } /* ========================================================= GAME IMAGE ========================================================= */ .swal2-popup.luckypick-popup .luckypick-rounded-image { background: #031d43 !important; border: 2px solid rgba(255, 215, 77, .70) !important; box-shadow: 0 0 6px rgba(255, 215, 70, .48), 0 0 14px rgba(0, 190, 255, .28), inset 0 0 8px rgba(0, 0, 0, .15) !important; filter: brightness(1.03) contrast(1.04) saturate(1.07); } /* ========================================================= GAME TITLE ========================================================= */ .swal2-popup.luckypick-popup .luckypick-title { color: #fff5bd !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 4px rgba(255, 214, 71, .60), 0 0 10px rgba(44, 196, 255, .22) !important; } /* ========================================================= PROVIDER / VENDOR ========================================================= */ .swal2-popup.luckypick-popup .luckypick-vendor { color: #9feaff !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 5px rgba(45, 205, 255, .40) !important; } /* ========================================================= BUTTON AREA ========================================================= */ .swal2-popup.luckypick-popup .swal2-actions { background: transparent !important; } /* ========================================================= PLAY NOW ========================================================= */ .swal2-popup.luckypick-popup .luckypick-confirm-btn { background: linear-gradient( 180deg, #fff9c8 0%, #ffe16e 30%, #eab52c 63%, #b87a08 100% ) !important; color: #062d5a !important; border: 1px solid #fff0a0 !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 4px rgba(115,68,0,.20), 0 0 7px rgba(255, 217, 76, .55), 0 0 15px rgba(255, 174, 0, .22) !important; transition: filter .2s ease, box-shadow .2s ease !important; } .swal2-popup.luckypick-popup .luckypick-confirm-btn:hover { background: linear-gradient( 180deg, #fffde0 0%, #ffe97d 32%, #f2c037 65%, #c88a0d 100% ) !important; filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 0 9px rgba(255, 222, 85, .78), 0 0 18px rgba(255, 179, 0, .30) !important; } /* ========================================================= TRY AGAIN ========================================================= */ .swal2-popup.luckypick-popup .luckypick-deny-btn { background: linear-gradient( 180deg, #4ad8f5 0%, #159ed6 48%, #0872ad 100% ) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.68) !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,46,90,.50) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 7px rgba(51, 204, 245, .38), 0 3px 8px rgba(0, 34, 76, .25) !important; transition: filter .2s ease, box-shadow .2s ease !important; } .swal2-popup.luckypick-popup .luckypick-deny-btn:hover { background: linear-gradient( 180deg, #65e4ff 0%, #20afe5 48%, #0879b8 100% ) !important; filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 0 9px rgba(56, 216, 255, .62), 0 0 15px rgba(0, 151, 255, .22) !important; } /* ========================================================= REMOVE DEFAULT SWEETALERT BUTTON OUTLINE COLORS ========================================================= */ .swal2-popup.luckypick-popup .swal2-styled:focus { box-shadow: 0 0 0 2px rgba(255, 222, 87, .20), 0 0 8px rgba(49, 206, 255, .30) !important; } /* ========================================================= OPTIONAL TIMER BAR ========================================================= */ .swal2-popup.luckypick-popup .swal2-timer-progress-bar { background: linear-gradient( 90deg, #4cddff, #ffd958 ) !important; } /* ========================================================= SIDE MENU - LOGGED IN VERSION ADD AFTER PREVIOUS SIDE MENU CSS STRUCTURE / SIZE REMAINS UNCHANGED ========================================================= */ /* ========================================================= ACCOUNT INFO AREA ========================================================= */ #leftmenu .sidebar-menu-accountinfo { background: linear-gradient( 180deg, rgba(12, 105, 174, .92) 0%, rgba(5, 68, 128, .96) 55%, rgba(3, 43, 90, .98) 100% ) !important; border-top: 1px solid rgba(83, 219, 255, .30) !important; border-bottom: 1px solid rgba(255, 214, 76, .38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 12px rgba(48, 205, 255, .08), 0 3px 9px rgba(0, 25, 65, .20) !important; } /* ACCOUNT LIST */ #leftmenu .sidebar-menu-accountinfo ul { background: transparent !important; } #leftmenu .sidebar-menu-accountinfo ul li { background: transparent !important; border-bottom: 1px solid rgba(101, 213, 250, .13) !important; } /* ACCOUNT LINKS */ #leftmenu .sidebar-menu-accountinfo ul li a { background: linear-gradient( 90deg, rgba(20, 127, 194, .24), rgba(3, 44, 90, .10) ) !important; color: #ffffff !important; } /* ACCOUNT HOVER */ #leftmenu .sidebar-menu-accountinfo ul li a:hover, #leftmenu .sidebar-menu-accountinfo ul li a:active { background: linear-gradient( 90deg, rgba(24, 157, 216, .55), rgba(5, 82, 151, .30) ) !important; box-shadow: inset 3px 0 0 #ffd65a, inset 0 0 12px rgba(67, 216, 255, .10) !important; } /* ========================================================= LOGIN USER ICON ========================================================= */ #leftmenu .sidebar-menu-accountinfo .fa-user-alt { color: #65ddff !important; text-shadow: 0 0 4px rgba(79, 221, 255, .70), 0 0 8px rgba(0, 157, 255, .28) !important; } /* USERNAME */ #leftmenu .sidebar-menu-accountinfo .loginid { color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0,0,0,.50), 0 0 4px rgba(74, 215, 255, .20) !important; } /* ========================================================= WALLET ========================================================= */ #leftmenu .sidebar-menu-accountinfo .fa-wallet { color: #ffd75a !important; text-shadow: 0 0 4px rgba(255, 216, 80, .75), 0 0 8px rgba(255, 174, 0, .30) !important; } /* BALANCE */ #leftmenu .sidebar-menu-accountinfo .main-balance-amt { color: #fff1a8 !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 5px rgba(255, 211, 65, .32) !important; } /* ========================================================= MENU FONT ICONS KEEP ORIGINAL HTML ========================================================= */ /* hide existing sprite graphics */ #leftmenu > .ui-panel-inner > ul .sm-item > .icon { background-image: none !important; background: none !important; font-size: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: transparent !important; } /* shared Font Awesome style */ #leftmenu > .ui-panel-inner > ul .sm-item > .icon::before { font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-size: 18px !important; color: #69dfff !important; line-height: 1; text-shadow: 0 0 4px rgba(80, 220, 255, .80), 0 0 8px rgba(0, 154, 255, .30); transition: .2s ease; } /* HOME */ #leftmenu .list-item-home .icon::before { content: "\f015"; } /* PROMOTION */ #leftmenu .list-item-promotion .icon::before { content: "\f06b"; } /* ABOUT US */ #leftmenu .list-item-aboutus .icon::before { content: "\f129"; } /* INFO CENTRE */ #leftmenu .list-item-infocentre .icon::before { content: "\f02d"; } /* DOWNLOAD */ #leftmenu .list-item-gamesappdownload .icon::before { content: "\f019"; } /* CONTACT */ #leftmenu .list-item-contactus .icon::before { content: "\f2b9"; } /* LANGUAGE */ #leftmenu .list-item-language .icon::before { content: "\f1ab"; } /* LOGOUT */ #leftmenu .list-item-logout .icon::before { content: "\f2f5"; } /* ========================================================= NORMAL MENU ROWS ========================================================= */ #leftmenu > .ui-panel-inner > ul > li { background: transparent !important; border-bottom: 1px solid rgba(88, 201, 239, .14) !important; } #leftmenu > .ui-panel-inner > ul > li > a { background: linear-gradient( 90deg, rgba(8, 79, 143, .30), rgba(2, 29, 68, .12) ) !important; color: #eafaff !important; } /* MENU TEXT */ #leftmenu .sm-item .title { color: #edfaff !important; text-shadow: 0 1px 2px rgba(0,0,0,.48) !important; } /* HOVER */ #leftmenu > .ui-panel-inner > ul > li > a:hover, #leftmenu > .ui-panel-inner > ul > li > a:active { background: linear-gradient( 90deg, rgba(15, 139, 205, .65), rgba(5, 74, 138, .40) ) !important; box-shadow: inset 3px 0 0 #ffd75a, inset 0 0 13px rgba(57, 211, 255, .10) !important; } #leftmenu > .ui-panel-inner > ul > li > a:hover .icon::before, #leftmenu > .ui-panel-inner > ul > li > a:active .icon::before { color: #ffd85c !important; text-shadow: 0 0 5px rgba(255, 220, 88, .85), 0 0 10px rgba(255, 172, 0, .32) !important; } #leftmenu > .ui-panel-inner > ul > li > a:hover .title, #leftmenu > .ui-panel-inner > ul > li > a:active .title { color: #fff1ad !important; } /* ========================================================= LOGOUT - SPECIAL COLOR ========================================================= */ #leftmenu .list-item-logout > a { background: linear-gradient( 90deg, rgba(126, 28, 43, .28), rgba(61, 12, 32, .12) ) !important; } #leftmenu .list-item-logout .icon::before { color: #ff9f9f !important; text-shadow: 0 0 4px rgba(255, 95, 95, .60), 0 0 8px rgba(255, 55, 55, .22) !important; } #leftmenu .list-item-logout .title { color: #ffd4d4 !important; } #leftmenu .list-item-logout > a:hover { background: linear-gradient( 90deg, rgba(187, 47, 58, .70), rgba(98, 16, 40, .45) ) !important; box-shadow: inset 3px 0 0 #ff8585, inset 0 0 13px rgba(255, 73, 73, .12) !important; } /* ========================================================= ACTIVE PAGE ========================================================= */ #leftmenu > .ui-panel-inner > ul > li.active > a, #leftmenu > .ui-panel-inner > ul > li.on > a { background: linear-gradient( 90deg, #0b83c5 0%, #07559c 55%, #04376e 100% ) !important; box-shadow: inset 3px 0 0 #ffd85a, inset 0 0 14px rgba(76, 220, 255, .14) !important; } #leftmenu > .ui-panel-inner > ul > li.active .icon::before, #leftmenu > .ui-panel-inner > ul > li.on .icon::before { color: #ffd95b !important; text-shadow: 0 0 5px rgba(255, 220, 82, .82), 0 0 10px rgba(255, 177, 0, .32) !important; } #leftmenu > .ui-panel-inner > ul > li.active .title, #leftmenu > .ui-panel-inner > ul > li.on .title { color: #fff2ad !important; } /* ========================================================= PAYMENT MENU - DARK THEME COLOR ONLY / KEEP STRUCTURE & SIZE ========================================================= */ .idr_box.payment-menu { background: radial-gradient( circle at 50% 0%, rgba(0, 198, 255, .10), transparent 42% ), linear-gradient( 180deg, #081426 0%, #06101e 45%, #030913 100% ) !important; border-color: rgba(71, 199, 255, .30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 20px rgba(0, 143, 255, .05), 0 4px 12px rgba(0,0,0,.40) !important; } /* inner area */ .idr_box.payment-menu .idr_content { background: linear-gradient(180deg, rgba(12, 40, 68, .75), rgba(4, 17, 31, .88)) !important; } /* ========================================================= TOP ACCOUNT AREA ========================================================= */ .idr_box.payment-menu .idr_content_top { border-color: rgba(70, 201, 255, .20) !important; } /* username */ .idr_box.payment-menu .title-balance { color: #ffffff !important; text-shadow: 0 0 5px rgba(72, 212, 255, .30), 0 1px 2px rgba(0,0,0,.70) !important; } /* currency */ .idr_box.payment-menu .displaycurrency-txt { color: #79ddff !important; } /* balance */ .idr_box.payment-menu #spanBalance { color: #ffe174 !important; text-shadow: 0 0 5px rgba(255, 214, 73, .40), 0 1px 2px rgba(0,0,0,.70) !important; } /* ========================================================= AFF QR / RETRIEVE ========================================================= */ .idr_box.payment-menu .menu-item-affqr a, .idr_box.payment-menu .menu-item-withdrawalall a { background: linear-gradient( 180deg, #0d2945 0%, #07192c 100% ) !important; border-color: rgba(71, 205, 255, .25) !important; color: #dff8ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 7px rgba(0, 177, 255, .08) !important; } .idr_box.payment-menu .menu-item-affqr span, .idr_box.payment-menu .menu-item-withdrawalall span { color: #dff8ff !important; } /* ========================================================= DIVIDER ========================================================= */ .idr_box.payment-menu .homepage-div-hr { border: 0 !important; background: linear-gradient( 90deg, transparent, rgba(54, 201, 255, .40), rgba(255, 215, 76, .50), rgba(54, 201, 255, .40), transparent ) !important; box-shadow: 0 0 5px rgba(35, 190, 255, .20) !important; } /* ========================================================= BOTTOM PAYMENT MENU ========================================================= */ .idr_box.payment-menu .idr_content_bottom li { background: transparent !important; border-color: rgba(65, 192, 235, .10) !important; } #pageHome #homePage .idr_box .idr_content{ border:1px solid #68dfff!important; margin-top: 11px; } #pageHome #homePage .idr_box .idr_content .idr_content_bottom, .idr_content_bottom { height: 1.69rem!important;} .idr_box.payment-menu .idr_content_bottom li a { color: #dff8ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } /* menu wording */ .idr_box.payment-menu .idr_content_bottom li span { color: #dbefff !important; text-shadow: 0 1px 2px rgba(0,0,0,.75) !important; } /* ========================================================= HOVER / ACTIVE ========================================================= */ .idr_box.payment-menu .idr_content_bottom li a:hover, .idr_box.payment-menu .idr_content_bottom li a:active { background: linear-gradient( 180deg, #0d4771 0%, #092c4e 55%, #061b31 100% ) !important; box-shadow: inset 0 0 10px rgba(57, 211, 255, .10), 0 0 7px rgba(0, 177, 255, .20) !important; } .idr_box.payment-menu .idr_content_bottom li a:hover span, .idr_box.payment-menu .idr_content_bottom li a:active span { color: #ffe47b !important; } /* icons remain cyan / gold */ .idr_box.payment-menu .idr_content_bottom .icon::before { color: #61dcff !important; text-shadow: 0 0 4px rgba(73, 216, 255, .70), 0 0 8px rgba(0, 160, 255, .25) !important; } /* deposit highlighted gold */ .idr_box.payment-menu .li-deposit .icon::before { color: #ffd75a !important; text-shadow: 0 0 5px rgba(255, 217, 77, .70), 0 0 9px rgba(255, 170, 0, .28) !important; } /* hover icons gold */ .idr_box.payment-menu .idr_content_bottom li a:hover .icon::before, .idr_box.payment-menu .idr_content_bottom li a:active .icon::before { color: #ffd95e !important; text-shadow: 0 0 5px rgba(255, 219, 86, .85), 0 0 10px rgba(255, 173, 0, .32) !important; } /* ========================================================= PAYMENT MENU - FONT ICON REPLACEMENT NO STRUCTURE / SIZE / POSITION CHANGE ========================================================= */ /* --------------------------------------------------------- COMMON STYLE --------------------------------------------------------- */ .idr_box.payment-menu .idr_content_bottom .i > .icon, .idr_box.payment-menu .menu-item-withdrawalall .i > .icon, .idr_box.payment-menu .home_header_eyes, .idr_box.payment-menu .home_header_refresh { background-image: none !important; background: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* hide original sprite content */ .idr_box.payment-menu .idr_content_bottom .i > .icon, .idr_box.payment-menu .menu-item-withdrawalall .i > .icon { font-size: 0 !important; } /* shared Font Awesome font */ .idr_box.payment-menu .idr_content_bottom .i > .icon::before, .idr_box.payment-menu .menu-item-withdrawalall .i > .icon::before, .idr_box.payment-menu .home_header_eyes::before, .idr_box.payment-menu .home_header_refresh::before { font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; color: #68dfff !important; text-shadow: 0 0 4px rgba(84, 220, 255, .80), 0 0 8px rgba(0, 153, 255, .30); } /* ========================================================= TOP ACCOUNT ICONS ========================================================= */ /* EYE / BALANCE VISIBILITY */ .idr_box.payment-menu .home_header_eyes { font-size: 0 !important; } .idr_box.payment-menu .home_header_eyes::before { content: "\f06e"; /* eye */ font-size: 17px !important; } /* BALANCE REFRESH */ .idr_box.payment-menu .home_header_refresh { font-size: 0 !important; } .idr_box.payment-menu .home_header_refresh::before { content: "\f2f1"; /* sync-alt */ font-size: 12px !important; color: #ffd75a !important; text-shadow: 0 0 4px rgba(255, 216, 77, .75), 0 0 7px rgba(255, 173, 0, .30); } /* ========================================================= AFF QR ALREADY FONT AWESOME - JUST RECOLOR ========================================================= */ .idr_box.payment-menu .menu-item-affqr .fa-qrcode { color: #68dfff !important; text-shadow: 0 0 4px rgba(79, 219, 255, .75), 0 0 8px rgba(0, 157, 255, .28) !important; } /* ========================================================= RETRIEVE ========================================================= */ .idr_box.payment-menu .menu-item-withdrawalall .icon_home_header_restore::before { content: "\f2ea"; /* undo-alt */ font-size: 16px !important; } /* ========================================================= DEPOSIT ========================================================= */ .idr_box.payment-menu .li-deposit .icon-funds::before { content: "\f555"; /* wallet */ font-size: 18px !important; } /* ========================================================= TRANSFER ========================================================= */ .idr_box.payment-menu .li-wallettransfer .icon-wallettransfer::before { content: "\f362"; /* exchange-alt */ font-size: 18px !important; } /* ========================================================= WITHDRAWAL ========================================================= */ .idr_box.payment-menu .li-withdrawal .icon-withdrawal::before { content: "\f3d1"; /* money-bill-alt */ font-size: 18px !important; } /* ========================================================= STATEMENT ========================================================= */ .idr_box.payment-menu .li-mystatement .icon-statement::before { content: "\f15c"; /* file-alt */ font-size: 18px !important; } /* ========================================================= HISTORY ========================================================= */ .idr_box.payment-menu .li-myhistory .icon-history::before { content: "\f1da"; /* history */ font-size: 18px !important; } /* ========================================================= ICON DEFAULT COLOR ========================================================= */ .idr_box.payment-menu .idr_content_bottom li .icon::before, .idr_box.payment-menu .menu-item-withdrawalall .icon::before { color: #68dfff !important; text-shadow: 0 0 4px rgba(80, 220, 255, .80), 0 0 8px rgba(0, 150, 255, .30); } /* ========================================================= DIFFERENT ACCENT COLORS ========================================================= */ /* Deposit - gold */ .idr_box.payment-menu .li-deposit .icon::before { color: #ffd85a !important; text-shadow: 0 0 4px rgba(255, 216, 75, .80), 0 0 9px rgba(255, 173, 0, .32); } /* Transfer - cyan */ .idr_box.payment-menu .li-wallettransfer .icon::before { color: #66e9ff !important; } /* Withdrawal - gold/cyan */ .idr_box.payment-menu .li-withdrawal .icon::before { color: #ffe07a !important; text-shadow: 0 0 4px rgba(255, 218, 90, .65); } /* Statement */ .idr_box.payment-menu .li-mystatement .icon::before { color: #8de8ff !important; } /* History */ .idr_box.payment-menu .li-myhistory .icon::before { color: #73dfff !important; } /* ========================================================= HOVER / ACTIVE - GOLD ========================================================= */ .idr_box.payment-menu .idr_content_bottom li a:hover .icon::before, .idr_box.payment-menu .idr_content_bottom li a:active .icon::before, .idr_box.payment-menu .menu-item-withdrawalall a:hover .icon::before, .idr_box.payment-menu .menu-item-affqr a:hover .icon { color: #ffd85c !important; text-shadow: 0 0 5px rgba(255, 219, 82, .85), 0 0 10px rgba(255, 174, 0, .35) !important; } /* ========================================= AFF QR - REMOVE IMAGE, USE FONT AWESOME KEEP ORIGINAL SIZE / STRUCTURE ========================================= */ #leftmenu .menu-item-affqr .fa-qrcode, .idr_box.payment-menu .menu-item-affqr .fa-qrcode { background: none !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: no-repeat !important; width: 33px !important; height: 33px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; color: transparent !important; } /* Font Awesome QR icon */ #leftmenu .menu-item-affqr .fa-qrcode::before, .idr_box.payment-menu .menu-item-affqr .fa-qrcode::before { content: "\f029" !important; font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; font-size: 20px !important; line-height: 1 !important; color: #63ddff !important; text-shadow: 0 0 4px rgba(78, 220, 255, .8), 0 0 9px rgba(0, 150, 255, .35) !important; } /* hover = gold */ #leftmenu .menu-item-affqr a:hover .fa-qrcode::before, .idr_box.payment-menu .menu-item-affqr a:hover .fa-qrcode::before { color: #ffd85a !important; text-shadow: 0 0 5px rgba(255, 217, 75, .85), 0 0 10px rgba(255, 170, 0, .35) !important; } .m-forms-page .form-title{ color:#fff!important; } [data-page="myaccount"] .icon-language { background-image: url(./img1824_u99kiss/acc_language.png?v=2) !important; background-size: 100% !important; width: 1.2rem !important; height: 1.2rem !important; } .icon-menu{ filter: brightness(1) invert(1)!important; } /* ========================================================= DEPOSIT / TRANSACTION FORM DARK NAVY + CYAN + GOLD VISUAL STYLE ONLY NO STRUCTURE / LAYOUT CHANGES ========================================================= */ /* ========================================================= PAGE / MAIN CONTENT BACKGROUND ========================================================= */ .m-forms-page { background: radial-gradient( circle at 50% 0%, rgba(47, 211, 255, .08), transparent 42% ), linear-gradient( 180deg, #071424 0%, #050f1d 55%, #020914 100% ) !important; color: #eefaff !important; } .m-forms-page .standard-content-container, .m-forms-page .m-standard-transaction-container, .m-forms-page .m-standard-form-container, .m-forms-page .m-transaction-form { background: linear-gradient( 180deg, rgba(8, 27, 47, .98) 0%, rgba(4, 15, 28, .98) 100% ) !important; color: #eefaff !important; border-color: rgba(176, 221, 240, .38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 18px rgba(48, 204, 255, .03) !important; } /* ========================================================= SECTION / FORM LABELS ========================================================= */ .m-forms-page .st-title, .m-forms-page .standard-label { color: #f4fbff !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 4px rgba(80, 215, 255, .12) !important; } /* mandatory star */ .m-forms-page .standard-mandatory::after { color: #ffd45b !important; text-shadow: 0 0 4px rgba(255, 212, 75, .55) !important; } /* ========================================================= BANK SECTION ========================================================= */ .m-forms-page .bank-list-container { background: linear-gradient( 180deg, #0a263f 0%, #061828 100% ) !important; border-color: rgba(97, 216, 255, .30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 7px rgba(0, 180, 255, .08) !important; } /* Bank list itself */ .m-forms-page .bank-list { background: linear-gradient( 180deg, #071d31, #041220 ) !important; border-color: rgba(79, 208, 255, .22) !important; } /* Individual bank options */ .m-forms-page .bank-list > *, .m-forms-page .bank-list .bank-item { background: linear-gradient( 180deg, #0d2d4a 0%, #071b2f 100% ) !important; color: #dff8ff !important; border-color: rgba(73, 205, 247, .22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important; } /* selected bank */ .m-forms-page .bank-list .active, .m-forms-page .bank-list .selected, .m-forms-page .bank-list [class*="active"] { background: linear-gradient( 180deg, #135b8e 0%, #0a3c67 55%, #06294c 100% ) !important; color: #fff2a8 !important; border-color: #ffd45a !important; box-shadow: 0 0 6px rgba(255, 214, 76, .35), inset 0 0 8px rgba(64, 216, 255, .08) !important; } /* ========================================================= REFRESH ICON ========================================================= */ .m-forms-page .mobile-beta-refresh path, .m-forms-page .mobile-beta-refresh .st0, .m-forms-page .mobile-beta-refresh .st1 { fill: #59dcff !important; } .m-forms-page .mobile-beta-refresh { filter: drop-shadow(0 0 3px rgba(72, 218, 255, .75)) drop-shadow(0 0 7px rgba(0, 156, 255, .25)); } /* loading dots */ .m-forms-page .loading-dot circle { fill: #ffd65b !important; } /* ========================================================= INPUTS ========================================================= */ .m-forms-page .standard-input, .m-forms-page input[type="text"], .m-forms-page input[type="number"], .m-forms-page input[type="password"], .m-forms-page input[type="tel"], .m-forms-page input[type="email"], .m-forms-page textarea, .m-forms-page select { background: linear-gradient( 180deg, #0c2944 0%, #07192b 100% ) !important; color: #ffffff !important; border-color: rgba(163, 222, 245, .55) !important; outline: none !important; box-shadow: inset 0 1px 4px rgba(0,0,0,.45), inset 0 0 8px rgba(48, 205, 255, .03), 0 0 5px rgba(0, 170, 255, .06) !important; } /* placeholders */ .m-forms-page input::placeholder, .m-forms-page textarea::placeholder { color: #7ea6ba !important; opacity: 1 !important; } /* focus */ .m-forms-page .standard-input:focus, .m-forms-page input:focus, .m-forms-page textarea:focus, .m-forms-page select:focus { background: linear-gradient( 180deg, #103451, #082038 ) !important; border-color: #ffd75d !important; color: #ffffff !important; box-shadow: inset 0 1px 4px rgba(0,0,0,.35), 0 0 5px rgba(255, 216, 80, .45), 0 0 10px rgba(55, 205, 255, .18) !important; } /* ========================================================= AMOUNT QUICK SELECT BUTTONS ========================================================= */ .m-forms-page .standard-amount-btn-container .amount-btn { background: linear-gradient( 180deg, #0f3453 0%, #09233c 55%, #06192b 100% ) !important; color: #dff7ff !important; border-color: rgba(75, 207, 250, .35) !important; text-shadow: 0 1px 2px rgba(0,0,0,.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 5px rgba(0,0,0,.20) !important; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important; } /* quick amount hover */ .m-forms-page .standard-amount-btn-container .amount-btn:hover { background: linear-gradient( 180deg, #155f91 0%, #0b426e 55%, #072b4e 100% ) !important; color: #ffffff !important; border-color: #62ddff !important; box-shadow: 0 0 6px rgba(75, 217, 255, .35) !important; } /* selected quick amount */ .m-forms-page .standard-amount-btn-container .amount-btn.active, .m-forms-page .standard-amount-btn-container .amount-btn.selected, .m-forms-page .standard-amount-btn-container .amount-btn.on { background: linear-gradient( 180deg, #fff5b5 0%, #ffda5f 35%, #dda51d 70%, #a76b07 100% ) !important; color: #062d58 !important; border-color: #fff0a0 !important; font-weight: 800 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 0 6px rgba(255, 216, 75, .52), 0 0 12px rgba(255, 172, 0, .18) !important; } /* ========================================================= DEPOSIT TAB / BANK TRANSFER TAB ========================================================= */ .m-forms-page .deposit-tab-container, .m-forms-page .deposit-tab { background: linear-gradient( 180deg, #071c30, #041321 ) !important; border-color: rgba(74, 209, 250, .20) !important; } .m-forms-page .deposit-tab .tab-header { background: linear-gradient( 180deg, #0c304d, #071d32 ) !important; color: #ccefff !important; border-color: rgba(68, 201, 243, .25) !important; } .m-forms-page .deposit-tab .tab-header.active { background: linear-gradient( 180deg, #135f92 0%, #0a436f 55%, #062c50 100% ) !important; color: #ffe797 !important; border-color: rgba(255, 215, 78, .60) !important; box-shadow: inset 0 -2px 0 #ffd65b, 0 0 6px rgba(0, 187, 255, .16) !important; } /* Bank Transfer text */ .m-forms-page .deposit-option { color: inherit !important; } /* ========================================================= BANK TRANSFER ICON ========================================================= */ .m-forms-page .deposit-tab svg circle { fill: #0b5386 !important; } .m-forms-page .deposit-tab svg g { fill: #ffffff !important; } /* ========================================================= VALIDATION / ERROR ========================================================= */ .m-forms-page .standard-error-validation, .m-forms-page .text-danger { color: #ff8d92 !important; text-shadow: 0 0 4px rgba(255, 71, 81, .22) !important; } /* ========================================================= RADIO / CHECKBOX ========================================================= */ .m-forms-page input[type="radio"], .m-forms-page input[type="checkbox"] { accent-color: #ffd75a !important; } /* ========================================================= TRANSACTION / INFO BOXES ========================================================= */ .m-forms-page .standard-form-field, .m-forms-page .standard-form-field-wrapper, .m-forms-page .input-group { color: #edfaff !important; } /* Any information / notice panels */ .m-forms-page .deposit-info, .m-forms-page .transaction-info, .m-forms-page .remark-box, .m-forms-page .notice-container { background: linear-gradient( 180deg, #09253e, #051625 ) !important; color: #caecf9 !important; border-color: rgba(74, 205, 246, .22) !important; box-shadow: inset 0 0 9px rgba(0, 180, 255, .03) !important; } /* ========================================================= SUBMIT / NEXT / DEPOSIT BUTTON ========================================================= */ .m-forms-page .standard-submit-form-button, .m-forms-page .standard-submit-btn, .m-forms-page .btn-common, .m-forms-page button[type="submit"] { background: linear-gradient( 180deg, #fff8c4 0%, #ffe06b 30%, #eab42b 63%, #b97a08 100% ) !important; color: #052c58 !important; border-color: #fff0a0 !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(255,255,255,.60) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 4px rgba(112,67,0,.22), 0 0 7px rgba(255, 215, 72, .45), 0 3px 8px rgba(0,0,0,.30) !important; } /* hover */ .m-forms-page .standard-submit-form-button:hover, .m-forms-page .standard-submit-btn:hover, .m-forms-page .btn-common:hover, .m-forms-page button[type="submit"]:hover { background: linear-gradient( 180deg, #fffddd 0%, #ffe97c 32%, #f2c038 65%, #c98a0d 100% ) !important; color: #04284f !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 0 9px rgba(255, 220, 80, .70), 0 0 16px rgba(255, 175, 0, .22) !important; } /* ========================================================= DISABLED ELEMENTS ========================================================= */ .m-forms-page input:disabled, .m-forms-page select:disabled, .m-forms-page button:disabled { background: linear-gradient( 180deg, #172635, #101b27 ) !important; color: #8be5ff !important; border-color: rgba(130, 157, 173, .20) !important; box-shadow: none !important; } /* ========================================================= SCROLLBAR IF FORM HAS INTERNAL SCROLL ========================================================= */ .m-forms-page ::-webkit-scrollbar { background: #04101e; } .m-forms-page ::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, #24c8eb, #096ba5 ); border-color: #06192b; } .home_notice .notice-parent .notice-item{ background:rgb(0,0,0,0)!important; } /* ========================================================= HOME ANNOUNCEMENT BAR DARK NAVY + CYAN + GOLD COLOR / STYLE ONLY ========================================================= */ .home_notice { background: linear-gradient( 180deg, #0b2945 0%, #071a2e 52%, #04111f 100% ) !important; color: #eafaff !important; border-top: 1px solid rgba(74, 211, 255, .28) !important; border-bottom: 1px solid rgba(255, 214, 76, .38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 12px rgba(0, 190, 255, .04), 0 2px 8px rgba(0,0,0,.25) !important; } /* ========================================================= NOTICE ICON ========================================================= */ .home_notice .icon_home_notice { filter: brightness(0) saturate(100%) invert(83%) sepia(92%) saturate(694%) hue-rotate(340deg) brightness(108%) contrast(103%) drop-shadow(0 0 4px rgba(255, 215, 76, .55)) !important; } /* ========================================================= TEXT AREA ========================================================= */ .home_notice .notice-parent, .home_notice .annoucement-infinite-container { background: transparent !important; } .home_notice .notice-item { color: #e8f8ff !important; text-shadow: 0 1px 2px rgba(0,0,0,.70), 0 0 4px rgba(68, 215, 255, .18) !important; } /* announcement text */ .home_notice .notice-item span { color: #eafaff !important; } /* ========================================================= SUBTLE CYAN / GOLD GLOW ========================================================= */ .home_notice { position: relative; } .home_notice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(61, 213, 255, .45), rgba(255, 215, 75, .65), rgba(61, 213, 255, .45), transparent ); box-shadow: 0 0 5px rgba(56, 205, 255, .25); } /* ========================================================= OPTIONAL: EMPHASIZE IMPORTANT WORDING DOES NOT CHANGE SCROLLING ========================================================= */ .home_notice .notice-item span { font-weight: 500; letter-spacing: .1px; } /* ========================================================= MY ACCOUNT PAGE DARK NAVY + SAPPHIRE + CYAN + GOLD NO STRUCTURE / SIZE / LAYOUT CHANGES ========================================================= */ .ui-content.form-page-bg-color { background: radial-gradient(circle at 50% 0%, rgba(0, 194, 255, .08), transparent 42%), linear-gradient( 180deg, #071525 0%, #040d19 55%, #020812 100% ) !important; color: #ecfaff !important; } /* ========================================================= ACCOUNT PROFILE TOP ========================================================= */ .deposit-progress-bar-container { background: linear-gradient( 180deg, #0a2945 0%, #071b30 55%, #04111f 100% ) !important; border-color: rgba(97, 213, 255, .28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 15px rgba(0,177,255,.04), 0 3px 10px rgba(0,0,0,.28) !important; } /* account icon */ .account-info-container .account-icon svg path { fill: #65ddff !important; } .account-info-container .account-icon { filter: drop-shadow(0 0 4px rgba(76,219,255,.70)); } /* username */ .account-info-container .account-name { color: #ffffff !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 5px rgba(65,215,255,.25) !important; } /* VIP level */ .account-grade-container .group-level { color: #ffe17a !important; font-weight: 700 !important; text-shadow: 0 0 5px rgba(255,215,70,.40) !important; } /* ========================================================= WALLET MAIN PANEL ========================================================= */ .mobile-wallet-section.mycredit-menu { background: linear-gradient( 180deg, #0a2945 0%, #061a2e 48%, #03101e 100% ) !important; border-color: rgba(168, 222, 244, .55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 20px rgba(0,180,255,.04), 0 4px 12px rgba(0,0,0,.32) !important; } /* top wallet section */ .mobile-wallet-section .wallet-info, .mobile-wallet-section .top-content { background: linear-gradient( 180deg, #0b2d4a, #06182a ) !important; } /* Balance text */ .mobile-wallet-section .wallet-header .title { color: #dff7ff !important; text-shadow: 0 1px 2px rgba(0,0,0,.65) !important; } /* Currency */ .mobile-wallet-section .currency-label { color: #6addff !important; text-shadow: 0 0 4px rgba(74,219,255,.35) !important; } /* Balance number */ .mobile-wallet-section .member-balance { color: #000 !important; font-weight: 900 !important; text-shadow: 0 0 5px rgba(255,216,72,.55), 0 0 10px rgba(255,170,0,.18) !important; } /* Refresh SVG */ .mobile-wallet-section .mobile-beta-refresh path { fill: #ffd75a !important; } .mobile-wallet-section .mobile-beta-refresh { filter: drop-shadow(0 0 4px rgba(255,216,77,.65)); } /* ========================================================= EYE ICON - FONT AWESOME ========================================================= */ .mobile-wallet-section .eye-icon { background: none !important; background-image: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .mobile-wallet-section .eye-icon::before { content: "\f06e"; font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900; color: #61ddff; text-shadow: 0 0 5px rgba(79,220,255,.75), 0 0 9px rgba(0,155,255,.28); } /* ========================================================= RETRIEVE / TRANSFER ========================================================= */ .mobile-wallet-section .member-action .action-box { background: linear-gradient( 180deg, #0e3454 0%, #08233c 55%, #051727 100% ) !important; border-color: rgba(72,207,250,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } .mobile-wallet-section .action-label { color: #e7f9ff !important; } /* remove old sprite */ .action-withdrawalall .icon_home_header_restore, .action-wallettransfer .icon-wallettransfer { background: none !important; background-image: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; } /* Retrieve */ .action-withdrawalall .icon_home_header_restore::before { content: "\f2ea"; font-family: "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-size: 18px; color: #62ddff; text-shadow: 0 0 5px rgba(77,219,255,.75); } /* Transfer */ .action-wallettransfer .icon-wallettransfer::before { content: "\f362"; font-family: "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-size: 18px; color: #ffd75b; text-shadow: 0 0 5px rgba(255,216,77,.65); } /* ========================================================= WALLET BOTTOM ACTION MENU ========================================================= */ .mobile-wallet-section .bottom-content, .mobile-wallet-section .idr_content_bottom { background: linear-gradient( 180deg, #071a2e, #040f1d ) !important; } .mobile-wallet-section .idr_content_bottom li a { background: linear-gradient( 180deg, rgba(13,49,79,.85), rgba(5,23,40,.95) ) !important; color: #e7f9ff !important; border-color: rgba(67,197,240,.16) !important; } .mobile-wallet-section .idr_content_bottom li span { color: #e7f9ff !important; text-shadow: 0 1px 2px rgba(0,0,0,.65) !important; } /* remove old sprites */ .mobile-wallet-section .idr_content_bottom .icon { background: none !important; background-image: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; } /* common font icon */ .mobile-wallet-section .idr_content_bottom .icon::before { font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-size: 18px !important; color: #62ddff !important; text-shadow: 0 0 4px rgba(79,219,255,.72), 0 0 8px rgba(0,155,255,.25); } /* Withdrawal */ .mobile-wallet-section .li-withdrawal .icon::before { content: "\f3d1"; } /* Statement */ .mobile-wallet-section .li-mystatement .icon::before { content: "\f15c"; } /* History */ .mobile-wallet-section .li-myhistory .icon::before { content: "\f1da"; } /* Wallet */ .mobile-wallet-section .li-walletbalance .icon::before { content: "\f555"; color: #ffd75a !important; text-shadow: 0 0 5px rgba(255,216,75,.70); } /* hover */ .mobile-wallet-section .idr_content_bottom li a:hover { background: linear-gradient( 180deg, #115782, #082e50 ) !important; } .mobile-wallet-section .idr_content_bottom li a:hover span, .mobile-wallet-section .idr_content_bottom li a:hover .icon::before { color: #ffd85a !important; } /* ========================================================= SHOW MORE ========================================================= */ .mobile-wallet-section + .show-more { background: linear-gradient( 180deg, #09243d, #051625 ) !important; color: #bfeeff !important; border-color: rgba(72,205,247,.20) !important; } .mobile-wallet-section + .show-more svg path { fill: #62ddff !important; } .mobile-wallet-section + .show-more p { color: #cdefff !important; } /* ========================================================= ACCOUNT SHORTCUT MENU ========================================================= */ .account-menu-section { background: linear-gradient( 180deg, #081c30 0%, #040f1d 100% ) !important; border-color: rgba(71,203,245,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important; } .account-menu-section .shortcut-menu { background: linear-gradient( 180deg, rgba(14,49,78,.88), rgba(5,22,39,.95) ) !important; border-color: rgba(70,199,240,.16) !important; } /* shortcut wording */ .account-menu-section .shortcut-label { color: #dff7ff !important; text-shadow: 0 1px 2px rgba(0,0,0,.65) !important; } /* ========================================================= REMOVE OLD ACCOUNT MENU SPRITE ICONS ========================================================= */ .account-menu-section .shortcut-menu .icon { background: none !important; background-image: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; } .account-menu-section .shortcut-menu .icon::before { font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-size: 20px !important; color: #62dcff !important; text-shadow: 0 0 4px rgba(78,220,255,.75), 0 0 8px rgba(0,155,255,.25); } /* PROFILE */ .account-menu-section .menu-myaccountprofile .icon::before { content: "\f007"; } /* REFERRAL */ .account-menu-section .menu-myaccountreferral .icon::before { content: "\f0c0"; color: #ffd75a !important; text-shadow: 0 0 5px rgba(255,216,75,.65); } /* CHANGE PASSWORD */ .account-menu-section .menu-myaccountchangepassword .icon::before { content: "\f084"; } /* LANGUAGE */ .account-menu-section .menu-language .icon::before { content: "\f1ab"; } /* LOGOUT */ .account-menu-section .menu-logout .icon::before { content: "\f2f5"; color: #ff9a9f !important; text-shadow: 0 0 5px rgba(255,87,95,.45); } /* ========================================================= SHORTCUT HOVER ========================================================= */ .account-menu-section .shortcut-menu:hover { background: linear-gradient( 180deg, #10557f, #082e4e ) !important; border-color: rgba(255,215,78,.38) !important; } .account-menu-section .shortcut-menu:hover .shortcut-label, .account-menu-section .shortcut-menu:hover .icon::before { color: #ffd85b !important; text-shadow: 0 0 5px rgba(255,216,77,.65) !important; } /* Logout stays red on hover */ .account-menu-section .menu-logout:hover .icon::before { color: #ffafb2 !important; } /* ========================================================= UNREAD BADGE ========================================================= */ .account-menu-section .unread-msg { background: linear-gradient( 180deg, #ffdf68, #c99010 ) !important; color: #06294e !important; border-color: #fff1a0 !important; box-shadow: 0 0 5px rgba(255,214,72,.50) !important; } /* ===================================================== REGISTRATION DROPDOWN FIX MATCH LIGHT BLUE / ICE WHITE REGISTRATION THEME CSS ONLY - MOBILE SCROLL / FULL DISPLAY ===================================================== */ /* Prevent dropdown clipping */ #registrationPage .reg-step-container, #registrationPage .reg-form-section, #registrationPage .register-input-container, #registrationPage .standard-form-field, #registrationPage .standard-form-field-wrapper, #registrationPage .standard-m-form-col-full, #registrationPage .phone-field, #registrationPage .dob-field{ overflow:visible !important; } /* Dropdown parent */ #registrationPage .register-input-container, #registrationPage .standard-form-field, #registrationPage .standard-form-field-wrapper{ position:relative; } /* Bring opened dropdown above other fields */ #registrationPage .register-input-container:has(.isOpen), #registrationPage .standard-form-field:has(.isOpen), #registrationPage .standard-form-field-wrapper:has(.isOpen){ z-index:99999 !important; } /* ===================================================== OPEN DROPDOWN ===================================================== */ #registrationPage .standard-select-dropdown.isOpen{ display:block !important; visibility:visible !important; opacity:1 !important; z-index:999999 !important; height:auto !important; max-height:280px !important; overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; touch-action:pan-y !important; background: linear-gradient( 180deg, #ffffff 0%, #f5fcff 55%, #eaf9ff 100% ) !important; border: 1.5px solid #69d8f5 !important; box-shadow: 0 7px 18px rgba(0,113,170,.16), 0 0 8px rgba(69,202,242,.18), inset 0 1px 0 rgba(255,255,255,.95) !important; } /* Keep closed dropdown hidden */ #registrationPage .standard-select-dropdown.isHide:not(.isOpen){ display:none !important; } /* ===================================================== DOB DAY / MONTH / YEAR ===================================================== */ #registrationPage .dob-field{ overflow:visible !important; } #registrationPage .dob-field ~ .standard-select-dropdown.isOpen{ max-height:45dvh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; touch-action:pan-y !important; } /* ===================================================== OPTION CONTAINERS ===================================================== */ #registrationPage .dob-date-options, #registrationPage .international-telcode-options{ height:auto !important; max-height:none !important; overflow:visible !important; } /* ===================================================== OPTIONS ===================================================== */ #registrationPage .standard-select-dropdown .standard-select-options{ color:#0b74b1 !important; background: linear-gradient( 180deg, #ffffff 0%, #f7fdff 100% ) !important; border-bottom: 1px solid rgba(77,196,235,.22) !important; cursor:pointer; text-shadow:none !important; transition: background .18s ease, color .18s ease, box-shadow .18s ease !important; } /* Hover */ #registrationPage .standard-select-dropdown .standard-select-options:hover{ background: linear-gradient( 180deg, #eafaff 0%, #d8f5ff 100% ) !important; color:#006da9 !important; box-shadow: inset 3px 0 0 #35c5ef !important; } /* ===================================================== SELECTED OPTION ===================================================== */ #registrationPage .standard-select-dropdown .standard-select-options.active{ background: linear-gradient( 180deg, #64dff7 0%, #35c8ef 48%, #149fd5 100% ) !important; color:#ffffff !important; font-weight:700 !important; border-bottom-color:#29bce7 !important; text-shadow: 0 1px 1px rgba(0,89,137,.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 3px 0 0 #ffffff, 0 0 7px rgba(53,199,238,.32) !important; } /* ===================================================== SCROLLBAR ===================================================== */ #registrationPage .standard-select-dropdown.isOpen::-webkit-scrollbar{ width:5px !important; } #registrationPage .standard-select-dropdown.isOpen::-webkit-scrollbar-track{ background:#edfaff !important; } #registrationPage .standard-select-dropdown.isOpen::-webkit-scrollbar-thumb{ background: linear-gradient( 180deg, #69e0f8 0%, #31c5ec 50%, #0a91cc 100% ) !important; border-radius:10px !important; } /* ===================================================== MOBILE ===================================================== */ @media(max-width:767px){ #registrationPage .standard-select-dropdown.isOpen{ max-height:45dvh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; touch-action:pan-y !important; background: linear-gradient( 180deg, #ffffff 0%, #f7fdff 55%, #ebfaff 100% ) !important; border-color:#68d8f5 !important; box-shadow: 0 10px 24px rgba(0,111,167,.18), 0 0 8px rgba(58,199,238,.20) !important; } #registrationPage .standard-select-dropdown.isOpen *{ touch-action:pan-y !important; } } /* ===================================================== IOS SAFARI ===================================================== */ @supports (-webkit-touch-callout:none){ #registrationPage .standard-select-dropdown.isOpen{ overflow-y:scroll !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; } } .account-menu-section .shortcut-menu .icon-voucher::before { content: "\f3ff"; /* voucher / ticket icon */ }