.game-title, .vip-header-banner, #home-livetx{ display:none!important; } .vip-slide { flex: 0 0 0%!important; } .games-tab-content .icon_home_logo_sport_sbo { background-image: url(".//img1823_usukakiss/sbo_sport.png?v=3"); } .games-tab-content .icon_home_logo_sport_ibc { background-image: url(".//img1823_usukakiss/ibc_sport.png"); } .games-tab-content .icon_home_logo_sport_msport { background-image: url(".//img1823_usukakiss/m_sport.png"); } .games-tab-content .icon_home_logo_sport_hsport { background-image: url(".//img1823_usukakiss/h_sport.png"); } .games-tab-content .icon_home_logo_sport_cmd { background-image: url(".//img1823_usukakiss/cmd_sport.png"); } .games-tab-content .icon_home_logo_casino_YEEBET { background-image: url(".//img1823_usukakiss/yb_casino.png"); } .games-tab-content .icon_home_logo_casino_WM { background-image: url(".//img1823_usukakiss/wm_casino.png"); } .games-tab-content .icon_home_logo_casino_XPG { background-image: url(".//img1823_usukakiss/xpg_casino.png"); } .games-tab-content .icon_home_logo_casino_AB { background-image: url(".//img1823_usukakiss/allbet_casino.png"); } .games-tab-content .icon_home_logo_casino_SA { background-image: url(".//img1823_usukakiss/sa_casino.png"); } .games-tab-content .icon_home_logo_casino_EG { background-image: url(".//img1823_usukakiss/eg_casino.png"); } .games-tab-content .icon_home_logo_casino_AG { background-image: url(".//img1823_usukakiss/ag_casino.png"); } .games-tab-content .icon_home_logo_casino_BG { background-image: url(".//img1823_usukakiss/bg_casino.png"); } .games-tab-content .icon_home_logo_casino_PT { background-image: url(".//img1823_usukakiss/pt_casino.png"); } .games-tab-content .icon_home_logo_casino_BBINC { background-image: url(".//img1823_usukakiss/bbin_casino.png"); } .games-tab-content .icon_home_logo_casino_DG { background-image: url(".//img1823_usukakiss/dg_casino.png"); } .games-tab-content .icon_home_logo_casino_GP { background-image: url(".//img1823_usukakiss/gp_casino.png"); } .games-tab-content .icon_home_logo_casino_SEXYB { background-image: url(".//img1823_usukakiss/sexy_casino.png"); } .games-tab-content .icon_home_logo_casino_SBOC { background-image: url(".//img1823_usukakiss/sbo_casino.png?v=4"); } .games-tab-content .game-item-pragmatic .icon_home_logo_casino_pragmatic { background-image: url(".//img1823_usukakiss/pp_casino.png?v=4"); } .games-tab-content .icon_home_logo_casino_marbula2 { background-image: url(".//img1823_usukakiss/mabula_casino.png?v=4"); } .games-tab-content .icon_home_logo_casino_EZUGI { background-image: url(".//img1823_usukakiss/ezugi_casino.png?v=4"); } .games-tab-content .icon_home_logo_slot_rpsoft { background-image: url(".//img1823_usukakiss/rpsoft_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_naga { background-image: url(".//img1823_usukakiss/naga_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_dctrelax { background-image: url(".//img1823_usukakiss/relax_slot.png"); } .games-tab-content .icon_home_logo_slot_habanero { background-image: url(".//img1823_usukakiss/haba_slot.png"); } .games-tab-content .icon_home_logo_slot_jili { background-image: url(".//img1823_usukakiss/jili_slot.png"); } .games-tab-content .icon_home_logo_slot_kingmaker { background-image: url(".//img1823_usukakiss/km_slot.png"); } .games-tab-content .icon_home_logo_slot_BETSOFT { background-image: url(".//img1823_usukakiss/betsoft_slot.png"); } .games-tab-content .icon_home_logo_slot_RT { background-image: url(".//img1823_usukakiss/rt_slot.png"); } .games-tab-content .icon_home_logo_slot_AGS { background-image: url(".//img1823_usukakiss/ag_slot.png"); } .games-tab-content .icon_home_logo_slot_SG { background-image: url(".//img1823_usukakiss/sg_slot.png"); } .games-tab-content .icon_home_logo_slot_PTS { background-image: url(".//img1823_usukakiss/pt_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_BBINS { background-image: url(".//img1823_usukakiss/bbin_slot.png"); } .games-tab-content .icon_home_logo_slot_GPS { background-image: url(".//img1823_usukakiss/gp_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_FG { background-image: url(".//img1823_usukakiss/fg_slot.png"); } .games-tab-content .icon_home_logo_slot_RTG { background-image: url(".//img1823_usukakiss/rtg_slot.png"); } .games-tab-content .icon_home_logo_slot_CQ9 { background-image: url(".//img1823_usukakiss/cq9_slot.png"); } .games-tab-content .icon_home_logo_slot_PRA { background-image: url(".//img1823_usukakiss/pp_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_PG { background-image: url(".//img1823_usukakiss/png_slot.png"); } .games-tab-content .icon_home_logo_slot_QS { background-image: url(".//img1823_usukakiss/qs_slot.png"); } .games-tab-content .icon_home_logo_slot_NETENT { background-image: url(".//img1823_usukakiss/netent_slot.png"); } .games-tab-content .icon_home_logo_slot_KIRON { background-image: url(".//img1823_usukakiss/kiron_slot.png"); } .games-tab-content .icon_home_logo_slot_SBOS { background-image: url(".//img1823_usukakiss/sbo_slot.png"); } .games-tab-content .icon_home_logo_slot_blueprint { background-image: url(".//img1823_usukakiss/bp_slot.png"); } .games-tab-content .icon_home_logo_slot_pocketgame { background-image: url(".//img1823_usukakiss/pg_slot.png"); } .games-tab-content .icon_home_logo_slot_MG { background-image: url(".//img1823_usukakiss/mg_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_fachai { background-image: url(".//img1823_usukakiss/fachai_slot.png?v=4"); } .games-tab-content .icon_home_logo_slot_ludobet { background-image: url(".//img1823_usukakiss/ludo_slot.png?v=4"); } .games-tab-content .icon_home_logo_slot_habanero { background-image: url(".//img1823_usukakiss/haba_slot.png?v=4"); } .games-tab-content .icon_home_logo_slot_naga { background-image: url(".//img1823_usukakiss/naga_slot.png?v=4"); } .games-tab-content .icon_home_logo_slot_advantplay { background-image: url(".//img1823_usukakiss/ap_slot.png"); } .games-tab-content .icon_home_logo_slot_jdb { background-image: url(".//img1823_usukakiss/jdb_slot.png"); } .games-tab-content .icon_home_logo_slot_ludobet { background-image: url(".//img1823_usukakiss/ludo_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_rich88 { background-image: url(".//img1823_usukakiss/rich88_slot.png"); } .games-tab-content .icon_home_logo_slot_spribe { background-image: url(".//img1823_usukakiss/spribe_slot.png?v=3"); } .games-tab-content .icon_home_logo_slot_gamerbuild { background-image: url(".//img1823_usukakiss/gamerbuild_slot.png"); } .games-tab-content .icon_home_logo_slot_fachai { background-image: url(".//img1823_usukakiss/fachai_slot.png"); }.games-tab-content .icon_home_logo_slot_inout { background-image: url(".//img1823_usukakiss/inout_slot.png?v=2"); } .games-tab-content .icon_home_logo_evo888 { background-image: url(".//img1823_usukakiss/evo_711.png"); } .games-tab-content .icon_home_logo_scr_S918 { background-image: url(".//img1823_usukakiss/918kiss_711.png?v=3"); } .games-tab-content .icon_home_logo_sport_tfgaming { background-image: url(".//img1823_usukakiss/tf_esport.png?v=3"); } .games-tab-content .icon_home_logo_scr_GW { background-image: url(".//img1823_usukakiss/gw_711.png"); } .games-tab-content .icon_home_logo_scr_PB { background-image: url(".//img1823_usukakiss/pb_711.png?v=3"); } .games-tab-content .icon_home_logo_scr_MEGA { background-position: center!important; background-size: contain!important; background-image: url(".//img1823_usukakiss/mega888_711.png?v=3"); } .games-tab-content .icon_home_logo_scr_PUSSY { background-image: url(".//img1823_usukakiss/pussy888_711.png"); } .games-tab-content .icon_home_logo_scr_LIVE { background-image: url(".//img1823_usukakiss/live22_711.png?v=3"); } .games-tab-content .icon_home_logo_slot_XE { background-image: url(".//img1823_usukakiss/xe88_711.png?v=3"); } .games-tab-content .icon_home_logo_slot_JOKER { background-image: url(".//img1823_usukakiss/joker_711.png"); } .games-tab-content .icon_home_logo_slot_VP { background-image: url(".//img1823_usukakiss/vpower_711.png?v=9"); } .games-tab-content .icon_home_logo_lionking { background-image: url(".//img1823_usukakiss/lk_711.png?v=9"); } .games-tab-content .icon_home_logo_GD4D { background-image: url(".//img1823_usukakiss/gd_fish.png?v=9"); } .games-tab-content .icon_home_logo_VR { background-image: url(".//img1823_usukakiss/vr_keno.png"); } .games-tab-content .icon_home_logo_BBINF { background-image: url(".//img1823_usukakiss/bbin_keno.png"); } .games-tab-content .icon_home_logo_KY { background-image: url(".//img1823_usukakiss/ky_keno.png"); } .games-tab-content .icon_home_logo_fish_jdb { background-image: url(".//img1823_usukakiss/jdb_fishing.png"); } .games-tab-content .icon_home_logo_fish_jili { background-image: url(".//img1823_usukakiss/jili_fishing.png"); } .games-tab-content .icon_home_logo_fishing_BBIN { background-image: url(".//img1823_usukakiss/bbin_fishing.png"); } .games-tab-content .icon_home_logo_fish_jdb { background-image: url(".//img1823_usukakiss/jdb_fishing.png"); } .games-tab-content .icon_home_logo_fish_jili { background-image: url(".//img1823_usukakiss/jili_fishing.png"); } .games-tab-content .icon_home_logo_fishing_GG { background-image: url(".//img1823_usukakiss/gg_fishing.png"); } .games-tab-content .icon_home_logo_fishing_SG { background-image: url(".//img1823_usukakiss/sg_fishing.png"); } .games-tab-content .icon_home_logo_fishing_JOKER { background-image: url(".//img1823_usukakiss/joker_fishing.png"); } .games-tab-content .icon_home_logo_cockfight_sv388 { background-image: url(".//img1823_usukakiss/sv388_cf.png"); } .games-tab-content .icon_home_logo_fish_cq9 { background-image: url(".//img1823_usukakiss/cq9_fishing.png"); } .games-tab-content .icon_home_logo_keno_jili { background-image: url(".//img1823_usukakiss/jili_keno.png"); } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr{ height: 4.4rem!important; } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li{ height: 100%!important; } /* my account */ .verifyotp-form a{ color:#ff67bd!important; } .deposit-progress-bar-container .account-info-container .account-icon{ background-image: -webkit-linear-gradient(top, #ff67bd, #ff91d5) !important; } .icon-myprofile{ background-image: url(.//img1823_usukakiss/acc_user.png?v=9); } .account-menu-section .icon-referral-program{ background-image: url(.//img1823_usukakiss/acc_referral.png?v=9); } .icon-changepassword{ background-image: url(.//img1823_usukakiss/acc_changepassword.png?v=9); } .icon-logout { background-image: url(".//img1823_usukakiss/acc_logout.png?v=9"); } .mobile-wallet-section .collapse, .deposit-progress-bar-container .account-grade-container .account-group-container .group-level, .deposit-progress-bar-container .account-grade-container .account-group-container .leaderboard-desc, .deposit-progress-bar-container .account-grade-container .account-leaderboard-container .group-level, .deposit-progress-bar-container .account-grade-container .account-leaderboard-container .leaderboard-desc, ._tabHeaderTitle_1ivtf_1._active_1ivtf_22{ background-image: -webkit-linear-gradient(top, #ff67bd, #ff91d5) !important; } ._tabHeaderTitle_1ivtf_1{ background: rgba(0, 0, 0, .8)!important; } .mobile-wallet-section .collapse p, .mobile-wallet-section .wallet-info .top-content .member-wallet .bottom .member-balance, .deposit-progress-bar-container .account-info-container .account-name{ color:#fff!important; } .mobile-wallet-section .collapse svg{ fill:#000!important; } /* my account */ .fa-sign-in-alt:before{ display:none!important; } .notice-item[style] { animation: 50s linear 0s infinite normal none running notice-enter!important; } .btn-blue-promom, .sidemenu-logo{ background: #ff0000!important; background: -moz-linear-gradient(top, #444444 0%, #000000 100%)!important; background: -webkit-linear-gradient(top, #444444 0%,#000000 100%)!important; background: linear-gradient(to bottom, #444444 0%,#000000 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#000000',GradientType=0 )!important; color: #fff!important; } .gamelobby-content .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li a{ color:#fff!important; } .loading img{ content: url(".//img1823_usukakiss/loading.gif?v=9"); } .sidemenu .ui-panel-inner{ background: #444444!important; background: -moz-linear-gradient(top, #ff67bd 0%, #ff91d5 100%)!important; background: -webkit-linear-gradient(top, #ff67bd 0%,#ff91d5 100%)!important; background: linear-gradient(to bottom, #ff67bd 0%,#ff91d5 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff67bd', endColorstr='#ff91d5',GradientType=0 )!important; color: #000!important; } .sidemenu ul li a{ color: #000!important; } .sidemenu ul li{ border-bottom: .0rem solid #e4e4e4!important; } .scroll_menu .menu_nav li a.on, .T2Box .btn-form, .sa-button-container .confirm, .sweet-alert button.cancel{ background-color: #ff91d5!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff67bd), to(#ff91d5))!important; background-image: -webkit-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -moz-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -ms-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -o-linear-gradient(top, #ff67bd, #ff91d5)!important; } .sidemenu{ background: #000!important; } .payment-scroll-menu .on .icon{ filter: brightness(0) invert(0)!important; } .ui-footer, .ui-footer .navbar, .trf-top, .T2Box .btn-form{ background-color: #ff91d5!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff67bd), to(#ff91d5))!important; background-image: -webkit-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -moz-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -ms-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -o-linear-gradient(top, #ff67bd, #ff91d5)!important; color: #000!important; } .ui-footer .navbar li a span, .col-xs-4 .fa-exchange[style], .col-xs-4 .wallet-label{ color: #000!important; } .vippagecontent{ background:none!important; } .btn-disabled{ background-color: #000000!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#595959))!important; background-image: -webkit-linear-gradient(top, #444444, #595959)!important; background-image: -moz-linear-gradient(top, #444444, #595959)!important; background-image: -ms-linear-gradient(top, #444444, #595959)!important; background-image: -o-linear-gradient(top, #444444, #595959)!important; color: #000!important; } .btn.btn-form.confirm-tran-btn{ background-color: #ff0000!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ca0000))!important; background-image: -webkit-linear-gradient(top, #ff0000, #ca0000)!important; background-image: -moz-linear-gradient(top, #ff0000, #ca0000)!important; background-image: -ms-linear-gradient(top, #ff0000, #ca0000)!important; background-image: -o-linear-gradient(top, #ff0000, #ca0000)!important; color: #fff!important; } .btn-blue{ background-color: #ff91d5!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff67bd), to(#ff91d5))!important; background-image: -webkit-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -moz-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -ms-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -o-linear-gradient(top, #ff67bd, #ff91d5)!important; color: #000!important; } .btn-red, .casino-usrpwd-body .btn-common[style], .sidebar-menu-accountinfo{ background-color: #ff91d5!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff67bd), to(#ff91d5))!important; background-image: -webkit-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -moz-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -ms-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -o-linear-gradient(top, #ff67bd, #ff91d5)!important; color: #000!important; } #mainMenu .menu-item a { background-color: #ff91d5!important; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff67bd), to(#ff91d5))!important; background-image: -webkit-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -moz-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -ms-linear-gradient(top, #ff67bd, #ff91d5)!important; background-image: -o-linear-gradient(top, #ff67bd, #ff91d5)!important; color: #000!important; width:98%!important; border-radius: 10px; height: 0.8rem!important; } .textbox .userandpwd td, .casino-usrpwd-body .usrpwd-container .detailtxt{ color:#ff91d5!important; } .btn-common, .casino-usrpwd-body .play-btn{ height:1rem; line-height: 1rem; } .close-trf>img{ width: 30px!important; height: 30px!important; margin-top: 10px!important; } #pageHome #homePage .home_notice .icon_home_notice:before{ color:#fff!important; font-size: 17px; } #pageHome #homePage .home_firmcontent_box .vendor-tab-content .home_firms .home_firms_tr li{ margin-bottom: 50px!important; } .m-scroll-btn { background: #282828!important; color: #f0c84d!important; border:0px solid #282828!important; } .m-scroll-btn svg{ fill:#ff91d5!important; } #pageHome #homePage .home_firmcontent_box .vendor-tab-content .home_firms .home_firms_tr li a{ background-repeat: no-repeat!important } #pageHome #homePage .home_navBox .home_nav li span, #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li a span{ color:#ff67bd!important; } .icon_home_menu_sport, .icon_home_menu_lc, .icon_home_menu_slot, .icon_home_menu_more, .icon_home_menu_keno, .icon_home_menu_fishing, .icon_home_menu_711, .icon_home_menu_lottery, .icon_home_menu_crash{ height: 0.84rem!important; width: 0.94rem!important; } .fa-stack[data-count]:after{ background: #ff67bd !important; right: -28%!important; } .list-item-worldcupchallenge .fa-trophy:before{ display:none!important; } .list-item-worldcupchallenge .fa-trophy{ background-image: url(.//img1823_usukakiss2026/worldcupchallenge.png?v=9)!important; width:39px!important; height: 29px!important; background-size: 100%; } .icon-voucher{ background-image: url(.//img1823_usukakiss/voucher.png?v=9)!important; } .icon-sbo{ background-image: url(.//img1823_usukakiss/sbo_menu.png?v=9); } .icon-918kiss{ background-image: url(".//img1823_usukakiss/918_menu.png"); } .icon-joker{ background-image: url(.//img1823_usukakiss/joker_menu.png?v=9); } .icon-sexybac{ background-image: url(".//img1823_usukakiss/sexyb_menu.png"); } .icon-sa{ background-image: url(.//img1823_usukakiss/sa_menu.png?v=9); } .icon_home_menu_sport{ background-image: url(.//img1823_usukakiss/sport.png?v=9); } .icon_home_menu_slot{ background-image: url(.//img1823_usukakiss/slot_menu.png?v=9); } .icon_home_menu_711{ background-image: url(.//img1823_usukakiss/7_11_menu.png?v=9); } .icon_home_menu_lc{ background-image: url(.//img1823_usukakiss/casino_menu.png?v=9); } .icon_home_menu_lottery{ background-image: url(.//img1823_usukakiss/4d_menu.png?v=9); } .icon_home_menu_fishing{ background-image: url(".//img1823_usukakiss/fish_menu.png?v=9"); } .icon_home_menu_more{ background-image: url(".//img1823_usukakiss/more_menu.png?v=9"); background-position: center; width: 91px; background-size: 100%; background-repeat: no-repeat; } .icon_home_menu_keno{ background-image: url(".//img1823_usukakiss/4d_menu.png?v=9"); } .icon_home_menu_esport{ background-image: url(".//img1823_usukakiss/esport_menu.png?v=9"); } .icon_home_menu_crash{ background-image: url(".//img1823_usukakiss/flight_menu.png?v=9")!important; } .icon_home_menu_cockfight{ background-image: url(".//img1823_usukakiss/cf_menu.png?v=9")!important; } .fa-dharmachakra:before{ content:none!important; } .float-menu.dailyloginreward-floating-icon .floating-icon-image { content:url('./img1823_usukakiss/check2.png?v=3') !important; } .float-menu.customicon-floating-icon .floating-icon-image { content:url('./img1823_usukakiss/download2.png?v=3') !important; } .icon-voucher{ background-image: url(./img1823_usukakiss/voucher.png?v=3) !important; } #leftmenu .icon-voucher{ background-image: url(./img1823_usukakiss/voucher.png?v=3) !important; background-position-x: 7px!important; } #progressivejackpot .show-for-small-only img { content: url(./img1823_usukakiss/jackpot2.png?v=1) !important; } section#progressivejackpot.theme1 .home-jackpot-content.myr { top: 59%!important; left: 31%!important;} section#progressivejackpot.theme1 .home-jackpot-content .home-jackpot-running { font-size: 6vw!important; } section#progressivejackpot.theme1 .home-jackpot-content{ color: #fff!important; text-shadow: -1px 0 #ff67bd, 0 1px #ff91d5, 1px 0 #ff67bd, 0 -1px #ff91d5!important; } .fa-dharmachakra{ background-image: url(".//img1823_usukakiss/spin_menu.png?v=9")!important; height: 0.84rem !important; width: 0.94rem !important; background-size: 100%!important; background-repeat: no-repeat!important;} .li-lottery .icon_home_menu_keno, .li-lottery .icon_home_menu_lottery{ background-image: url(".//img1823_usukakiss/4d_menu.png?v=9"); background-position: center; width: 31px; background-size: 100%; background-repeat: no-repeat; } .footermenu .icon-home-big{ background-image: url(".//img1823_usukakiss/home_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .64rem!important; width: .84rem!important; } .ui-footer .navbar li a.on .icon-funds{ background-image: url(".//img1823_usukakiss/deposit_menu.png?v=9")!important; } .footermenu .icon-funds{ background-image: url(".//img1823_usukakiss/deposit_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .64rem!important; width: .74rem!important; } .footermenu .icon-account{ background-image: url(".//img1823_usukakiss/user_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .64rem!important; width: .74rem!important; } .footermenu .icon-contact{ background-image: url(".//img1823_usukakiss/contact_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .64rem!important; width: .74rem!important; } .footermenu .icon-promotion-big{ background-image: url(".//img1823_usukakiss/promo_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .64rem!important; width: .74rem!important; } .footermenu .icon-livechat{ background-image: url(".//img1823_usukakiss/chat_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .64rem!important; width: .64rem!important; } .ui-panel-inner .icon { height: 0.74rem!important; } .ui-panel-inner .icon-home-big{ background-image: url(".//img1823_usukakiss/home_menu.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-funds{ background-image: url(".//img1823_usukakiss/fund_menu.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-account{ background-image: url(".//img1823_usukakiss/acc_menu.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-promotion-big{ background-image: url(".//img1823_usukakiss/promo_menu.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-livechat{ background-image: url(".//img1823_usukakiss/chat_menu.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-vip{ background-image: url(".//img1823_usukakiss/vip2.png"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-contact{ background-image: url(".//img1823_usukakiss/chat_menu.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-tnc{ background-image: url(".//img1823_usukakiss/info_menu.png?v=10"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-language{ background-image: url(".//img1823_usukakiss/lang_menu.png"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-referral-program{ background-image: url(".//img1823_usukakiss/affiliate_side.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-desktop{ background-image: url(".//img1823_usukakiss/desk_menu.png?v=9"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .icon-logout{ background-image: url(".//img1823_usukakiss/logout_menu.png?v=10"); background-position: center; background-repeat: no-repeat; } .ui-panel-inner .fa-sign-in-alt{ background-image: url(".//img1823_usukakiss/log_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .74rem!important; width: .84rem!important; background-size: 0.84rem!important; display: block; } .ui-panel-inner .icon-livecuci{ background-image: url(".//img1823_usukakiss/cuci_menu.png?v=9"); background-position: center; background-repeat: no-repeat; height: .74rem!important; width: .84rem!important; background-size: 0.84rem!important; display: block; } .sports-container-background { background-image: url(".//img1823_usukakiss/soccerbg.png?v=10"); } .luckyspin_banner{ background-image: url(".//img1823_usukakiss/spinbanner.png?v=9")!important; } .float-menu.luckyspin-floating-icon .floating-icon-image { content: url(".//img1823_usukakiss/luckyspin.png?v=9")!important; } .swiper-slide{ max-width: 16vw!important; } i.provider.logo-dctrelax, i.provider.logo-habanero, i.provider.logo-pragmatic, i.provider.logo-pocketgame, i.provider.logo-spribe{ filter: brightness(0) invert(1)!important; } .swiper{ width:74%!important; } .search-filter .button-style-1{ background: linear-gradient(to bottom, #ff67bd 10%, #ff91d5 66%, #ff67bd 100%) !important; color: #000 !important; box-shadow: inset -1px 0px 8px #ff67bd !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, #ff67bd, #ff91d5) !important; border-color: #282828 !important; } .gamelobby-tab-content .tabs .tab, .mobile-tnc .info-centre-header{ background: linear-gradient(0deg, #ff67bd, #ff91d5) !important; } .gamelobby-tab-content .tabs .tab.selected{ background: linear-gradient(180deg, #000, #000) !important; } .gamelobby-content .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li a{ color:#ff67bd!important; } /* ============================== PROMOTION BUTTON STYLE ============================== */ .m-promotion-button-container{ display:flex; gap:20px; width:100%; } .m-promotion-button-container .btn-common{ position:relative; overflow:hidden; flex:1; border-radius:12px !important; font-weight:600; text-transform:uppercase; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } /* ============================== DETAILS BUTTON ============================== */ .m-promotion-button-container .btn-blue-promo{ color:#fff !important; background: linear-gradient( 180deg, #321424 0%, #18030f 35%, #12000b 100% ) !important; border:2px solid #ff39a8 !important; box-shadow: inset 0 3px 8px rgba(255,255,255,.08), inset 0 -4px 10px rgba(0,0,0,.65), 0 0 8px rgba(255,48,164,.6), 0 10px 22px rgba(91,0,48,.25) !important; } /* ============================== APPLY NOW BUTTON ============================== */ .m-promotion-button-container .btn-red-promo{ color:#fff !important; background: linear-gradient( 180deg, #ff64bd 0%, #f43aa5 38%, #d70d83 100% ) !important; border:2px solid #ffd0ea !important; box-shadow: inset 0 3px 8px rgba(255,255,255,.28), inset 0 -4px 8px rgba(162,0,89,.28), 0 0 12px rgba(255,49,170,.65), 0 10px 24px rgba(208,0,111,.35) !important; isolation:isolate; } /* ============================== RUNNING SHINE LIGHT ============================== */ .m-promotion-button-container .btn-red-promo::before{ content:""; position:absolute; z-index:1; top:-60%; left:-45%; width:32%; height:220%; background:linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.08) 20%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.10) 80%, transparent 100% ); transform:rotate(22deg); filter:blur(2px); animation:promoPinkShine 2.6s ease-in-out infinite; pointer-events:none; } /* extra soft glow travelling with shine */ .m-promotion-button-container .btn-red-promo::after{ content:""; position:absolute; z-index:0; top:-30%; left:-50%; width:45%; height:160%; background:rgba(255,255,255,.18); filter:blur(18px); transform:rotate(20deg); animation:promoPinkGlow 2.6s ease-in-out infinite; pointer-events:none; } @keyframes promoPinkShine{ 0%{ left:-45%; opacity:0; } 15%{ opacity:1; } 55%{ opacity:1; } 75%{ left:125%; opacity:0; } 100%{ left:125%; opacity:0; } } @keyframes promoPinkGlow{ 0%{ left:-50%; opacity:0; } 20%{ opacity:.8; } 70%{ left:115%; opacity:.6; } 100%{ left:115%; opacity:0; } } /* ============================== HOVER / CLICK EFFECT ============================== */ .m-promotion-button-container .btn-common:hover{ transform:translateY(-2px); filter:brightness(1.08); } .m-promotion-button-container .btn-blue-promo:hover{ box-shadow: inset 0 3px 8px rgba(255,255,255,.1), inset 0 -4px 10px rgba(0,0,0,.65), 0 0 16px rgba(255,48,164,.85), 0 12px 26px rgba(91,0,48,.3) !important; } .m-promotion-button-container .btn-red-promo:hover{ box-shadow: inset 0 3px 8px rgba(255,255,255,.35), inset 0 -4px 8px rgba(162,0,89,.25), 0 0 20px rgba(255,52,176,.9), 0 12px 30px rgba(208,0,111,.45) !important; } .m-promotion-button-container .btn-common:active{ transform:translateY(1px) scale(.99); } /* JOIN NOW + LOGIN */ .home_join_login{ display:flex; align-items:center; gap:10px; } .home_join_login a{ position:relative; overflow:hidden; min-width:105px; padding:10px 18px; border-radius:8px; text-align:center; text-decoration:none !important; font-size:14px; font-weight:600; line-height:1; transition:.25s ease; } /* JOIN NOW - DARK PINK / BLACK */ .home_join_login .home_to_join{ color:#fff !important; background:linear-gradient( 180deg, #321424 0%, #1a0611 45%, #100008 100% ) !important; /* thin border */ border:1px solid #ff42aa !important; box-shadow: inset 0 2px 5px rgba(255,255,255,.08), 0 0 6px rgba(255,55,166,.35) !important; } /* LOGIN - BRIGHT PINK */ .home_join_login .home_to_login{ color:#fff !important; background:linear-gradient( 180deg, #ff67bd 0%, #f238a4 45%, #d70c82 100% ) !important; /* thin border */ border:1px solid #ffb6df !important; box-shadow: inset 0 2px 5px rgba(255,255,255,.25), 0 0 8px rgba(255,45,164,.4) !important; } /* RUNNING SHINE ON LOGIN */ .home_join_login .home_to_login::before{ content:""; position:absolute; top:-70%; left:-45%; width:28%; height:240%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.75), transparent ); transform:rotate(22deg); animation:loginShine 2.8s ease-in-out infinite; pointer-events:none; } @keyframes loginShine{ 0%{ left:-45%; opacity:0; } 15%{ opacity:1; } 65%{ left:125%; opacity:1; } 80%, 100%{ left:125%; opacity:0; } } /* HOVER */ .home_join_login a:hover{ transform:translateY(-1px); filter:brightness(1.08); } .home_join_login .home_to_join:hover{ box-shadow: inset 0 2px 5px rgba(255,255,255,.1), 0 0 10px rgba(255,55,166,.55) !important; } .home_join_login .home_to_login:hover{ box-shadow: inset 0 2px 5px rgba(255,255,255,.3), 0 0 14px rgba(255,45,164,.7) !important; } .ui-footer, .ui-footer .navbar, .trf-top, .T2Box .btn-form { background-color: #d70d83 !important; background-image: -webkit-gradient( linear, left top, left bottom, from(#ff67bd), to(#d70d83) ) !important; background-image: -webkit-linear-gradient( top, #ff67bd 0%, #f43aa5 45%, #d70d83 100% ) !important; background-image: -moz-linear-gradient( top, #ff67bd 0%, #f43aa5 45%, #d70d83 100% ) !important; background-image: -ms-linear-gradient( top, #ff67bd 0%, #f43aa5 45%, #d70d83 100% ) !important; background-image: -o-linear-gradient( top, #ff67bd 0%, #f43aa5 45%, #d70d83 100% ) !important; background-image: linear-gradient( to bottom, #ff67bd 0%, #f43aa5 45%, #d70d83 100% ) !important; color: #fff !important; box-shadow: inset 0 1px 3px rgba(255,255,255,.28), 0 0 8px rgba(255,45,164,.3) !important; } /* ========================================= REGISTRATION PAGE - PINK + GOLD NEON THEME CSS ONLY ========================================= */ #registrationPage { --pink: #ff2bbd; --pink-light: #ff8ddd; --pink-dark: #8e005f; --gold: #ffd76a; --gold-light: #fff1ad; --gold-dark: #b87900; --bg-dark: #10000c; --bg-card: #1c0717; --text: #ffffff; background: radial-gradient(circle at 50% 0%, rgba(255, 36, 185, 0.20) 0%, rgba(255, 36, 185, 0.05) 35%, transparent 60%), linear-gradient(180deg, #190012 0%, #0c0009 100%) !important; color: #fff !important; } /* ========================================= TITLE ========================================= */ #registrationPage .form-title { color: var(--gold-light) !important; font-weight: 800 !important; text-align: center !important; letter-spacing: .5px; text-shadow: 0 0 4px #ff35bd, 0 0 10px rgba(255, 43, 189, .8), 0 0 18px rgba(255, 215, 106, .45); animation: regTitleBlink 2s ease-in-out infinite alternate; } @keyframes regTitleBlink { 0% { filter: brightness(1); text-shadow: 0 0 4px #ff35bd, 0 0 10px rgba(255, 43, 189, .55); } 100% { filter: brightness(1.25); text-shadow: 0 0 6px #fff, 0 0 12px #ff35bd, 0 0 22px #ff35bd, 0 0 30px rgba(255, 215, 106, .7); } } /* ========================================= REGISTRATION FORM AREA ========================================= */ #registrationPage .reg-step-container { background: linear-gradient(180deg, rgba(38, 4, 29, .98), rgba(15, 0, 11, .98)) !important; border: 1px solid rgba(255, 215, 106, .55); border-radius: 16px; box-shadow: 0 0 8px rgba(255, 43, 189, .18), 0 0 18px rgba(255, 43, 189, .12), inset 0 0 20px rgba(255, 43, 189, .04); } /* ========================================= PROGRESS BAR ========================================= */ #registrationPage .reg-progress-bar-section { position: relative; } #registrationPage .step-wrapper { background: #220018 !important; color: #d4a94b !important; border: 2px solid #8b6425 !important; box-shadow: inset 0 0 8px rgba(255, 215, 106, .15), 0 0 6px rgba(255, 215, 106, .12); transition: all .3s ease; } /* Active / current step */ #registrationPage .step-wrapper.on, #registrationPage .step-wrapper.current-step { color: #3c1600 !important; border-color: #fff1a7 !important; background: linear-gradient( 135deg, #fff4bd 0%, #ffd66d 25%, #ff41be 55%, #ff148e 75%, #ffd86b 100% ) !important; box-shadow: 0 0 5px #fff, 0 0 10px #ffdc75, 0 0 16px #ff31b6, 0 0 26px rgba(255, 49, 182, .7); animation: regStepBlink 1.5s ease-in-out infinite alternate; } @keyframes regStepBlink { 0% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(1.06); filter: brightness(1.3); } } /* Completed check icon */ #registrationPage .step-wrapper svg path { fill: var(--gold-light) !important; } /* Progress line */ #registrationPage .progressBar { height: 3px !important; background: linear-gradient( 90deg, #7b004e, #ff25ae, #ffd86d, #ff25ae, #7b004e ) !important; background-size: 200% 100% !important; box-shadow: 0 0 6px rgba(255, 42, 177, .8), 0 0 10px rgba(255, 214, 109, .45); animation: regProgressFlow 2s linear infinite; } @keyframes regProgressFlow { from { background-position: 200% center; } to { background-position: 0% center; } } /* ========================================= LABELS ========================================= */ #registrationPage .standard-label { color: var(--gold-light) !important; font-weight: 600 !important; text-shadow: 0 0 5px rgba(255, 215, 106, .35); } /* ========================================= INPUT CONTAINERS ========================================= */ #registrationPage .standard-form-field-wrapper, #registrationPage .standard-select { background: linear-gradient( 180deg, rgba(43, 7, 33, .96), rgba(18, 1, 14, .96) ) !important; border: 1px solid rgba(255, 215, 106, .48) !important; border-radius: 9px !important; box-shadow: inset 0 0 8px rgba(255, 43, 189, .06), 0 0 4px rgba(255, 43, 189, .08); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } /* Focus */ #registrationPage .standard-form-field-wrapper:focus-within, #registrationPage .standard-select:hover { border-color: #ffd967 !important; box-shadow: 0 0 5px #ff34b9, 0 0 10px rgba(255, 52, 185, .55), 0 0 15px rgba(255, 215, 106, .22), inset 0 0 7px rgba(255, 43, 189, .08); transform: translateY(-1px); } /* ========================================= INPUT TEXT ========================================= */ #registrationPage .standard-input { color: #fff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #registrationPage .standard-input::placeholder { color: rgba(255, 218, 239, .58) !important; } /* Autofill override */ #registrationPage input:-webkit-autofill, #registrationPage input:-webkit-autofill:hover, #registrationPage input:-webkit-autofill:focus { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #1d0717 inset !important; } /* ========================================= PASSWORD EYE ========================================= */ #registrationPage .standard-password-eye { fill: #ffd96f !important; filter: drop-shadow(0 0 3px rgba(255, 216, 111, .75)) drop-shadow(0 0 6px rgba(255, 43, 189, .4)); } /* ========================================= SELECT ARROW ========================================= */ #registrationPage .standard-select-arrow { border-top-color: #ffd96f !important; } /* ========================================= DROPDOWN ========================================= */ #registrationPage .standard-select-dropdown { background: #15000f !important; border: 1px solid rgba(255, 215, 106, .6) !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .55), 0 0 10px rgba(255, 43, 189, .22) !important; } #registrationPage .standard-select-options { color: #fff !important; background: #190012 !important; border-bottom: 1px solid rgba(255, 215, 106, .08) !important; transition: .2s ease; } #registrationPage .standard-select-options:hover { color: #fff !important; background: linear-gradient( 90deg, rgba(255, 35, 174, .55), rgba(255, 215, 106, .18) ) !important; } #registrationPage .standard-select-options.active { color: #3b1500 !important; font-weight: 700 !important; background: linear-gradient( 90deg, #ff29b4, #ffd968 ) !important; } /* ========================================= ERROR MESSAGE ========================================= */ #registrationPage .standard-error-validation, #registrationPage .text-danger { color: #ff78c9 !important; text-shadow: 0 0 5px rgba(255, 30, 162, .5); } /* ========================================= NEXT / REGISTER BUTTON ========================================= */ #registrationPage .standard-submit-form-button { position: relative; overflow: hidden; color: #391100 !important; font-weight: 800 !important; border: 1px solid #fff1ad !important; border-radius: 10px !important; background: linear-gradient( 135deg, #ff189f 0%, #ff67cf 18%, #ffd86c 48%, #fff2ae 62%, #ff38b7 100% ) !important; background-size: 250% 250% !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.65), 0 0 5px #ff38b7, 0 0 12px rgba(255, 56, 183, .75), 0 0 20px rgba(255, 215, 106, .40) !important; text-shadow: 0 1px 0 rgba(255,255,255,.4); animation: regButtonGradient 3s linear infinite, regButtonBlink 1.4s ease-in-out infinite alternate; } /* Moving shine */ #registrationPage .standard-submit-form-button::before { content: ""; position: absolute; width: 40%; height: 200%; top: -50%; left: -70%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.85), transparent ); transform: rotate(25deg); animation: regButtonShine 2.5s ease-in-out infinite; } @keyframes regButtonGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes regButtonBlink { 0% { filter: brightness(.95); box-shadow: 0 0 4px #ff38b7, 0 0 8px rgba(255, 56, 183, .6), 0 0 12px rgba(255, 215, 106, .25); } 100% { filter: brightness(1.18); box-shadow: 0 0 6px #fff, 0 0 12px #ff38b7, 0 0 22px rgba(255, 56, 183, .9), 0 0 28px rgba(255, 215, 106, .65); } } @keyframes regButtonShine { 0%, 55% { left: -70%; } 100% { left: 140%; } } /* Hover */ #registrationPage .standard-submit-form-button:hover { transform: translateY(-1px) scale(1.015); filter: brightness(1.15); } /* Disabled button */ #registrationPage .standard-submit-form-button:disabled { opacity: .55 !important; color: rgba(255,255,255,.65) !important; background: linear-gradient( 135deg, #57203f, #6c3953, #725c35 ) !important; border-color: rgba(255, 215, 106, .35) !important; box-shadow: 0 0 5px rgba(255, 43, 189, .18) !important; animation: none !important; } /* ========================================= BACK BUTTON ========================================= */ #registrationPage .back-button { border-radius: 50% !important; border: 1px solid #ffd86c !important; background: linear-gradient( 145deg, #ff35b7, #8d005d ) !important; box-shadow: 0 0 5px rgba(255, 42, 174, .7), 0 0 10px rgba(255, 215, 106, .25); } #registrationPage .back-button svg path { fill: #fff1ac !important; } /* ========================================= NOTICE / TERMS ========================================= */ #registrationPage .reg-notice-section { color: rgba(255,255,255,.65) !important; } #registrationPage .reg-notice-section .text-info { color: #ffd96f !important; text-shadow: 0 0 5px rgba(255, 215, 106, .45); } /* ========================================= LOGIN SECTION ========================================= */ #registrationPage .prompt-login-section { color: rgba(255,255,255,.75) !important; border-top: 1px solid rgba(255, 215, 106, .18); } #registrationPage .prompt-login-section a { color: #ff64c9 !important; font-weight: 700 !important; text-shadow: 0 0 4px rgba(255, 43, 189, .6), 0 0 9px rgba(255, 215, 106, .25); animation: regLoginBlink 1.8s ease-in-out infinite alternate; } @keyframes regLoginBlink { from { color: #ff64c9; filter: brightness(1); } to { color: #ffe28a; filter: brightness(1.3); } } /* ========================================= CAPTCHA ========================================= */ #registrationPage img[alt="Captcha"] { border: 1px solid rgba(255, 215, 106, .7) !important; box-shadow: 0 0 5px rgba(255, 43, 189, .4), 0 0 9px rgba(255, 215, 106, .2); } /* ========================================= SUBTLE FORM GLOW ========================================= */ #registrationPage .register-input-container { position: relative; } #registrationPage .register-input-container::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -2px; height: 1px; opacity: .22; background: linear-gradient( 90deg, transparent, #ff2bbd, #ffd86a, #ff2bbd, transparent ); } /* ========================================= GOLD / PINK GLOW PULSE ========================================= */ #registrationPage .reg-progress-bar-section, #registrationPage .transaction-button-section { animation: regAreaGlow 3s ease-in-out infinite alternate; } @keyframes regAreaGlow { from { filter: drop-shadow(0 0 0 rgba(255, 43, 189, 0)); } to { filter: drop-shadow(0 0 4px rgba(255, 43, 189, .15)); } } /* ========================================= LOGIN PAGE - PINK + GOLD BLINK THEME CSS ONLY ========================================= */ #loginPage.theme2 { --pink: #ff28b8; --pink-light: #ff83db; --pink-dark: #8c005d; --gold: #ffd76a; --gold-light: #fff1ad; --gold-dark: #b77b00; --dark: #0d0009; --card: #1b0716; min-height: 100vh; background: radial-gradient( circle at 50% 5%, rgba(255, 41, 184, .22) 0%, rgba(255, 41, 184, .07) 28%, transparent 55% ), linear-gradient( 180deg, #210017 0%, #10000c 55%, #070005 100% ) !important; color: #fff !important; } /* ========================================= LOGO AREA ========================================= */ #loginPage.theme2 .logo_big { position: relative; text-align: center; padding-top: 15px; filter: drop-shadow(0 0 5px rgba(255, 44, 184, .45)) drop-shadow(0 0 12px rgba(255, 215, 106, .25)); } #loginPage.theme2 .logo_big img { border-radius: 10px; animation: loginLogoGlow 2.2s ease-in-out infinite alternate; } @keyframes loginLogoGlow { 0% { filter: brightness(1); } 100% { filter: brightness(1.12); } } /* ========================================= LOGIN TITLE ========================================= */ #loginPage.theme2 .title { margin-top: 12px !important; text-align: center !important; } #loginPage.theme2 .title span { color: #ffe58b !important; font-size: 21px !important; font-weight: 900 !important; letter-spacing: 2px !important; text-shadow: 0 0 4px #ff29b7, 0 0 10px rgba(255, 41, 183, .75), 0 0 18px rgba(255, 215, 106, .42) !important; animation: loginTitleBlink 1.8s ease-in-out infinite alternate; } @keyframes loginTitleBlink { 0% { filter: brightness(1); text-shadow: 0 0 4px #ff29b7, 0 0 8px rgba(255, 41, 183, .55); } 100% { filter: brightness(1.25); text-shadow: 0 0 5px #fff, 0 0 10px #ff29b7, 0 0 18px #ff29b7, 0 0 25px rgba(255, 220, 110, .75); } } /* ========================================= LOGIN CONTENT ========================================= */ #loginPage.theme2 .login_centent { color: #fff !important; } /* ========================================= INPUT ITEM ========================================= */ #loginPage.theme2 .login_centent_item.input_item { display: flex; align-items: center; margin-bottom: 13px; background: linear-gradient( 180deg, rgba(42, 7, 32, .97), rgba(18, 1, 14, .98) ) !important; border: 1px solid rgba(255, 215, 106, .55) !important; border-radius: 10px !important; box-shadow: inset 0 0 10px rgba(255, 43, 184, .05), 0 0 5px rgba(255, 43, 184, .12); transition: .3s ease; } /* input hover/focus glow */ #loginPage.theme2 .login_centent_item.input_item:focus-within { border-color: #ffdb72 !important; box-shadow: 0 0 5px #ff32b8, 0 0 11px rgba(255, 50, 184, .7), 0 0 18px rgba(255, 215, 106, .25), inset 0 0 8px rgba(255, 43, 184, .08); transform: translateY(-1px); } /* ========================================= USER / PASSWORD ICON AREA ========================================= */ #loginPage.theme2 .login_centent_item.input_item > label { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 42px; margin: 0 !important; border-right: 1px solid rgba(255, 215, 106, .28); background: linear-gradient( 145deg, rgba(255, 37, 175, .20), rgba(255, 215, 106, .08) ); border-radius: 9px 0 0 9px; } /* Existing icon sprite enhancement */ #loginPage.theme2 .input_item label .icons { filter: brightness(0) invert(88%) sepia(50%) saturate(700%) hue-rotate(345deg) drop-shadow(0 0 4px rgba(255, 211, 97, .75)) !important; } /* ========================================= INPUT WRAPPER ========================================= */ #loginPage.theme2 .standard-form-field, #loginPage.theme2 .standard-form-field-wrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================= INPUT ========================================= */ #loginPage.theme2 .standard-input { color: #fff !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; } #loginPage.theme2 .standard-input::placeholder { color: rgba(255, 222, 240, .58) !important; } /* Autofill */ #loginPage.theme2 input:-webkit-autofill, #loginPage.theme2 input:-webkit-autofill:hover, #loginPage.theme2 input:-webkit-autofill:focus { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #1a0615 inset !important; transition: background-color 9999s ease-out !important; } /* ========================================= PASSWORD EYE ========================================= */ #loginPage.theme2 .standard-password-eye { fill: #ffd970 !important; filter: drop-shadow(0 0 3px rgba(255, 217, 112, .8)) drop-shadow(0 0 6px rgba(255, 43, 184, .35)); } /* ========================================= REMEMBER ME ========================================= */ #loginPage.theme2 .rememberme-formgroup { color: rgba(255,255,255,.76) !important; } #loginPage.theme2 #rememberMe { accent-color: #ff31b4 !important; filter: drop-shadow(0 0 3px rgba(255, 41, 181, .55)); } #loginPage.theme2 .remember-me { color: #ffe6f5 !important; text-shadow: 0 0 5px rgba(255, 43, 184, .22); } /* ========================================= LOGIN BUTTON ========================================= */ #loginPage.theme2 .login_btn { margin-top: 18px; } #loginPage.theme2 .login_btn .btn-blue { position: relative; display: flex !important; align-items: center; justify-content: center; overflow: hidden; color: #3a1600 !important; font-weight: 900 !important; letter-spacing: 1px; border: 1px solid #fff0a5 !important; border-radius: 10px !important; background: linear-gradient( 120deg, #ff129d 0%, #ff55c8 20%, #ffd463 45%, #fff0a6 56%, #ffcf58 66%, #ff2daf 100% ) !important; background-size: 250% 250% !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 0 5px #ff2fb3, 0 0 12px rgba(255, 47, 179, .72), 0 0 20px rgba(255, 215, 106, .38) !important; text-shadow: 0 1px 0 rgba(255,255,255,.45); animation: loginGradientMove 3s linear infinite, loginButtonBlink 1.35s ease-in-out infinite alternate; } /* moving shine */ #loginPage.theme2 .login_btn .btn-blue::before { content: ""; position: absolute; top: -70%; left: -70%; width: 35%; height: 250%; transform: rotate(25deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.9), transparent ); animation: loginButtonShine 2.6s ease-in-out infinite; } @keyframes loginGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes loginButtonBlink { 0% { filter: brightness(.96); box-shadow: 0 0 4px #ff30b5, 0 0 9px rgba(255, 48, 181, .55), 0 0 13px rgba(255, 215, 106, .22); } 100% { filter: brightness(1.18); box-shadow: 0 0 6px #fff, 0 0 12px #ff31b7, 0 0 22px rgba(255, 49, 183, .90), 0 0 30px rgba(255, 216, 105, .65); } } @keyframes loginButtonShine { 0%, 55% { left: -70%; } 100% { left: 145%; } } #loginPage.theme2 .login_btn .btn-blue:hover { transform: translateY(-1px) scale(1.015); filter: brightness(1.18); } /* ========================================= FORGOT PASSWORD ========================================= */ #loginPage.theme2 .login_forgetpsd, #loginPage.theme2 .login_forgetpsd a { color: #ffd96c !important; text-decoration: none !important; text-shadow: 0 0 4px rgba(255, 217, 108, .38), 0 0 8px rgba(255, 43, 184, .20); transition: .25s ease; } #loginPage.theme2 .login_forgetpsd a:hover { color: #ff72d1 !important; text-shadow: 0 0 5px #ff35b9, 0 0 10px rgba(255, 53, 185, .6); } /* ========================================= REGISTER AREA ========================================= */ #loginPage.theme2 .login_toreg { color: rgba(255,255,255,.68) !important; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255, 215, 106, .16) !important; } #loginPage.theme2 .login_toreg .m-register-link { color: #ff65ca !important; font-weight: 800 !important; text-shadow: 0 0 4px rgba(255, 48, 183, .6), 0 0 10px rgba(255, 215, 106, .22); animation: registerLinkBlink 1.6s ease-in-out infinite alternate; } @keyframes registerLinkBlink { 0% { color: #ff65ca; filter: brightness(1); } 100% { color: #ffe17c; filter: brightness(1.3); text-shadow: 0 0 5px #ff34b7, 0 0 11px rgba(255, 215, 106, .5); } } /* ========================================= ERROR MESSAGE ========================================= */ #loginPage.theme2 #loginErr { background: rgba(76, 0, 40, .75) !important; border: 1px solid rgba(255, 65, 154, .6) !important; border-radius: 7px !important; padding: 8px 10px !important; box-shadow: 0 0 8px rgba(255, 28, 144, .24) !important; } #loginPage.theme2 #loginErr, #loginPage.theme2 #loginErr *, #loginPage.theme2 #loginErr div { color: #ff8acb !important; } /* ========================================= SUBTLE PINK GOLD PAGE GLOW ========================================= */ #loginPage.theme2::before { content: ""; position: fixed; width: 220px; height: 220px; top: 18%; left: 50%; transform: translateX(-50%); pointer-events: none; background: radial-gradient( circle, rgba(255, 38, 174, .15), transparent 70% ); filter: blur(15px); animation: loginBackgroundPulse 3s ease-in-out infinite alternate; } @keyframes loginBackgroundPulse { from { opacity: .45; transform: translateX(-50%) scale(.92); } to { opacity: .95; transform: translateX(-50%) scale(1.08); } } /* ========================================================= DEPOSIT PAGE - PINK + GOLD LUXURY / BLINK THEME CSS ONLY ========================================================= */ .m-forms-page { --pink: #ff2bb8; --pink-light: #ff87db; --pink-dark: #850054; --gold: #ffd76b; --gold-light: #fff0ad; --gold-dark: #a86d00; --dark: #0d0009; --dark2: #170010; --card: #210719; color: #fff !important; background: radial-gradient( circle at 50% 0%, rgba(255, 38, 179, .18), transparent 38% ), linear-gradient( 180deg, #1b0013 0%, #0d0009 100% ) !important; } /* ========================================================= DEPOSIT OPTIONS TITLE ========================================================= */ .m-forms-page .deposit-label-offline-bank-container { background: transparent !important; } .m-forms-page .deposit-label-offline-bank .st-title { color: #ffe487 !important; font-weight: 800 !important; letter-spacing: .5px; text-shadow: 0 0 4px rgba(255, 216, 107, .7), 0 0 10px rgba(255, 43, 184, .55); animation: depositTitleGlow 1.8s ease-in-out infinite alternate; } @keyframes depositTitleGlow { from { filter: brightness(1); text-shadow: 0 0 4px rgba(255, 215, 107, .45), 0 0 7px rgba(255, 43, 184, .35); } to { filter: brightness(1.2); text-shadow: 0 0 5px #fff, 0 0 10px #ff2bb8, 0 0 18px rgba(255, 43, 184, .8), 0 0 25px rgba(255, 215, 107, .55); } } /* ========================================================= DEPOSIT METHOD TABS ========================================================= */ .m-forms-page .deposit-tab-container { background: transparent !important; } .m-forms-page .deposit-tab { background: transparent !important; } .m-forms-page .deposit-tab .tab-header { position: relative; color: #e4cddc !important; background: linear-gradient( 180deg, #27051d 0%, #14000e 100% ) !important; border: 1px solid rgba(255, 215, 107, .35) !important; border-radius: 10px !important; box-shadow: inset 0 0 8px rgba(255, 43, 184, .05), 0 0 4px rgba(0,0,0,.35); transition: all .3s ease; } /* TAB HOVER */ .m-forms-page .deposit-tab .tab-header:hover { border-color: #ffcf65 !important; background: linear-gradient( 180deg, #3a082c, #1c0115 ) !important; box-shadow: 0 0 6px rgba(255, 43, 184, .4), 0 0 12px rgba(255, 215, 107, .18); } /* ACTIVE DEPOSIT METHOD */ .m-forms-page .deposit-tab .tab-header.active { color: #fff4b8 !important; border: 1px solid #ffe28b !important; background: linear-gradient( 135deg, #720047 0%, #e41491 30%, #ff4fc5 50%, #b87b14 75%, #5e003d 100% ) !important; background-size: 250% 250% !important; box-shadow: inset 0 0 8px rgba(255,255,255,.15), 0 0 5px #ff31b7, 0 0 12px rgba(255, 49, 183, .75), 0 0 20px rgba(255, 215, 107, .32) !important; animation: depositTabMove 4s linear infinite, depositTabBlink 1.5s ease-in-out infinite alternate; } @keyframes depositTabMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes depositTabBlink { from { filter: brightness(.95); } to { filter: brightness(1.2); box-shadow: 0 0 6px #fff, 0 0 11px #ff2fb5, 0 0 20px rgba(255, 47, 181, .85), 0 0 27px rgba(255, 218, 109, .55); } } /* Deposit option wording */ .m-forms-page .deposit-option { color: inherit !important; font-weight: 600 !important; } .m-forms-page .tab-header.active .deposit-option { color: #fff4b0 !important; text-shadow: 0 0 5px rgba(255,215,107,.55), 0 0 8px rgba(255,43,184,.65); } /* ========================================================= TAB ICON AREA ========================================================= */ .m-forms-page .deposit-tab .img-container { border-radius: 50%; filter: drop-shadow(0 0 3px rgba(255, 43, 184, .35)); } .m-forms-page .deposit-tab .tab-header.active .img-container { filter: drop-shadow(0 0 4px #ff35ba) drop-shadow(0 0 7px rgba(255, 217, 105, .65)); animation: depositIconPulse 1.5s ease-in-out infinite alternate; } @keyframes depositIconPulse { from { transform: scale(1); } to { transform: scale(1.07); } } /* Change Bank Transfer original blue gradient to pink/gold */ .m-forms-page #pi-banktransfer-g stop:first-child { stop-color: #ff149f !important; } .m-forms-page #pi-banktransfer-g stop:last-child { stop-color: #ffd66a !important; } /* ========================================================= STANDARD LABEL ========================================================= */ .m-forms-page .standard-label { color: #ffe28a !important; font-weight: 600 !important; text-shadow: 0 0 4px rgba(255, 215, 107, .25); } /* Mandatory star */ .m-forms-page .standard-mandatory::after { color: #ff4fbc !important; text-shadow: 0 0 5px rgba(255, 48, 181, .6); } /* ========================================================= INPUTS ========================================================= */ .m-forms-page .standard-input, .m-forms-page input.standard-input, .m-forms-page .k-picker-wrap, .m-forms-page .standard-datetimepicker { color: #fff !important; background: linear-gradient( 180deg, #26061d, #14000f ) !important; border: 1px solid rgba(255, 215, 107, .46) !important; border-radius: 8px !important; box-shadow: inset 0 0 8px rgba(255, 43, 184, .05), 0 0 4px rgba(255, 43, 184, .08) !important; transition: all .25s ease; } .m-forms-page .standard-input:focus, .m-forms-page input.standard-input:focus, .m-forms-page .k-picker-wrap:focus-within { outline: none !important; border-color: #ffdd75 !important; box-shadow: 0 0 5px #ff31b4, 0 0 10px rgba(255, 49, 180, .6), 0 0 15px rgba(255, 215, 107, .20) !important; } .m-forms-page .standard-input::placeholder { color: rgba(255, 223, 241, .52) !important; } /* Disabled fields */ .m-forms-page .standard-input:disabled { color: rgba(255,255,255,.55) !important; background: linear-gradient( 180deg, #1b1017, #10070d ) !important; opacity: .8; } /* ========================================================= DROPDOWN SELECT ========================================================= */ .m-forms-page .standard-select { color: #fff !important; background: linear-gradient( 180deg, #27061e, #15000f ) !important; border: 1px solid rgba(255, 215, 107, .5) !important; border-radius: 8px !important; box-shadow: inset 0 0 7px rgba(255, 43, 184, .06); transition: .25s ease; } .m-forms-page .standard-select:hover { border-color: #ffdd78 !important; box-shadow: 0 0 5px rgba(255, 43, 184, .55), 0 0 10px rgba(255, 215, 107, .18); } .m-forms-page .standard-select-arrow { border-top-color: #ffd86e !important; } /* Dropdown box */ .m-forms-page .standard-select-dropdown { background: #13000d !important; border: 1px solid rgba(255, 215, 107, .55) !important; border-radius: 8px !important; box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 10px rgba(255, 43, 184, .18) !important; } /* Dropdown option */ .m-forms-page .standard-select-options { color: #f5eaf1 !important; background: #180011 !important; border-bottom: 1px solid rgba(255,215,107,.07) !important; } .m-forms-page .standard-select-options:hover { color: #fff !important; background: linear-gradient( 90deg, rgba(255, 39, 173, .55), rgba(255, 215, 107, .15) ) !important; } .m-forms-page .standard-select-options.active { color: #3a1300 !important; font-weight: 700 !important; background: linear-gradient( 90deg, #ff2caf, #ff85d7, #ffd96c ) !important; } /* ========================================================= QUICK DEPOSIT AMOUNT BUTTONS ========================================================= */ .m-forms-page .amount-btn { color: #ffe3f3 !important; font-weight: 700 !important; background: linear-gradient( 180deg, #290720, #160010 ) !important; border: 1px solid rgba(255, 215, 107, .42) !important; border-radius: 8px !important; box-shadow: inset 0 0 6px rgba(255, 43, 184, .05); transition: all .25s ease; } .m-forms-page .amount-btn:hover { color: #fff4b1 !important; border-color: #ffd86c !important; transform: translateY(-1px); box-shadow: 0 0 5px rgba(255, 43, 184, .55), 0 0 9px rgba(255, 215, 107, .22); } /* Selected amount */ .m-forms-page .amount-btn.active, .m-forms-page .amount-btn.on, .m-forms-page .amount-btn.selected { color: #321000 !important; border-color: #fff0a5 !important; background: linear-gradient( 135deg, #ff2bb5, #ff74d0, #ffd66c, #fff0a7 ) !important; box-shadow: 0 0 5px #ff35b8, 0 0 11px rgba(255, 53, 184, .7), 0 0 18px rgba(255, 215, 107, .4) !important; animation: amountBlink 1.3s ease-in-out infinite alternate; } @keyframes amountBlink { from { filter: brightness(.95); } to { filter: brightness(1.2); } } /* ========================================================= WALLET BALANCE ========================================================= */ .m-forms-page .input-group-addon { color: #ffe27e !important; font-weight: 700 !important; background: linear-gradient( 180deg, #27051d, #16000f ) !important; border-color: rgba(255, 215, 107, .45) !important; text-shadow: 0 0 5px rgba(255, 215, 107, .35); } /* ========================================================= DATE + TIME ========================================================= */ .m-forms-page .k-datetimepicker, .m-forms-page .k-picker-wrap { background: #1c0315 !important; border-color: rgba(255, 215, 107, .45) !important; } .m-forms-page .k-select { color: #ffd96e !important; background: linear-gradient( 180deg, #510033, #2a001c ) !important; border-left: 1px solid rgba(255, 215, 107, .35) !important; } .m-forms-page .k-icon { filter: drop-shadow(0 0 3px rgba(255,215,107,.55)); } /* ========================================================= UPLOAD RECEIPT ========================================================= */ .m-forms-page .upload-receipt-btn { position: relative; overflow: hidden; color: #351100 !important; font-weight: 800 !important; border: 1px solid #fff0a5 !important; border-radius: 9px !important; background: linear-gradient( 120deg, #ff21aa 0%, #ff70cf 25%, #ffd668 52%, #fff0a7 68%, #ff31b4 100% ) !important; background-size: 250% 250% !important; box-shadow: 0 0 5px #ff35b8, 0 0 11px rgba(255,53,184,.55), 0 0 17px rgba(255,215,107,.3) !important; animation: depositButtonMove 3s linear infinite, depositUploadBlink 1.6s ease-in-out infinite alternate; } .m-forms-page .upload-receipt-btn svg, .m-forms-page .upload-receipt-btn svg path { fill: #4a1900 !important; } @keyframes depositUploadBlink { from { filter: brightness(.96); } to { filter: brightness(1.16); box-shadow: 0 0 6px #fff, 0 0 12px #ff31b7, 0 0 20px rgba(255, 215, 107, .45); } } /* ========================================================= PACKAGE TITLE ========================================================= */ .m-forms-page .promotion-list-container .show-more { color: #ffe383 !important; background: linear-gradient( 90deg, #250219, #4e0738, #250219 ) !important; border: 1px solid rgba(255, 215, 107, .28) !important; } .m-forms-page .promotion-list-container .show-more svg path { fill: #ffd96c !important; } /* ========================================================= PROMOTION CARDS ========================================================= */ .m-forms-page .promotion-card { background: linear-gradient( 145deg, #220419, #10000c ) !important; border: 1px solid rgba(255, 215, 107, .32) !important; border-radius: 11px !important; box-shadow: inset 0 0 10px rgba(255,43,184,.03), 0 3px 10px rgba(0,0,0,.25); transition: all .3s ease; } .m-forms-page .promotion-card:hover { border-color: #dba947 !important; transform: translateY(-1px); box-shadow: 0 0 7px rgba(255,43,184,.3), 0 0 12px rgba(255,215,107,.12); } /* ACTIVE PROMO */ .m-forms-page .promotion-card.active { border: 1px solid #ffe17f !important; background: linear-gradient( 145deg, #42002c, #260019, #15000e ) !important; box-shadow: 0 0 5px #ff31b6, 0 0 11px rgba(255,49,182,.62), 0 0 19px rgba(255,215,107,.25), inset 0 0 15px rgba(255,43,184,.07) !important; animation: promoCardBlink 1.8s ease-in-out infinite alternate; } @keyframes promoCardBlink { from { border-color: #d29c38; } to { border-color: #fff1a7; box-shadow: 0 0 6px #ff33b7, 0 0 14px rgba(255,51,183,.72), 0 0 23px rgba(255,215,107,.35); } } /* Promo title */ .m-forms-page .promo-title { color: #ffe17a !important; font-weight: 800 !important; text-shadow: 0 0 5px rgba(255,215,107,.35), 0 0 8px rgba(255,43,184,.2); } .m-forms-page .promo-minamount { color: #ff86d8 !important; } .m-forms-page .promo-settings { color: rgba(255,255,255,.65) !important; } /* Radio selection */ .m-forms-page .radio-input-card .checkmark { border-color: #ffd96c !important; background: #16000f !important; } .m-forms-page .promotion-card.active .radio-input-card .checkmark { background: radial-gradient( circle, #fff2af 0%, #ffd361 28%, #ff2bb4 52%, #92005e 100% ) !important; border-color: #fff0a1 !important; box-shadow: 0 0 4px #ff36b9, 0 0 9px rgba(255,215,107,.55); } /* ========================================================= DETAILS BUTTON ========================================================= */ .m-forms-page .btn-blue-promo { color: #341000 !important; font-weight: 800 !important; border: 1px solid #ffe28a !important; border-radius: 7px !important; background: linear-gradient( 120deg, #ff28af, #ff6dce, #ffd56a, #fff0aa ) !important; box-shadow: 0 0 4px rgba(255,43,184,.55), 0 0 8px rgba(255,215,107,.22) !important; } /* ========================================================= SUBMIT BUTTON ========================================================= */ .m-forms-page .depositsub-button { position: relative; overflow: hidden; color: #361200 !important; font-weight: 900 !important; letter-spacing: .6px; border: 1px solid #fff1a9 !important; border-radius: 10px !important; background: linear-gradient( 120deg, #ff159f 0%, #ff60ca 22%, #ffd363 47%, #fff0aa 58%, #ffd05b 68%, #ff2caf 100% ) !important; background-size: 250% 250% !important; text-shadow: 0 1px 0 rgba(255,255,255,.45); box-shadow: inset 0 1px 1px rgba(255,255,255,.65), 0 0 5px #ff32b6, 0 0 12px rgba(255,50,182,.7), 0 0 20px rgba(255,215,107,.35) !important; } /* ONLY BLINK WHEN SUBMIT IS ENABLED */ .m-forms-page .depositsub-button:not(:disabled) { animation: depositButtonMove 3s linear infinite, depositSubmitBlink 1.3s ease-in-out infinite alternate; } /* SHINING EFFECT */ .m-forms-page .depositsub-button:not(:disabled)::before { content: ""; position: absolute; top: -80%; left: -70%; width: 35%; height: 270%; transform: rotate(25deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.9), transparent ); animation: depositButtonShine 2.5s ease-in-out infinite; } @keyframes depositButtonMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes depositSubmitBlink { from { filter: brightness(.95); box-shadow: 0 0 4px #ff31b5, 0 0 9px rgba(255,49,181,.55); } to { filter: brightness(1.2); box-shadow: 0 0 6px #fff, 0 0 12px #ff31b5, 0 0 22px rgba(255,49,181,.9), 0 0 30px rgba(255,215,107,.62); } } @keyframes depositButtonShine { 0%, 55% { left: -70%; } 100% { left: 145%; } } /* DISABLED SUBMIT */ .m-forms-page .depositsub-button:disabled { color: rgba(255,255,255,.52) !important; background: linear-gradient( 180deg, #482039, #291420 ) !important; border-color: rgba(255,215,107,.25) !important; box-shadow: inset 0 0 6px rgba(255,43,184,.05), 0 0 4px rgba(255,43,184,.12) !important; opacity: .65 !important; animation: none !important; } /* ========================================================= ERROR MESSAGE ========================================================= */ .m-forms-page .standard-error-validation, .m-forms-page .text-danger { color: #ff79cd !important; text-shadow: 0 0 4px rgba(255, 43, 184, .35); } /* ========================================================= RECEIPT IMAGE ========================================================= */ .m-forms-page .receipt-image-box { padding: 4px; border: 1px solid rgba(255,215,107,.55) !important; border-radius: 9px; background: #15000e; box-shadow: 0 0 7px rgba(255,43,184,.25); } /* ========================================================= SMALL GOLD SEPARATOR GLOW ========================================================= */ .m-forms-page .standard-form-field { position: relative; } .m-forms-page .standard-form-field::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -4px; height: 1px; opacity: .12; pointer-events: none; background: linear-gradient( 90deg, transparent, #ff2bb8, #ffd76b, #ff2bb8, transparent ); } /* ========================================================= STATEMENT PAGE - PINK + GOLD LUXURY / BLINK THEME CSS ONLY ========================================================= */ .m-mystatement-container { --pink: #ff2bb8; --pink-light: #ff7bd3; --pink-dark: #8a005a; --gold: #ffd76b; --gold-light: #fff0ad; --gold-dark: #a86d00; --dark: #0d0009; --dark2: #170010; --card: #210719; color: #fff !important; background: radial-gradient( circle at 50% 0%, rgba(255, 43, 184, .18), transparent 38% ), linear-gradient( 180deg, #1b0013 0%, #0c0008 100% ) !important; } /* ========================================================= PAGE TITLE ========================================================= */ .m-mystatement-container .form-title , .form-title{ text-align: center !important; color: #ffe68d !important; font-weight: 900 !important; letter-spacing: 1px !important; text-transform: uppercase; text-shadow: 0 0 4px rgba(255, 215, 107, .75), 0 0 10px rgba(255, 43, 184, .65), 0 0 16px rgba(255, 43, 184, .35); animation: statementTitleGlow 1.7s ease-in-out infinite alternate; } @keyframes statementTitleGlow { 0% { filter: brightness(1); text-shadow: 0 0 4px rgba(255, 215, 107, .55), 0 0 8px rgba(255, 43, 184, .45); } 100% { filter: brightness(1.25); text-shadow: 0 0 5px #fff, 0 0 10px #ff2bb8, 0 0 18px rgba(255, 43, 184, .85), 0 0 25px rgba(255, 215, 107, .65); } } /* ========================================================= TABLE CONTAINER ========================================================= */ .m-mystatement-container .m-standard-st-table-container { padding: 8px !important; border-radius: 14px !important; background: linear-gradient( 145deg, rgba(43, 5, 32, .98), rgba(15, 0, 11, .98) ) !important; border: 1px solid rgba(255, 215, 107, .55) !important; box-shadow: 0 0 6px rgba(255, 43, 184, .28), 0 0 14px rgba(255, 43, 184, .15), inset 0 0 15px rgba(255, 43, 184, .04) !important; } /* ========================================================= TABLE ========================================================= */ .m-mystatement-container .standard-st-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden; border-radius: 10px !important; background: #13000d !important; border: 1px solid rgba(255, 215, 107, .35) !important; box-shadow: 0 3px 12px rgba(0,0,0,.35); } /* ========================================================= TABLE HEADER ========================================================= */ .m-mystatement-container .standard-st-table .table-header-container { background: linear-gradient( 120deg, #8c005c 0%, #e81997 25%, #ff51c5 45%, #d69d2a 70%, #8b005c 100% ) !important; background-size: 250% 250% !important; animation: statementHeaderMove 4s linear infinite, statementHeaderGlow 1.8s ease-in-out infinite alternate; } .m-mystatement-container .standard-st-table .table-header { color: #fff5bf !important; font-weight: 800 !important; text-align: center !important; padding: 12px 8px !important; border-color: rgba(255, 239, 165, .3) !important; text-shadow: 0 0 4px rgba(255, 215, 107, .65), 0 0 8px rgba(255, 43, 184, .45) !important; } @keyframes statementHeaderMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes statementHeaderGlow { from { filter: brightness(.95); } to { filter: brightness(1.15); box-shadow: 0 0 5px #ff31b6, 0 0 12px rgba(255, 49, 182, .55), 0 0 18px rgba(255, 215, 107, .25); } } /* ========================================================= HEADER FIRST COLUMN ========================================================= */ .m-mystatement-container .standard-st-table .table-header:first-child { border-radius: 9px 0 0 0 !important; } /* HEADER LAST COLUMN */ .m-mystatement-container .standard-st-table .table-header:last-child { border-radius: 0 9px 0 0 !important; } /* ========================================================= TABLE BODY ROW ========================================================= */ .m-mystatement-container .standard-st-table tbody tr { background: linear-gradient( 90deg, #1f0418, #15000f ) !important; transition: background .25s ease, box-shadow .25s ease, transform .25s ease; } /* ALTERNATE ROW */ .m-mystatement-container .standard-st-table tbody tr:nth-child(even) { background: linear-gradient( 90deg, #29051f, #180011 ) !important; } /* ROW HOVER */ .m-mystatement-container .standard-st-table tbody tr:hover { background: linear-gradient( 90deg, rgba(255, 40, 175, .26), rgba(255, 215, 107, .10), rgba(255, 40, 175, .18) ) !important; box-shadow: inset 0 0 10px rgba(255, 43, 184, .14); transform: translateY(-1px); } /* ========================================================= TABLE BODY CELLS ========================================================= */ .m-mystatement-container .standard-st-table tbody td { color: #f8edf4 !important; padding: 11px 8px !important; text-align: center !important; border-bottom: 1px solid rgba(255, 215, 107, .12) !important; border-right: 1px solid rgba(255, 215, 107, .07) !important; } /* ========================================================= FIRST COLUMN ========================================================= */ .m-mystatement-container .standard-st-table tbody td:first-child { color: #ffd987 !important; font-weight: 600 !important; text-shadow: 0 0 4px rgba(255, 215, 107, .20); } /* ========================================================= AMOUNT COLUMN ========================================================= */ .m-mystatement-container .standard-st-table tbody td:last-child { color: #ff7fd4 !important; font-weight: 800 !important; text-shadow: 0 0 4px rgba(255, 43, 184, .40); } /* ========================================================= POSITIVE AMOUNT SUPPORT if site uses these classes ========================================================= */ .m-mystatement-container .amount-positive, .m-mystatement-container .positive, .m-mystatement-container .text-success { color: #ffd96d !important; font-weight: 800 !important; text-shadow: 0 0 5px rgba(255, 215, 107, .45); } /* ========================================================= NEGATIVE AMOUNT SUPPORT ========================================================= */ .m-mystatement-container .amount-negative, .m-mystatement-container .negative, .m-mystatement-container .text-danger { color: #ff5fbc !important; font-weight: 800 !important; text-shadow: 0 0 5px rgba(255, 43, 184, .50); } /* ========================================================= EMPTY TABLE ========================================================= */ .m-mystatement-container .standard-st-table tbody:empty::after { content: "No transaction record"; display: table-cell; width: 100%; padding: 26px 10px; color: rgba(255,255,255,.55); text-align: center; font-size: 13px; letter-spacing: .3px; border-top: 1px solid rgba(255, 215, 107, .10); } /* ========================================================= LUXURY GOLD LINE ABOVE TABLE ========================================================= */ .m-mystatement-container .m-history-betting-summary-table-container { position: relative; } .m-mystatement-container .m-history-betting-summary-table-container::before { content: ""; display: block; width: 80%; height: 1px; margin: 0 auto 8px; background: linear-gradient( 90deg, transparent, #ff2bb8, #ffd76b, #ff2bb8, transparent ); box-shadow: 0 0 5px rgba(255, 43, 184, .45); animation: statementLineGlow 2s ease-in-out infinite alternate; } @keyframes statementLineGlow { from { opacity: .45; } to { opacity: 1; box-shadow: 0 0 4px #ff2bb8, 0 0 8px rgba(255, 215, 107, .55); } } /* ========================================================= MOBILE SMOOTH SCROLL ========================================================= */ .m-mystatement-container .standard-st-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* ========================================================= SCROLLBAR ========================================================= */ .m-mystatement-container .standard-st-table-container::-webkit-scrollbar { height: 4px; } .m-mystatement-container .standard-st-table-container::-webkit-scrollbar-track { background: #14000e; } .m-mystatement-container .standard-st-table-container::-webkit-scrollbar-thumb { background: linear-gradient( 90deg, #ff2bb8, #ffd76b ); border-radius: 10px; } /* ========================================= SWEETALERT - PINK + GOLD COLOR ONLY Does NOT affect show / hide behavior ========================================= */ /* Popup background */ .swal2-popup.app-popup-popup { background: linear-gradient( 145deg, #26031c 0%, #16000f 55%, #0d0009 100% ) !important; border-color: #d8a73d !important; box-shadow: 0 0 8px rgba(255, 43, 184, .35), 0 0 18px rgba(255, 215, 107, .15) !important; } /* Error circle */ .swal2-popup.app-popup-popup .swal2-icon.swal2-error { border-color: #ffd76b !important; background-color: rgba(255, 43, 184, .08) !important; box-shadow: 0 0 7px rgba(255, 43, 184, .45), 0 0 13px rgba(255, 215, 107, .22) !important; } /* Error X */ .swal2-popup.app-popup-popup .swal2-error .swal2-x-mark-line-left, .swal2-popup.app-popup-popup .swal2-error .swal2-x-mark-line-right { background-color: #ff3ab9 !important; box-shadow: 0 0 5px rgba(255, 43, 184, .65); } /* Message */ .swal2-popup.app-popup-popup .swal2-html-container { color: #ffffff !important; } /* Popup title */ .swal2-popup.app-popup-popup .swal2-title { color: #ffe28a !important; text-shadow: 0 0 5px rgba(255, 215, 107, .35); } /* OK button */ .swal2-popup.app-popup-popup .swal2-confirm.app-popup-confirm { color: #321000 !important; border-color: #fff0a7 !important; background: linear-gradient( 135deg, #ff2caf 0%, #ff78d2 30%, #ffd66b 65%, #fff0aa 100% ) !important; box-shadow: 0 0 5px rgba(255, 43, 184, .55), 0 0 10px rgba(255, 215, 107, .28) !important; } /* OK hover - color only */ .swal2-popup.app-popup-popup .swal2-confirm.app-popup-confirm:hover { background: linear-gradient( 135deg, #ff50c3 0%, #ff91dc 30%, #ffe07a 65%, #fff5c2 100% ) !important; } /* Close icon */ .swal2-popup.app-popup-popup .swal2-close { color: #ffd76b !important; } /* Timer bar */ .swal2-popup.app-popup-popup .swal2-timer-progress-bar { background: linear-gradient( 90deg, #ff2bb8, #ffd76b, #ff2bb8 ) !important; } /* Input / textarea if popup uses them */ .swal2-popup.app-popup-popup .swal2-input, .swal2-popup.app-popup-popup .swal2-textarea, .swal2-popup.app-popup-popup .swal2-select { color: #ffffff !important; background-color: #1d0516 !important; border-color: rgba(255, 215, 107, .55) !important; } /* Validation */ .swal2-popup.app-popup-popup .swal2-validation-message { color: #ff78ca !important; background-color: #250019 !important; } /* ========================================================= MY PROFILE + DOCUMENT INFORMATION PINK + GOLD LUXURY THEME CSS ONLY - DOES NOT CHANGE DISPLAY / SHOW / HIDE ========================================================= */ .m-settings-page { --pink: #ff2bb8; --pink-light: #ff79d1; --pink-dark: #840057; --gold: #ffd76b; --gold-light: #fff0aa; --gold-dark: #a86d00; --dark: #0d0009; --dark2: #170010; --card: #210719; color: #fff !important; background: radial-gradient( circle at 50% 0%, rgba(255, 43, 184, .15), transparent 40% ), linear-gradient( 180deg, #1b0013 0%, #0c0008 100% ) !important; } /* ========================================================= TOP TABS ========================================================= */ .m-settings-page .standard-tab-container { background: #13000d !important; border-bottom: 1px solid rgba(255, 215, 107, .25) !important; } .m-settings-page .tab-header-title { color: rgba(255,255,255,.62) !important; background: linear-gradient( 180deg, #220419, #13000d ) !important; border-color: rgba(255, 215, 107, .18) !important; transition: all .25s ease; } /* ACTIVE TAB */ .m-settings-page .tab-header-title[class*="_active_"] { color: #fff1aa !important; font-weight: 800 !important; background: linear-gradient( 135deg, #75004b 0%, #d9148c 35%, #ff4fc1 55%, #c58a20 100% ) !important; border-color: #ffd86c !important; box-shadow: 0 0 5px rgba(255,43,184,.55), 0 0 12px rgba(255,43,184,.30), inset 0 0 7px rgba(255,255,255,.08) !important; text-shadow: 0 0 5px rgba(255,215,107,.45); animation: profileTabGlow 1.8s ease-in-out infinite alternate; } @keyframes profileTabGlow { from { filter: brightness(.95); } to { filter: brightness(1.15); box-shadow: 0 0 6px #ff2bb8, 0 0 14px rgba(255,43,184,.55), 0 0 19px rgba(255,215,107,.25); } } /* ========================================================= PROFILE CONTENT ========================================================= */ .m-settings-page .m-profile-container, .m-settings-page .m-docssubmission-container { background: transparent !important; } /* PROFILE COLUMNS */ .m-settings-page .profile-column { background: linear-gradient( 145deg, rgba(38, 5, 29, .98), rgba(15, 0, 11, .98) ) !important; border: 1px solid rgba(255, 215, 107, .36) !important; border-radius: 12px !important; box-shadow: 0 0 6px rgba(255,43,184,.14), inset 0 0 12px rgba(255,43,184,.03) !important; } /* ========================================================= COLUMN TITLE ========================================================= */ .m-settings-page .column-title { color: #ffe184 !important; font-weight: 800 !important; border-bottom: 1px solid rgba(255,215,107,.28) !important; text-shadow: 0 0 5px rgba(255,215,107,.35), 0 0 8px rgba(255,43,184,.20); } /* ========================================================= LABEL ========================================================= */ .m-settings-page .standard-label, .m-settings-page .kyc-label { color: #ffdD82 !important; font-weight: 600 !important; text-shadow: 0 0 4px rgba(255,215,107,.22); } /* ========================================================= PROFILE INPUTS ========================================================= */ .m-settings-page .standard-input { color: #ffffff !important; background: linear-gradient( 180deg, #27061e, #15000f ) !important; border: 1px solid rgba(255,215,107,.42) !important; border-radius: 8px !important; box-shadow: inset 0 0 8px rgba(255,43,184,.04), 0 0 4px rgba(255,43,184,.08) !important; } /* DISABLED PROFILE INPUT */ .m-settings-page .standard-input:disabled { color: rgba(255,255,255,.72) !important; -webkit-text-fill-color: rgba(255,255,255,.72) !important; background: linear-gradient( 180deg, #1e0617, #12000d ) !important; border-color: rgba(255,215,107,.28) !important; } /* INPUT FOCUS */ .m-settings-page .standard-input:focus { outline: none !important; border-color: #ffdc72 !important; box-shadow: 0 0 5px rgba(255,43,184,.55), 0 0 11px rgba(255,215,107,.18) !important; } /* ========================================================= EDIT BUTTON Existing JS still decides when it displays ========================================================= */ .m-settings-page .edit-btn { color: #ffd86e !important; background: linear-gradient( 145deg, #520034, #270018 ) !important; border: 1px solid rgba(255,215,107,.55) !important; border-radius: 7px !important; box-shadow: 0 0 5px rgba(255,43,184,.30) !important; } .m-settings-page .edit-btn svg path { fill: #ffd86e !important; } /* MORE INFO BUTTON */ .m-settings-page .more-info-btn svg path { fill: #ff4fc1 !important; filter: drop-shadow(0 0 3px rgba(255,43,184,.50)); } /* ========================================================= DOCUMENT / KYC CARD ========================================================= */ .m-settings-page .kyc-form-field { background: linear-gradient( 145deg, #230419, #13000d ) !important; border: 1px solid rgba(255,215,107,.35) !important; border-radius: 11px !important; box-shadow: inset 0 0 10px rgba(255,43,184,.03), 0 3px 10px rgba(0,0,0,.22) !important; } /* KYC HEADER */ .m-settings-page .kyc-header { border-bottom: 1px solid rgba(255,215,107,.20) !important; } .m-settings-page .kyc-header .kyc-label { color: #ffe188 !important; font-weight: 800 !important; text-shadow: 0 0 5px rgba(255,215,107,.30); } /* ========================================================= KYC INPUT AREA ========================================================= */ .m-settings-page .kyc-input-field { background: linear-gradient( 180deg, #1d0316, #11000c ) !important; border: 1px solid rgba(255,215,107,.30) !important; border-radius: 8px !important; } /* ========================================================= UPLOAD BUTTON ========================================================= */ .m-settings-page .kyc-choose-file { color: #351100 !important; font-weight: 800 !important; border: 1px solid #ffe48a !important; border-radius: 8px !important; background: linear-gradient( 135deg, #ff28af 0%, #ff6dcc 30%, #ffd568 65%, #fff0aa 100% ) !important; box-shadow: 0 0 5px rgba(255,43,184,.45), 0 0 10px rgba(255,215,107,.20) !important; transition: .25s ease; } .m-settings-page .kyc-choose-file:hover { border-color: #fff1a9 !important; box-shadow: 0 0 6px #ff2bb8, 0 0 12px rgba(255,43,184,.55), 0 0 17px rgba(255,215,107,.28) !important; } /* UPLOAD ICON */ .m-settings-page .kyc-choose-file .beta-upload path { fill: #451600 !important; } /* ========================================================= FILE TEXT ========================================================= */ .m-settings-page .kyc-file-content { color: rgba(255,255,255,.72) !important; } /* ========================================================= PREVIEW BUTTON Existing display behavior remains unchanged ========================================================= */ .m-settings-page .kyc-choosefile-preview { color: #ffe38b !important; font-weight: 700 !important; background: linear-gradient( 180deg, #43002c, #250018 ) !important; border: 1px solid rgba(255,215,107,.55) !important; border-radius: 7px !important; box-shadow: 0 0 5px rgba(255,43,184,.30) !important; } /* ========================================================= TOOLTIP ICON ========================================================= */ .m-settings-page .iconToolTip svg circle { fill: #ff3ab9 !important; } .m-settings-page .iconToolTip svg path { fill: #fff3bd !important; } /* ========================================================= DELETE BUTTON ========================================================= */ .m-settings-page .kyc-delete-btn { filter: drop-shadow(0 0 4px rgba(255,43,184,.55)); } /* ========================================================= ERROR TEXT ========================================================= */ .m-settings-page .text-danger { color: #ff75cb !important; text-shadow: 0 0 4px rgba(255,43,184,.35); } /* ========================================================= SUBMIT BUTTON ========================================================= */ .m-settings-page .standard-submit-form-button { position: relative; overflow: hidden; color: #381200 !important; font-weight: 900 !important; border: 1px solid #fff0a5 !important; border-radius: 10px !important; background: linear-gradient( 120deg, #ff159f 0%, #ff62cb 22%, #ffd364 47%, #fff0a9 58%, #ffd05c 69%, #ff2caf 100% ) !important; background-size: 250% 250% !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.65), 0 0 5px #ff32b6, 0 0 12px rgba(255,50,182,.62), 0 0 20px rgba(255,215,107,.30) !important; animation: profileSubmitMove 3s linear infinite, profileSubmitGlow 1.5s ease-in-out infinite alternate; } @keyframes profileSubmitMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes profileSubmitGlow { from { filter: brightness(.96); } to { filter: brightness(1.17); box-shadow: 0 0 6px #ff31b5, 0 0 13px rgba(255,49,181,.75), 0 0 22px rgba(255,215,107,.40) !important; } } /* ========================================================= DISABLED SUBMIT ========================================================= */ .m-settings-page .standard-submit-form-button:disabled { color: rgba(255,255,255,.48) !important; background: linear-gradient( 180deg, #472038, #28131f ) !important; border-color: rgba(255,215,107,.22) !important; box-shadow: 0 0 4px rgba(255,43,184,.10) !important; animation: none !important; } /* ========================================================= MY ACCOUNT / WALLET PAGE PINK + GOLD LUXURY THEME CSS ONLY DOES NOT CHANGE DISPLAY / SHOW / HIDE LOGIC ========================================================= */ .mainBox { --pink: #ff2bb8; --pink-light: #ff7bd3; --pink-dark: #8a005a; --gold: #ffd76b; --gold-light: #fff0ad; --gold-dark: #a86d00; --dark: #0d0009; --dark2: #170010; --card: #210719; color: #fff !important; background: radial-gradient( circle at 50% 0%, rgba(255, 43, 184, .15), transparent 38% ), linear-gradient( 180deg, #1b0013 0%, #0b0008 100% ) !important; } /* ========================================================= ACCOUNT TOP AREA ========================================================= */ .mainBox .deposit-progress-bar-container { background: linear-gradient( 145deg, #26051d, #12000d ) !important; border: 1px solid rgba(255, 215, 107, .38) !important; box-shadow: 0 0 7px rgba(255,43,184,.18), inset 0 0 12px rgba(255,43,184,.03) !important; } /* ========================================================= PROFILE ICON ========================================================= */ .mainBox .account-icon { border-radius: 50%; background: radial-gradient( circle, rgba(255,215,107,.18), rgba(255,43,184,.12), transparent 75% ) !important; box-shadow: 0 0 6px rgba(255,43,184,.42), 0 0 12px rgba(255,215,107,.18); } .mainBox .account-icon svg path { fill: #ffd86c !important; } /* ACCOUNT NAME */ .mainBox .account-name { color: #fff1ad !important; font-weight: 800 !important; text-shadow: 0 0 5px rgba(255,215,107,.35), 0 0 9px rgba(255,43,184,.28); } /* ========================================================= VIP / ACCOUNT GRADE ========================================================= */ .mainBox .account-grade-container { color: #fff !important; } .mainBox .account-group-container { background: linear-gradient( 135deg, #3b062d, #180010 ) !important; border: 1px solid rgba(255,215,107,.35) !important; border-radius: 10px !important; box-shadow: 0 0 5px rgba(255,43,184,.15); } .mainBox .group-level { color: #ffd96f !important; font-weight: 800 !important; text-shadow: 0 0 5px rgba(255,215,107,.35); } .mainBox .group-img { filter: drop-shadow(0 0 4px rgba(255,43,184,.35)) drop-shadow(0 0 6px rgba(255,215,107,.25)); } /* ========================================================= WALLET SECTION ========================================================= */ .mainBox .mobile-wallet-section { background: transparent !important; } .mainBox .wallet-info { overflow: hidden; border-radius: 15px !important; border: 1px solid rgba(255,215,107,.50) !important; background: linear-gradient( 145deg, #2e0623 0%, #190010 55%, #0d0009 100% ) !important; box-shadow: 0 0 8px rgba(255,43,184,.28), 0 0 18px rgba(255,215,107,.10), inset 0 0 12px rgba(255,43,184,.05) !important; } /* ========================================================= WALLET TOP CONTENT ========================================================= */ .mainBox .wallet-info .top-content { background: radial-gradient( circle at 10% 0%, rgba(255,43,184,.20), transparent 45% ), linear-gradient( 135deg, #3d062d, #1a0012 ) !important; border-bottom: 1px solid rgba(255,215,107,.25) !important; } /* BALANCE TITLE */ .mainBox .wallet-header .title { color: #ffe187 !important; font-weight: 700 !important; text-shadow: 0 0 5px rgba(255,215,107,.25); } /* CURRENCY */ .mainBox .currency-label { color: #ff85d6 !important; font-weight: 700 !important; text-shadow: 0 0 4px rgba(255,43,184,.40); } /* MEMBER BALANCE */ .mainBox .member-balance { color: #fff1ae !important; font-weight: 900 !important; text-shadow: 0 0 5px rgba(255,215,107,.65), 0 0 10px rgba(255,43,184,.35); animation: walletBalanceGlow 1.8s ease-in-out infinite alternate; } @keyframes walletBalanceGlow { from { filter: brightness(1); } to { filter: brightness(1.18); text-shadow: 0 0 5px #fff, 0 0 10px rgba(255,215,107,.75), 0 0 16px rgba(255,43,184,.45); } } /* ========================================================= REFRESH ICON ========================================================= */ .mainBox .mobile-beta-refresh path { fill: #ffd86e !important; filter: drop-shadow(0 0 3px rgba(255,215,107,.55)) drop-shadow(0 0 5px rgba(255,43,184,.35)); } /* Override original blue SVG gradients */ .mainBox #mobile-beta-refresh-SVGID_1_ stop:first-child, .mainBox #mobile-beta-refresh-SVGID_2_ stop:first-child { stop-color: #ff2bb8 !important; } .mainBox #mobile-beta-refresh-SVGID_1_ stop:last-child, .mainBox #mobile-beta-refresh-SVGID_2_ stop:last-child { stop-color: #ffd76b !important; } /* ========================================================= RETRIEVE / TRANSFER ========================================================= */ .mainBox .member-action { background: transparent !important; } .mainBox .member-action .action-box { background: linear-gradient( 145deg, #300421, #18000f ) !important; border: 1px solid rgba(255,215,107,.34) !important; border-radius: 10px !important; box-shadow: 0 0 4px rgba(255,43,184,.12); transition: .25s ease; } .mainBox .member-action .action-box:hover { border-color: #ffd76b !important; background: linear-gradient( 145deg, #500037, #280019 ) !important; box-shadow: 0 0 6px rgba(255,43,184,.45), 0 0 10px rgba(255,215,107,.18); } .mainBox .member-action .action-label { color: #ffe696 !important; font-weight: 700 !important; } /* Action icons */ .mainBox .member-action .i, .mainBox .member-action .i i { filter: drop-shadow(0 0 3px rgba(255,43,184,.45)) drop-shadow(0 0 5px rgba(255,215,107,.25)); } /* ========================================================= WALLET BOTTOM NAV Withdrawal / Statement / History / Wallet ========================================================= */ .mainBox .bottom-content { background: linear-gradient( 180deg, #190010, #0e0009 ) !important; border-top: 1px solid rgba(255,215,107,.22) !important; } .mainBox .idr_content_bottom { background: transparent !important; } .mainBox .idr_content_bottom li { border-right: 1px solid rgba(255,215,107,.10) !important; } .mainBox .idr_content_bottom li a { color: rgba(255,255,255,.72) !important; background: linear-gradient( 180deg, rgba(255,43,184,.05), transparent ) !important; transition: .25s ease; } .mainBox .idr_content_bottom li a:hover { color: #ffe28b !important; background: linear-gradient( 180deg, rgba(255,43,184,.20), rgba(255,215,107,.06) ) !important; } .mainBox .idr_content_bottom li span { color: inherit !important; font-weight: 600 !important; } /* ========================================================= BOTTOM NAV ICONS ========================================================= */ .mainBox .idr_content_bottom .i { filter: drop-shadow(0 0 3px rgba(255,43,184,.32)); } /* ========================================================= MORE APPLICATIONS ========================================================= */ .mainBox .show-more { color: #ffe18a !important; background: linear-gradient( 90deg, #210017, #430030, #210017 ) !important; border: 1px solid rgba(255,215,107,.28) !important; box-shadow: 0 0 5px rgba(255,43,184,.14); } .mainBox .show-more p { color: #ffe18a !important; font-weight: 700 !important; } .mainBox .show-more svg path { fill: #ffd86d !important; } /* ========================================================= ACCOUNT MENU SECTION ========================================================= */ .mainBox .account-menu-section { background: linear-gradient( 145deg, #1d0215, #0e0009 ) !important; border-top: 1px solid rgba(255,215,107,.22) !important; } /* MENU ITEM */ .mainBox .shortcut-menu { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .mainBox .shortcut-menu:hover { background: linear-gradient( 145deg, rgba(255,43,184,.15), rgba(255,215,107,.05) ) !important; } /* ========================================================= MENU ICON WRAPPER ========================================================= */ .mainBox .shortcut-menu .menu-img-wrapper { border-radius: 12px; background: linear-gradient( 145deg, #42002d, #210016 ) !important; border: 1px solid rgba(255,215,107,.38) !important; box-shadow: inset 0 0 8px rgba(255,43,184,.05), 0 0 5px rgba(255,43,184,.15); } .mainBox .shortcut-menu:hover .menu-img-wrapper { border-color: #ffdb72 !important; box-shadow: 0 0 6px rgba(255,43,184,.55), 0 0 12px rgba(255,215,107,.20); } /* Menu icon */ .mainBox .shortcut-menu .i { filter: drop-shadow(0 0 3px rgba(255,43,184,.45)) drop-shadow(0 0 4px rgba(255,215,107,.20)); } /* ========================================================= MENU TEXT ========================================================= */ .mainBox .shortcut-label { color: #300421 !important; font-weight: 600 !important; } .mainBox .shortcut-menu:hover .shortcut-label { color: #ffe38b !important; text-shadow: 0 0 5px rgba(255,215,107,.30); } /* ========================================================= PROFILE MENU SPECIAL ========================================================= */ .mainBox .menu-myaccountprofile .menu-img-wrapper { background: linear-gradient( 145deg, #750049, #30001f ) !important; } /* ========================================================= REFERRAL ========================================================= */ .mainBox .menu-myaccountreferral .menu-img-wrapper { background: linear-gradient( 145deg, #8b0058, #3b0027 ) !important; } /* ========================================================= CHANGE PASSWORD ========================================================= */ .mainBox .menu-myaccountchangepassword .menu-img-wrapper { background: linear-gradient( 145deg, #5f003e, #260019 ) !important; } /* ========================================================= VOUCHER ========================================================= */ .mainBox .menu-myvoucher .menu-img-wrapper { background: linear-gradient( 145deg, #71004a, #2c001d ) !important; } /* ========================================================= LANGUAGE ========================================================= */ .mainBox .menu-language .menu-img-wrapper { background: linear-gradient( 145deg, #71004a, #2c001d ) !important; } /* ========================================================= LOGOUT ========================================================= */ .mainBox .menu-logout .menu-img-wrapper { background: linear-gradient( 145deg, #98005e, #45002d ) !important; border-color: rgba(255,215,107,.48) !important; } .mainBox .menu-logout .shortcut-label { color: #ff8cd9 !important; } /* ========================================================= UNREAD BADGE Existing display logic remains unchanged ========================================================= */ .mainBox .unread-msg { color: #351100 !important; font-weight: 800 !important; background: linear-gradient( 135deg, #ff36b8, #ffd76b ) !important; border: 1px solid #fff0a5 !important; box-shadow: 0 0 5px rgba(255,43,184,.55); } .form-page-bg-color{ background: linear-gradient(145deg, #1d0215, #0e0009) !important; } .account-menu-section .icon-myprofile{ background: url("./img1823_usukakiss/acc_user.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; filter: brightness(0) invert(1)!important; } .account-menu-section .icon-referral-program{ background: url("./img1823_usukakiss/acc_referral.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; filter: brightness(0) invert(1)!important; } .account-menu-section .icon-changepassword{ background: url("./img1823_usukakiss/acc_changepassword.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; filter: brightness(0) invert(1)!important; } .account-menu-section .icon-logout{ background: url("./img1823_usukakiss/acc_logout.png?=v4")!important; background-size: 100%!important; width: 1.2rem!important; height: 1.2rem!important; background-repeat: no-repeat!important; filter: brightness(0) invert(1)!important; } .account-menu-section .icon-changepassword{ background: url("./img1823_usukakiss/acc_changepassword.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; filter: brightness(0) invert(1)!important; } [data-page="myaccount"] .icon-language{ background-image: url(./img1823_usukakiss/acc_language.png?v=1) !important; background-size: 100%!important; width: 1.2rem !important; height: 1.2rem !important; filter: brightness(0) invert(1)!important; } [data-page="myaccount"] .icon-voucher{ background-image: url(./img1823_usukakiss/voucher_user.png?v=2) !important; background-size: 100%!important; width: 1.2rem !important; height: 1.2rem !important; filter: brightness(0) invert(1)!important; } .m-myreferral-container .ref-status-box .ref-status{ background: #26061d!important; } /* ========================================================= REFERRAL / SHARE QR PINK + GOLD LUXURY THEME CSS ONLY DOES NOT CHANGE DISPLAY / SHOW / HIDE ========================================================= */ .shareqr-container { --pink: #ff2bb8; --pink-light: #ff7bd3; --pink-dark: #860057; --gold: #ffd76b; --gold-light: #fff0ad; --gold-dark: #a86d00; color: #fff !important; padding: 14px !important; border-radius: 16px !important; background: radial-gradient( circle at 50% 0%, rgba(255, 43, 184, .18), transparent 45% ), linear-gradient( 145deg, #28041e 0%, #16000f 58%, #0c0008 100% ) !important; border: 1px solid rgba(255, 215, 107, .52) !important; box-shadow: 0 0 7px rgba(255, 43, 184, .25), 0 0 16px rgba(255, 215, 107, .10), inset 0 0 14px rgba(255, 43, 184, .04) !important; } /* ========================================================= DETAIL CONTAINER ========================================================= */ .shareqr-container .referral-detail-container { color: #fff !important; background: transparent !important; } /* ========================================================= TITLE ========================================================= */ .shareqr-container .referral-detail-title { color: #ffe38a !important; font-weight: 900 !important; text-align: center; letter-spacing: .4px; text-shadow: 0 0 4px rgba(255, 215, 107, .55), 0 0 9px rgba(255, 43, 184, .45); animation: referralTitleGlow 1.8s ease-in-out infinite alternate; } @keyframes referralTitleGlow { from { filter: brightness(1); } to { filter: brightness(1.2); text-shadow: 0 0 5px #fff, 0 0 10px #ff2bb8, 0 0 17px rgba(255, 43, 184, .70), 0 0 22px rgba(255, 215, 107, .40); } } /* ========================================================= DESCRIPTION ========================================================= */ .shareqr-container .referral-detail-container > p:not(.referral-detail-title) { color: rgba(255,255,255,.72) !important; text-align: center; line-height: 1.5; margin-top: 6px; } /* ========================================================= REFERRAL CODE CONTAINER ========================================================= */ .shareqr-container .referral-copy-detail-container { margin-top: 15px; padding: 1px; border-radius: 11px; background: linear-gradient( 90deg, #ff2bb8, #ffd76b, #ff7bd3, #ffd76b, #ff2bb8 ) !important; background-size: 250% 100% !important; box-shadow: 0 0 6px rgba(255,43,184,.35), 0 0 11px rgba(255,215,107,.15); animation: referralBorderMove 3s linear infinite; } @keyframes referralBorderMove { from { background-position: 200% center; } to { background-position: 0% center; } } /* ========================================================= REFERRAL CODE BAR ========================================================= */ .shareqr-container .referral-copy-detail { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px !important; border-radius: 10px !important; background: linear-gradient( 145deg, #310522, #15000f ) !important; } /* ========================================================= REFERRAL CODE ========================================================= */ .shareqr-container .referral-copy-detail-title { color: #fff0a9 !important; font-weight: 900 !important; letter-spacing: 2px; font-size: 17px !important; text-shadow: 0 0 4px rgba(255, 215, 107, .65), 0 0 8px rgba(255, 43, 184, .35); } .shareqr-container .referral-copy-detail-title span { color: inherit !important; } /* ========================================================= ARROW ========================================================= */ .shareqr-container .arrow svg path { fill: #ffd86c !important; filter: drop-shadow(0 0 3px rgba(255, 215, 107, .55)) drop-shadow(0 0 5px rgba(255, 43, 184, .35)); } .shareqr-container .arrow { transition: transform .25s ease; } .shareqr-container .referral-copy-detail:hover .arrow { transform: translateX(3px); } /* ========================================================= QR CODE AREA ========================================================= */ .shareqr-container > a { border-radius: 14px; background: linear-gradient( 135deg, #ff2bb8, #ffd76b, #ff7bd3, #ffd76b ); padding: 2px; box-shadow: 0 0 7px rgba(255, 43, 184, .38), 0 0 16px rgba(255, 215, 107, .18); } /* QR IMAGE */ .shareqr-container > a > img { border-radius: 12px !important; background: #fff !important; padding: 8px !important; box-sizing: border-box; box-shadow: 0 0 7px rgba(255,43,184,.20), 0 0 14px rgba(255,215,107,.14) !important; } /* ========================================================= QR GLOW ========================================================= */ .shareqr-container > a:hover > img { box-shadow: 0 0 8px #ff2bb8, 0 0 16px rgba(255, 43, 184, .55), 0 0 22px rgba(255, 215, 107, .25) !important; } /* ========================================================= SMALL GOLD SEPARATOR ========================================================= */ .shareqr-container .referral-detail-container::after { content: ""; display: block; width: 75%; height: 1px; margin: 14px auto 0; background: linear-gradient( 90deg, transparent, #ff2bb8, #ffd76b, #ff2bb8, transparent ); opacity: .6; } /* ========================================================= DATATABLE PAGINATION PINK + GOLD LUXURY THEME CSS ONLY DOES NOT CHANGE PAGINATION / DISABLED LOGIC ========================================================= */ .dt-paging { padding: 10px 0 !important; text-align: center; } /* PAGINATION WRAPPER */ .dt-paging nav { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: linear-gradient( 145deg, #230419, #10000b ) !important; border: 1px solid rgba(255, 215, 107, .28) !important; box-shadow: 0 0 6px rgba(255, 43, 184, .14); } /* ========================================================= PAGINATION BUTTON ========================================================= */ .dt-paging .dt-paging-button { min-width: 34px; height: 34px; padding: 0 10px !important; color: #ffe38b !important; font-size: 18px !important; font-weight: 800 !important; border: 1px solid rgba(255, 215, 107, .48) !important; border-radius: 8px !important; background: linear-gradient( 145deg, #390027, #190010 ) !important; box-shadow: inset 0 0 6px rgba(255, 43, 184, .05), 0 0 4px rgba(255, 43, 184, .12) !important; text-shadow: 0 0 4px rgba(255, 215, 107, .3); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; } /* HOVER */ .dt-paging .dt-paging-button:not(.disabled):hover { color: #351100 !important; border-color: #fff0aa !important; background: linear-gradient( 135deg, #ff2bb8 0%, #ff77d1 32%, #ffd76b 68%, #fff0ad 100% ) !important; box-shadow: 0 0 5px rgba(255, 43, 184, .55), 0 0 10px rgba(255, 215, 107, .28) !important; } /* ========================================================= CURRENT PAGE if DataTables generates current page number ========================================================= */ .dt-paging .dt-paging-button.current { color: #351100 !important; font-weight: 900 !important; border-color: #fff0a7 !important; background: linear-gradient( 135deg, #ff27ae, #ff78d1, #ffd568, #fff0a8 ) !important; box-shadow: 0 0 5px #ff2bb8, 0 0 11px rgba(255, 43, 184, .55), 0 0 16px rgba(255, 215, 107, .25) !important; } /* ========================================================= DISABLED BUTTON ========================================================= */ .dt-paging .dt-paging-button.disabled, .dt-paging .dt-paging-button[aria-disabled="true"] { color: rgba(255,255,255,.28) !important; border-color: rgba(255, 215, 107, .14) !important; background: linear-gradient( 145deg, #1b0715, #10000b ) !important; box-shadow: none !important; text-shadow: none !important; cursor: default !important; } /* Prevent hover color changing disabled button */ .dt-paging .dt-paging-button.disabled:hover, .dt-paging .dt-paging-button[aria-disabled="true"]:hover { color: rgba(255,255,255,.28) !important; border-color: rgba(255, 215, 107, .14) !important; background: linear-gradient( 145deg, #1b0715, #10000b ) !important; box-shadow: none !important; } /* ========================================================= FIRST / LAST BUTTON ========================================================= */ .dt-paging .dt-paging-button.first, .dt-paging .dt-paging-button.last { color: #ffd96f !important; } /* Keep disabled first/last muted */ .dt-paging .dt-paging-button.first.disabled, .dt-paging .dt-paging-button.last.disabled { color: rgba(255,255,255,.28) !important; } /* ========================================================= AFFILIATE REPORT BUTTON PINK + GOLD LUXURY THEME CSS ONLY ========================================================= */ .aff-btn { position: relative; overflow: hidden; color: #351100 !important; font-weight: 800 !important; border: 1px solid #fff0a8 !important; border-radius: 9px !important; background: linear-gradient( 120deg, #ff159f 0%, #ff61ca 25%, #ffd466 52%, #fff0aa 67%, #ff2caf 100% ) !important; background-size: 250% 250% !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.65), 0 0 5px rgba(255,43,184,.55), 0 0 12px rgba(255,43,184,.32), 0 0 18px rgba(255,215,107,.22) !important; text-shadow: 0 1px 0 rgba(255,255,255,.4); transition: filter .25s ease, box-shadow .25s ease, transform .25s ease; animation: affBtnGradient 3s linear infinite, affBtnGlow 1.6s ease-in-out infinite alternate; } /* ICON */ .aff-btn .fa { color: #5b1d00 !important; margin-right: 5px; text-shadow: 0 0 3px rgba(255,255,255,.35); } /* TEXT */ .aff-btn .text-title { color: inherit !important; font-weight: 800 !important; } /* HOVER */ .aff-btn:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 0 6px #ff2bb8, 0 0 14px rgba(255,43,184,.65), 0 0 22px rgba(255,215,107,.35) !important; } /* MOVING SHINE */ .aff-btn::before { content: ""; position: absolute; top: -70%; left: -70%; width: 35%; height: 250%; transform: rotate(25deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.9), transparent ); animation: affBtnShine 2.6s ease-in-out infinite; } /* GRADIENT FLOW */ @keyframes affBtnGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* GLOW */ @keyframes affBtnGlow { from { box-shadow: 0 0 4px rgba(255,43,184,.45), 0 0 8px rgba(255,215,107,.15); } to { box-shadow: 0 0 6px #ff2bb8, 0 0 13px rgba(255,43,184,.7), 0 0 20px rgba(255,215,107,.35); } } /* SHINE MOVEMENT */ @keyframes affBtnShine { 0%, 55% { left: -70%; } 100% { left: 145%; } } div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active { cursor: default; color: rgba(255, 255, 255, 1) !important; } /* ========================================= LOGIN PAGE - BLACK PINK SILK BACKGROUND ========================================= */ #loginPage.theme2{ position:relative; overflow:hidden; min-height:100vh; background: linear-gradient( 180deg, #16000f 0%, #0d0009 45%, #070004 100% ) !important; isolation:isolate; } /* KEEP LOGIN CONTENT ABOVE SILK EFFECT */ #loginPage.theme2 > *{ position:relative; z-index:2; } /* ========================================= FIRST PINK SILK LIGHT ========================================= */ #loginPage.theme2::before{ content:""; position:absolute; z-index:0; width:170%; height:320px; left:-35%; top:8%; border-radius:50%; background: linear-gradient( 90deg, transparent 0%, rgba(255,25,150,.02) 12%, rgba(255,44,163,.16) 30%, rgba(255,92,188,.34) 48%, rgba(255,156,218,.28) 58%, rgba(190,15,115,.13) 72%, transparent 100% ); filter:blur(38px); opacity:.85; pointer-events:none; animation: loginSilkOne 8s ease-in-out infinite alternate; } /* ========================================= SECOND DARK MAGENTA SILK ========================================= */ #loginPage.theme2::after{ content:""; position:absolute; z-index:0; width:180%; height:360px; left:-40%; bottom:3%; border-radius:50%; background: linear-gradient( 90deg, transparent 0%, rgba(100,0,61,.03) 12%, rgba(160,5,96,.13) 30%, rgba(230,23,137,.25) 48%, rgba(255,67,174,.30) 60%, rgba(126,0,76,.10) 78%, transparent 100% ); filter:blur(48px); opacity:.75; pointer-events:none; animation: loginSilkTwo 11s ease-in-out infinite alternate; } /* ========================================= SILK ANIMATION ========================================= */ @keyframes loginSilkOne{ 0%{ transform: translateX(-14%) translateY(0) rotate(-8deg) scaleY(.85); } 50%{ transform: translateX(2%) translateY(35px) rotate(-2deg) scaleY(1.20); } 100%{ transform: translateX(15%) translateY(-12px) rotate(-7deg) scaleY(.95); } } @keyframes loginSilkTwo{ 0%{ transform: translateX(12%) translateY(5px) rotate(8deg) scaleY(1); } 50%{ transform: translateX(-3%) translateY(-35px) rotate(3deg) scaleY(1.18); } 100%{ transform: translateX(-15%) translateY(10px) rotate(9deg) scaleY(.90); } } /* ========================================= LEFT SIDE MENU - PINK LUXURY FRAME ========================================= */ #leftmenu.sidemenu{ background: radial-gradient( circle at 15% 8%, rgba(255,55,170,.18), transparent 30% ), linear-gradient( 180deg, #3b001f 0%, #2c0018 28%, #1b000f 62%, #0b0006 100% ) !important; border-left:1px solid rgba(255,78,180,.28) !important; border-right:1px solid rgba(255,78,180,.75) !important; box-shadow: 5px 0 20px rgba(255,29,143,.22), inset -2px 0 10px rgba(255,55,170,.12) !important; overflow:hidden !important; } /* INNER */ #leftmenu .ui-panel-inner{ position:relative; min-height:100vh; padding:0 !important; background:transparent !important; } /* ========================================= RIGHT NEON EDGE ========================================= */ #leftmenu .ui-panel-inner::after{ content:""; position:absolute; top:0; right:0; width:2px; height:100%; background: linear-gradient( 180deg, transparent 0%, #ff79cf 10%, #ff2ca3 50%, #ff79cf 90%, transparent 100% ); box-shadow: 0 0 6px #ff2ca3, 0 0 15px rgba(255,44,163,.8); pointer-events:none; z-index:20; } /* ========================================= TOP LEFT SOFT GLOW ========================================= */ #leftmenu .ui-panel-inner::before{ content:""; position:absolute; width:180px; height:180px; top:-80px; left:-80px; background: radial-gradient( circle, rgba(255,45,160,.23), transparent 68% ); pointer-events:none; z-index:0; } /* ========================================= LOGO AREA ========================================= */ #leftmenu .sidemenu-logo{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:10px 12px; background: linear-gradient( 180deg, rgba(72,0,39,.92), rgba(35,0,20,.88) ) !important; border-bottom: 1px solid rgba(255,74,177,.35); box-shadow: inset 0 -1px 0 rgba(80,0,45,.4), 0 4px 14px rgba(0,0,0,.25); } /* LOGO IMAGE */ #leftmenu .sidemenu-home-logo img{ filter: drop-shadow(0 0 5px rgba(255,52,167,.28)); } /* BACK BUTTON */ #leftmenu .sidemenu-back-logo{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background: rgba(255,44,163,.08); border: 1px solid rgba(255,90,190,.25); box-shadow: inset 0 0 8px rgba(255,44,163,.08), 0 0 8px rgba(255,44,163,.12); } /* ========================================= MENU LIST ========================================= */ #leftmenu ul{ position:relative; z-index:2; margin:0 !important; padding:0 !important; list-style:none !important; background:transparent !important; } /* EACH MENU SLOT */ #leftmenu ul li{ position:relative; margin:0 !important; padding:0 !important; background: linear-gradient( 180deg, rgba(58,0,31,.18), rgba(15,0,9,.18) ) !important; border-bottom: 1px solid rgba(255,74,177,.30) !important; box-shadow: inset 0 -1px 0 rgba(80,0,45,.25); transition: background .25s ease, box-shadow .25s ease; } /* LINK */ #leftmenu ul li > a{ display:block; padding:15px 12px !important; color:#fff !important; text-decoration:none !important; background:transparent !important; border:0 !important; text-shadow:none !important; } /* ICON + TEXT */ #leftmenu ul li .i{ display:flex; align-items:center; gap:10px; } /* ICON */ #leftmenu ul li .icon{ position:relative; z-index:2; filter: drop-shadow(0 0 4px rgba(255,54,169,.28)); transition: transform .25s ease, filter .25s ease; } /* TITLE */ #leftmenu ul li .title{ color:#f8eaf3 !important; font-size:13px; font-weight:600; text-shadow: 0 0 4px rgba(255,45,160,.20); transition: color .25s ease, text-shadow .25s ease; } /* ========================================= SMALL DIAMOND DIVIDER ========================================= */ #leftmenu ul li:not(:last-child)::after{ content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; transform: translateX(-50%) rotate(45deg); background:#ff46af; border:1px solid #ffd06c; box-shadow: 0 0 5px #ff279d, 0 0 10px rgba(255,39,157,.75); z-index:8; } /* ========================================= HOVER / ACTIVE ========================================= */ #leftmenu ul li:hover, #leftmenu ul li:active{ background: linear-gradient( 90deg, rgba(255,36,156,.08), rgba(255,62,174,.18), rgba(255,36,156,.06) ) !important; box-shadow: inset 3px 0 10px rgba(255,42,163,.16), inset 0 0 18px rgba(255,42,163,.05); } #leftmenu ul li:hover .title, #leftmenu ul li:active .title{ color:#ff93d3 !important; text-shadow: 0 0 6px rgba(255,44,163,.65), 0 0 12px rgba(255,44,163,.30); } #leftmenu ul li:hover .icon, #leftmenu ul li:active .icon{ transform:scale(1.06); filter: drop-shadow(0 0 6px rgba(255,44,163,.65)); } /* ========================================= SELECTED / ACTIVE MENU ITEM ========================================= */ #leftmenu ul li.on, #leftmenu ul li.active, #leftmenu ul li.ui-btn-active{ background: linear-gradient( 90deg, rgba(255,31,151,.14), rgba(255,49,166,.28), rgba(114,0,65,.12) ) !important; box-shadow: inset 3px 0 0 #ff3cab, inset 0 0 16px rgba(255,44,163,.13), 0 0 10px rgba(255,44,163,.10); } #leftmenu ul li.on .title, #leftmenu ul li.active .title, #leftmenu ul li.ui-btn-active .title{ color:#ff85ce !important; text-shadow: 0 0 6px rgba(255,44,163,.75), 0 0 14px rgba(255,44,163,.35); } /* ========================================= REMOVE DEFAULT JQUERY MOBILE STYLING ========================================= */ #leftmenu .ui-btn, #leftmenu a.ui-btn{ background:none !important; border:0 !important; box-shadow:none !important; text-shadow:none !important; } /* ========================================= TOP + BOTTOM LIGHT LINE ========================================= */ #leftmenu::before, #leftmenu::after{ content:""; position:absolute; left:0; width:100%; height:1px; background: linear-gradient( 90deg, transparent, #ff4cb5, transparent ); box-shadow: 0 0 8px rgba(255,42,163,.8); pointer-events:none; z-index:30; } #leftmenu::before{ top:0; } #leftmenu::after{ bottom:0; } /* ========================================= PROMO 6647 - PINK NEON LUXURY FRAME ========================================= */ .promotions_item{ position:relative; overflow:hidden; border-radius:16px !important; background: linear-gradient( 180deg, #33001f 0%, #1b0011 55%, #0d0008 100% ) !important; border:1px solid #ff4fb3 !important; box-shadow: 0 0 5px #ff4fb3, 0 0 14px rgba(255,44,163,.55), 0 0 28px rgba(255,44,163,.22), inset 0 0 18px rgba(255,44,163,.12) !important; animation: promoFrameGlow 2.8s ease-in-out infinite; } /* INNER FINE FRAME */ .promotions_item::before{ content:""; position:absolute; inset:5px; border-radius:11px; border: 1px solid rgba(255,188,227,.65); box-shadow: inset 0 0 10px rgba(255,80,180,.20); pointer-events:none; z-index:5; } /* BOTTOM GLOW LINE */ .promotions_item::after{ content:""; position:absolute; left:8%; right:8%; bottom:8px; height:1px; background: linear-gradient( 90deg, transparent, #ff47ad, #ffd2ec, #ff47ad, transparent ); box-shadow: 0 0 8px #ff47ad; pointer-events:none; z-index:6; } /* IMAGE */ .promotions_item .img{ position:relative; z-index:1; overflow:hidden; border-radius: 14px 14px 0 0; } .promotions_item .img img{ display:block; width:100%; border-radius: 14px 14px 0 0; } /* BOTTOM CONTENT */ .promotions_item .promotitembottom{ position:relative; z-index:2; padding:12px 12px 18px; background: linear-gradient( 180deg, rgba(54,0,32,.96) 0%, rgba(27,0,17,.98) 55%, rgba(13,0,8,1) 100% ) !important; } /* TITLE */ .promotions_item .p1{ color:#ff7ac8 !important; font-weight:700; text-shadow: 0 0 5px rgba(255,44,163,.55), 0 0 12px rgba(255,44,163,.22); } /* DESCRIPTION */ .promotions_item .p2{ color:rgba(255,255,255,.78) !important; } /* BREATHING FRAME GLOW */ @keyframes promoFrameGlow{ 0%, 100%{ box-shadow: 0 0 5px #ff4fb3, 0 0 13px rgba(255,44,163,.50), 0 0 24px rgba(255,44,163,.18), inset 0 0 16px rgba(255,44,163,.12); } 50%{ box-shadow: 0 0 7px #ff86cf, 0 0 20px rgba(255,44,163,.78), 0 0 36px rgba(255,44,163,.30), inset 0 0 22px rgba(255,44,163,.18); } } .home_join_login{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .home_join_login a{ position:relative; height:58px; border-radius:13px; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; text-decoration:none !important; color:#fff !important; font-family:'Montserrat',sans-serif; font-size:15px; font-weight:900; letter-spacing:.55px; text-shadow: 0 1px 0 rgba(0,0,0,.50), 0 0 7px rgba(255,255,255,.13); transition: transform .18s ease, filter .18s ease; } /* INNER FINE BORDER */ .home_join_login a::after{ content:""; position:absolute; inset:4px; border-radius:9px; border:1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 8px rgba(255,255,255,.04); pointer-events:none; z-index:1; } /* RUNNING SHINE */ .home_join_login a::before{ content:""; position:absolute; top:-20%; left:-45%; width:28%; height:140%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.58), rgba(255,255,255,.08), transparent ); transform:skewX(-20deg); z-index:2; pointer-events:none; animation: homeButtonShine 3s ease-in-out infinite; } /* ========================= JOIN NOW ========================= */ .home_join_login .home_to_join{ border:1px solid #ff76c6 !important; background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 28% ), linear-gradient( 135deg, #24101f 0%, #36172d 50%, #180b16 100% ) !important; animation: homeJoinGlow 2.5s ease-in-out infinite; } /* ========================= LOGIN ========================= */ .home_join_login .home_to_login{ border:1px solid #ff9bd8 !important; background: linear-gradient( 120deg, #ff9bdd, #ff55ba, #d70b7d, #ff55ba, #ff9bdd ) !important; background-size:300% 300% !important; animation: homePinkMove 4s ease infinite, homeLoginGlow 2.5s ease-in-out infinite; } /* JOIN GLOW */ @keyframes homeJoinGlow{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -9px 16px rgba(0,0,0,.25), 0 0 7px rgba(255,44,163,.20); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -9px 16px rgba(0,0,0,.25), 0 0 22px rgba(255,67,181,.65); } } /* LOGIN GLOW */ @keyframes homeLoginGlow{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -10px 16px rgba(119,0,69,.24), 0 0 10px rgba(255,44,163,.30); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -10px 16px rgba(119,0,69,.24), 0 0 25px rgba(255,76,188,.70); } } /* LOGIN GRADIENT MOVEMENT */ @keyframes homePinkMove{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } /* SHINE RUNNING */ @keyframes homeButtonShine{ 0%{ left:-45%; } 45%{ left:125%; } 100%{ left:125%; } } /* HOVER */ .home_join_login a:hover{ transform: translateY(-2px) scale(1.01); filter:brightness(1.08); } /* CLICK */ .home_join_login a:active{ transform: translateY(1px) scale(.98); } /* BETTER SPACING FOR PROMOTION TABS */ .history_nav.tabs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin:12px 0 16px 0 !important; padding:8px !important; border-radius:16px; } /* EACH TAB */ .history_nav.tabs li{ margin:0 !important; padding:0 !important; } /* BUTTON */ .history_nav.tabs li a{ min-height:46px; padding:0 14px !important; border-radius:11px; display:flex; align-items:center; justify-content:center; } /* TEXT */ .history_nav.tabs li a span{ line-height:1.2; padding-top:1px; font-size:13px; font-weight:700; } /* SMALL SPACE BELOW TABS */ .history_nav.tabs + *{ margin-top:8px; } /* ========================================= PROMOTION HISTORY TABS ========================================= */ .history_nav.tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin:0; padding:6px; list-style:none; background: linear-gradient( 180deg, #18000f 0%, #0b0007 100% ); border-radius:14px; border:1px solid rgba(255,76,181,.25); box-shadow: inset 0 0 12px rgba(255,44,163,.08), 0 0 10px rgba(255,44,163,.08); } /* REMOVE DEFAULT LI STYLE */ .history_nav.tabs li{ margin:0 !important; padding:0 !important; border:0 !important; background:none !important; } /* TAB BUTTON */ .history_nav.tabs li a{ position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:10px; overflow:hidden; isolation:isolate; text-decoration:none !important; color:#e8c9dc !important; font-size:13px; font-weight:700; letter-spacing:.3px; background: linear-gradient( 180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30% ), linear-gradient( 135deg, #2a101f 0%, #351529 50%, #160912 100% ) !important; border:1px solid rgba(255,102,194,.35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -6px 12px rgba(0,0,0,.20), 0 0 6px rgba(255,44,163,.10); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } /* INNER FINE FRAME */ .history_nav.tabs li a::after{ content:""; position:absolute; inset:3px; border-radius:7px; border:1px solid rgba(255,255,255,.12); pointer-events:none; z-index:1; } /* TEXT ABOVE EFFECT */ .history_nav.tabs li a span{ position:relative; z-index:5; } /* ========================================= ACTIVE TAB ========================================= */ .history_nav.tabs li.active a, .history_nav.tabs li a.on{ color:#fff !important; border:1px solid #ff92d4 !important; background: linear-gradient( 120deg, #ff9bdd, #ff55ba, #d70b7d, #ff55ba, #ff9bdd ) !important; background-size:300% 300% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(119,0,69,.20), 0 0 10px rgba(255,44,163,.35), 0 0 20px rgba(255,44,163,.18); text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 6px rgba(255,255,255,.18); animation: historyPinkMove 4s ease infinite, historyTabGlow 2.5s ease-in-out infinite; } /* RUNNING SHINE ONLY ACTIVE */ .history_nav.tabs li.active a::before, .history_nav.tabs li a.on::before{ content:""; position:absolute; top:-25%; left:-45%; width:28%; height:150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.10), rgba(255,255,255,.65), rgba(255,255,255,.10), transparent ); transform:skewX(-20deg); z-index:2; pointer-events:none; animation: historyTabShine 3s ease-in-out infinite; } /* ACTIVE GRADIENT MOVEMENT */ @keyframes historyPinkMove{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } /* ACTIVE BREATHING GLOW */ @keyframes historyTabGlow{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -8px 14px rgba(119,0,69,.20), 0 0 8px rgba(255,44,163,.28); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -8px 14px rgba(119,0,69,.20), 0 0 18px rgba(255,76,188,.65); } } /* SHINE MOVEMENT */ @keyframes historyTabShine{ 0%{ left:-45%; } 45%{ left:125%; } 100%{ left:125%; } } /* HOVER */ .history_nav.tabs li a:hover{ transform:translateY(-1px); filter:brightness(1.08); } /* REMOVE JQUERY MOBILE DEFAULT */ .history_nav.tabs .ui-link{ text-shadow:none !important; } /* ========================================= HOME GAME NAV - DARK PINK NEON THEME COLOR / STYLE ONLY ========================================= */ /* MAIN NAV AREA */ .home_navBox.home-nav-1{ background: linear-gradient( 180deg, #260015 0%, #16000d 55%, #0b0007 100% ) !important; border-top:1px solid rgba(255,83,181,.30) !important; border-bottom:1px solid rgba(255,83,181,.38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,55,170,.08), 0 0 14px rgba(255,44,163,.10) !important; } /* NAV LIST */ .home_navBox .home_nav{ background:transparent !important; } /* ========================================= NORMAL MENU ITEM ========================================= */ .home_navBox .home_nav li{ background:transparent !important; } .home_navBox .home_nav li .firmCategory{ position:relative; color:#e7bfd8 !important; background: linear-gradient( 180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 26% ), linear-gradient( 180deg, #2d1021 0%, #200b18 52%, #12070e 100% ) !important; border:1px solid rgba(255,91,185,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -5px 10px rgba(0,0,0,.20), 0 0 5px rgba(255,44,163,.06) !important; text-shadow:none !important; transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease; } /* TEXT */ .home_navBox .home_nav li .firmCategory span{ color:#e7bfd8 !important; text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 0 5px rgba(255,65,175,.12) !important; } /* ICON */ .home_navBox .home_nav li .firmCategory .icon{ filter: drop-shadow(0 0 3px rgba(255,64,174,.25)); transition: filter .25s ease, transform .25s ease; } /* ========================================= ACTIVE / SELECTED ========================================= */ .home_navBox .home_nav li .firmCategory.on, .home_navBox .home_nav li .firmCategory.active{ color:#fff !important; border-color:#ff8bd1 !important; background: linear-gradient( 180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.03) 28% ), linear-gradient( 120deg, #ff91d5, #ff52b8, #d60a7c, #ff45ad, #ff91d5 ) !important; background-size:300% 300% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -6px 12px rgba(116,0,67,.22), 0 0 7px rgba(255,44,163,.45), 0 0 16px rgba(255,44,163,.20) !important; animation: homeNavPinkMove 4s ease infinite, homeNavActiveGlow 2.6s ease-in-out infinite; } /* ACTIVE TEXT */ .home_navBox .home_nav li .firmCategory.on span, .home_navBox .home_nav li .firmCategory.active span{ color:#fff !important; text-shadow: 0 1px 1px rgba(87,0,51,.55), 0 0 5px rgba(255,255,255,.28), 0 0 10px rgba(255,80,185,.45) !important; } /* ACTIVE ICON */ .home_navBox .home_nav li .firmCategory.on .icon, .home_navBox .home_nav li .firmCategory.active .icon{ filter: brightness(1.15) drop-shadow(0 0 4px rgba(255,255,255,.30)) drop-shadow(0 0 7px rgba(255,40,160,.70)) !important; } /* ========================================= RUNNING SHINE ON ACTIVE ITEM ========================================= */ .home_navBox .home_nav li .firmCategory.on{ overflow:hidden; } .home_navBox .home_nav li .firmCategory.on::before{ content:""; position:absolute; top:-30%; left:-45%; width:25%; height:160%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.52), rgba(255,255,255,.08), transparent ); transform:skewX(-20deg); pointer-events:none; z-index:3; animation: homeNavShine 3.3s ease-in-out infinite; } /* KEEP ICON + TEXT ABOVE SHINE */ .home_navBox .home_nav li .firmCategory .i, .home_navBox .home_nav li .firmCategory span{ position:relative; z-index:5; } /* ========================================= HOVER ========================================= */ .home_navBox .home_nav li .firmCategory:hover{ color:#fff !important; border-color:rgba(255,100,194,.52) !important; background: linear-gradient( 180deg, rgba(255,81,181,.13), rgba(95,0,53,.18) ), linear-gradient( 180deg, #351227, #1c0915 ) !important; box-shadow: inset 0 0 12px rgba(255,44,163,.10), 0 0 10px rgba(255,44,163,.18) !important; } .home_navBox .home_nav li .firmCategory:hover span{ color:#ffd8ef !important; text-shadow: 0 0 7px rgba(255,44,163,.45) !important; } .home_navBox .home_nav li .firmCategory:hover .icon{ filter: brightness(1.08) drop-shadow(0 0 5px rgba(255,53,169,.50)); } /* ========================================= LEFT / RIGHT ARROW BUTTONS ========================================= */ .home_navBox .m-scroll-btn{ background: linear-gradient( 180deg, #351025 0%, #210915 55%, #11060c 100% ) !important; border-color:rgba(255,82,183,.38) !important; color:#ff78c8 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 7px rgba(255,44,163,.14) !important; transition: background .2s ease, box-shadow .2s ease, filter .2s ease; } .home_navBox .m-scroll-btn svg{ fill:#ff79ca !important; filter: drop-shadow(0 0 3px rgba(255,44,163,.45)); } .home_navBox .m-scroll-btn:hover{ background: linear-gradient( 180deg, #5b173e, #2c0a1d ) !important; box-shadow: inset 0 0 8px rgba(255,44,163,.10), 0 0 10px rgba(255,44,163,.35) !important; } .home_navBox .m-scroll-btn:hover svg{ fill:#ffd2ec !important; } /* ========================================= SCROLLBAR COLOR ========================================= */ .home_navBox .home_nav::-webkit-scrollbar{ height:3px; } .home_navBox .home_nav::-webkit-scrollbar-track{ background:#100008; } .home_navBox .home_nav::-webkit-scrollbar-thumb{ background: linear-gradient( 90deg, #ad075f, #ff4eb3, #ad075f ); box-shadow: 0 0 5px rgba(255,44,163,.50); } /* ========================================= ANIMATION ========================================= */ @keyframes homeNavPinkMove{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } @keyframes homeNavActiveGlow{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -6px 12px rgba(116,0,67,.22), 0 0 6px rgba(255,44,163,.32), 0 0 12px rgba(255,44,163,.12); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -6px 12px rgba(116,0,67,.22), 0 0 10px rgba(255,73,185,.72), 0 0 22px rgba(255,44,163,.27); } } @keyframes homeNavShine{ 0%{ left:-45%; opacity:0; } 12%{ opacity:1; } 48%{ left:125%; opacity:1; } 60%, 100%{ left:125%; opacity:0; } } /* ========================================= MY ACCOUNT SHORTCUT MENU DARK PINK / NEON LUXURY THEME STYLE ONLY - KEEP EXISTING LAYOUT ========================================= */ .account-menu-section{ background: radial-gradient( circle at 20% 0%, rgba(255,55,170,.12), transparent 32% ), linear-gradient( 180deg, #240014 0%, #16000d 55%, #0b0007 100% ) !important; border:1px solid rgba(255,75,180,.22) !important; box-shadow: inset 0 0 18px rgba(255,44,163,.06), 0 0 14px rgba(255,44,163,.08) !important; } /* EACH SHORTCUT */ .account-menu-section .shortcut-menu{ position:relative; overflow:hidden; isolation:isolate; width: 3.23rem; background: linear-gradient( 180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 28% ), linear-gradient( 145deg, #31101f 0%, #240b18 52%, #13070e 100% ) !important; border:1px solid rgba(255,91,185,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -6px 12px rgba(0,0,0,.18), 0 0 7px rgba(255,44,163,.08) !important; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease; } /* INNER SOFT FRAME */ .account-menu-section .shortcut-menu::after{ content:""; position:absolute; inset:4px; border:1px solid rgba(255,190,228,.12); pointer-events:none; z-index:1; } /* SOFT SHINE */ .account-menu-section .shortcut-menu::before{ content:""; position:absolute; top:-25%; left:-45%; width:26%; height:150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.04), rgba(255,255,255,.25), rgba(255,255,255,.04), transparent ); transform:skewX(-20deg); pointer-events:none; z-index:2; animation: accountMenuShine 4.2s ease-in-out infinite; } .account-menu-section .shortcut-menu { width: 3.2rem; } /* ICON AREA */ .account-menu-section .menu-img-wrapper{ position:relative; z-index:4; } /* ICON */ .account-menu-section .shortcut-menu .icon{ filter: drop-shadow(0 0 4px rgba(255,54,169,.30)); transition: filter .2s ease, transform .2s ease; } /* LABEL */ .account-menu-section .shortcut-label{ position:relative; z-index:4; color:#f1d5e5 !important; text-shadow: 0 1px 1px rgba(0,0,0,.50), 0 0 5px rgba(255,44,163,.14) !important; } /* ========================================= HOVER ========================================= */ .account-menu-section .shortcut-menu:hover{ border-color:rgba(255,112,201,.65) !important; background: linear-gradient( 180deg, rgba(255,93,190,.10), rgba(255,255,255,0) 30% ), linear-gradient( 145deg, #44142f 0%, #2c0c20 55%, #160812 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 12px rgba(255,44,163,.08), 0 0 12px rgba(255,44,163,.30) !important; transform:translateY(-1px); } .account-menu-section .shortcut-menu:hover .icon{ transform:scale(1.05); filter: brightness(1.08) drop-shadow(0 0 6px rgba(255,44,163,.58)); } .account-menu-section .shortcut-menu:hover .shortcut-label{ color:#ffb6df !important; text-shadow: 0 0 6px rgba(255,44,163,.45) !important; } /* ========================================= LOGOUT - BRIGHTER PINK ========================================= */ .account-menu-section .menu-logout{ border-color:rgba(255,122,204,.55) !important; background: linear-gradient( 120deg, #6f164b, #bf176f, #e52a91, #bf176f, #6f164b ) !important; background-size:300% 300% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -7px 12px rgba(90,0,50,.22), 0 0 10px rgba(255,44,163,.25) !important; animation: accountLogoutPink 4s ease infinite, accountLogoutGlow 2.6s ease-in-out infinite; } .account-menu-section .menu-logout .shortcut-label{ color:#fff !important; text-shadow: 0 1px 1px rgba(70,0,40,.55), 0 0 6px rgba(255,255,255,.16) !important; } /* NOTIFICATION */ .account-menu-section .unread-msg{ background:#ff3fa9 !important; color:#fff !important; border:1px solid #ffd1eb !important; box-shadow: 0 0 7px rgba(255,44,163,.65) !important; } /* ========================================= ANIMATIONS ========================================= */ @keyframes accountMenuShine{ 0%{ left:-45%; opacity:0; } 12%{ opacity:1; } 42%{ left:125%; opacity:.8; } 55%, 100%{ left:125%; opacity:0; } } @keyframes accountLogoutPink{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } @keyframes accountLogoutGlow{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -7px 12px rgba(90,0,50,.22), 0 0 8px rgba(255,44,163,.24); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -7px 12px rgba(90,0,50,.22), 0 0 18px rgba(255,71,180,.62); } } /* ========================================= PAYMENT SCROLL MENU DARK PINK / NEON LUXURY THEME STYLE ONLY - KEEP CURRENT STRUCTURE ========================================= */ .payment-scroll-menu{ background: linear-gradient( 180deg, #260015 0%, #16000d 55%, #0b0007 100% ) !important; border-top:1px solid rgba(255,83,181,.28) !important; border-bottom:1px solid rgba(255,83,181,.38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,55,170,.08), 0 0 14px rgba(255,44,163,.10) !important; } /* NAV LIST */ .payment-scroll-menu .menu_nav{ background:transparent !important; } /* EACH ITEM */ .payment-scroll-menu .menu_nav li{ background:transparent !important; } /* NORMAL TAB */ .payment-scroll-menu .firmCategory{ position:relative; overflow:hidden; color:#e8c6db !important; background: linear-gradient( 180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 28% ), linear-gradient( 180deg, #2e1022 0%, #200b18 52%, #12070e 100% ) !important; border:1px solid rgba(255,91,185,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -5px 10px rgba(0,0,0,.20), 0 0 5px rgba(255,44,163,.06) !important; text-shadow:none !important; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease; } /* TEXT */ .payment-scroll-menu .firmCategory span{ position:relative; z-index:5; color:#e8c6db !important; text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 0 5px rgba(255,65,175,.12) !important; } /* ICON */ .payment-scroll-menu .firmCategory .i{ position:relative; z-index:5; } .payment-scroll-menu .firmCategory .icon{ filter: drop-shadow(0 0 3px rgba(255,64,174,.25)); transition: filter .22s ease, transform .22s ease; } /* ========================================= ACTIVE TAB ========================================= */ .payment-scroll-menu .firmCategory.on, .payment-scroll-menu .firmCategory.active{ color:#fff !important; border-color:#ff8bd1 !important; background: linear-gradient( 180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.03) 28% ), linear-gradient( 120deg, #ff91d5, #ff52b8, #d60a7c, #ff45ad, #ff91d5 ) !important; background-size:300% 300% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -6px 12px rgba(116,0,67,.22), 0 0 7px rgba(255,44,163,.42), 0 0 16px rgba(255,44,163,.20) !important; animation: paymentPinkMove 4s ease infinite, paymentActiveGlow 2.6s ease-in-out infinite; } /* ACTIVE TEXT */ .payment-scroll-menu .firmCategory.on span, .payment-scroll-menu .firmCategory.active span{ color:#fff !important; text-shadow: 0 1px 1px rgba(87,0,51,.55), 0 0 5px rgba(255,255,255,.28), 0 0 10px rgba(255,80,185,.45) !important; } /* ACTIVE ICON */ .payment-scroll-menu .firmCategory.on .icon, .payment-scroll-menu .firmCategory.active .icon{ filter: brightness(1.15) drop-shadow(0 0 4px rgba(255,255,255,.30)) drop-shadow(0 0 7px rgba(255,40,160,.70)) !important; } /* ACTIVE RUNNING SHINE */ .payment-scroll-menu .firmCategory.on::before{ content:""; position:absolute; top:-30%; left:-45%; width:25%; height:160%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.55), rgba(255,255,255,.08), transparent ); transform:skewX(-20deg); z-index:2; pointer-events:none; animation: paymentShine 3.2s ease-in-out infinite; } /* ========================================= HOVER ========================================= */ .payment-scroll-menu .firmCategory:hover{ border-color:rgba(255,100,194,.50) !important; background: linear-gradient( 180deg, rgba(255,81,181,.12), rgba(95,0,53,.16) ), linear-gradient( 180deg, #351227, #1c0915 ) !important; box-shadow: inset 0 0 12px rgba(255,44,163,.10), 0 0 10px rgba(255,44,163,.18) !important; } .payment-scroll-menu .firmCategory:hover span{ color:#ffd8ef !important; } .payment-scroll-menu .firmCategory:hover .icon{ filter: brightness(1.08) drop-shadow(0 0 5px rgba(255,53,169,.50)); } /* ========================================= LEFT / RIGHT SCROLL BUTTON ========================================= */ .payment-scroll-menu .m-scroll-btn{ color:#ff82cc !important; background: linear-gradient( 180deg, #351025 0%, #210915 55%, #11060c 100% ) !important; border:1px solid rgba(255,82,183,.38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 7px rgba(255,44,163,.14) !important; text-shadow: 0 0 6px rgba(255,44,163,.55) !important; transition: background .2s ease, box-shadow .2s ease, color .2s ease; } .payment-scroll-menu .m-scroll-btn span{ color:#ff82cc !important; text-shadow: 0 0 5px rgba(255,44,163,.65); } .payment-scroll-menu .m-scroll-btn:hover{ color:#fff !important; background: linear-gradient( 180deg, #5b173e, #2c0a1d ) !important; box-shadow: inset 0 0 8px rgba(255,44,163,.10), 0 0 11px rgba(255,44,163,.40) !important; } /* ========================================= SCROLLBAR ========================================= */ .payment-scroll-menu .menu_nav::-webkit-scrollbar{ height:3px; } .payment-scroll-menu .menu_nav::-webkit-scrollbar-track{ background:#100008; } .payment-scroll-menu .menu_nav::-webkit-scrollbar-thumb{ background: linear-gradient( 90deg, #ad075f, #ff4eb3, #ad075f ); box-shadow: 0 0 5px rgba(255,44,163,.50); } /* ========================================= ANIMATION ========================================= */ @keyframes paymentPinkMove{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } @keyframes paymentActiveGlow{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -6px 12px rgba(116,0,67,.22), 0 0 6px rgba(255,44,163,.32), 0 0 12px rgba(255,44,163,.12); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -6px 12px rgba(116,0,67,.22), 0 0 10px rgba(255,73,185,.72), 0 0 22px rgba(255,44,163,.27); } } @keyframes paymentShine{ 0%{ left:-45%; opacity:0; } 12%{ opacity:1; } 48%{ left:125%; opacity:1; } 60%, 100%{ left:125%; opacity:0; } } /* ========================================= DEPOSIT METHOD - LUXURY PINK / GOLD NO CIRCLE EFFECT KEEP EXISTING STRUCTURE + LAYOUT ========================================= */ .standard-tab.deposit-tab{ background: linear-gradient( 180deg, #1d0715 0%, #10050c 55%, #090307 100% ) !important; border:1px solid rgba(255,168,210,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 25px rgba(0,0,0,.22) !important; } /* ========================================= PAYMENT CARD ========================================= */ .standard-tab.deposit-tab .tab-header{ position:relative; overflow:hidden; isolation:isolate; /* NO CIRCLE */ border-radius:9px !important; background: linear-gradient( 180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.015) 22%, rgba(255,255,255,0) 45% ), linear-gradient( 145deg, #301421 0%, #1e0c16 52%, #11070d 100% ) !important; border:1px solid rgba(255,194,222,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -8px 15px rgba(0,0,0,.18), 0 5px 14px rgba(0,0,0,.18) !important; transition: .25s ease !important; } /* GOLD / PINK TOP ACCENT */ .standard-tab.deposit-tab .tab-header::after{ content:""; position:absolute; top:0; left:12%; right:12%; height:1px; background: linear-gradient( 90deg, transparent, rgba(255,211,143,.35), #ffd6a2, #ff8fcf, rgba(255,211,143,.35), transparent ); box-shadow: 0 0 7px rgba(255,88,181,.25); pointer-events:none; z-index:3; } /* ========================================= ICON AREA - REMOVE CIRCLE STYLE ========================================= */ .standard-tab.deposit-tab .img-container{ position:relative; z-index:4; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* REMOVE POSSIBLE ROUND EFFECT FROM CHILD */ .standard-tab.deposit-tab .img-container .c-img{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* KEEP PAYMENT LOGO NATURAL */ .standard-tab.deposit-tab .img-container svg, .standard-tab.deposit-tab .img-container img{ position:relative; z-index:5; border-radius:0 !important; box-shadow:none !important; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); transition: transform .25s ease, filter .25s ease; } /* ========================================= LABEL ========================================= */ .standard-tab.deposit-tab .deposit-option{ position:relative; z-index:5; color:#ead5e1 !important; font-weight:600; text-shadow: 0 1px 2px rgba(0,0,0,.65) !important; transition:.25s ease; } /* ========================================= ACTIVE - LUXURY PINK / CHAMPAGNE ========================================= */ .standard-tab.deposit-tab .tab-header.active{ border-color:rgba(255,180,218,.72) !important; background: linear-gradient( 180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.025) 24%, transparent 45% ), linear-gradient( 135deg, #5b183c 0%, #9c1c61 38%, #d82f86 62%, #69173f 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.23), inset 0 -10px 18px rgba(71,0,39,.24), 0 0 8px rgba(255,56,166,.25), 0 7px 17px rgba(0,0,0,.24) !important; animation: luxuryTabGlow 2.8s ease-in-out infinite; } /* ACTIVE GOLD ACCENT */ .standard-tab.deposit-tab .tab-header.active::after{ height:2px; background: linear-gradient( 90deg, transparent, #d9a85b, #ffe9b2, #ff9bd5, #ffe9b2, #d9a85b, transparent ); box-shadow: 0 0 8px rgba(255,91,186,.52); } /* ACTIVE TEXT */ .standard-tab.deposit-tab .tab-header.active .deposit-option{ color:#fff6fb !important; font-weight:700; text-shadow: 0 1px 2px rgba(68,0,38,.65), 0 0 7px rgba(255,184,222,.25) !important; } /* ACTIVE ICON */ .standard-tab.deposit-tab .tab-header.active .img-container svg, .standard-tab.deposit-tab .tab-header.active .img-container img{ transform:translateY(-1px); filter: brightness(1.05) drop-shadow(0 4px 5px rgba(0,0,0,.28)) drop-shadow(0 0 4px rgba(255,151,207,.22)); } /* ========================================= SOFT SHINE - ACTIVE ========================================= */ .standard-tab.deposit-tab .tab-header.active::before{ content:""; position:absolute; top:-30%; left:-50%; width:24%; height:160%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.04), rgba(255,240,220,.34), rgba(255,255,255,.05), transparent ); transform:skewX(-22deg); pointer-events:none; z-index:2; animation: luxuryTabShine 3.8s ease-in-out infinite; } /* ========================================= HOVER ========================================= */ .standard-tab.deposit-tab .tab-header:hover{ border-color:rgba(255,146,204,.42) !important; background: linear-gradient( 180deg, rgba(255,255,255,.08), transparent 28% ), linear-gradient( 145deg, #42172e, #28101e 55%, #150910 ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 10px rgba(255,62,169,.15), 0 6px 14px rgba(0,0,0,.20) !important; } .standard-tab.deposit-tab .tab-header:hover .deposit-option{ color:#ffd9ec !important; } .standard-tab.deposit-tab .tab-header:hover .img-container svg, .standard-tab.deposit-tab .tab-header:hover .img-container img{ transform:translateY(-2px); filter: brightness(1.07) drop-shadow(0 4px 5px rgba(0,0,0,.30)); } /* ========================================= BANK TRANSFER BLUE ICON -> PINK / GOLD OPTIONAL ========================================= */ .standard-tab.deposit-tab .tab-header[name="banktransfer"] #pi-banktransfer-g stop:first-child{ stop-color:#bd176d !important; } .standard-tab.deposit-tab .tab-header[name="banktransfer"] #pi-banktransfer-g stop:last-child{ stop-color:#ff77c5 !important; } /* ========================================= ANIMATIONS ========================================= */ @keyframes luxuryTabGlow{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -10px 18px rgba(71,0,39,.22), 0 0 7px rgba(255,56,166,.20), 0 7px 17px rgba(0,0,0,.24); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -10px 18px rgba(71,0,39,.22), 0 0 14px rgba(255,77,181,.42), 0 8px 20px rgba(0,0,0,.27); } } @keyframes luxuryTabShine{ 0%{ left:-50%; opacity:0; } 12%{ opacity:.7; } 43%{ left:125%; opacity:.7; } 55%, 100%{ left:125%; opacity:0; } } /* ===================================================== 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(./img1823_usukakiss/usuka_tele.jpg?v=8) !important; } .headertitle-secondarybanner .banner-img { background-image: url(./img1823_usukakiss/usuka_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(./img1823_usukakiss/uvip.png?v=8) !important; } /* 2 - UMENANG */ .partner-container .company-Myrs9sk .banner-img { background-image: url(./img1823_usukakiss/umenang.png?v=8) !important; } /* 3 - UCUCI */ .partner-container .company-myrs9lc .banner-img { background-image: url(./img1823_usukakiss/ucuci.png?v=8) !important; } /* 4 - ULUCKY */ .partner-container .company-myrs9gw .banner-img { background-image: url(./img1823_usukakiss/ulucky.png?v=8) !important; } /* 5 - UKAYA */ .partner-container .company-myrs9wt .banner-img { background-image: url(./img1823_usukakiss/ukaya.png?v=8) !important; } /* 6 - USUKA */ .partner-container .company-myrs9sw .banner-img { background-image: url(./img1823_usukakiss/usuka.png?v=8) !important; } /* 6 - U99 */ .partner-container .company-myrs9pw .banner-img { background-image: url(./img1823_usukakiss/u99.png?v=8) !important; } .icon-partnership { background-image: url(img1823_usukakiss/partnership.png) !important; } #pagePromotionsDetail #promotionsDetailPage .promodetailContent .promodetail_textbox .p_title.blue { color: #ff64bd!important; } #pagePromotionsDetail{ background: linear-gradient( 180deg, #2b0019 0%, #1b0011 38%, #100009 70%, #070004 100% ) !important; }