.wallet-selection, .daily-checkin-progress-day-coinbg, .game-title{ display:none!important; } #homePage{ background-image: url(./img1818_ukayakiss/mainbg2.png?=v6) !important; background-size: 100%!important; } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li { height: 4.4rem!important;} .icon-home-big{ background-image: url(./img1818_ukayakiss/home_icon.png?=v5?=v5) !important; background-size: 100%!important; } .masthead-images{ height:295px!important; background-image: url(img1818_ukayakiss/mobile.jpg?v=3)!important; background-size: 100%!important; margin: 32px auto 0px auto!important; background-repeat: no-repeat!important; } .masthead-images .bg-item1, .masthead-images .bg-item2, .masthead-images .bg-item3, .masthead-images .bg-item4, .masthead-images .bg-item5 { display:none!important; } [data-page="myaccount"] .icon-voucher{ background-image: url(./img1818_ukayakiss/voucher_user.png?=v5?=v5) !important; background-size: 100%!important; width: 1.2rem !important; height: 1.2rem !important; } .home_navBox .game-nav li .nav-link{ min-height: 2.39rem!important; } .icon-voucher{ background-image: url(./img1818_ukayakiss/voucher_icon.png?=v5?=v5) !important; background-size: 100%!important; } .icon-promotion-big{ background-image: url(./img1818_ukayakiss/promo_icon.png?=v5?v=1) !important; background-size: 100%!important; } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li{ width:33.333%!important; } .icon-download{ background-image: url(./img1818_ukayakiss/download_icon.png?=v5?=v5) !important; background-size: 100%!important; } .icon-about-us{ background-image: url(./img1818_ukayakiss/about_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-tnc{ background-image: url(./img1818_ukayakiss/info_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-about-us{ background-image: url(./img1818_ukayakiss/about_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-tnc{ background-image: url(./img1818_ukayakiss/info_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-contact{ background-image: url(./img1818_ukayakiss/contact_icon.png?=v5?v=1) !important; background-size: 100%!important; } [data-page="myaccount"] .icon-language{ background-image: url(./img1818_ukayakiss/acc_language.png?=v5?v=1) !important; background-size: 100%!important; width: 1.2rem !important; height: 1.2rem !important; } .icon-language{ background-image: url(./img1818_ukayakiss/language_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-logout{ background-image: url(./img1818_ukayakiss/logout_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-funds{ background-image: url(./img1818_ukayakiss/deposit_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-account{ background-image: url(./img1818_ukayakiss/acc_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-livechat{ background-image: url(./img1818_ukayakiss/chat_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon-wallettransfer{ background-image: url("./img1818_ukayakiss/transfer_icon.png?=v5") !important; background-size: 100%!important; } .icon-withdrawal{ background-image: url("./img1818_ukayakiss/withdraw_icon.png?=v5") !important; background-size: 100%!important; } .icon-statement{ background-image: url("./img1818_ukayakiss/statement_icon.png?=v5") !important; background-size: 100%!important; } .icon-history{ background-image: url("./img1818_ukayakiss/history_icon.png?=v5") !important; background-size: 100%!important; } .icon_home_header_restore{ background-image: url("./img1818_ukayakiss/retrieve_icon.png?=v5") !important; background-size: 100%!important; } .fa-whatsapp:before{ content:none!important; } .fa-whatsapp{ background-image: url("./img1818_ukayakiss/whatsapp_icon.png?=v5") !important; background-size: 100%!important; width: 35px!important; height: 35px!important; } .sports-container-background { background-image: url(./img1818_ukayakiss/sportbg.png?=v5?v=1) !important; } .icon_home_menu_sport{ background-image: url(./img1818_ukayakiss/soccer_icon.png?=v5?v=1) !important; background-size: 100%!important; } .scroll_menu .on .icon_home_menu_sport{ background-size: 100%!important; background-image: url(./img1818_ukayakiss/soccer_icon.png?=v5?v=1) !important; } .icon_home_menu_lc{ background-image: url(./img1818_ukayakiss/casino_icon.png?=v5?v=1) !important; background-size: 100%!important; } .scroll_menu .on .icon_home_menu_lc{ background-size: 100%!important; background-image: url(./img1818_ukayakiss/casino_icon.png?=v5?v=1) !important; } .icon_home_menu_slot{ background-image: url(./img1818_ukayakiss/slot_icon.png?=v5?v=1) !important; background-size: 100%!important; } .scroll_menu .on .icon_home_menu_slot{ background-size: 100%!important; background-image: url(./img1818_ukayakiss/slot_icon.png?=v5?v=1) !important; } .icon_home_menu_fishing{ background-image: url(./img1818_ukayakiss/fishing_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon_home_menu_711{ background-image: url(./img1818_ukayakiss/711_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon_home_menu_cockfight{ background-image: url(./img1818_ukayakiss/cf_icon.png?=v5?v=1) !important; background-size: 100%!important; } .icon_home_menu_keno{ background-image: url(./img1818_ukayakiss/keno_icon.png?=v5?v=1) !important; background-size: 100%!important; } .scroll_menu .on .icon_home_menu_fishing{ background-size: 100%!important; background-image: url(./img1818_ukayakiss/fishing_icon.png?=v5?v=1) !important; } .icon_home_menu_crash{ background-image: url(./img1818_ukayakiss/aviator_icon.png?=v5?v=1) !important; background-size: 100%!important; } .scroll_menu .on .icon_home_menu_crash{ background-size: 100%!important; background-image: url(./img1818_ukayakiss/aviator_icon.png?=v5?v=1) !important; } .icon_home_menu_lottery{ background-image: url(./img1818_ukayakiss/lotto_icon.png?=v5?v=1) !important; background-size: 100%!important; } .scroll_menu .on .icon_home_menu_lottery{ background-size: 100%!important; background-image: url(./img1818_ukayakiss/lotto_icon.png?=v5?v=1) !important; } #sport_firmcontent .icon_home_logo_sport_msport{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/m_sport.png?=v5?v=3') !important; } #sport_firmcontent .icon_home_logo_sport_sbo{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sbo_sport.png?=v5?v=3') !important; } #sport_firmcontent .icon_home_logo_sport_ibc{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/ibc_sport.png?=v5?v=3') !important; } #sport_firmcontent .icon_home_logo_sport_cmd{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/cmd_sport.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_PT{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/pt_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_SEXYB{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sexyb_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_BG{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/bg_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_AB{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/allbet_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_DG{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/dg_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_SA{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sa_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_EG{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/eg_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_GP{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/gp_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_WM{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/wm_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_EZUGI{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/ezugi_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_marbula2{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/m2_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_pragmatic{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/pp_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_BBINC{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/bbin_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_SBOC{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sbo_casino.png?=v5?v=3') !important; } #casino_firmcontent .icon_home_logo_casino_YEEBET{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/yeebet_casino.png?=v5?v=3') !important; } .float-menu.customicon-floating-icon .floating-icon-image { content:url('./img1818_ukayakiss/download.png?=v5?v=3') !important; } .float-menu.dailyloginreward-floating-icon .floating-icon-image { content:url('./img1818_ukayakiss/checkin.png?=v5?v=3') !important; } .float-menu.luckyspin-floating-icon .floating-icon-image{ content:url('./img1818_ukayakiss/spin.png?=v5?v=3') !important; } .float-menu.luckybox-floating-icon .floating-icon-image{ content:url('./img1818_ukayakiss/luckybox.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_PTS{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/pt_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_pocketgame{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/pg_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_PRA{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/pra_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_fachai{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/fachai_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_jili{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/jili_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_kingmaker{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/km_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_SG{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sg_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_CQ9{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/cq9_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_GPS{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/gp_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_MG{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/mg_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_NETENT{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/netent_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_jdb{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/jdb_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_ludobet{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/ludo_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_advantplay{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/ap_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_BBINS{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/bbin_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_SBOS{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sbo_slot.png?=v5?v=4') !important; } #slot_firmcontent .icon_home_logo_slot_habanero{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/haba_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_naga{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/naga_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_dctrelax{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/relax_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_spribe{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/spribe_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_rich88{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/rich88_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_gamerbuild{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/gamerbuild_slot.png?=v5?v=3') !important; } #slot_firmcontent .icon_home_logo_slot_inout{ background-image:url('./img1818_ukayakiss/inout_slot.png?=v5?v5') ; border-radius: 15px; } #slot_firmcontent .icon_home_logo_slot_rpsoft{ background-image:url('./img1818_ukayakiss/rpsoft_slot.png?=v5?v5') ; border-radius: 15px; } #slot_firmcontent .game-item-mega888h5 .icon_home_logo_scr_MEGA{ background-image:url('./img1818_ukayakiss/mega888h5_slot.png?=v5?v5') ; border-radius: 15px; } #slot_firmcontent .icon_home_logo_slot_spribe{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/spribe_slot.png?=v5?v=3') !important; } #lottery_firmcontent .icon_home_logo_GD4D{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/4d_keno.png?=v5?v=3') !important; } #lottery_firmcontent .icon_home_logo_VR{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/vr_keno.png?=v5?v=3') !important; } #lottery_firmcontent .icon_home_logo_BBINF{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/bbin_keno.png?=v5?v=3') !important; } #lottery_firmcontent .icon_home_logo_KY{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/ky_keno.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_slot_JOKER{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/joker_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_lionking{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/lk_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_scr_S918{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/918_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_scr_MEGA{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/mega_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_scr_PUSSY{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/pussy_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_scr_LIVE{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/live22_711.png?=v5?v=4') !important; } #mobile_firmcontent .icon_home_logo_slot_VP{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/vp_711.png?=v5?v=4') !important; } #mobile_firmcontent .icon_home_logo_scr_GW{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/gw_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_scr_PB{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/pb_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_slot_XE{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/xe_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_slot_XE{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/xe_711.png?=v5?v=3') !important; } #mobile_firmcontent .icon_home_logo_evo888{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/evo_711.png?=v5?v=3') !important; } #keno_firmcontent .icon_home_logo_VR{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/vr_keno.png?=v5') !important; } #keno_firmcontent .icon_home_logo_BBINF{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/bbin_keno.png?=v5') !important; } #keno_firmcontent .icon_home_logo_KY{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/ky_keno.png?=v5') !important; } #keno_firmcontent .icon_home_logo_keno_jili{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/jili_fishing.png?=v5') !important; } .icon-menu{ background-image:url('./img1818_ukayakiss/side_menu.png?=v5?v=3') !important; } #cockfight_firmcontent .icon_home_logo_cockfight_sv388{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sv388_fishing.png?=v5?v=4') !important; } #fishing_firmcontent .icon_home_logo_fishing_BBIN{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/bbin_fishing.png?=v5?v=4') !important; } #fishing_firmcontent .icon_home_logo_fishing_GG{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/gg_fishing.png?=v5?v=3') !important; } #fishing_firmcontent .icon_home_logo_fish_jdb{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/jdb_fishing.png?=v5?v=3') !important; } #fishing_firmcontent .icon_home_logo_fish_jili{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/jili_fishing.png?=v5?v=3') !important; } #fishing_firmcontent .icon_home_logo_fishing_JOKER{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/joker_fishing.png?=v5?v=3') !important; } #fishing_firmcontent .icon_home_logo_fishing_SG{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/sg_fishing.png?=v5?v=3') !important; } #fishing_firmcontent .icon_home_logo_fish_cq9{ border-radius: 15px !important; background-image:url('./img1818_ukayakiss/cq9_fishing.png?=v5?v=3') !important; } .mobile-tnc .info-centre-header, #aboutUsPage .history_nav{ background: linear-gradient(0deg, #0062c9, #0062c9) !important; color:#000!important; } #aboutUsPage .history_nav li a.on{ color:#444444!important; } .entertain .content, .mission .content, .story .font, .gamelobby-content .games-tab-content .game-title{ color:#0062c9!important; } .info-centre-header span[style], #aboutUsPage .history_nav li a{ color:#000!important; } .read-next a{ color:#ff0000!important; } i.provider.logo-pragmatic, i.provider.logo-playtech, i.provider.logo-spribe{ filter: brightness(0) invert(1)!important; } #depositForm .quick_pay_input_item > label, #depositForm .quick_pay_select_item>label, #depositForm .quick_pay_input_item>div>label, .page-title, .primary-style .quick_pay_input_item > label, #walletWithdrawalContainer h1[style], #walletTransferContainer h1[style], #historyContainer h1[style], #regPage .regformBox .login_centent .steptitle, #regPage .regformBox .login_centent .input_item .label-aff span, .section-desc[style], .standard-label, .m-transfer-container .m-transfer-form .standard-form-field .standard-label, .m-deposit-landing-container .standard-content-container .m-standard-transaction-container .m-transaction-form .bank-list-container .st-title { color: #282828!important; font-weight: bold!important; text-transform: uppercase!important; } .btn-primary, .transfer-type-section .btn-default, .btn-blue, .standard-button-container .standard-submit-form-button, .casino-usrpwd-body .play-btn, .btn-red-play, .m-transfer-container .m-transfer-form .standard-button-container .standard-submit-form-button, .btn.btn-form.confirm-tran-btn, .swiper-slide .button-style-1, .product-filter .button-style-2.is-active, .product-filter .button-style-2, .button-filter, .button-style-1 , .m-deposit-landing-container .deposit-tab-container .deposit-tab .active .img-container{ background: linear-gradient(0deg, #0062c9, #0062c9) !important; border-color: #282828!important; } .luckyspin_banner{ background: url("./img1818_ukayakiss/luckyspin.jpg?=v4")!important; background-size: 100%!important; } .bestsportgame_banner .owl-carousel .owl-item > div[data-index="1"]{ background: url("./img1818_ukayakiss/sport2.jpg")!important; background-size: 100%!important; } .bestsportgame_banner .owl-carousel .owl-item > div[data-index="0"]{ background: url("./img1818_ukayakiss/sport1.jpg")!important; background-size: 100%!important; } .account-menu-section .icon-myprofile{ background: url("./img1818_ukayakiss/acc_user.png?=v5")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-referral-program{ background: url("./img1818_ukayakiss/acc_referral.png?=v5")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-changepassword{ background: url("./img1818_ukayakiss/acc_changepassword.png?=v5")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-logout{ background: url("./img1818_ukayakiss/acc_logout.png?=v5")!important; background-size: 100%!important; width: 1.2rem!important; height: 1.2rem!important; background-repeat: no-repeat!important; } .icon-wallets{ background: url("./img1818_ukayakiss/wallet_icon.png?=v5")!important; background-size: 100%!important; background-repeat: no-repeat!important; } /* ========================================================= SIDE MENU IMAGE VERSION HTML NO NEED CHANGE ========================================================= */ /* 整个 side menu */ .game-nav { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* 每个 menu item */ .game-nav .nav-item { margin: 0 0 8px 0 !important; padding: 0 !important; width: 150px !important; /* 可自己改宽 */ list-style: none !important; } /* link 本体 */ .game-nav .nav-item .nav-link { position: relative !important; display: block !important; width: 100px !important; /* 跟图片宽度接近 */ height: 40px !important; /* 跟图片高度接近 */ margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; overflow: hidden !important; } /* 移除 bootstrap / nav-pills 默认效果 */ .game-nav .nav-item .nav-link, .game-nav .nav-item .nav-link:hover, .game-nav .nav-item .nav-link:focus, .game-nav .nav-item .nav-link.active, .game-nav .nav-item .show > .nav-link { background-color: transparent !important; border: 0 !important; box-shadow: none !important; color: transparent !important; } /* 隐藏原本 icon */ .game-nav .nav-item .nav-link .i, .game-nav .nav-item .nav-link .i i { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; } /* 隐藏原本 wording */ .game-nav .nav-item .nav-link > span { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } /* 防止旧 CSS 加 pseudo element */ .game-nav .nav-item .nav-link::before, .game-nav .nav-item .nav-link::after { box-shadow: none !important; } /* ========================================================= IMAGE PATH 只改下面这些路径 ========================================================= */ .game-nav .li-slot .nav-link { background-image: url("./img1818_ukayakiss/slot_icon.png?=v5")!important; } .game-nav .li-mobile .nav-link { background-image: url("./img1818_ukayakiss/711_icon.png?=v5")!important; } .game-nav .li-casino .nav-link { background-image: url("./img1818_ukayakiss/casino_icon.png?=v5")!important; } .game-nav .li-sport .nav-link { background-image: url("./img1818_ukayakiss/soccer_icon.png?=v5")!important; } .game-nav .li-fishing .nav-link { background-image: url("./img1818_ukayakiss/fishing_icon.png?=v5")!important; } .game-nav .li-cockfight .nav-link { background-image: url("./img1818_ukayakiss/cf_icon.png?=v5")!important; } .game-nav .li-lottery4d .nav-link { background-image: url("./img1818_ukayakiss/lotto_icon.png?=v5")!important; } .game-nav .li-keno .nav-link { background-image: url("./img1818_ukayakiss/keno_icon.png?=v5")!important; } .game-nav .li-luckyspin .nav-link { background-image: url("./img1818_ukayakiss/spin_icon.png?=v5")!important; } /* ========================================================= HOVER / ACTIVE EFFECT ========================================================= */ .game-nav .nav-item .nav-link:hover { transform: translateX(2px) !important; filter: brightness(1.08) !important; } .game-nav .nav-item .nav-link.active { filter: brightness(1.12) drop-shadow(0 0 4px rgba(0, 170, 255, 0.55)) !important; } .game-nav .nav-item .nav-link:active { transform: scale(0.97) !important; } #progressivejackpot .show-for-small-only img { content:url("./img1818_ukayakiss/jackpot.png?=v6")!important; } section#progressivejackpot.theme1 .home-jackpot-content.myr { top: 63%!important; left: 17%!important; } .sidemenu ul li i[class*=icon-], .footermenu ul li i[class*=icon-] { width: 1.2rem; height: 1.2rem; } /* ========================================================= PROMOTION PAGE BLACK + SAPPHIRE BLUE + CHAMPAGNE GOLD ========================================================= */ #promotionsPage.theme1 { width: 100%; max-width: 720px; margin: 0 auto; padding: 12px; box-sizing: border-box; background: radial-gradient( circle at 50% 0%, rgba(20, 79, 156, .16), transparent 35% ), linear-gradient( 180deg, #05080d 0%, #07101b 45%, #020305 100% ) !important; } /* ========================================================= FILTER / TABS ========================================================= */ #promotionsPage .filtering-container { width: 100%; margin-bottom: 14px; padding: 4px; box-sizing: border-box; border: 1px solid rgba(215,181,109,.45); border-radius: 12px; background: linear-gradient( 180deg, #0b1b2f 0%, #060d17 100% ); box-shadow: 0 0 7px rgba(18,83,164,.25), inset 0 1px 0 rgba(255,255,255,.05); } #promotionsPage .history_nav { display: flex !important; width: 100%; margin: 0 !important; padding: 0 !important; list-style: none !important; gap: 5px; } #promotionsPage .history_nav li { flex: 1; margin: 0 !important; padding: 0 !important; list-style: none; } #promotionsPage .history_nav li a { position: relative; width: 100%; height: 36px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(77,130,194,.35); border-radius: 8px; color: #aebdce !important; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; background: linear-gradient( 180deg, rgba(17,48,83,.65), rgba(7,22,39,.82) ); transition: .2s ease; } /* active tab */ #promotionsPage .history_nav li.active a, #promotionsPage .history_nav a.on { color: #f4dfac !important; border-color: #d9b76f; background: linear-gradient( 180deg, #2466ad 0%, #123f78 48%, #08274e 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 5px rgba(215,181,109,.45), 0 0 10px rgba(28,102,194,.4); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(215,181,109,.25); } /* active underline */ #promotionsPage .history_nav li.active a::after, #promotionsPage .history_nav a.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 3px; height: 2px; border-radius: 5px; background: linear-gradient( 90deg, transparent, #d8b66d, #f1d797, #d8b66d, transparent ); box-shadow: 0 0 5px rgba(215,181,109,.5); } /* ========================================================= HISTORY AREA ========================================================= */ #promotionsPage .history_content, #promotionsPage .history_list, #promotionsPage .history_list_item { width: 100%; box-sizing: border-box; } /* ========================================================= PROMOTION CARD ========================================================= */ #promotionsPage .promotions_item { position: relative; width: 100%; max-width: 570px; margin: 0 auto 16px; padding: 3px; box-sizing: border-box; overflow: hidden; border: 1px solid #d7b56d; border-radius: 14px; background: linear-gradient( 180deg, #0c1828 0%, #07101b 58%, #030608 100% ); box-shadow: 0 0 5px rgba(215,181,109,.22), 0 0 13px rgba(18,79,158,.22), inset 0 1px 0 rgba(255,255,255,.05); } /* inner edge */ #promotionsPage .promotions_item::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(215,181,109,.18); border-radius: 10px; pointer-events: none; z-index: 5; } /* ========================================================= PROMOTION IMAGE ========================================================= */ #promotionsPage .promotions_item .img { position: relative; width: 100%; overflow: hidden; border-radius: 10px 10px 4px 4px; } #promotionsPage .promotions_item .img img { display: block; width: 100%; height: auto; border-radius: 9px 9px 3px 3px; object-fit: cover; } /* champagne divider under image */ #promotionsPage .promotions_item .img::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, #1e64ba, #d7b56d, #1e64ba, transparent ); box-shadow: 0 0 5px rgba(215,181,109,.4); } /* ========================================================= PROMOTION CONTENT ========================================================= */ #promotionsPage .promotitembottom { position: relative; padding: 13px 13px 14px; text-align: center; background: radial-gradient( circle at 50% 0%, rgba(24,79,151,.22), transparent 50% ), linear-gradient( 180deg, #0a1727 0%, #050a11 100% ); } /* ========================================================= PROMOTION TITLE ========================================================= */ #promotionsPage .promotitembottom .p1 { margin: 0 0 6px !important; color: #f0d99f !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.35; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 4px rgba(215,181,109,.3); } /* ========================================================= PROMOTION DESCRIPTION ========================================================= */ #promotionsPage .promotitembottom .p2 { min-height: 16px; margin: 0 0 12px !important; color: #bec8d5 !important; font-size: 10.5px !important; font-weight: 500; line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,.9); } /* ========================================================= BUTTON AREA ========================================================= */ #promotionsPage .m-promotion-button-container { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; } /* common buttons */ #promotionsPage .btn-common { min-width: 120px; height: 35px; padding: 0 15px; border-radius: 8px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .3px; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } .ui-footer .navbar li a.on .icon-funds{ width: 1.2rem!important; height: 1.2rem!important; } /* ========================================================= DETAILS SAPPHIRE BLUE BUTTON ========================================================= */ #promotionsPage .btn-blue-promo { color: #eef6ff !important; border: 1px solid #6aa7ec !important; background: linear-gradient( 180deg, #2772c8 0%, #124c91 48%, #082c59 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 5px rgba(37,113,205,.4) !important; text-shadow: 0 1px 2px rgba(0,0,0,.85); } /* ========================================================= APPLY NOW CHAMPAGNE GOLD BUTTON ========================================================= */ #promotionsPage .btn-red-promo { color: #19120a !important; border: 1px solid #f0d394 !important; background: linear-gradient( 180deg, #f1dda7 0%, #d8b56c 45%, #ae8439 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 5px rgba(215,181,109,.5) !important; text-shadow: 0 1px 0 rgba(255,255,255,.35); } /* ========================================================= BUTTON HOVER ========================================================= */ #promotionsPage .btn-common:hover { transform: translateY(-2px); filter: brightness(1.1); } #promotionsPage .btn-blue-promo:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 7px rgba(53,136,235,.65), 0 0 12px rgba(23,87,167,.35) !important; } #promotionsPage .btn-red-promo:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 7px rgba(235,205,138,.75), 0 0 11px rgba(215,181,109,.4) !important; } #promotionsPage .btn-common:active { transform: scale(.97); } /* ========================================================= OPTIONAL SHINE EFFECT ON APPLY NOW ========================================================= */ #promotionsPage .btn-red-promo { position: relative; overflow: hidden; } #promotionsPage .btn-red-promo::before { content: ""; position: absolute; top: -50%; left: -70%; width: 25%; height: 200%; transform: rotate(20deg); pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,248,220,.85), transparent ); animation: promoGoldShine 3.2s ease-in-out infinite; } @keyframes promoGoldShine { 0% { left: -70%; opacity: 0; } 15% { opacity: 1; } 42% { left: 130%; opacity: 1; } 52%, 100% { left: 130%; opacity: 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { #promotionsPage.theme1 { padding: 7px; } #promotionsPage .filtering-container { margin-bottom: 10px; } #promotionsPage .history_nav li a { height: 33px; font-size: 10px; } #promotionsPage .promotions_item { margin-bottom: 11px; border-radius: 11px; } #promotionsPage .promotitembottom { padding: 10px 9px 11px; } #promotionsPage .promotitembottom .p1 { font-size: 12px !important; margin-bottom: 4px !important; } #promotionsPage .promotitembottom .p2 { font-size: 9px !important; margin-bottom: 9px !important; } #promotionsPage .m-promotion-button-container { gap: 6px; } #promotionsPage .btn-common { flex: 1; min-width: 0; height: 39px; padding: 0 7px; font-size: 15px !important; } } /* ========================================================= PROMOTION DETAIL BLACK + SAPPHIRE BLUE + CHAMPAGNE GOLD ========================================================= */ #pagePromotionsDetail { background: radial-gradient( circle at 50% 0%, rgba(23, 86, 167, .18), transparent 36% ), linear-gradient( 180deg, #05080d 0%, #07101b 45%, #020305 100% ) !important; color: #d9e0e8 !important; } /* ========================================================= TOP TITLE BAR ========================================================= */ #pagePromotionsDetail .pDetailTitle { min-height: 46px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 0 8px; box-sizing: border-box; border-bottom: 1px solid rgba(215,181,109,.65); background: linear-gradient( 180deg, #0d2037 0%, #081321 58%, #030609 100% ) !important; box-shadow: 0 2px 8px rgba(0,0,0,.55), 0 0 10px rgba(22,87,170,.25); } #pagePromotionsDetail .pDetailTitle .titleText { color: #efdba8 !important; font-size: 15px !important; font-weight: 800 !important; text-align: center; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(215,181,109,.25); } /* close button */ #pagePromotionsDetail .icon_language_close { filter: brightness(0) invert(86%) sepia(25%) saturate(760%) hue-rotate(350deg) drop-shadow(0 0 3px rgba(215,181,109,.45)); } /* ========================================================= CONTENT WRAPPER ========================================================= */ #promotionsDetailPage, #pagePromotionsDetail .promodetailContent { background: transparent !important; } #pagePromotionsDetail .promodetailContent { width: calc(100% - 16px); max-width: 700px; margin: 12px auto 24px; } /* ========================================================= PROMO BANNER ========================================================= */ #pagePromotionsDetail .promodetail_banner { position: relative; padding: 3px; margin-bottom: 12px; overflow: hidden; border: 1px solid #d7b56d !important; border-radius: 14px; background: linear-gradient( 145deg, #153f75, #09192b 52%, #030609 ) !important; box-shadow: 0 0 6px rgba(215,181,109,.3), 0 0 15px rgba(24,91,177,.28); } #pagePromotionsDetail .promodetail_banner::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(215,181,109,.2); border-radius: 9px; pointer-events: none; z-index: 2; } #pagePromotionsDetail .promodetail_banner .slider { overflow: hidden; border-radius: 10px; } #pagePromotionsDetail #promodetail-img { display: block; width: 100%; height: auto; border-radius: 9px; } /* ========================================================= MAIN DETAIL BOX ========================================================= */ #pagePromotionsDetail .promodetail_textbox { position: relative; padding: 15px; box-sizing: border-box; border: 1px solid #d7b56d !important; border-radius: 17px; background: radial-gradient( circle at 50% 0%, rgba(29, 98, 188, .20), transparent 40% ), linear-gradient( 180deg, #0c1929 0%, #07101b 50%, #030608 100% ) !important; box-shadow: 0 0 6px rgba(215,181,109,.22), 0 0 18px rgba(20,83,165,.23), inset 0 0 15px rgba(0,0,0,.38); } /* sapphire decorative gem */ #pagePromotionsDetail .promodetail_textbox::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); border: 1px solid #e1c27d; background: linear-gradient( 135deg, #6aafff, #1b67bd 45%, #07366f ); box-shadow: 0 0 5px rgba(215,181,109,.55), 0 0 9px rgba(40,119,219,.5); } /* ========================================================= PROMO TITLE ========================================================= */ #pagePromotionsDetail .p_title, #pagePromotionsDetail .p_title.blue { margin: 0 0 9px !important; padding: 10px 12px !important; border: 1px solid #d7b56d !important; border-radius: 9px !important; background: linear-gradient( 180deg, #2466ad 0%, #123f78 50%, #08274d 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 6px rgba(215,181,109,.25), 0 0 10px rgba(27,101,195,.3) !important; text-align: center; } #pagePromotionsDetail #promo-title { color: #f2dfad !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(215,181,109,.3); } /* ========================================================= PROMO DESCRIPTION ========================================================= */ #pagePromotionsDetail .promosection ol { margin: 8px 0 10px !important; padding: 0 !important; } #pagePromotionsDetail #promo-description { color: #c7d2df !important; font-size: 11px !important; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.9); } /* ========================================================= CONTENT DIV OVERRIDE INLINE PURPLE THEME ========================================================= */ #pagePromotionsDetail #contentDiv { padding-bottom: 18px !important; } #pagePromotionsDetail #contentDiv > div { max-width: 650px !important; margin: 18px auto !important; padding: 18px !important; border: 1px solid rgba(215,181,109,.48) !important; border-radius: 14px !important; background: radial-gradient( circle at 50% 0%, rgba(24, 79, 151, .18), transparent 38% ), linear-gradient( 180deg, #091522 0%, #050b12 60%, #020405 100% ) !important; color: #dce4ed !important; box-shadow: 0 0 13px rgba(20,77,153,.22), 0 0 6px rgba(215,181,109,.12), inset 0 0 14px rgba(0,0,0,.4) !important; text-shadow: 0 1px 2px rgba(0,0,0,.88) !important; } /* ========================================================= CONTENT HEADING ========================================================= */ #pagePromotionsDetail #contentDiv h2 { color: #efd797 !important; font-size: 14px !important; font-weight: 800 !important; margin-bottom: 12px !important; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(215,181,109,.3) !important; } /* ========================================================= BODY TEXT ========================================================= */ #pagePromotionsDetail #contentDiv p { color: #dce3eb !important; font-size: 11px !important; line-height: 1.65 !important; } /* override white text */ #pagePromotionsDetail #contentDiv span[style*="#ffffff"], #pagePromotionsDetail #contentDiv span[style*="255, 255, 255"], #pagePromotionsDetail #contentDiv font[color="#ffffff"] { color: #e5ebf2 !important; } /* ========================================================= OLD YELLOW -> CHAMPAGNE GOLD ========================================================= */ #pagePromotionsDetail #contentDiv span[style*="#ffff00"], #pagePromotionsDetail #contentDiv span[style*="255, 255, 0"], #pagePromotionsDetail #contentDiv font[color="#ffff00"] { color: #e5c477 !important; text-shadow: 0 0 4px rgba(215,181,109,.3) !important; } /* ========================================================= OLD BLUE -> SAPPHIRE BLUE ========================================================= */ #pagePromotionsDetail #contentDiv span[style*="#3498db"], #pagePromotionsDetail #contentDiv span[style*="52, 152, 219"] { color: #5ea9ff !important; text-shadow: 0 0 4px rgba(31,106,202,.35); } /* ========================================================= HORIZONTAL DIVIDERS ========================================================= */ #pagePromotionsDetail #contentDiv hr { height: 1px !important; margin: 16px 0 !important; border: 0 !important; background: linear-gradient( 90deg, transparent, #215fa9, #d7b56d, #215fa9, transparent ) !important; box-shadow: 0 0 5px rgba(215,181,109,.25) !important; } /* ========================================================= TERMS & CONDITIONS ========================================================= */ #pagePromotionsDetail #contentDiv hr + p { color: #efd99f !important; font-weight: 700; text-shadow: 0 0 4px rgba(215,181,109,.25); } /* ========================================================= WITHDRAW REQUIREMENTS ========================================================= */ #pagePromotionsDetail #contentDiv h3 { color: #d9e8fb !important; font-size: 13px !important; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(31,105,200,.4) !important; } /* checkmark */ #pagePromotionsDetail #contentDiv span[style*="#00ffcc"] { color: #74b7ff !important; } /* ========================================================= GENERAL TERMS BOX ========================================================= */ #pagePromotionsDetail #contentDiv > div > div { margin-top: 15px !important; padding: 12px !important; border: 1px solid rgba(72,131,199,.38) !important; border-radius: 9px !important; background: linear-gradient( 180deg, rgba(13,38,67,.92), rgba(5,15,26,.96) ) !important; color: #c9d1db !important; box-shadow: inset 0 0 10px rgba(19,69,131,.16), 0 0 6px rgba(0,0,0,.35) !important; } /* ========================================================= COPYRIGHT ========================================================= */ #pagePromotionsDetail #contentDiv > div > div:last-child { background: transparent !important; border: 0 !important; box-shadow: none !important; } #pagePromotionsDetail #contentDiv > div > div:last-child p { color: #8794a4 !important; } #pagePromotionsDetail #contentDiv > div > div:last-child span[style*="#3498db"] { color: #d9bb73 !important; } /* ========================================================= APPLY NOW BUTTON CHAMPAGNE GOLD ========================================================= */ #pagePromotionsDetail .m-promotion-button-container { display: flex; align-items: center; justify-content: center; margin: 8px 0 3px; } #pagePromotionsDetail .btn-red-promo { position: relative; min-width: 185px !important; height: 40px !important; overflow: hidden; padding: 0 24px !important; border: 1px solid #f0d394 !important; border-radius: 10px !important; color: #171008 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .5px; background: linear-gradient( 180deg, #f4e1ae 0%, #d8b56d 45%, #aa7c31 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 6px rgba(215,181,109,.5), 0 0 12px rgba(27,92,173,.18) !important; text-shadow: 0 1px 0 rgba(255,255,255,.4); cursor: pointer; } /* shine */ #pagePromotionsDetail .btn-red-promo::before { content: ""; position: absolute; top: -50%; left: -70%; width: 25%; height: 200%; transform: rotate(20deg); pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,250,225,.88), transparent ); animation: detailGoldShine 3s ease-in-out infinite; } #pagePromotionsDetail .btn-red-promo:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 9px rgba(233,204,139,.7), 0 0 15px rgba(29,99,187,.25) !important; } @keyframes detailGoldShine { 0% { left: -70%; opacity: 0; } 15% { opacity: 1; } 45% { left: 130%; opacity: 1; } 55%, 100% { left: 130%; opacity: 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { #pagePromotionsDetail .promodetailContent { width: calc(100% - 10px); margin-top: 8px; } #pagePromotionsDetail .promodetail_textbox { padding: 10px; border-radius: 13px; } #pagePromotionsDetail .p_title, #pagePromotionsDetail .p_title.blue { padding: 8px 7px !important; } #pagePromotionsDetail #promo-title { font-size: 12px !important; } #pagePromotionsDetail #promo-description { font-size: 9.5px !important; } #pagePromotionsDetail #contentDiv > div { margin: 12px auto !important; padding: 13px !important; border-radius: 11px !important; } #pagePromotionsDetail #contentDiv h2 { font-size: 12px !important; } #pagePromotionsDetail #contentDiv h3 { font-size: 11px !important; } #pagePromotionsDetail #contentDiv p { font-size: 10px !important; } #pagePromotionsDetail .btn-red-promo { width: 100% !important; max-width: 230px !important; height: 37px !important; font-size: 11px !important; } } #promotionsPage .history_content .history_list .history_list_item .promotions_item{ background-image: linear-gradient(180deg, #0a1727 0%, #0a1727 48%, #0a1727 100%) !important; } .daily-checkin-content-title { max-width: 80.93333vw !important; } /* ========================================================= DAILY CHECK-IN - VERSION 2 VIP REWARD DASHBOARD STYLE BLACK + SAPPHIRE BLUE + CHAMPAGNE GOLD ========================================================= */ /* ========================================================= MAIN WRAPPER ========================================================= */ .daily-checkin-home { position: relative; width: calc(100% - 14px); max-width: 720px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* ========================================================= RESET NOTICE ========================================================= */ .daily-checkin-rewardexplain { width: fit-content; margin: 0 auto 8px !important; padding: 5px 14px; border: 1px solid rgba(215, 181, 109, .4); border-radius: 20px; color: #d7c08a !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .3px; text-align: center; background: linear-gradient( 180deg, rgba(17, 35, 57, .96), rgba(5, 10, 16, .98) ); box-shadow: 0 0 6px rgba(19, 78, 154, .25); text-shadow: 0 1px 2px #000; } /* ========================================================= MAIN CARD ========================================================= */ .daily-checkin-content { position: relative; width: 100%; padding: 0 0 14px !important; overflow: hidden; box-sizing: border-box; border: 1px solid #c9a65f !important; border-radius: 14px !important; background: linear-gradient( 160deg, #0b1725 0%, #050a11 55%, #020304 100% ) !important; box-shadow: 0 5px 18px rgba(0,0,0,.55), 0 0 10px rgba(20, 84, 167, .25), inset 0 1px 0 rgba(255,255,255,.05) !important; } /* remove previous diamond decoration */ .daily-checkin-content::after { display: none !important; } /* ========================================================= TOP HEADER BAND ========================================================= */ .daily-checkin-content-titlewrap { position: relative; margin: 0 0 12px !important; padding: 12px 15px !important; text-align: left; border-bottom: 1px solid rgba(215,181,109,.35); background: linear-gradient( 90deg, #071323 0%, #123d72 50%, #071323 100% ); } /* gold top accent */ .daily-checkin-content-titlewrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, #a57b34, #f0d99a, #a57b34, transparent ); } .daily-checkin-content-title { margin: 0 !important; color: #eef3f9 !important; font-size: 13px !important; font-weight: 700 !important; text-align: center; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.95); } /* number 7 */ .daily-checkin-content-title .red-color { color: #f2d58f !important; font-size: 17px !important; font-weight: 900 !important; text-shadow: 0 0 5px rgba(215,181,109,.55); } /* ========================================================= COLLECT BUTTON GOLD VIP BUTTON ========================================================= */ .daily-checkin-content-button-activeRed { position: relative; width: 130px !important; height: 34px !important; margin: 0 auto 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; border: 1px solid #f0d18b !important; border-radius: 18px !important; color: #101419 !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .8px; text-transform: uppercase; background: linear-gradient( 180deg, #f4dda3 0%, #d6b268 48%, #9c702b 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 0 6px rgba(215,181,109,.5), 0 0 11px rgba(15,71,143,.25) !important; cursor: pointer; } /* button moving shine */ .daily-checkin-content-button-activeRed::after { content: ""; position: absolute; top: -60%; left: -70%; width: 24%; height: 220%; transform: rotate(22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.85), transparent ); animation: dailyVIPShine 3s ease-in-out infinite; } @keyframes dailyVIPShine { 0% { left: -70%; opacity: 0; } 15% { opacity: 1; } 42% { left: 130%; opacity: 1; } 55%, 100% { left: 130%; opacity: 0; } } /* ========================================================= PROGRESS DIFFERENT FORMAT - INDIVIDUAL DAY CARDS ========================================================= */ .daily-checkin-progress { position: relative; padding: 0 9px !important; } /* hide old connecting line */ .daily-checkin-progress-line { display: none !important; } /* days */ .daily-checkin-progress-wrap { width: 100%; display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 5px !important; align-items: stretch; } /* ========================================================= INDIVIDUAL DAY CARD ========================================================= */ .daily-checkin-progress-day { position: relative; min-width: 0; padding: 6px 2px 7px; display: flex !important; flex-direction: column; align-items: center; box-sizing: border-box; border: 1px solid rgba(58, 113, 177, .45); border-radius: 8px; background: linear-gradient( 180deg, #10243e 0%, #071424 58%, #04090f 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 8px rgba(22,73,137,.12); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } /* active Day 1 */ .daily-checkin-progress-day:first-child { border-color: #d8b76e; background: radial-gradient( circle at 50% 20%, rgba(48,116,197,.55), transparent 55% ), linear-gradient( 180deg, #163e70, #092341 65%, #061423 ); box-shadow: 0 0 5px rgba(215,181,109,.45), 0 0 9px rgba(28,96,187,.35), inset 0 0 8px rgba(255,255,255,.05); } /* active top indicator */ .daily-checkin-progress-day:first-child::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: linear-gradient( 90deg, transparent, #f0d38e, transparent ); box-shadow: 0 0 4px rgba(215,181,109,.6); } /* ========================================================= ICON AREA Override inline vw sizes ========================================================= */ .daily-checkin-progress-day > div:first-child { position: relative !important; width: 37px !important; height: 37px !important; margin-bottom: 3px; display: flex !important; align-items: center !important; justify-content: center !important; padding: 3px !important; box-sizing: border-box; border: 0 !important; border-radius: 6px !important; background: linear-gradient( 180deg, rgba(28,73,124,.35), rgba(7,20,35,.2) ) !important; } /* images */ .daily-checkin-progress-day img { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 100% !important; object-fit: contain !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); } /* active icon */ .daily-checkin-progress-day:first-child img { filter: brightness(1.08) drop-shadow(0 2px 2px rgba(0,0,0,.7)) drop-shadow(0 0 4px rgba(215,181,109,.4)); } /* ========================================================= DAY TEXT ========================================================= */ .daily-checkin-progress-day-text { width: 100%; margin: 3px 0 5px !important; color: #8294aa !important; font-size: 8px !important; font-weight: 700 !important; text-align: center; opacity: 1 !important; white-space: nowrap; } /* active day */ .daily-checkin-progress-day:first-child .daily-checkin-progress-day-text { color: #f0d797 !important; font-weight: 800 !important; } /* ========================================================= REWARD AMOUNT ========================================================= */ .daily-checkin-progress-day-coinbg, .daily-checkin-progress-day .daily-checkin-progress-day-coinbg[style] { width: calc(100% - 4px) !important; min-width: 0 !important; height: 18px !important; margin-top: auto; padding: 0 2px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; border: 1px solid rgba(68,122,188,.42) !important; border-radius: 4px !important; background: linear-gradient( 180deg, #12365f 0%, #07192b 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* active amount */ .daily-checkin-progress-day:first-child .daily-checkin-progress-day-coinbg { border-color: #d9b96e !important; background: linear-gradient( 180deg, #ead297, #bd9145 ) !important; box-shadow: 0 0 4px rgba(215,181,109,.4); } /* amount text */ .daily-checkin-progress-day-coin { margin: 0 !important; color: #aebed0 !important; font-size: 7.5px !important; font-weight: 800 !important; line-height: 16px !important; white-space: nowrap; } /* active amount text */ .daily-checkin-progress-day:first-child .daily-checkin-progress-day-coin { color: #10151b !important; } /* ========================================================= HOVER EFFECT ========================================================= */ .daily-checkin-progress-day:hover { transform: translateY(-2px); border-color: #658fc2; box-shadow: 0 0 7px rgba(29,97,183,.35); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { .daily-checkin-home { width: calc(100% - 8px); } .daily-checkin-content { border-radius: 12px !important; } .daily-checkin-content-titlewrap { padding: 10px 7px !important; } .daily-checkin-content-title { font-size: 10.5px !important; } .daily-checkin-content-title .red-color { font-size: 14px !important; } .daily-checkin-content-button-activeRed { width: 112px !important; height: 30px !important; margin-bottom: 11px !important; font-size: 9px !important; } .daily-checkin-progress { padding: 0 5px !important; } .daily-checkin-progress-wrap { gap: 3px !important; } .daily-checkin-progress-day { padding: 4px 1px 5px; border-radius: 6px; } .daily-checkin-progress-day > div:first-child { width: 31px !important; height: 31px !important; padding: 2px !important; } .daily-checkin-progress-day-text { font-size: 7px !important; margin: 2px 0 3px !important; } .daily-checkin-progress-day-coinbg, .daily-checkin-progress-day .daily-checkin-progress-day-coinbg[style] { height: 16px !important; padding: 0 1px !important; } .daily-checkin-progress-day-coin { font-size: 6.5px !important; line-height: 14px !important; } .daily-checkin-rewardexplain { font-size: 8px !important; padding: 4px 11px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .daily-checkin-progress-wrap { gap: 2px !important; } .daily-checkin-progress-day > div:first-child { width: 27px !important; height: 27px !important; } .daily-checkin-progress-day-text { font-size: 6.5px !important; } .daily-checkin-progress-day-coin { font-size: 6px !important; } } /* ========================================================= PROMOTION TABS BLACK + SAPPHIRE BLUE + CHAMPAGNE GOLD ========================================================= */ .history_nav.tabs { width: calc(100% - 16px); max-width: 520px; margin: 10px auto 14px !important; padding: 4px !important; display: flex !important; align-items: center; gap: 5px; list-style: none !important; box-sizing: border-box; border: 1px solid rgba(215, 181, 109, .5); border-radius: 12px; background: linear-gradient( 180deg, #0b1726 0%, #050a11 100% ); box-shadow: 0 0 6px rgba(27, 92, 179, .25), inset 0 1px 0 rgba(255,255,255,.05); } /* ========================================================= TAB ITEM ========================================================= */ .history_nav.tabs > li { flex: 1; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================= TAB BUTTON ========================================================= */ .history_nav.tabs > li > a { position: relative; width: 100%; height: 36px; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(70, 121, 181, .4); border-radius: 8px; color: #aebdce !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase; text-decoration: none !important; background: linear-gradient( 180deg, #10243d 0%, #071422 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .2s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease; } /* ========================================================= ACTIVE TAB ========================================================= */ .history_nav.tabs > li.active > a, .history_nav.tabs > li > a.on { color: #f3dfaa !important; border-color: #dec079 !important; background: linear-gradient( 180deg, #2874c8 0%, #124c91 48%, #072c59 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 5px rgba(215,181,109,.45), 0 0 11px rgba(33,105,199,.45) !important; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(215,181,109,.25); } /* champagne gold active indicator */ .history_nav.tabs > li.active > a::after, .history_nav.tabs > li > a.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3px; height: 2px; border-radius: 5px; background: linear-gradient( 90deg, transparent, #c59a4d, #f3d995, #c59a4d, transparent ); box-shadow: 0 0 5px rgba(215,181,109,.55); } /* ========================================================= HOVER ========================================================= */ .history_nav.tabs > li > a:hover { transform: translateY(-1px); border-color: rgba(215,181,109,.7); filter: brightness(1.08); } /* ========================================================= TEXT ========================================================= */ .history_nav.tabs > li > a span { position: relative; z-index: 2; color: inherit !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { .history_nav.tabs { width: calc(100% - 10px); margin: 7px auto 10px !important; padding: 3px !important; border-radius: 10px; } .history_nav.tabs > li > a { height: 32px; font-size: 9.5px !important; border-radius: 7px; } } #promotionsPage .history_nav, .btn-red-promo { background: #000!important; } .home-jackpot-running { color: #ffffff; font-weight: 800; letter-spacing: 1px; text-shadow: 0 0 3px #ffffff, 0 0 6px #00eaff, 0 0 12px #00aaff, 0 0 20px #005eff; animation: jackpotNeonBlink 0.8s infinite steps(2, end); } @keyframes jackpotNeonBlink { 0% { opacity: 1; text-shadow: 0 0 3px #ffffff, 0 0 6px #00eaff, 0 0 12px #00aaff, 0 0 20px #005eff; } 50% { opacity: 0.75; text-shadow: 0 0 2px #ffffff, 0 0 4px #00eaff, 0 0 8px #008cff; } 100% { opacity: 1; text-shadow: 0 0 4px #ffffff, 0 0 10px #00f7ff, 0 0 18px #00aaff, 0 0 30px #0066ff; } } /* ============================== LOGIN + JOIN NOW NEON BUTTON ============================== */ .right-member .btn-login, .right-member .btn-reg { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 110px; height: 38px; margin: 0 5px; padding: 0 20px; border-radius: 24px; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-decoration: none !important; overflow: hidden; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } /* LOGIN - BLUE NEON */ .right-member .btn-login { color: #fff !important; background: linear-gradient( 135deg, #0a2b80 0%, #006cff 45%, #00d9ff 100% ); border: 1px solid rgba(130, 235, 255, .95); box-shadow: 0 0 4px #00e5ff, 0 0 10px rgba(0, 153, 255, .85), 0 0 20px rgba(0, 102, 255, .55), inset 0 0 10px rgba(255,255,255,.25); animation: loginNeonPulse 1.8s infinite alternate; } /* JOIN NOW - GOLD NEON */ .right-member .btn-reg { color: #fff !important; background: linear-gradient( 135deg, #6c3d00 0%, #d88a00 45%, #ffd75a 100% ); border: 1px solid rgba(255, 232, 140, .95); box-shadow: 0 0 4px #ffd76a, 0 0 10px rgba(255, 170, 0, .85), 0 0 20px rgba(255, 117, 0, .55), inset 0 0 10px rgba(255,255,255,.25); animation: joinNeonPulse 1.8s infinite alternate; } /* ============================== MOVING SHINE ============================== */ .right-member .btn-login::before, .right-member .btn-reg::before { content: ""; position: absolute; top: -30%; left: -60%; width: 35%; height: 160%; background: linear-gradient( 110deg, transparent 0%, rgba(255,255,255,.15) 25%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.15) 75%, transparent 100% ); transform: skewX(-20deg); animation: buttonShine 2.5s infinite; } /* ============================== EXTRA INNER GLOW ============================== */ .right-member .btn-login::after, .right-member .btn-reg::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; border: 1px solid rgba(255,255,255,.25); pointer-events: none; } /* ============================== HOVER ============================== */ .right-member .btn-login:hover, .right-member .btn-reg:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.18); } /* ============================== CLICK ============================== */ .right-member .btn-login:active, .right-member .btn-reg:active { transform: scale(.94); } /* ============================== ANIMATION ============================== */ @keyframes loginNeonPulse { 0% { box-shadow: 0 0 4px #00e5ff, 0 0 8px rgba(0, 153, 255, .7), 0 0 14px rgba(0, 102, 255, .45), inset 0 0 8px rgba(255,255,255,.18); } 100% { box-shadow: 0 0 7px #ffffff, 0 0 14px #00e5ff, 0 0 24px rgba(0, 119, 255, .9), 0 0 34px rgba(0, 72, 255, .55), inset 0 0 14px rgba(255,255,255,.32); } } @keyframes joinNeonPulse { 0% { box-shadow: 0 0 4px #ffd76a, 0 0 8px rgba(255, 170, 0, .7), 0 0 14px rgba(255, 110, 0, .45), inset 0 0 8px rgba(255,255,255,.18); } 100% { box-shadow: 0 0 7px #fff4c2, 0 0 14px #ffd76a, 0 0 24px rgba(255, 153, 0, .9), 0 0 34px rgba(255, 90, 0, .55), inset 0 0 14px rgba(255,255,255,.32); } } @keyframes buttonShine { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } } /* ============================== LOGOUT NEON BUTTON ============================== */ .right-member .btn-logout { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 110px; height: 38px; padding: 0 20px; margin: 0 5px; border-radius: 24px; color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: .5px; text-decoration: none !important; cursor: pointer; overflow: hidden; background: linear-gradient( 135deg, #5b0010 0%, #c60025 45%, #ff4b61 100% ) !important; border: 1px solid rgba(255, 150, 160, .95) !important; box-shadow: 0 0 4px #ff4964, 0 0 10px rgba(255, 30, 70, .85), 0 0 20px rgba(255, 0, 45, .5), inset 0 0 10px rgba(255,255,255,.22); animation: logoutNeonPulse 1.6s infinite alternate; transition: transform .2s ease, filter .2s ease; } /* moving shine */ .right-member .btn-logout::before { content: ""; position: absolute; top: -30%; left: -60%; width: 35%; height: 160%; background: linear-gradient( 110deg, transparent 0%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.1) 75%, transparent 100% ); transform: skewX(-20deg); animation: logoutShine 2.5s infinite; } /* inner highlight */ .right-member .btn-logout::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; border: 1px solid rgba(255,255,255,.20); pointer-events: none; } /* hover */ .right-member .btn-logout:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.18); } /* click */ .right-member .btn-logout:active { transform: scale(.94); } /* neon pulse */ @keyframes logoutNeonPulse { 0% { box-shadow: 0 0 4px #ff4964, 0 0 8px rgba(255,30,70,.65), 0 0 14px rgba(255,0,45,.4), inset 0 0 8px rgba(255,255,255,.15); } 100% { box-shadow: 0 0 7px #ffffff, 0 0 14px #ff4964, 0 0 24px rgba(255,20,60,.9), 0 0 34px rgba(255,0,40,.55), inset 0 0 14px rgba(255,255,255,.3); } } /* shine movement */ @keyframes logoutShine { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } } /* ========================================================= REGISTRATION PAGE ROYAL SAPPHIRE / DIAMOND NEON STYLE HTML NO NEED CHANGE ========================================================= */ #registrationPage { position: relative; width: 100%; min-height: 100vh; padding: 25px 18px 120px; box-sizing: border-box; background: radial-gradient(circle at 15% 10%, rgba(0, 174, 255, .16), transparent 28%), radial-gradient(circle at 85% 20%, rgba(0, 81, 255, .18), transparent 25%), linear-gradient( 180deg, #071d44 0%, #041632 40%, #020b1d 100% ); color: #fff; overflow: hidden; } /* crystal light background */ #registrationPage::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, transparent 0 42%, rgba(0, 198, 255, .035) 43% 44%, transparent 45% 100% ), linear-gradient( 45deg, transparent 0 42%, rgba(61, 118, 255, .04) 43% 44%, transparent 45% 100% ); background-size: 70px 70px; pointer-events: none; } /* ========================================================= MAIN REGISTER BOX ========================================================= */ #registrationPage .reg-step-container { position: relative; z-index: 2; width: 100%; max-width: 620px; margin: 0 auto; padding: 24px 22px 28px; box-sizing: border-box; border-radius: 18px; background: linear-gradient( 145deg, rgba(9, 41, 89, .96), rgba(3, 16, 43, .98) ); border: 1px solid rgba(71, 205, 255, .55); box-shadow: 0 0 8px rgba(0, 193, 255, .25), 0 0 25px rgba(0, 78, 255, .18), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 20px rgba(0, 131, 255, .06); } /* ========================================================= TITLE ========================================================= */ #registrationPage .form-title { margin: 0 0 22px; padding: 0; text-align: center; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 0 4px #fff, 0 0 10px rgba(0, 213, 255, .8), 0 0 18px rgba(0, 91, 255, .65); } #registrationPage .form-title span:last-child { color: #73e9ff; font-size: 13px; } /* ========================================================= PROGRESS BAR ========================================================= */ #registrationPage .reg-progress-bar-section { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 auto 28px; padding: 0 10px; box-sizing: border-box; } /* step diamond */ #registrationPage .step-wrapper { position: relative; z-index: 2; width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; color: #8db8df; font-size: 15px; font-weight: 800; background: linear-gradient( 135deg, #102c55 0%, #071b3c 50%, #0b3469 100% ); border: 1px solid rgba(82, 180, 255, .55); transform: rotate(45deg); box-shadow: inset 0 0 8px rgba(0, 135, 255, .22), 0 0 6px rgba(0, 103, 255, .18); } /* rotate content back */ #registrationPage .step-wrapper > svg { width: 18px !important; height: 18px !important; transform: rotate(-45deg); } #registrationPage .step-wrapper > svg path { fill: #83bbdf; } /* numbers */ #registrationPage .step-wrapper { line-height: 42px; } #registrationPage .step-wrapper.on, #registrationPage .step-wrapper.current-step { color: #fff; background: linear-gradient( 135deg, #24efff 0%, #087dff 22%, #071c74 52%, #0c61e3 78%, #30e8ff 100% ); border-color: #94f7ff; box-shadow: 0 0 4px #fff, 0 0 9px #00d9ff, 0 0 18px rgba(0, 86, 255, .85), inset 0 0 10px rgba(255,255,255,.28); } /* progress line */ #registrationPage .progressBar { position: relative; flex: 1; height: 4px; margin: 0 6px; background: linear-gradient( 90deg, #0752ab, #00c6ff, #0752ab ); border-radius: 20px; box-shadow: 0 0 6px rgba(0, 198, 255, .6); } /* ========================================================= FORM SECTION ========================================================= */ #registrationPage .reg-form-section { width: 100%; } #registrationPage .register-input-container { position: relative; width: 100%; margin: 0 0 16px; } /* ========================================================= LABEL ========================================================= */ #registrationPage .standard-label { display: block; margin: 0 0 7px; color: #9ddcff; font-size: 12px; font-weight: 700; letter-spacing: .3px; } /* ========================================================= INPUT WRAPPER ========================================================= */ #registrationPage .standard-form-field, #registrationPage .standard-form-field-wrapper { position: relative; width: 100%; box-sizing: border-box; } #registrationPage .standard-form-field-wrapper { border-radius: 10px; background: linear-gradient( 180deg, rgba(8, 39, 83, .95), rgba(4, 19, 46, .98) ); border: 1px solid rgba(70, 179, 255, .55); box-shadow: inset 0 0 9px rgba(0, 141, 255, .1), 0 0 5px rgba(0, 137, 255, .08); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } #registrationPage .standard-form-field-wrapper:focus-within { border-color: #4de7ff; box-shadow: 0 0 5px rgba(0, 231, 255, .75), 0 0 14px rgba(0, 93, 255, .45), inset 0 0 10px rgba(0, 173, 255, .12); } /* ========================================================= INPUT ========================================================= */ #registrationPage .standard-input { width: 100% !important; height: 44px !important; padding: 0 14px !important; box-sizing: border-box !important; color: #fff !important; font-family: Arial, Helvetica, sans-serif; font-size: 14px; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; caret-color: #00eaff; } #registrationPage .standard-input::placeholder { color: rgba(189, 221, 246, .58); } /* ========================================================= PASSWORD EYE ========================================================= */ #registrationPage .password-field .standard-input { padding-right: 46px !important; } #registrationPage .standard-password-eye { position: absolute; top: 50%; right: 14px; width: 20px; height: 20px; transform: translateY(-50%); cursor: pointer; } #registrationPage .standard-password-eye path { fill: #62d8ff; } #registrationPage .standard-password-eye:hover path { fill: #fff; } /* ========================================================= ERROR MESSAGE ========================================================= */ #registrationPage .standard-error-validation { margin: 5px 3px 0 !important; color: #ff677e !important; font-size: 11px !important; line-height: 15px !important; text-shadow: 0 0 4px rgba(255, 32, 70, .35); } /* ========================================================= SELECT / DROPDOWN ========================================================= */ #registrationPage .standard-select { position: relative; min-height: 44px; display: flex; align-items: center; padding: 0 38px 0 14px; box-sizing: border-box; color: #fff; font-size: 14px; background: linear-gradient( 180deg, rgba(8, 39, 83, .95), rgba(4, 19, 46, .98) ); border: 1px solid rgba(70, 179, 255, .55); border-radius: 10px; box-shadow: inset 0 0 9px rgba(0, 141, 255, .10); cursor: pointer; } #registrationPage .standard-select:hover { border-color: #4de7ff; box-shadow: 0 0 7px rgba(0, 206, 255, .45); } /* arrow */ #registrationPage .standard-select-arrow { position: absolute; top: 50%; right: 14px; width: 8px; height: 8px; border-right: 2px solid #69ddff; border-bottom: 2px solid #69ddff; transform: translateY(-70%) rotate(45deg); } /* dropdown panel */ #registrationPage .standard-select-dropdown { position: absolute; z-index: 999; width: 100%; max-height: 220px; overflow-y: auto; margin-top: 5px; background: linear-gradient( 180deg, #092b58, #03132e ); border: 1px solid rgba(70, 198, 255, .65); border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 10px rgba(0, 136, 255, .22); } /* dropdown item */ #registrationPage .standard-select-options { padding: 11px 14px; color: #d8efff; font-size: 13px; border-bottom: 1px solid rgba(70, 154, 255, .12); cursor: pointer; } #registrationPage .standard-select-options:hover, #registrationPage .standard-select-options.active { color: #fff; background: linear-gradient( 90deg, rgba(0, 105, 255, .55), rgba(0, 214, 255, .25) ); text-shadow: 0 0 5px rgba(0, 225, 255, .8); } /* ========================================================= PHONE / DOB ROW ========================================================= */ #registrationPage .standard-m-form-col-full { display: flex; align-items: center; width: 100%; gap: 8px; } #registrationPage .phone-field .standard-select { flex: 0 0 100px; } #registrationPage .phone-field .standard-form-field-wrapper { flex: 1; } #registrationPage .dob-field .standard-select { flex: 1; min-width: 0; } /* ========================================================= CAPTCHA ========================================================= */ #registrationPage .dob-field > .standard-input { flex: 1; height: 44px !important; border-radius: 10px !important; background: linear-gradient( 180deg, rgba(8, 39, 83, .95), rgba(4, 19, 46, .98) ) !important; border: 1px solid rgba(70, 179, 255, .55) !important; } #registrationPage .dob-field img { flex: 0 0 130px; height: 44px !important; object-fit: cover; border-radius: 8px !important; border: 1px solid rgba(87, 210, 255, .65); box-shadow: 0 0 6px rgba(0, 183, 255, .3); } /* ========================================================= BUTTON SECTION ========================================================= */ #registrationPage .transaction-button-section { position: relative; width: 100%; margin-top: 25px; display: flex; align-items: center; gap: 10px; } #registrationPage .standard-button-container { flex: 1; display: flex; align-items: center; justify-content: center; } /* NEXT / REGISTER */ #registrationPage .standard-submit-form-button { position: relative; width: 100%; height: 46px; padding: 0 25px; border: 1px solid #94f7ff !important; border-radius: 24px !important; color: #fff !important; font-size: 14px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; background: linear-gradient( 135deg, #05266b 0%, #087cff 40%, #00d9ff 100% ) !important; box-shadow: 0 0 5px rgba(0, 232, 255, .75), 0 0 13px rgba(0, 91, 255, .55), inset 0 0 10px rgba(255,255,255,.20) !important; cursor: pointer; overflow: hidden; transition: transform .2s ease, filter .2s ease; } /* moving shine */ #registrationPage .standard-submit-form-button::before { content: ""; position: absolute; top: -30%; left: -50%; width: 25%; height: 160%; background: linear-gradient( 110deg, transparent, rgba(255,255,255,.15), rgba(255,255,255,.9), rgba(255,255,255,.15), transparent ); transform: skewX(-20deg); animation: regButtonShine 2.7s infinite; } @keyframes regButtonShine { 0% { left: -50%; } 45% { left: 125%; } 100% { left: 125%; } } #registrationPage .standard-submit-form-button:hover { transform: translateY(-2px); filter: brightness(1.18); box-shadow: 0 0 8px #fff, 0 0 15px #00d9ff, 0 0 28px rgba(0, 96, 255, .65) !important; } #registrationPage .standard-submit-form-button:active { transform: scale(.97); } /* disabled */ #registrationPage .standard-submit-form-button:disabled { color: rgba(255,255,255,.38) !important; background: linear-gradient( 135deg, #263853, #14243e ) !important; border-color: rgba(120, 170, 210, .25) !important; box-shadow: none !important; cursor: not-allowed; filter: none !important; } #registrationPage .standard-submit-form-button:disabled::before { display: none; } /* ========================================================= BACK BUTTON ========================================================= */ #registrationPage .back-button { width: 46px; height: 46px; flex: 0 0 46px; padding: 12px; border-radius: 50% !important; border: 1px solid rgba(89, 221, 255, .75) !important; background: linear-gradient( 145deg, #063d8d, #041b45 ) !important; box-shadow: 0 0 7px rgba(0, 199, 255, .5); cursor: pointer; } #registrationPage .back-button svg path { fill: #fff; } /* ========================================================= TERMS & CONDITIONS ========================================================= */ #registrationPage .reg-notice-section { margin-top: 20px; padding: 14px; color: rgba(203, 224, 243, .72); font-size: 11px; line-height: 17px; text-align: center; background: rgba(0, 17, 44, .5); border: 1px solid rgba(63, 155, 230, .18); border-radius: 10px; } #registrationPage .reg-notice-section .text-info { color: #51dcff !important; font-weight: 700; cursor: pointer; text-shadow: 0 0 5px rgba(0, 214, 255, .45); } /* ========================================================= ALREADY ACCOUNT LOGIN ========================================================= */ #registrationPage .prompt-login-section { margin-top: 18px; text-align: center; color: #9fb9d1; font-size: 12px; } #registrationPage .prompt-login-section a { margin-left: 5px; color: #56e7ff !important; font-weight: 800; text-decoration: none; text-shadow: 0 0 4px rgba(0, 219, 255, .7); transition: color .2s ease, text-shadow .2s ease; } #registrationPage .prompt-login-section a:hover { color: #fff !important; text-shadow: 0 0 4px #fff, 0 0 10px #00d9ff; } /* ========================================================= SCROLLBAR FOR DROPDOWNS ========================================================= */ #registrationPage .standard-select-dropdown::-webkit-scrollbar { width: 5px; } #registrationPage .standard-select-dropdown::-webkit-scrollbar-track { background: #03142e; } #registrationPage .standard-select-dropdown::-webkit-scrollbar-thumb { background: linear-gradient( #00d8ff, #075fff ); border-radius: 10px; } /* ========================================================= AFFILIATE AREA ========================================================= */ #registrationPage .affiliateid { margin-top: 4px; } /* ========================================================= REMOVE OLD DEFAULT EFFECTS ========================================================= */ #registrationPage input, #registrationPage button, #registrationPage .standard-select { -webkit-tap-highlight-color: transparent; } #registrationPage button:focus, #registrationPage input:focus { outline: none !important; } /* ========================================================= OPTIONAL SUBTLE FORM GLOW ANIMATION ========================================================= */ #registrationPage .reg-step-container { animation: registerPanelGlow 3s ease-in-out infinite alternate; } @keyframes registerPanelGlow { from { box-shadow: 0 0 8px rgba(0, 193, 255, .20), 0 0 20px rgba(0, 78, 255, .14), inset 0 1px 0 rgba(255,255,255,.10); } to { box-shadow: 0 0 11px rgba(0, 220, 255, .28), 0 0 28px rgba(0, 91, 255, .20), inset 0 1px 0 rgba(255,255,255,.14); } } /* ========================================================= TERMS & CONDITIONS ROYAL SAPPHIRE / DIAMOND NEON STYLE ========================================================= */ .mobile-tnc { position: relative; width: 100%; min-height: 100vh; padding: 20px 16px 100px; box-sizing: border-box; background: radial-gradient(circle at 12% 8%, rgba(0, 200, 255, .14), transparent 28%), radial-gradient(circle at 85% 15%, rgba(0, 88, 255, .18), transparent 30%), linear-gradient( 180deg, #071c42 0%, #04142f 45%, #020a1b 100% ); color: #d9ecff; } /* subtle crystal pattern */ .mobile-tnc::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, transparent 0 45%, rgba(0, 198, 255, .035) 46% 47%, transparent 48% 100% ), linear-gradient( 45deg, transparent 0 45%, rgba(0, 96, 255, .04) 46% 47%, transparent 48% 100% ); background-size: 80px 80px; pointer-events: none; } /* ========================================================= PAGE HEADER ========================================================= */ .mobile-tnc .info-centre-header { position: relative; z-index: 2; width: 100%; max-width: 900px; margin: 0 auto 18px; padding: 14px 18px; box-sizing: border-box; text-align: center; border-radius: 14px; background: linear-gradient( 135deg, rgba(9, 48, 100, .98), rgba(3, 22, 52, .98) ); border: 1px solid rgba(87, 220, 255, .65); box-shadow: 0 0 6px rgba(0, 207, 255, .35), 0 0 18px rgba(0, 95, 255, .18), inset 0 1px 0 rgba(255,255,255,.15); } .mobile-tnc .info-centre-header span { color: #fff !important; font-size: 22px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; text-shadow: 0 0 3px #fff, 0 0 8px #00dbff, 0 0 16px rgba(0, 96, 255, .7); } /* ========================================================= MAIN CONTENT ========================================================= */ .mobile-tnc .info-centre-container { position: relative; z-index: 2; width: 100%; max-width: 900px; margin: 0 auto; } /* remove bootstrap white background */ .mobile-tnc .col-lg-12 { background: transparent !important; } /* ========================================================= INTRO BOX ========================================================= */ .mobile-tnc .ic-navbar-default { margin: 0 0 18px !important; padding: 0 !important; background: linear-gradient( 145deg, rgba(8, 39, 84, .96), rgba(3, 17, 43, .98) ) !important; border: 1px solid rgba(70, 176, 255, .35) !important; border-radius: 12px !important; box-shadow: inset 0 0 14px rgba(0, 139, 255, .06), 0 0 10px rgba(0, 82, 255, .10) !important; } .mobile-tnc .ic-navbar-collapse { padding: 0 !important; } .mobile-tnc ul.seperator { margin: 0 !important; padding: 16px 18px !important; list-style: none !important; } .mobile-tnc ul.seperator li { margin: 0 !important; padding: 0 !important; } .mobile-tnc ul.seperator li a { display: block !important; color: #dceeff !important; font-size: 13px !important; line-height: 21px !important; text-decoration: none !important; text-shadow: none !important; } /* ========================================================= ACCORDION ========================================================= */ .mobile-tnc .panel-group { margin: 0 !important; } .mobile-tnc .panel { margin: 0 0 10px !important; border: 1px solid rgba(68, 173, 255, .38) !important; border-radius: 11px !important; background: linear-gradient( 145deg, rgba(8, 38, 82, .98), rgba(2, 16, 39, .99) ) !important; overflow: hidden; box-shadow: 0 0 7px rgba(0, 137, 255, .10), inset 0 1px 0 rgba(255,255,255,.05) !important; } /* ========================================================= ACCORDION HEADER ========================================================= */ .mobile-tnc .panel-heading { padding: 0 !important; background: transparent !important; border: 0 !important; } .mobile-tnc .panel-title { margin: 0 !important; padding: 0 !important; } .mobile-tnc .panel-title > a { position: relative; display: block; width: 100%; padding: 14px 45px 14px 16px; box-sizing: border-box; color: #fff !important; font-size: 14px; font-weight: 700; line-height: 20px; text-decoration: none !important; background: linear-gradient( 90deg, rgba(0, 92, 210, .35), rgba(0, 196, 255, .09), rgba(0, 92, 210, .18) ); text-shadow: 0 0 4px rgba(0, 209, 255, .35); transition: background .2s ease, color .2s ease, box-shadow .2s ease; } /* active/open */ .mobile-tnc .panel-title > a:not(.collapsed) { color: #fff !important; background: linear-gradient( 90deg, rgba(0, 120, 255, .60), rgba(0, 218, 255, .24), rgba(0, 86, 220, .45) ); box-shadow: inset 0 -1px 0 rgba(85, 226, 255, .35), 0 0 10px rgba(0, 164, 255, .14); } /* ========================================================= ACCORDION ARROW ========================================================= */ .mobile-tnc .panel-title > a::after { content: ""; position: absolute; top: 50%; right: 18px; width: 9px; height: 9px; border-right: 2px solid #62e7ff; border-bottom: 2px solid #62e7ff; transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; filter: drop-shadow(0 0 3px rgba(0, 225, 255, .75)); } /* opened arrow */ .mobile-tnc .panel-title > a:not(.collapsed)::after { transform: translateY(-30%) rotate(225deg); } /* ========================================================= PANEL CONTENT ========================================================= */ .mobile-tnc .panel-collapse { background: linear-gradient( 180deg, rgba(4, 22, 54, .92), rgba(2, 13, 34, .96) ); } .mobile-tnc .panel-body { padding: 16px 16px 18px !important; color: #cfe2f5 !important; font-size: 12.5px !important; line-height: 20px !important; border-top: 1px solid rgba(70, 188, 255, .18) !important; background: transparent !important; } /* all text */ .mobile-tnc .panel-body p, .mobile-tnc .panel-body span, .mobile-tnc .accordion-content p, .mobile-tnc .accordion-content span { color: #cfe2f5 !important; font-size: 12.5px !important; line-height: 20px !important; } /* remove huge inline indent feeling */ .mobile-tnc .panel-body p[style*="padding-left: 30px"] { padding-left: 12px !important; } .mobile-tnc .panel-body p[style*="padding-left: 60px"] { padding-left: 26px !important; } /* nested paragraphs */ .mobile-tnc .panel-body p p { margin: 7px 0 0 !important; } /* ========================================================= BOLD / NOTE ========================================================= */ .mobile-tnc .panel-body b, .mobile-tnc .panel-body strong { color: #ffffff !important; font-weight: 800; text-shadow: 0 0 4px rgba(0, 221, 255, .35); } /* ========================================================= LINKS ========================================================= */ .mobile-tnc a { color: #65e6ff; transition: color .2s ease, text-shadow .2s ease; } .mobile-tnc a:hover { color: #fff; text-shadow: 0 0 5px rgba(0, 224, 255, .8); } /* ========================================================= ACTIVE PANEL GLOW ========================================================= */ .mobile-tnc .panel:has(.panel-title > a:not(.collapsed)) { border-color: rgba(78, 224, 255, .75) !important; box-shadow: 0 0 5px rgba(0, 220, 255, .45), 0 0 16px rgba(0, 93, 255, .18), inset 0 0 12px rgba(0, 120, 255, .05) !important; } /* ========================================================= COPYRIGHT ========================================================= */ .mobile-tnc .copyright { margin: 25px 0 0; color: rgba(164, 194, 220, .55) !important; font-size: 11px; text-align: center; letter-spacing: .2px; } /* ========================================================= SCROLLBAR ========================================================= */ .mobile-tnc::-webkit-scrollbar { width: 5px; } .mobile-tnc::-webkit-scrollbar-track { background: #020b1c; } .mobile-tnc::-webkit-scrollbar-thumb { background: linear-gradient( #00d9ff, #0765ff ); border-radius: 10px; } /* ========================================================= REMOVE OLD BOOTSTRAP STYLE ========================================================= */ .mobile-tnc .navbar, .mobile-tnc .navbar-default, .mobile-tnc .panel-default { box-shadow: none; } .mobile-tnc .panel-heading, .mobile-tnc .panel-body, .mobile-tnc .navbar-collapse { border-left: 0; border-right: 0; } /* ========================================================= OPTIONAL LIGHT ANIMATION ========================================================= */ .mobile-tnc .info-centre-header { animation: tncHeaderGlow 2.8s ease-in-out infinite alternate; } @keyframes tncHeaderGlow { from { box-shadow: 0 0 5px rgba(0, 201, 255, .28), 0 0 14px rgba(0, 92, 255, .14), inset 0 1px 0 rgba(255,255,255,.10); } to { box-shadow: 0 0 9px rgba(0, 228, 255, .42), 0 0 24px rgba(0, 104, 255, .20), inset 0 1px 0 rgba(255,255,255,.16); } } [data-page=login] .mobile-navbar-header .header { background: #020a1c;color:#fff!important; } /* ========================================================= LOGIN PAGE ROYAL SAPPHIRE / DIAMOND NEON STYLE HTML NO NEED CHANGE ========================================================= */ #loginPage { position: relative; width: 100%; min-height: 100vh; padding: 28px 18px 120px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 15% 10%, rgba(0, 203, 255, .16), transparent 28%), radial-gradient(circle at 85% 18%, rgba(0, 87, 255, .20), transparent 30%), linear-gradient( 180deg, #071d44 0%, #04142f 45%, #020a1c 100% ); color: #fff; overflow: hidden; } /* crystal pattern */ #loginPage::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, transparent 0 45%, rgba(0, 202, 255, .035) 46% 47%, transparent 48% 100% ), linear-gradient( 45deg, transparent 0 45%, rgba(0, 92, 255, .04) 46% 47%, transparent 48% 100% ); background-size: 80px 80px; pointer-events: none; } /* ========================================================= LOGO ========================================================= */ #loginPage .logo_big { position: relative; z-index: 2; width: 100%; max-width: 260px; margin: 0 auto 24px; text-align: center; } #loginPage .logo_big img { max-width: 100% !important; filter: drop-shadow(0 0 4px rgba(255,255,255,.18)) drop-shadow(0 0 10px rgba(0,185,255,.28)); animation: loginLogoGlow 2.5s ease-in-out infinite alternate; } @keyframes loginLogoGlow { from { filter: drop-shadow(0 0 3px rgba(255,255,255,.12)) drop-shadow(0 0 7px rgba(0,185,255,.20)); } to { filter: drop-shadow(0 0 5px rgba(255,255,255,.28)) drop-shadow(0 0 14px rgba(0,205,255,.45)); } } /* ========================================================= LOGIN BOX ========================================================= */ #loginPage .login_centent { position: relative; z-index: 2; width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 22px 26px; box-sizing: border-box; border-radius: 18px; background: linear-gradient( 145deg, rgba(9, 42, 90, .96), rgba(3, 16, 43, .98) ); border: 1px solid rgba(76, 205, 255, .58); box-shadow: 0 0 8px rgba(0, 202, 255, .25), 0 0 26px rgba(0, 77, 255, .18), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 20px rgba(0,130,255,.06); animation: loginPanelGlow 3s ease-in-out infinite alternate; } @keyframes loginPanelGlow { from { box-shadow: 0 0 7px rgba(0, 202, 255, .18), 0 0 20px rgba(0, 77, 255, .13), inset 0 1px 0 rgba(255,255,255,.10); } to { box-shadow: 0 0 11px rgba(0, 221, 255, .30), 0 0 30px rgba(0, 94, 255, .22), inset 0 1px 0 rgba(255,255,255,.15); } } /* ========================================================= INPUT ROW ========================================================= */ #loginPage .login_centent_item.input_item { position: relative; width: 100%; margin: 0 0 16px; display: flex; align-items: center; border-radius: 11px; background: linear-gradient( 180deg, rgba(8, 39, 83, .96), rgba(4, 19, 46, .98) ); border: 1px solid rgba(70, 179, 255, .55); box-shadow: inset 0 0 9px rgba(0, 141, 255, .10), 0 0 5px rgba(0, 137, 255, .08); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } #loginPage .login_centent_item.input_item:focus-within { border-color: #4de7ff; box-shadow: 0 0 5px rgba(0,231,255,.72), 0 0 14px rgba(0,93,255,.42), inset 0 0 10px rgba(0,173,255,.12); } /* ========================================================= LEFT ICON ========================================================= */ #loginPage .input_item > label { position: relative; width: 48px; height: 44px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; margin: 0 !important; background: linear-gradient( 135deg, rgba(0, 141, 255, .35), rgba(0, 211, 255, .10) ); border-right: 1px solid rgba(89, 210, 255, .25); } #loginPage .input_item > label i { color: #fff !important; filter: brightness(2.5) saturate(0) drop-shadow(0 0 4px rgba(0,225,255,.75)); transform: scale(.9); } /* ========================================================= INPUT WRAPPER ========================================================= */ #loginPage .standard-form-field, #loginPage .standard-form-field-wrapper { position: relative; flex: 1; width: 100%; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* input */ #loginPage .standard-input { width: 100% !important; height: 44px !important; padding: 0 14px !important; box-sizing: border-box !important; color: #fff !important; font-family: Arial, Helvetica, sans-serif; font-size: 14px; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; caret-color: #00eaff; } #loginPage .standard-input::placeholder { color: rgba(191, 221, 246, .60); } /* password */ #loginPage .password-field .standard-input { padding-right: 45px !important; } /* ========================================================= PASSWORD EYE ========================================================= */ #loginPage .standard-password-eye { position: absolute; top: 50%; right: 14px; width: 20px; height: 20px; transform: translateY(-50%); cursor: pointer; } #loginPage .standard-password-eye path { fill: #65dfff; } #loginPage .standard-password-eye:hover path { fill: #fff; } /* ========================================================= ERROR MESSAGE ========================================================= */ #loginPage #loginErr { margin: 0 0 14px !important; padding: 11px 13px !important; border-radius: 9px; background: linear-gradient( 90deg, rgba(103, 0, 23, .55), rgba(54, 0, 18, .72) ); border: 1px solid rgba(255, 78, 102, .55); box-shadow: 0 0 8px rgba(255, 20, 60, .18); } #loginPage #loginErr, #loginPage #loginErr span, #loginPage #loginErr strong { color: #ff7b8d !important; font-size: 12px !important; text-shadow: 0 0 4px rgba(255, 30, 70, .25); } /* ========================================================= REMEMBER ME ========================================================= */ #loginPage .rememberme-formgroup { width: 100%; margin: 2px 0 18px; display: flex; align-items: center; color: #a9c9e2; font-size: 12px; } #loginPage .rememberme-formgroup > div:first-child { display: none !important; } #loginPage #rememberMe { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0 8px 0 0; border-radius: 4px; background: linear-gradient( 145deg, #082957, #04152f ); border: 1px solid rgba(83, 207, 255, .7); box-shadow: inset 0 0 5px rgba(0,138,255,.15); cursor: pointer; } #loginPage #rememberMe:checked { background: linear-gradient( 135deg, #00e5ff, #0676ff ); box-shadow: 0 0 5px #00dfff, 0 0 10px rgba(0, 99, 255, .55); } #loginPage #rememberMe:checked::after { content: "✓"; display: block; color: #fff; font-size: 12px; font-weight: 800; line-height: 15px; text-align: center; } #loginPage .remember-me { color: #000; cursor: pointer; } /* ========================================================= LOGIN BUTTON ========================================================= */ #loginPage .login_btn { width: 100%; margin-top: 4px; } #loginPage .login_btn .btn-blue { position: relative; display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 46px; box-sizing: border-box; border-radius: 24px !important; color: #fff !important; font-size: 14px; font-weight: 800; letter-spacing: .7px; text-decoration: none !important; background: linear-gradient( 135deg, #05266b 0%, #087cff 42%, #00d9ff 100% ) !important; border: 1px solid #94f7ff !important; box-shadow: 0 0 5px rgba(0,232,255,.75), 0 0 13px rgba(0,91,255,.55), inset 0 0 10px rgba(255,255,255,.20) !important; overflow: hidden; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } /* moving shine */ #loginPage .login_btn .btn-blue::before { content: ""; position: absolute; top: -30%; left: -50%; width: 25%; height: 160%; background: linear-gradient( 110deg, transparent, rgba(255,255,255,.15), rgba(255,255,255,.95), rgba(255,255,255,.15), transparent ); transform: skewX(-20deg); animation: loginButtonShine 2.6s infinite; } @keyframes loginButtonShine { 0% { left: -50%; } 45% { left: 125%; } 100% { left: 125%; } } #loginPage .login_btn .btn-blue:hover { transform: translateY(-2px); filter: brightness(1.15); box-shadow: 0 0 7px #fff, 0 0 15px #00d9ff, 0 0 28px rgba(0, 96, 255, .65) !important; } #loginPage .login_btn .btn-blue:active { transform: scale(.97); } /* ========================================================= FORGOT PASSWORD ========================================================= */ #loginPage .login_forgetpsd { width: 100%; margin-top: 14px; text-align: center; } #loginPage .login_forgetpsd a { color: #000 !important; font-size: 12px; font-weight: 700; text-decoration: none; text-shadow: 0 0 4px rgba(0,217,255,.5); } #loginPage .login_forgetpsd a:hover { color: #fff !important; text-shadow: 0 0 4px #fff, 0 0 9px #00d9ff; } /* ========================================================= REGISTER TEXT ========================================================= */ #loginPage .login_toreg { position: relative; z-index: 2; width: 100%; max-width: 480px; margin: 16px auto 0; padding: 13px 15px; box-sizing: border-box; text-align: center; color: #9fbdd6; font-size: 12px; line-height: 18px; border-radius: 10px; background: rgba(0, 19, 48, .55); border: 1px solid rgba(61, 157, 230, .20); } #loginPage .login_toreg .m-register-link { margin: 0 4px; color: #57e7ff !important; font-weight: 800; cursor: pointer; text-shadow: 0 0 4px rgba(0,219,255,.7); } #loginPage .login_toreg .m-register-link:hover { color: #fff !important; text-shadow: 0 0 4px #fff, 0 0 10px #00d9ff; } /* ========================================================= REMOVE OLD STYLE ========================================================= */ #loginPage input, #loginPage a { -webkit-tap-highlight-color: transparent; } #loginPage input:focus { outline: none !important; } /* ========================================================= FORGOT PASSWORD / RESET REQUEST ROYAL SAPPHIRE / NEON BLUE STYLE ========================================================= */ .reset-request-form { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 20px 28px; box-sizing: border-box; border-radius: 18px; background: linear-gradient( 145deg, rgba(9, 42, 90, .96), rgba(3, 16, 43, .98) ); border: 1px solid rgba(76, 205, 255, .58); box-shadow: 0 0 8px rgba(0, 202, 255, .24), 0 0 24px rgba(0, 77, 255, .18), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 20px rgba(0,130,255,.06); color: #fff; overflow: hidden; animation: resetPanelGlow 3s ease-in-out infinite alternate; } /* subtle crystal glow */ .reset-request-form::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, transparent 0 45%, rgba(0, 205, 255, .035) 46% 47%, transparent 48% 100% ), linear-gradient( 45deg, transparent 0 45%, rgba(0, 91, 255, .04) 46% 47%, transparent 48% 100% ); background-size: 70px 70px; pointer-events: none; } /* ========================================================= INNER CONTENT ========================================================= */ .reset-request-form > div { position: relative; z-index: 2; } .reset-reqeust-top { width: 100%; box-sizing: border-box; } /* ========================================================= TITLE ========================================================= */ .reset-request-title { display: block; margin: 0 0 22px; color: #fff !important; font-size: 16px; font-weight: 700; line-height: 23px; text-align: center; text-shadow: 0 0 3px rgba(255,255,255,.75), 0 0 8px rgba(0,218,255,.65), 0 0 14px rgba(0,87,255,.5); } /* ========================================================= LABEL ========================================================= */ .reset-email-label { display: block; margin: 14px 0 7px; color: #9edcff !important; font-size: 12px; font-weight: 700; letter-spacing: .3px; } /* ========================================================= INPUT CONTAINER ========================================================= */ .reset-request-input-container { position: relative; width: 100%; min-height: 44px; box-sizing: border-box; border-radius: 10px; background: linear-gradient( 180deg, rgba(8, 39, 83, .96), rgba(4, 19, 46, .98) ); border: 1px solid rgba(70,179,255,.55); box-shadow: inset 0 0 9px rgba(0,141,255,.10), 0 0 5px rgba(0,137,255,.08); transition: border-color .25s ease, box-shadow .25s ease; } .reset-request-input-container:focus-within { border-color: #4de7ff; box-shadow: 0 0 5px rgba(0,231,255,.72), 0 0 14px rgba(0,93,255,.42), inset 0 0 10px rgba(0,173,255,.12); } /* ========================================================= INPUT ========================================================= */ .reset-request-input-container input { width: 100% !important; height: 44px !important; padding: 0 14px !important; box-sizing: border-box !important; color: #fff !important; font-family: Arial, Helvetica, sans-serif; font-size: 14px; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; caret-color: #00eaff; } .reset-request-input-container input::placeholder { color: rgba(191,221,246,.60); } /* remove number input arrows */ .reset-request-input-container input[type="number"]::-webkit-inner-spin-button, .reset-request-input-container input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* ========================================================= CAPTCHA ROW ========================================================= */ .reset-request-input-container[style*="display: flex"] { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px; padding: 0 6px 0 0; } .reset-request-input-container[style*="display: flex"] input { flex: 1; min-width: 0; } .reset-request-input-container #imgCaptcha { flex: 0 0 110px !important; width: 110px !important; height: 35px !important; margin: 0 !important; object-fit: cover; border-radius: 7px !important; border: 1px solid rgba(86,214,255,.7) !important; box-shadow: 0 0 5px rgba(0,205,255,.35); background: #fff; } /* ========================================================= ERROR ========================================================= */ .reset-request-error { margin-top: 6px !important; } .reset-request-error p { margin: 0 !important; } .reset-request-error, .reset-request-error span { color: #ff7288 !important; font-size: 11px !important; line-height: 15px !important; text-shadow: 0 0 4px rgba(255,30,70,.30); } /* ========================================================= REQUEST CODE BUTTON ========================================================= */ .reset-button-container { position: relative; z-index: 2; width: 100%; margin-top: 24px; } .reset-button-container .btn-blue { position: relative; display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 46px; padding: 0 25px; box-sizing: border-box; color: #fff !important; font-size: 14px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; border-radius: 24px !important; background: linear-gradient( 135deg, #05266b 0%, #087cff 42%, #00d9ff 100% ) !important; border: 1px solid #94f7ff !important; box-shadow: 0 0 5px rgba(0,232,255,.75), 0 0 13px rgba(0,91,255,.55), inset 0 0 10px rgba(255,255,255,.20) !important; cursor: pointer; overflow: hidden; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } /* moving shine */ .reset-button-container .btn-blue::before { content: ""; position: absolute; top: -30%; left: -50%; width: 25%; height: 160%; background: linear-gradient( 110deg, transparent, rgba(255,255,255,.15), rgba(255,255,255,.95), rgba(255,255,255,.15), transparent ); transform: skewX(-20deg); animation: resetButtonShine 2.6s infinite; } .reset-button-container .btn-blue:hover { transform: translateY(-2px); filter: brightness(1.15); box-shadow: 0 0 7px #fff, 0 0 15px #00d9ff, 0 0 28px rgba(0,96,255,.65) !important; } .reset-button-container .btn-blue:active { transform: scale(.97); } /* ========================================================= INFORMATION LIST AFTER REQUEST ========================================================= */ .reset-request-form .reset-reqeust-top ul { margin: 0; padding: 0 0 0 18px; color: #c9def0; font-size: 12px; line-height: 19px; } .reset-request-form .reset-reqeust-top ul li { margin-bottom: 12px; color: #c9def0; line-height: 19px; } .reset-request-form .reset-reqeust-top ul li::marker { color: #55dcff; } /* ========================================================= REMOVE OLD DEFAULTS ========================================================= */ .reset-request-form input, .reset-request-form button { -webkit-tap-highlight-color: transparent; } .reset-request-form input:focus, .reset-request-form button:focus { outline: none !important; } /* ========================================================= ANIMATION ========================================================= */ @keyframes resetPanelGlow { from { box-shadow: 0 0 7px rgba(0,202,255,.18), 0 0 20px rgba(0,77,255,.13), inset 0 1px 0 rgba(255,255,255,.10); } to { box-shadow: 0 0 11px rgba(0,221,255,.30), 0 0 30px rgba(0,94,255,.22), inset 0 1px 0 rgba(255,255,255,.15); } } @keyframes resetButtonShine { 0% { left: -50%; } 45% { left: 125%; } 100% { left: 125%; } } .home_navBox .game-nav li .nav-link { animation: navBlink 1.4s ease-in-out infinite alternate; transition: filter .2s ease, transform .2s ease; } @keyframes navBlink { 0% { opacity: 1; filter: brightness(1) drop-shadow(0 0 2px rgba(0, 180, 255, .25)); } 50% { opacity: .82; filter: brightness(1.12) drop-shadow(0 0 5px rgba(0, 220, 255, .55)) drop-shadow(0 0 10px rgba(0, 95, 255, .35)); } 100% { opacity: 1; filter: brightness(1.22) drop-shadow(0 0 7px rgba(255,255,255,.45)) drop-shadow(0 0 12px rgba(0, 230, 255, .75)) drop-shadow(0 0 18px rgba(0, 90, 255, .55)); } } /* ========================================= LOGIN / JOIN NOW IMAGE BUTTON HTML NO NEED CHANGE ========================================= */ .right-member { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; } /* LOGIN + REGISTER COMMON */ .right-member .btn-login, .right-member .btn-reg { display: block !important; width: 120px !important; height: 43px !important; padding: 0 !important; margin: 0 !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; cursor: pointer; transition: transform .2s ease, filter .2s ease; } /* LOGIN IMAGE */ .right-member .btn-login { background-image: url("./img1818_ukayakiss/login2.png") !important; } /* JOIN NOW IMAGE */ .right-member .btn-reg { background-image: url("./img1818_ukayakiss/register.png") !important; } /* HOVER */ .right-member .btn-login:hover, .right-member .btn-reg:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.12) drop-shadow(0 0 5px rgba(0, 220, 255, .55)); } /* CLICK */ .right-member .btn-login:active, .right-member .btn-reg:active { transform: scale(.96); } /* ========================================= LOGOUT IMAGE BUTTON HTML NO NEED CHANGE ========================================= */ .right-member .btn-logout { display: block !important; width: 120px !important; height: 43px !important; padding: 0 !important; margin: 0 !important; background-color: transparent !important; background-image: url("./img1818_ukayakiss/logout.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; cursor: pointer; transition: transform .2s ease, filter .2s ease; } /* HOVER */ .right-member .btn-logout:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.12) drop-shadow(0 0 5px rgba(255, 85, 85, .65)) drop-shadow(0 0 10px rgba(255, 0, 30, .35)); } /* CLICK */ .right-member .btn-logout:active { transform: scale(.96); } /* ===================================================== PARTNERSHIP PAGE - 2ND SCREENSHOT STYLE ===================================================== */ .partnership-container { width: 100%; max-width: 880px; margin: 0 auto; box-sizing: border-box; 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(./img1818_ukayakiss/ukaya_tele.jpg?v=8) !important; } .headertitle-secondarybanner .banner-img { background-image: url(./img1818_ukayakiss/ukaya_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(./img1818_ukayakiss/uvip.png?v=8) !important; } /* 2 - UMENANG */ .partner-container .company-Myrs9sk .banner-img { background-image: url(./img1818_ukayakiss/umenang.png?v=8) !important; } /* 3 - UCUCI */ .partner-container .company-myrs9lc .banner-img { background-image: url(./img1818_ukayakiss/ucuci.png?v=8) !important; } /* 4 - ULUCKY */ .partner-container .company-myrs9gw .banner-img { background-image: url(./img1818_ukayakiss/ulucky.png?v=8) !important; } /* 5 - UKAYA */ .partner-container .company-myrs9wt .banner-img { background-image: url(./img1818_ukayakiss/ukaya.png?v=8) !important; } /* 6 - USUKA */ .partner-container .company-myrs9sw .banner-img { background-image: url(./img1818_ukayakiss/usuka.png?v=8) !important; } /* 6 - U99 */ .partner-container .company-myrs9pw .banner-img { background-image: url(./img1818_ukayakiss/u99.png?v=8) !important; } .icon-partnership { background-image: url(img1818_ukayakiss/partnership.png) !important; } /* ========================================================= FIX REGISTRATION DROPDOWN CUT / CANNOT PREVIEW ALL ========================================================= */ #registrationPage, #registrationPage .reg-step-container, #registrationPage .reg-form-section, #registrationPage .register-input-container, #registrationPage .standard-form-field, #registrationPage .ignore-after { overflow: visible !important; } /* 普通 input wrapper 可以继续 hidden */ #registrationPage .standard-form-field-wrapper { overflow: visible !important; } /* ========================================================= DROPDOWN POSITION ========================================================= */ #registrationPage .register-input-container { position: relative !important; } #registrationPage .standard-select-dropdown { position: absolute !important; top: calc(100% + 5px) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: 260px !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 999999 !important; margin: 0 !important; padding: 5px 0 !important; box-sizing: border-box !important; background: linear-gradient( 180deg, #0b3568 0%, #061d42 45%, #03132e 100% ) !important; border: 1px solid #45dfff !important; border-radius: 10px !important; box-shadow: 0 8px 25px rgba(0,0,0,.55), 0 0 8px rgba(0,220,255,.50), 0 0 18px rgba(0,85,255,.30) !important; } /* OPEN STATE */ #registrationPage .standard-select-dropdown.isOpen { display: block !important; visibility: visible !important; opacity: 1 !important; } /* HIDDEN STATE */ #registrationPage .standard-select-dropdown.isHide { display: none !important; } /* ========================================================= DROPDOWN OPTION ========================================================= */ #registrationPage .standard-select-options { display: block !important; width: 100% !important; padding: 11px 14px !important; box-sizing: border-box !important; color: #e8f6ff !important; font-size: 13px !important; line-height: 18px !important; background: transparent !important; border-bottom: 1px solid rgba(86,180,255,.12) !important; cursor: pointer; } #registrationPage .standard-select-options:hover { color: #fff !important; background: linear-gradient( 90deg, rgba(0,105,255,.75), rgba(0,211,255,.35) ) !important; } #registrationPage .standard-select-options.active { color: #fff !important; background: linear-gradient( 90deg, #075fc9, #087fc9 ) !important; box-shadow: inset 3px 0 0 #55eaff; } /* ========================================================= BANK SELECT FIX ========================================================= */ #registrationPage .bankid-3736, #registrationPage .standard-select { position: relative !important; z-index: 20; } /* 当 dropdown 打开时提高整个 field 层级 */ #registrationPage .register-input-container:has(.standard-select-dropdown.isOpen) { z-index: 99999 !important; } /* ========================================================= DOB DROPDOWN FIX ========================================================= */ #registrationPage .dob-field { position: relative !important; overflow: visible !important; } #registrationPage .dob-field .standard-select { position: relative !important; } /* ========================================================= MAKE SCROLLBAR VISIBLE ========================================================= */ #registrationPage .standard-select-dropdown::-webkit-scrollbar { width: 6px; } #registrationPage .standard-select-dropdown::-webkit-scrollbar-track { background: #031229; } #registrationPage .standard-select-dropdown::-webkit-scrollbar-thumb { background: linear-gradient( #44eaff, #0877ff ); border-radius: 20px; } /* ========================================================= DOB MOBILE SCROLL FIX ========================================================= */ /* DOB 外层一定要允许内容溢出 */ #registrationPage .dob-field, #registrationPage .standard-form-field, #registrationPage .register-input-container, #registrationPage .reg-form-section, #registrationPage .reg-step-container { overflow: visible !important; } /* DOB dropdown */ #registrationPage .dob-field + .standard-select-dropdown, #registrationPage .dob-date-options, #registrationPage .standard-select-dropdown { max-height: 240px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior: contain; scrollbar-width: thin; z-index: 999999 !important; } /* DOB options container */ #registrationPage .dob-date-options { display: block !important; width: 100% !important; max-height: 240px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } /* 每一个日期选项 */ #registrationPage .dob-date-options .standard-select-options { position: relative !important; display: block !important; width: 100% !important; min-height: 42px !important; padding: 11px 14px !important; box-sizing: border-box !important; flex-shrink: 0 !important; } /* 防止页面拖动盖过 dropdown */ #registrationPage .standard-select-dropdown.isOpen { pointer-events: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } /* DOB 当前打开时，提高整个区域 */ #registrationPage .register-input-container:has(.standard-select-dropdown.isOpen) { position: relative !important; z-index: 999999 !important; } /* Safari / iPhone 特别重要 */ #registrationPage .standard-select-dropdown, #registrationPage .dob-date-options { transform: translateZ(0); will-change: scroll-position; } /* scrollbar */ #registrationPage .dob-date-options::-webkit-scrollbar, #registrationPage .standard-select-dropdown::-webkit-scrollbar { width: 5px; } #registrationPage .dob-date-options::-webkit-scrollbar-thumb, #registrationPage .standard-select-dropdown::-webkit-scrollbar-thumb { background: linear-gradient( #45eaff, #0878ff ); border-radius: 10px; }