.home_navBox span, #pageLanguage .row:before{ display:none!important; } body{ background-color:#37155d!important; } .header { background-image: linear-gradient(#2f1a44, #140628)!important; } .masthead-images{ height:295px!important; background-image: url(img1822_ucucikiss/mobile.jpg?v=3)!important; background-size: 100%!important; margin: 32px auto 0px auto!important; background-repeat: no-repeat!important; } .masthead-images .bg-item1, .masthead-images .bg-item2, .masthead-images .bg-item3, .masthead-images .bg-item4, .masthead-images .bg-item5 { display:none!important; } /* ========================================================= VERIFICATION PAGE BLACK + SAPPHIRE BLUE + CHAMPAGNE GOLD ========================================================= */ .content-container { width: calc(100% - 18px); max-width: 520px; margin: 18px auto; padding: 18px 14px; box-sizing: border-box; border: 1px solid rgba(215,181,109,.5); border-radius: 15px; background: radial-gradient( circle at 50% 0%, rgba(27, 91, 176, .18), transparent 38% ), linear-gradient( 180deg, #0c1929 0%, #07101b 55%, #030608 100% ); box-shadow: 0 0 6px rgba(215,181,109,.2), 0 0 16px rgba(23,86,169,.25), inset 0 1px 0 rgba(255,255,255,.05); } /* ========================================================= FORM ========================================================= */ #verificationForm { width: 100%; } /* override inline margin */ #verificationForm .input-group, #verificationForm .form-group { width: 100%; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* ========================================================= MESSAGE TEXT ========================================================= */ #verificationForm #lang_sms, #verificationForm #lang_whatsapp { display: block; color: #dce5ef !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.55; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.9); } /* phone number */ #verificationForm [data-value="mobile_no"] { color: #f0d89b !important; font-weight: 800 !important; text-shadow: 0 0 4px rgba(215,181,109,.35); } /* ========================================================= VERIFICATION INPUT ========================================================= */ #smsVerifyInput { position: relative; display: flex !important; align-items: stretch; width: 100%; overflow: hidden; border: 1px solid rgba(215,181,109,.6); border-radius: 9px; background: linear-gradient( 180deg, #0d2139, #07131f ); box-shadow: inset 0 0 7px rgba(31,101,190,.13), 0 0 5px rgba(31,101,190,.18); } /* icon section */ #smsVerifyInput .input-group-addon { width: 42px; min-width: 42px; display: flex; align-items: center; justify-content: center; padding: 0 !important; border: 0 !important; border-right: 1px solid rgba(215,181,109,.35) !important; background: linear-gradient( 180deg, #174d88, #0a2b50 ) !important; color: #f0d89b !important; } /* lock */ #smsVerifyInput .glyphicon-lock { color: #f0d89b !important; font-size: 15px; text-shadow: 0 0 5px rgba(215,181,109,.4); } /* input */ #val-verificationCode { flex: 1; width: 100%; height: 42px; padding: 0 12px; border: 0 !important; outline: 0 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700; letter-spacing: 2px; background: transparent !important; box-shadow: none !important; } #val-verificationCode:focus { background: rgba(24,76,138,.15) !important; } /* input focus whole frame */ #smsVerifyInput:focus-within { border-color: #e2c47f; box-shadow: 0 0 6px rgba(215,181,109,.4), 0 0 12px rgba(33,105,200,.38); } /* ========================================================= ERROR MESSAGE ========================================================= */ #errorLabel { display: block; margin-bottom: 8px; color: #ff9a9a !important; font-size: 10px !important; font-weight: 700; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.85); } /* ========================================================= BUTTON AREA ========================================================= */ #verificationForm .controls { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 !important; } /* reset bootstrap */ #verificationForm .btn { height: 38px; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box; border-radius: 8px !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .5px; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } /* ========================================================= ACTIVATE SAPPHIRE BLUE ========================================================= */ #btnActivate { border: 1px solid #e1c37f !important; color: #f4e4b7 !important; background: linear-gradient( 180deg, #2876cc 0%, #124b90 48%, #072b56 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px rgba(215,181,109,.28), 0 0 10px rgba(31,105,200,.35); } /* ========================================================= LOGOUT DARK GOLD / BLACK ========================================================= */ #btnSignout { border: 1px solid #c9a65f !important; color: #f0d89b !important; background: linear-gradient( 180deg, #17130d 0%, #0d0b08 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 5px rgba(215,181,109,.22); } /* ========================================================= LIVE CHAT ========================================================= */ #btnLiveChat{ height: 32px!important; padding:0px!important; } #btnLiveChat { grid-column:3 / -1; min-height: 36px; display: flex; align-items: center; justify-content: center; margin-top: 2px; border: 1px solid rgba(88,147,215,.55); border-radius: 8px; color: #86bdff !important; font-size: 10px; font-weight: 800; text-transform: uppercase; background: linear-gradient( 180deg, #102640, #071522 ); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 6px rgba(27,91,176,.2); cursor: pointer; transition: .2s ease; } #btnLiveChat:hover { color: #f0d89b !important; border-color: #d7b56d; box-shadow: 0 0 7px rgba(215,181,109,.3), 0 0 11px rgba(33,105,200,.3); } /* ========================================================= BUTTON HOVER ========================================================= */ #verificationForm .btn:hover { transform: translateY(-1px); filter: brightness(1.1); } #verificationForm .btn:active, #btnLiveChat:active { transform: scale(.97); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { .content-container { width: calc(100% - 10px); padding: 14px 10px; border-radius: 12px; } #verificationForm .input-group, #verificationForm .form-group { margin-top: 16px !important; margin-bottom: 16px !important; } #verificationForm #lang_sms, #verificationForm #lang_whatsapp { font-size: 10px !important; } #val-verificationCode { height: 39px; font-size: 13px !important; } #verificationForm .btn { height: 35px; font-size: 9px !important; } #btnLiveChat { min-height: 34px; font-size: 9px; } } #pageHome #homePage{ background-image:url('./img1822_ucucikiss/mainbg2.png?v=3') !important; background-repeat: no-repeat!important; background-size: 100%!important; background-position-y: 353px!important; } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li{ height: 153px; } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li{ width: 31% !important; margin-right: 4px; } .nav-item .icon{ width: 1.94rem!important; height: 1.74rem!important; } .home-nav-3 ul li .i { height: 1.44rem!important;} #pageHome #homePage .home_firmcontent_box #hotgames_firmcontent .home_firms .home_firms_tr li{ width: 48% !important; height: 127px!important; } #pageHome #homePage .idr_box .idr_content .idr_content_top, .menu-item-affqr a, .menu-item-withdrawalall a{ color:#000!important; } .nav-pills.game-nav .nav-link{ font-size:10px!important; } .nav-pills.game-nav .nav-link.active{ color:#444444!important; }#pageHome #homePage .idr_box .idr_content .idr_content_bottom li a{ color:#f2ca7b!important; } .footermenu i{ height: .74rem!important; } .download-app-btn{ background: #444444!important; color:#000!important; padding: 10px !important; border-radius: 15px!important; margin-top: 5px!important; }.nav-pills.game-nav .nav-link{ color:#000!important; } .label-password, .label-loginid{ background: #ebecee!important; color: #000!important; } .ui-footer .navbar li a span{ color:#f2ca7b!important; } .m-main-content .scroll_menu .menu_nav li a, .casino-usrpwd-body .btn-common, .play-btn, .download-btn, .kiss918_mainBox .btn-common{ background-image: linear-gradient(#444444, #000)!important; color:#f2ca7b!important; } .btn-red{ background-image: linear-gradient(#444444, #000)!important; color:#f2ca7b!important; } #kiss918Page .kiss918_mainBox_outer .kiss918_mainBox .textbox .userandpwd td, .casino-usrpwd-body .usrpwd-container .detailtxt{ color:#f2ca7b!important; } .label{ color:#000!important; } #promotionsPage .history_nav li a, .wallet-amount, .fa-exchange[style], .wallet-label, .userandpwd{ color:#f2ca7b!important; } #pagePromotionsDetail #promotionsDetailPage .promodetailContent .promodetail_textbox .p_title.blue{ color:#000!important; } #pageContactUs #contactusPage .contactus_nav li > a .text_box > span{ color:#f2ca7b!important; } #pageHome #homePage .idr_box .idr_content, .ui-footer .navbar, .m-main-content .scroll_menu .menu_nav li a.on, .m-deposit-landing-container #promotionsPage .history_nav, ._tabHeaderTitle_1ivtf_1._active_1ivtf_22, #promotionsPage .history_nav, .btn-blue-promo, .trf-top, .btn.btn-form.confirm-tran-btn{ background-image: linear-gradient(#2f1a44, #140628)!important; color:#f2ca7b!important; } .header .btn-login{ background-image: linear-gradient(#f2ca7b, #d69024)!important; color:#000!important; } .btn-blue-promo{ background-image: linear-gradient(#f2ca7b, #d69024)!important; color:#000!important; } .game-app-info td{ padding:5px!important; } #pageHome #homePage .home_notice .icon_home_notice{ color:#000!important; } .nav-pills.game-nav .nav-link{ background-image: linear-gradient(#444444, #000000) !important; border: 0px solid #d69024!important; color:#f2f2f2!important; } .nav-pills.game-nav .nav-link.active, .nav-pills.game-nav .show > .nav-link, .daily-checkin-content, .nav-pills.game-nav .nav-link{ color: #000; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%) !important; border: 1px solid #d69024; background-color: rgba(0,0,0,0)!important; box-shadow: 0px 0px 0px 0px #f9e077!important; } .spinplaynow-btn{ color: #000; background-image: linear-gradient(#f2ca7b, #d69024) !important; border-radius: 15px!important; } .float-menu.luckybox-floating-icon .floating-icon-image { content: url(./img1822_ucucikiss/luckybox2.png?v=5) !important; } .luckyspin_banner{ background-image:url('./img1822_ucucikiss/luckyspin.png') !important; } .daily-checkin-home{ background-image:url('./img1822_ucucikiss/bg_redeem.png?v=3') !important; } .daily-checkin-content-button-activeRed{ color: #ff0000; background-image: linear-gradient(#fff, #f2f2f2) !important; border: 1px solid #ff0000; box-shadow: 0px 0px 0px 0px #f9e077!important; } .credit-transfer-form .col-xs-5{ width: 41.66666667%!important; } .credit-transfer-form .col-xs-2{ width: 16.66666667%!important; } .credit-transfer-form .col-xs-4{ width: 33.3333333%!important; } #pageHome #homePage .home_firmcontent_box .vendor-tab-content .home_firms .home_firms_tr li .game-app-info{ color:#000!important; margin-top:10px!important; border-radius: 15px!important; } #pageHome #homePage .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li{ width:31%!important; height: 153px!important; border: 0px solid #d69024!important; box-shadow: 0px 0px 0px 0px #d69024; margin-right: 4px; } section#progressivejackpot.theme1 .home-jackpot-content{ color:#fff!important; } section#progressivejackpot.theme1 .home-jackpot-content.myr { top: 81% !important; left: 45% !important;} .promotitembottom .btn-common { height: 1.05rem !important; line-height: 1.0rem !important; } .pDetailTitle{ color:#d69024!important; background-color: #000!important; } .float-menu.customicon-floating-icon .floating-icon-image { content:url('./img1822_ucucikiss/download.png?v=5') !important; } .float-menu.dailyloginreward-floating-icon .floating-icon-image { content:url('./img1822_ucucikiss/checkin.png?v=3') !important; } .lucky-spin_ticket{ color:#fff!important; }section#progressivejackpot.theme1 .home-jackpot-content .home-jackpot-running { font-size: 4vw!important; } #progressivejackpot .show-for-small-only img { content: url(./img1822_ucucikiss/jackpot.png?v=2) !important; } .icon_home_menu_hotgames{ background-image:url('./img1822_ucucikiss/hot_icon.png?v=3') !important; } .icon_home_menu_sport{ background-image:url('./img1822_ucucikiss/sport_icon.png?v=3') !important; } .icon_home_menu_lc{ background-image:url('./img1822_ucucikiss/casino_icon.png?v=3') !important; } .icon_home_menu_slot{ background-image:url('./img1822_ucucikiss/slot_icon.png?v=3') !important; } .icon_home_menu_711{ background-image:url('./img1822_ucucikiss/711_icon.png?v=4') !important; } .li-lottery4d .icon_home_menu_lottery{ background-image:url('./img1822_ucucikiss/lotto_icon.png?v=4') !important; } .li-lottery .icon_home_menu_lottery{ background-image:url('./img1822_ucucikiss/lotto_icon.png?v=3') !important; } .icon_home_menu_fishing{ background-image:url('./img1822_ucucikiss/fishing_icon.png?v=3') !important; } .icon_home_menu_crash{ background-image:url('./img1822_ucucikiss/crash_icon.png?v=3') !important; } .icon-promotion-big{ background-image:url('./img1822_ucucikiss/promo_icon.png?v=3') !important; } .icon-contact{ background-image:url('./img1822_ucucikiss/contact_icon.png?v=4') !important; } .icon-livechat{ background-image:url('./img1822_ucucikiss/livechat_icon.png') !important; } .icon_home_menu_cockfight{ background-image:url('./img1822_ucucikiss/cf_icon.png?v=5') !important; background-size: 100%!important; } .icon_home_menu_esport{ background-image:url('./img1822_ucucikiss/esport_icon.png?v=5') !important; background-size: 100%!important; } .fas.fa-luckybox{ background-image:url('./img1822_ucucikiss/luckybox_icon.png?v=5') !important; } .icon_home_menu_keno{ background-image:url('./img1822_ucucikiss/keno_icon.png?v=5') !important; } .luckybox_banner{ background-image:url('./img1822_ucucikiss/luckybox.png?v=5') !important; } .fas.fa-dharmachakra{ background-image:url('./img1822_ucucikiss/spin_icon.png?v=3') !important; background-repeat: no-repeat!important; } section.lotto-place-bet span.lotto-rules a, span.lotto-payout a{ color:#000!important; background-image: linear-gradient(#f2ca7b, #d69024)!important; } #sport_firmcontent .icon_home_logo_sport_sbo{ background-image:url('./img1822_ucucikiss/sbo_sport.png?v=4') !important; border-radius: 15px!important; } #sport_firmcontent .icon_home_logo_sport_ibc{ background-image:url('./img1822_ucucikiss/ibc_sport.png?v=4') !important; border-radius: 15px!important; } #sport_firmcontent .icon_home_logo_sport_cmd{ background-image:url('./img1822_ucucikiss/cmd_sport.png?v=4') !important; border-radius: 15px!important; }#sport_firmcontent .icon_home_logo_sport_msport{ background-image:url('./img1822_ucucikiss/m_sport.png') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_PT{ background-image:url('./img1822_ucucikiss/pt_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_SEXYB{ background-image:url('./img1822_ucucikiss/sexy_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_BG{ background-image:url('./img1822_ucucikiss/bg_casino.png?v=5') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_AB{ background-image:url('./img1822_ucucikiss/allbet_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_DG{ background-image:url('./img1822_ucucikiss/dg_casino.png') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_pragmatic{ background-image:url('./img1822_ucucikiss/pp_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_SA{ background-image:url('./img1822_ucucikiss/sa_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_BBINC{ background-image:url('./img1822_ucucikiss/bbin_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_EG{ background-image:url('./img1822_ucucikiss/eg_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_GP{ background-image:url('./img1822_ucucikiss/gp_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_SBOC{ background-image:url('./img1822_ucucikiss/sbo_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_WM{ background-image:url('./img1822_ucucikiss/wm_casino.png') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_EZUGI{ background-image:url('./img1822_ucucikiss/ezugi_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_YEEBET{ background-image:url('./img1822_ucucikiss/yeebet_casino.png?v=4') !important; border-radius: 15px!important; } #casino_firmcontent .icon_home_logo_casino_marbula2{ background-image:url('./img1822_ucucikiss/mabu2_casino.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_rpsoft{ background-image:url('./img1822_ucucikiss/rpsoft_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_fachai{ background-image:url('./img1822_ucucikiss/fachai_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_inout{ background-image:url('./img1822_ucucikiss/inout_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_scr_LIVE{ background-image:url('./img1822_ucucikiss/live22_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_scr_PUSSY{ background-image:url('./img1822_ucucikiss/pussy_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_scr_MEGA{ background-image:url('./img1822_ucucikiss/mega_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_pocketgame{ background-image:url('./img1822_ucucikiss/pg_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_kingmaker{ background-image:url('./img1822_ucucikiss/km_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_jili{ background-image:url('./img1822_ucucikiss/jili_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_jdb{ background-image:url('./img1822_ucucikiss/jdb_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_SG{ background-image:url('./img1822_ucucikiss/sg_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_JOKER{ background-image:url('./img1822_ucucikiss/joker_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_PTS{ background-image:url('./img1822_ucucikiss/pt_slot.png?v=5') !important; border-radius: 15px!important; }#slot_firmcontent .icon_home_logo_slot_ludobet{ background-image:url('./img1822_ucucikiss/ludo_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_habanero{ background-image:url('./img1822_ucucikiss/haba_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_dctrelax{ background-image:url('./img1822_ucucikiss/relax_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_naga{ background-image:url('./img1822_ucucikiss/naga_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_rich88{ background-image:url('./img1822_ucucikiss/rich88_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_spribe{ background-image:url('./img1822_ucucikiss/spribe_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_SBOS{ background-image:url('./img1822_ucucikiss/sbo_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_gamerbuild{ background-image:url('./img1822_ucucikiss/gamerbuild_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_advantplay{ background-image:url('./img1822_ucucikiss/ap_slot.png?v=5') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_NETENT{ background-image:url('./img1822_ucucikiss/netent_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_PRA{ background-image:url('./img1822_ucucikiss/pp_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_CQ9{ background-image:url('./img1822_ucucikiss/cq9_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_BBINS{ background-image:url('./img1822_ucucikiss/bbin_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_GPS{ background-image:url('./img1822_ucucikiss/gp_slot.png?v=4') !important; border-radius: 15px!important; } #slot_firmcontent .icon_home_logo_slot_MG{ background-image:url('./img1822_ucucikiss/mg_slot.png?v=4') !important; border-radius: 15px!important; } #fishing_firmcontent .icon_home_logo_fishing_BBIN{ background-image:url('./img1822_ucucikiss/bbin_fishing.png') !important; border-radius: 15px!important; } #fishing_firmcontent .icon_home_logo_fishing_GG{ background-image:url('./img1822_ucucikiss/gg_fishing.png') !important; border-radius: 15px!important; } #fishing_firmcontent .icon_home_logo_fish_jdb{ background-image:url('./img1822_ucucikiss/jdb_fishing.png') !important; border-radius: 15px!important; } #fishing_firmcontent .icon_home_logo_fish_jili{ background-image:url('./img1822_ucucikiss/jili_fishing.png') !important; border-radius: 15px!important; } #fishing_firmcontent .icon_home_logo_fishing_JOKER{ background-image:url('./img1822_ucucikiss/joker_fishing.png') !important; border-radius: 15px!important; } #fishing_firmcontent .icon_home_logo_fishing_SG{ background-image:url('./img1822_ucucikiss/sg_fishing.png') !important; border-radius: 15px!important; } #fishing_firmcontent .icon_home_logo_fish_cq9{ background-image:url('./img1822_ucucikiss/cq9_fishing.png') !important; border-radius: 15px!important; } #crash_firmcontent .icon_home_logo_slot_spribe{ background-image:url('./img1822_ucucikiss/spribe_slot.png') !important; border-radius: 15px!important; } #cockfight_firmcontent .icon_home_logo_cockfight_sv388{ background-image:url('./img1822_ucucikiss/sv388_cf.png') !important; border-radius: 15px!important; } #keno_firmcontent .icon_home_logo_VR{ background-image:url('./img1822_ucucikiss/vr_keno.png') !important; border-radius: 15px!important; } #keno_firmcontent .icon_home_logo_BBINF{ background-image:url('./img1822_ucucikiss/bbin_keno.png') !important; border-radius: 15px!important; } #keno_firmcontent .icon_home_logo_KY{ background-image:url('./img1822_ucucikiss/ky_keno.png') !important; border-radius: 15px!important; } #keno_firmcontent .icon_home_logo_keno_jili{ background-image:url('./img1822_ucucikiss/jili_keno.png') !important; border-radius: 15px!important; } #esport_firmcontent .icon_home_logo_sport_tfgaming{ background-image:url('./img1822_ucucikiss/tf_esport.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_scr_S918{ background-image:url('./img1822_ucucikiss/918_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_scr_MEGA{ background-image:url('./img1822_ucucikiss/mega_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_scr_PUSSY{ background-image:url('./img1822_ucucikiss/pussy_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_slot_JOKER{ background-image:url('./img1822_ucucikiss/joker_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_evo888{ background-image:url('./img1822_ucucikiss/evo_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_slot_VP{ background-image:url('./img1822_ucucikiss/vp_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_slot_XE{ background-image:url('./img1822_ucucikiss/xe_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_scr_LIVE{ background-image:url('./img1822_ucucikiss/live22_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_scr_GW{ background-image:url('./img1822_ucucikiss/gw_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_scr_PB{ background-image:url('./img1822_ucucikiss/pb_slot.png') !important; border-radius: 15px!important; } #mobile_firmcontent .icon_home_logo_lionking{ background-image:url('./img1822_ucucikiss/lk_slot.png') !important; border-radius: 15px!important; } .payment-menu .icon_home_header_restore, .payment-scroll-menu .icon_home_header_restore{ background-image:url('./img1822_ucucikiss/retrieve.png?v=3') !important; } .payment-menu .icon-voucher, .payment-scroll-menu .icon-voucher{ background-image:url('./img1822_ucucikiss/voucher.png?v=3') !important; } .payment-menu .icon-funds, .payment-scroll-menu .icon-funds{ background-image:url('./img1822_ucucikiss/deposit_icon.png?v=3') !important; } .payment-menu .icon-withdrawal, .payment-scroll-menu .icon-withdrawal{ background-image:url('./img1822_ucucikiss/withdraw_menu.png?v=3') !important; } .payment-menu .icon-wallettransfer, .payment-scroll-menu .icon-wallettransfer{ background-image:url('./img1822_ucucikiss/transfer_icon.png?v=3') !important; } .payment-menu .icon-wallets, .payment-scroll-menu .icon-wallets{ background-image:url('./img1822_ucucikiss/wallet_menu.png?v=3') !important; } .payment-menu .icon-history, .payment-scroll-menu .icon-history{ background-image:url('./img1822_ucucikiss/history_icon.png?v=3') !important; } .payment-menu .icon-statement, .payment-scroll-menu .icon-statement{ background-image:url('./img1822_ucucikiss/statement_icon.png?v=3') !important; } .icon-logout{ background-image:url('./img1822_ucucikiss/logout_icon.png?v=3') !important; } .icon-changepassword{ background-image:url('./img1822_ucucikiss/pass_icon.png?v=3') !important; } .account-menu-section .icon-referral-program{ background-image:url('./img1822_ucucikiss/refer_icon.png?v=3') !important; } .ui-footer .navbar .icon-home-big{ background-image:url('./img1822_ucucikiss/home_icon.png?v=3') !important; } .ui-footer .navbar .icon-funds{ background-image:url('./img1822_ucucikiss/deposit_icon.png?v=3') !important; } .ui-footer .navbar .icon-account, .icon-myprofile{ background-image:url('./img1822_ucucikiss/acc_icon.png?v=3') !important; } .ui-footer .navbar .icon-promotion-big{ background-image:url('./img1822_ucucikiss/promo_icon.png?v=3') !important; } .fa-telegram:before{ content:none!important; } .fa-telegram{ background-image:url('./img1822_ucucikiss/tele_icon.png?v=3') !important; width: .84rem!important; height: .84rem!important; background-size: 100%!important; } .reset-request-container .reset-request-form .reset-reqeust-top .reset-email-label, .reset-request-container .reset-request-form .reset-reqeust-top .reset-username-label{ color:#f2ca7b!important; } i.provider.logo-pragmatic, i.provider.logo-playtech, i.provider.logo-spribe{ filter: brightness(0) invert(1)!important; } #depositForm .quick_pay_input_item > label, #depositForm .quick_pay_select_item>label, #depositForm .quick_pay_input_item>div>label, .page-title, .primary-style .quick_pay_input_item > label, #walletWithdrawalContainer h1[style], #walletTransferContainer h1[style], #historyContainer h1[style], #regPage .regformBox .login_centent .steptitle, #regPage .regformBox .login_centent .input_item .label-aff span, .section-desc[style], .standard-label, .m-transfer-container .m-transfer-form .standard-form-field .standard-label, .m-deposit-landing-container .standard-content-container .m-standard-transaction-container .m-transaction-form .bank-list-container .st-title { color: #282828!important; font-weight: bold!important; text-transform: uppercase!important; } .btn-primary, .transfer-type-section .btn-default, .btn-blue, .standard-button-container .standard-submit-form-button, .casino-usrpwd-body .play-btn, .btn-red-play, .m-transfer-container .m-transfer-form .standard-button-container .standard-submit-form-button, .btn.btn-form.confirm-tran-btn, .swiper-slide .button-style-1, .product-filter .button-style-2.is-active, .product-filter .button-style-2, .button-filter, .button-style-1 , .m-deposit-landing-container .deposit-tab-container .deposit-tab .active .img-container{ background: linear-gradient(0deg, #f2ca7b, #d69024) !important; border-color: #282828!important; color:#000!important; } .member-action .icon_home_header_restore, .member-action .icon-wallettransfer{ filter: brightness(0) invert(1)!important; } .account-menu-section .icon-myprofile{ background: url("./img1822_ucucikiss/acc_user.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-referral-program{ background: url("./img1822_ucucikiss/acc_referral.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-changepassword{ background: url("./img1822_ucucikiss/acc_changepassword.png?=v4")!important; background-size: 100%!important; background-repeat: no-repeat!important; } .account-menu-section .icon-logout{ background: url("./img1822_ucucikiss/acc_logout.png?=v4")!important; background-size: 100%!important; width: 1.2rem!important; height: 1.2rem!important; background-repeat: no-repeat!important; } .account-menu-section .icon-voucher{ background: url("./img1822_ucucikiss/voucher_user.png?=v4")!important; background-size: 100%!important; width: 1.2rem!important; height: 1.2rem!important; background-repeat: no-repeat!important; } .mobile-wallet-section .collapse, .m-deposit-landing-container .collapse, .mobile-wallet-section .wallet-info .bottom-content{ background-image: linear-gradient(#f2ca7b, #d69024) !important; } .mobile-wallet-section .collapse p, .m-deposit-landing-container .collapse p{ color:#000!important; } .mobile-wallet-section .collapse svg, .m-deposit-landing-container .collapse svg{ fill:#000!important; } .mycredit-menu .icon-withdrawal, .mycredit-menu .icon-statement, .mycredit-menu .icon-history, .mycredit-menu .icon-wallets{ filter: brightness(0) invert(0) !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, #f2ca7b 10%, #f2ca7b 66%, #d69024 100%) !important; color: #000 !important; box-shadow: inset -1px 0px 8px #d69024 !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, #f2ca7b, #d69024) !important; border-color: #282828 !important; } .gamelobby-tab-content .tabs .tab{ background: linear-gradient(0deg, #f2ca7b, #d69024) !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; } .gamelobby-content .home_firmcontent_box .home_firmcontent .home_firms .home_firms_tr li a{ color:#f2ca7b!important; } .swiper{ width:74%!important; } .search-filter .button-style-1{ background: linear-gradient(to bottom, #f2ca7b 10%, #f2ca7b 66%, #d69024 100%) !important; color: #000 !important; box-shadow: inset -1px 0px 8px #d69024 !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, #f2ca7b, #d69024) !important; border-color: #282828 !important; } .gamelobby-tab-content .tabs .tab{ background: linear-gradient(0deg, #f2ca7b, #d69024) !important; } .gamelobby-tab-content .tabs .tab.selected{ background: linear-gradient(180deg, #444444, #444444) !important; } /* ========================================================= LUXURY PURPLE + GOLD FIXED FOOTER NAVIGATION Works with your existing HTML structure ========================================================= */ #footerMain { position: fixed !important; left: 50% !important; bottom: 8px !important; transform: translateX(-50%) !important; width: calc(100% - 24px) !important; max-width: 1250px !important; height: auto !important; padding: 4px !important; margin: 0 !important; z-index: 99999 !important; border: 2px solid #f6bf55 !important; border-radius: 18px !important; background: linear-gradient( 180deg, rgba(74, 22, 107, 0.98) 0%, rgba(35, 10, 62, 0.98) 48%, rgba(20, 6, 39, 0.99) 100% ) !important; box-shadow: 0 0 4px #fff2b3, 0 0 10px rgba(255, 194, 62, 0.9), 0 0 18px rgba(174, 53, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -3px 12px rgba(0,0,0,0.6) !important; overflow: visible !important; } /* Decorative inner gold line */ #footerMain::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255, 220, 130, 0.65); border-radius: 13px; pointer-events: none; } /* ========================================================= NAVBAR ========================================================= */ #footerMain .navbar { width: 100% !important; min-height: 96px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; display: flex !important; align-items: stretch !important; justify-content: space-between !important; position: relative; z-index: 2; } /* Individual menu */ #footerMain .navbar > li { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; position: relative !important; border-right: 1px solid rgba(244, 188, 74, 0.18); } #footerMain .navbar > li:last-child { border-right: 0; } /* ========================================================= LINK ========================================================= */ #footerMain .botnavbar { position: relative !important; width: 100% !important; height: 96px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 8px 4px 7px !important; margin: 0 !important; text-decoration: none !important; box-sizing: border-box !important; color: #efe8f5 !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 14px !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 5px rgba(255,255,255,0.12) !important; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important; } /* ========================================================= ICON CONTAINER ========================================================= */ #footerMain .botnavbar .i { width: 46px !important; height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= ICON Assumes your .icon classes are icon-font based ========================================================= */ #footerMain .botnavbar .icon { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 38px !important; line-height: 1 !important; color: #ffd769 !important; background: linear-gradient( 180deg, #fff8c9 0%, #ffe079 20%, #f3ba37 55%, #c37a12 100% ); background-size: 100%; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 #fff3aa) drop-shadow(0 2px 2px rgba(84, 36, 0, 0.7)) drop-shadow(0 0 5px rgba(255, 195, 64, 0.65)); transition: transform .2s ease, filter .2s ease !important; } /* ========================================================= LABEL ========================================================= */ #footerMain .botnavbar span { display: block !important; width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; text-align: center !important; text-transform: uppercase !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 18px !important; letter-spacing: -0.2px !important; color: #f5eef9 !important; text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 6px rgba(255,255,255,0.18) !important; } /* ========================================================= ACTIVE MENU Matches highlighted HOME look ========================================================= */ #footerMain .botnavbar.on { background: radial-gradient( circle at 50% 36%, rgba(255, 205, 84, 0.28) 0%, rgba(160, 63, 198, 0.28) 42%, rgba(50, 11, 76, 0.78) 100% ) !important; border: 2px solid #ffd46c !important; box-shadow: 0 0 4px #fff4b8, 0 0 10px rgba(255, 196, 56, 0.9), 0 0 18px rgba(195, 69, 255, 0.7), inset 0 0 12px rgba(255, 204, 84, 0.14) !important; transform: translateY(-1px); } /* Active icon */ #footerMain .botnavbar.on .icon { transform: scale(1.08) !important; filter: drop-shadow(0 1px 0 #fff7c5) drop-shadow(0 2px 2px rgba(83, 39, 0, 0.75)) drop-shadow(0 0 8px rgba(255, 213, 78, 0.95)) drop-shadow(0 0 13px rgba(196, 56, 255, 0.65)) !important; } /* Active text */ #footerMain .botnavbar.on span { color: #ffe88f !important; text-shadow: 0 1px 1px #4b2400, 0 0 5px rgba(255, 207, 77, 0.9), 0 0 10px rgba(255, 207, 77, 0.45) !important; } /* ========================================================= PURPLE GEM DECORATION BELOW EACH MENU ========================================================= */ #footerMain .navbar > li::after { content: ""; position: absolute !important; left: 50% !important; bottom: 1px !important; width: 11px !important; height: 11px !important; transform: translateX(-50%) rotate(45deg) !important; border: 1px solid #ffd86f !important; background: linear-gradient( 135deg, #f1b6ff 0%, #a942ed 25%, #6c1abb 55%, #dc7aff 100% ) !important; box-shadow: 0 0 3px #fff, 0 0 6px #dd6cff, 0 0 9px rgba(255, 211, 90, 0.8) !important; z-index: 8 !important; } /* Small horizontal ornament */ #footerMain .navbar > li::before { content: ""; position: absolute !important; left: 50% !important; bottom: 5px !important; width: 52% !important; max-width: 82px !important; height: 2px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, #9f55d7 15%, #d78aff 45%, #ffd577 50%, #d78aff 55%, #9f55d7 85%, transparent ) !important; box-shadow: 0 0 5px rgba(195, 92, 255, 0.8) !important; } /* ========================================================= HOVER / TOUCH ========================================================= */ #footerMain .botnavbar:hover { background: rgba(108, 33, 139, 0.25) !important; } #footerMain .botnavbar:hover .icon { transform: translateY(-2px) scale(1.05) !important; } /* ========================================================= OPTIONAL ICON-FONT FALLBACK If icon is not taking gold color ========================================================= */ #footerMain .icon::before { color: #ffd66b !important; text-shadow: 0 1px 0 #fff1a5, 0 2px 1px #9b5900, 0 0 5px rgba(255, 199, 61, 0.75) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { #footerMain { width: calc(100% - 8px) !important; bottom: 3px !important; padding: 2px !important; border-radius: 12px !important; } #footerMain .navbar { min-height: 70px !important; } #footerMain .botnavbar { height: 70px !important; padding: 5px 1px 6px !important; gap: 2px !important; border-radius: 9px !important; } #footerMain .botnavbar .i { width: 34px !important; height: 34px !important; } #footerMain .botnavbar .icon { font-size: 29px !important; } #footerMain .botnavbar span { font-size: 10px !important; line-height: 12px !important; letter-spacing: -0.3px !important; } #footerMain .navbar > li::after { width: 7px !important; height: 7px !important; bottom: 0px !important; } #footerMain .navbar > li::before { bottom: 3px !important; height: 1px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { #footerMain .navbar { min-height: 62px !important; } #footerMain .botnavbar { height: 62px !important; } #footerMain .botnavbar .i { width: 29px !important; height: 29px !important; } #footerMain .botnavbar .icon { font-size: 25px !important; } #footerMain .botnavbar span { font-size: 8.5px !important; line-height: 10px !important; } } .right-member { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* LOGIN */ .right-member .btn-login { display: block !important; width: 103px !important; height: 30px !important; padding: 0 !important; margin: 0 !important; background-image: url("./img1822_ucucikiss/login.png?=v4")!important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; border: 0 !important; border-radius: 0 !important; /* hide original Login text */ font-size: 0 !important; color: transparent !important; cursor: pointer; } /* JOIN NOW */ .right-member .btn-reg { display: block !important; width: 103px !important; height: 30px !important; padding: 0 !important; margin: 0 !important; background-image: url("./img1822_ucucikiss/joinnow.png?=v4")!important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; border: 0 !important; border-radius: 0 !important; /* hide original Join Now text */ font-size: 0 !important; color: transparent !important; cursor: pointer; } .right-member .btn-logout { display: block !important; width: 103px !important; height: 30px !important; padding: 0 !important; margin: 0 !important; background-image: url("./img1822_ucucikiss/logout.png?=v4")!important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; border: 0 !important; border-radius: 0 !important; /* hide original Join Now text */ font-size: 0 !important; color: transparent !important; cursor: pointer; } /* button interaction */ .right-member .btn-login:hover, .right-member .btn-reg:hover { filter: brightness(1.12); transform: translateY(-1px); } .right-member .btn-login:active, .right-member .btn-reg:active { transform: translateY(1px) scale(0.98); } /* mobile */ @media (max-width: 480px) { .right-member { gap: 4px; } .right-member .btn-login, .right-member .btn-reg { width: 119px !important; height: 44px !important; } } /* ========================================================= PROMOTION CARD - LUXURY PURPLE / GOLD THEME ========================================================= */ .promotions_item { position: relative; overflow: hidden; width: 100%; max-width: 570px; margin: 0 auto 18px; padding: 4px; border: 2px solid #f4bd4f; border-radius: 16px; background: linear-gradient( 145deg, #4b126f 0%, #26083e 45%, #12041f 100% ); box-shadow: 0 0 5px rgba(255,255,255,.25), 0 0 10px rgba(255,191,61,.7), 0 0 20px rgba(163,56,255,.45), inset 0 1px 0 rgba(255,255,255,.18); box-sizing: border-box; } /* subtle inner gold border */ .promotions_item::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,218,112,.45); border-radius: 11px; pointer-events: none; z-index: 5; } /* ========================================================= PROMO IMAGE ========================================================= */ .promotions_item .img { position: relative; overflow: hidden; width: 100%; border-radius: 11px 11px 5px 5px; background: #160420; } .promotions_item .img img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 10px 10px 4px 4px; } /* Purple / gold glow under image */ .promotions_item .img::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, #b943ff, #ffe18a, #b943ff, transparent ); box-shadow: 0 0 6px #e071ff, 0 0 10px rgba(255,211,92,.7); } /* ========================================================= BOTTOM CONTENT ========================================================= */ .promotions_item .promotitembottom { position: relative; padding: 14px 14px 15px; text-align: center; background: radial-gradient( circle at 50% 0%, rgba(154,56,215,.35) 0%, rgba(54,14,84,.7) 42%, rgba(18,4,31,.95) 100% ); border-radius: 0 0 11px 11px; } /* Main title */ .promotions_item .p1 { margin: 0 0 6px; font-size: 16px; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: #ffe28a; text-shadow: 0 1px 1px #4c2600, 0 0 5px rgba(255,211,84,.85), 0 0 10px rgba(175,61,255,.5); } /* Secondary description */ .promotions_item .p2 { margin: 0 0 14px; font-size: 12px; font-weight: 500; line-height: 1.45; color: #eee3f5; text-shadow: 0 1px 2px rgba(0,0,0,.9); } /* ========================================================= BUTTON CONTAINER ========================================================= */ .promotions_item .m-promotion-button-container { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; } /* ========================================================= COMMON BUTTON ========================================================= */ .promotions_item .btn-common { position: relative; min-width: 125px; height: 38px; padding: 0 18px; border: 1px solid #ffd56e; border-radius: 10px; font-size: 12px; font-weight: 800; letter-spacing: .3px; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } /* ========================================================= DETAILS BUTTON - PURPLE ========================================================= */ .promotions_item .btn-blue-promo { color: #fff6d5 !important; background: linear-gradient( 180deg, #a54ee4 0%, #7024ae 45%, #3c0d67 100% ) !important; border-color: #e2a9ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 5px rgba(212,118,255,.65), 0 0 10px rgba(116,32,179,.55) !important; text-shadow: 0 1px 2px rgba(0,0,0,.8); } /* ========================================================= APPLY NOW BUTTON - ATTRACTIVE GOLD / MAGENTA ========================================================= */ .promotions_item .btn-red-promo { color: #fff8d8 !important; background: linear-gradient( 180deg, #ff4ec7 0%, #d31589 42%, #7f0755 100% ) !important; border-color: #ffd768 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 5px rgba(255,209,87,.85), 0 0 12px rgba(255,60,196,.65) !important; text-shadow: 0 1px 2px rgba(70,0,35,.9); } /* ========================================================= BUTTON HOVER ========================================================= */ .promotions_item .btn-common:hover { transform: translateY(-2px); filter: brightness(1.12); } .promotions_item .btn-blue-promo:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 8px #d77bff, 0 0 15px rgba(185,67,255,.75) !important; } .promotions_item .btn-red-promo:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 8px #ffd65c, 0 0 16px rgba(255,55,185,.85) !important; } /* click effect */ .promotions_item .btn-common:active { transform: scale(.97); } /* ========================================================= OPTIONAL DIAMOND DECORATION ========================================================= */ .promotions_item .promotitembottom::before, .promotions_item .promotitembottom::after { content: ""; position: absolute; top: -7px; width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid #ffd566; background: linear-gradient( 135deg, #f0b5ff 0%, #b943ff 35%, #6720aa 70%, #e687ff 100% ); box-shadow: 0 0 4px #fff, 0 0 7px #c54aff; } .promotions_item .promotitembottom::before { left: 22px; } .promotions_item .promotitembottom::after { right: 22px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .promotions_item { border-radius: 13px; margin-bottom: 14px; } .promotions_item .promotitembottom { padding: 12px 10px 13px; } .promotions_item .p1 { font-size: 13px; } .promotions_item .p2 { font-size: 10px; margin-bottom: 11px; } .promotions_item .m-promotion-button-container { gap: 7px; } .promotions_item .btn-common { flex: 1; min-width: 0; height: 34px; padding: 0 8px; font-size: 10px; } } #promotionsPage .history_content .history_list .history_list_item .promotions_item { background-image: linear-gradient(#360e54, #360e54) !important; } /* ========================================================= PROMOTION DETAIL PURPLE + GOLD + DIAMOND THEME ========================================================= */ .promodetailContent { width: 100%; max-width: 700px; margin: 0 auto; padding: 12px; box-sizing: border-box; } /* ========================================================= PROMOTION BANNER ========================================================= */ .promodetail_banner { position: relative; overflow: hidden; padding: 4px; margin-bottom: 12px; border: 2px solid #f4c85e; border-radius: 16px; background: linear-gradient( 135deg, #9c38d8, #401064 45%, #190527 ); box-shadow: 0 0 5px rgba(255,255,255,.3), 0 0 12px rgba(255,199,65,.65), 0 0 22px rgba(174,62,255,.45); } .promodetail_banner::before { content: ""; position: absolute; inset: 4px; z-index: 2; pointer-events: none; border: 1px solid rgba(255,226,145,.55); border-radius: 11px; } .promodetail_banner .slider { overflow: hidden; border-radius: 11px; } #promodetail-img { display: block; width: 100%; height: auto; border-radius: 10px; } /* ========================================================= MAIN DETAIL BOX ========================================================= */ .promodetail_textbox { position: relative; padding: 16px; border: 2px solid #eabc51; border-radius: 18px; background: radial-gradient( circle at 50% 0%, rgba(129,38,181,.35), transparent 40% ), linear-gradient( 180deg, #3f105c 0%, #25083d 38%, #160426 100% ); box-shadow: 0 0 6px rgba(255,230,160,.3), 0 0 14px rgba(239,188,62,.55), 0 0 26px rgba(162,45,240,.38), inset 0 1px 0 rgba(255,255,255,.18); box-sizing: border-box; } /* inner border */ .promodetail_textbox::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,220,120,.35); border-radius: 13px; pointer-events: none; } /* ========================================================= MAIN TITLE ========================================================= */ .promodetail_textbox .promosection { position: relative; z-index: 2; text-align: center; } .promodetail_textbox .p_title { margin: 0 0 10px !important; padding: 10px 14px !important; border: 1px solid #ffd66d !important; border-radius: 10px !important; background: linear-gradient( 180deg, #9b48db 0%, #6820a5 45%, #36105a 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 8px rgba(210,103,255,.55), 0 0 12px rgba(255,203,75,.3) !important; } .promodetail_textbox .p_title span { color: #ffe28a !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: .6px !important; text-transform: uppercase !important; text-shadow: 0 1px 1px #4a2200, 0 0 5px rgba(255,210,79,.9) !important; } /* description */ #promo-description { color: #eee5f6 !important; font-size: 12px !important; font-weight: 500 !important; text-shadow: 0 1px 2px rgba(0,0,0,.9) !important; } /* Remove default OL spacing */ .promodetail_textbox .promosection ol { margin: 8px 0 12px !important; padding: 0 !important; } /* ========================================================= CONTENT DIV WRAPPER ========================================================= */ #contentDiv { position: relative; z-index: 2; padding: 0 0 20px !important; } /* This overrides your inline black/gold box */ #contentDiv > div { padding: 20px !important; max-width: 650px !important; margin: 18px auto !important; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important; background: radial-gradient( circle at 50% 0%, rgba(149,49,207,.28), transparent 35% ), linear-gradient( 180deg, #35104f 0%, #210735 45%, #11031e 100% ) !important; border: 1px solid rgba(244,196,79,.72) !important; border-radius: 16px !important; color: #eee7f3 !important; box-shadow: 0 0 12px rgba(179,67,255,.35), 0 0 15px rgba(240,190,65,.2), inset 0 0 14px rgba(186,64,247,.15) !important; } /* ========================================================= HEADINGS ========================================================= */ #contentDiv h2 { color: #ffe082 !important; font-size: 15px !important; letter-spacing: 1px !important; margin: 0 0 14px !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 0 5px rgba(255,213,91,.85), 0 0 10px rgba(195,72,255,.45) !important; } #contentDiv h3 { color: #fff1b4 !important; font-size: 14px !important; text-shadow: 0 0 5px rgba(255,214,95,.55) !important; } /* ========================================================= PARAGRAPHS ========================================================= */ #contentDiv p { color: #eee6f2 !important; line-height: 1.75 !important; text-shadow: 0 1px 2px rgba(0,0,0,.8) !important; } /* Yellow inline values */ #contentDiv span[style*="241, 196, 15"], #contentDiv span[style*="#f6d777"], #contentDiv font[color="#f6d777"] { color: #ffe071 !important; text-shadow: 0 0 5px rgba(255,208,74,.6) !important; } /* numbered points */ #contentDiv span[style*="212, 175, 55"] { color: #e3a7ff !important; text-shadow: 0 0 5px rgba(196,79,255,.7) !important; } /* ========================================================= DIVIDER ========================================================= */ #contentDiv hr { border: 0 !important; height: 1px !important; margin: 18px 0 !important; background: linear-gradient( 90deg, transparent, #a73fe1, #ffd86f, #a73fe1, transparent ) !important; box-shadow: 0 0 5px rgba(198,85,255,.55) !important; } /* ========================================================= TERMS & CONDITIONS TITLE ========================================================= */ #contentDiv p span[style*="#e74c3c"] { color: #ff68d0 !important; text-shadow: 0 0 6px rgba(255,70,203,.65) !important; } /* ========================================================= GREEN CHECK ========================================================= */ #contentDiv span[style*="#6dffbf"] { color: #74ffd0 !important; text-shadow: 0 0 5px rgba(72,255,194,.55) !important; } /* ========================================================= WARNING TEXT ========================================================= */ #contentDiv span[style*="#e74c3c"] strong { color: #ff74b7 !important; text-shadow: 0 0 6px rgba(255,61,161,.55) !important; } /* ========================================================= GENERAL TERMS BOX overrides inline style ========================================================= */ #contentDiv > div > div { margin-top: 18px !important; padding: 14px !important; color: #eee5f2 !important; background: linear-gradient( 180deg, rgba(85,20,119,.9), rgba(33,7,50,.95) ) !important; border: 1px solid rgba(220,134,255,.55) !important; border-radius: 12px !important; box-shadow: inset 0 0 12px rgba(206,75,255,.14), 0 0 8px rgba(163,49,217,.25) !important; text-align: center !important; } /* ========================================================= COPYRIGHT ========================================================= */ #contentDiv > div > p:last-child { color: #bb9ec9 !important; font-size: 9.5px !important; margin-top: 12px !important; } #contentDiv > div > p:last-child span { color: #ffe079 !important; } /* ========================================================= APPLY NOW AREA ========================================================= */ .promodetail_textbox > .m-promotion-button-container { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; margin: 10px 0 4px; } /* Apply button */ .promodetail_textbox .btn-red-promo { min-width: 180px !important; height: 42px !important; padding: 0 25px !important; border: 2px solid #ffd86c !important; border-radius: 12px !important; color: #fff6d8 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .5px !important; background: linear-gradient( 180deg, #ff5acb 0%, #db168d 42%, #7e0756 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 7px rgba(255,213,85,.8), 0 0 16px rgba(255,62,196,.6) !important; text-shadow: 0 1px 2px rgba(65,0,38,.9) !important; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important; } .promodetail_textbox .btn-red-promo:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 9px #ffd563, 0 0 20px rgba(255,52,192,.85) !important; } .promodetail_textbox .btn-red-promo:active { transform: scale(.97); } /* ========================================================= DECORATIVE DIAMONDS ========================================================= */ .promodetail_textbox::after { content: ""; position: absolute; top: -8px; left: 50%; width: 15px; height: 15px; transform: translateX(-50%) rotate(45deg); border: 1px solid #ffd86e; background: linear-gradient( 135deg, #f1b6ff, #b44af0 35%, #6517a0 68%, #dc82ff ); box-shadow: 0 0 4px #fff, 0 0 8px rgba(195,77,255,.95), 0 0 12px rgba(255,207,77,.55); z-index: 4; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .promodetailContent { padding: 0px; } .promodetail_textbox { padding: 10px; border-radius: 14px; } .promodetail_textbox .p_title { padding: 8px 7px !important; } .promodetail_textbox .p_title span { font-size: 13px !important; } #promo-description { font-size: 10px !important; } #contentDiv > div { padding: 14px !important; margin: 12px auto !important; border-radius: 13px !important; } #contentDiv h2 { font-size: 13px !important; } #contentDiv h3 { font-size: 12px !important; } #contentDiv p { font-size: 10.5px !important; } #contentDiv > div > div { padding: 10px !important; font-size: 9.5px !important; } .promodetail_textbox .btn-red-promo { width: 100% !important; max-width: 240px !important; height: 38px !important; font-size: 11px !important; } } /* ========================================================= LOGIN PAGE - LUXURY PURPLE / GOLD / DIAMOND THEME ========================================================= */ #loginPage.theme2 { width: calc(100% - 24px); max-width: 430px; margin: 24px auto; padding: 22px 18px 24px; position: relative; box-sizing: border-box; border: 2px solid #f5c75d; border-radius: 20px; background: radial-gradient( circle at 50% 0%, rgba(182, 68, 255, 0.34), transparent 36% ), linear-gradient( 180deg, #431264 0%, #25083c 42%, #12041f 100% ); box-shadow: 0 0 5px rgba(255,255,255,.25), 0 0 12px rgba(255,198,66,.65), 0 0 26px rgba(168,53,255,.5), inset 0 1px 0 rgba(255,255,255,.2); } /* inner gold border */ #loginPage.theme2::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,221,120,.45); border-radius: 15px; pointer-events: none; } /* top diamond decoration */ #loginPage.theme2::after { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); border: 1px solid #ffd76b; background: linear-gradient( 135deg, #f4c8ff, #bd4dff 35%, #7219ba 70%, #e68cff ); box-shadow: 0 0 4px #fff, 0 0 8px #ce64ff, 0 0 12px rgba(255,207,77,.6); z-index: 5; } /* ========================================================= LOGO ========================================================= */ #loginPage .logo_big { position: relative; z-index: 2; text-align: center; margin: 0 auto 10px; } #loginPage .logo_big img { width: 78% !important; max-width: 280px !important; border-radius: 10px; filter: drop-shadow(0 0 5px rgba(255,205,79,.5)) drop-shadow(0 0 9px rgba(187,68,255,.45)); } /* ========================================================= LOGIN TITLE ========================================================= */ #loginPage > .title { position: relative; z-index: 2; text-align: center; margin: 4px 0 18px; } #loginPage > .title span { color: #ffe082 !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-shadow: 0 1px 1px #4f2700, 0 0 5px rgba(255,211,87,.9), 0 0 10px rgba(183,63,255,.45) !important; } /* ========================================================= LOGIN CONTENT ========================================================= */ #loginPage .login_centent { position: relative; z-index: 2; width: 100%; } /* ========================================================= INPUT ROW ========================================================= */ #loginPage .login_centent_item.input_item { width: 100%; height: 48px; display: flex; align-items: center; margin-bottom: 12px; overflow: hidden; border: 1px solid rgba(255,210,103,.75); border-radius: 12px; background: linear-gradient( 180deg, rgba(71,20,102,.95), rgba(30,7,50,.97) ); box-shadow: inset 0 0 9px rgba(176,62,235,.18), 0 0 7px rgba(255,198,72,.18); transition: border-color .2s ease, box-shadow .2s ease; } /* focus glow */ #loginPage .login_centent_item.input_item:focus-within { border-color: #df8cff; box-shadow: 0 0 7px rgba(218,112,255,.7), 0 0 12px rgba(255,203,76,.3), inset 0 0 9px rgba(193,68,255,.18); } /* ========================================================= ICON SIDE ========================================================= */ #loginPage .login_centent_item.input_item > label { width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,213,112,.28); background: linear-gradient( 180deg, rgba(132,45,183,.5), rgba(59,15,89,.55) ); } #loginPage .login_centent_item .icons { font-size: 22px !important; color: #ffd76b !important; text-shadow: 0 0 5px rgba(255,205,82,.7), 0 0 8px rgba(191,70,255,.45); } /* ========================================================= INPUT FIELD ========================================================= */ #loginPage .standard-form-field-wrapper { flex: 1; height: 100%; position: relative; } #loginPage .standard-input { width: 100% !important; height: 100% !important; padding: 0 14px !important; border: 0 !important; outline: none !important; background: transparent !important; color: #fff5d7 !important; font-size: 14px !important; font-weight: 500; box-sizing: border-box; } #loginPage .standard-input::placeholder { color: rgba(238,221,244,.68) !important; } /* password field right spacing */ #loginPage .password-field .standard-input { padding-right: 42px !important; } /* ========================================================= PASSWORD EYE ========================================================= */ #loginPage .standard-password-eye { position: absolute; right: 13px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); cursor: pointer; fill: #dca0ff !important; filter: drop-shadow(0 0 3px rgba(206,99,255,.6)); } /* ========================================================= REMEMBER ME ========================================================= */ #loginPage .rememberme-formgroup { position: relative; z-index: 2; display: flex; align-items: center; margin: 4px 0 16px; color: #ddd0e6; } #loginPage .rememberme-formgroup > div:first-child { width: 0 !important; } #loginPage #rememberMe { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0 8px 0 2px; border: 1px solid #d891ff; border-radius: 4px; background: #230735; cursor: pointer; box-shadow: inset 0 0 4px rgba(171,61,230,.3); } #loginPage #rememberMe:checked { background: linear-gradient( 135deg, #cf62ff, #7b20bd ); border-color: #ffd667; box-shadow: 0 0 5px rgba(201,93,255,.75); } #loginPage #rememberMe:checked::after { content: "✓"; display: block; color: #ffe891; font-size: 13px; font-weight: bold; line-height: 15px; text-align: center; } #loginPage .remember-me { color: #e7dced !important; font-size: 12px; } /* ========================================================= LOGIN BUTTON ========================================================= */ #loginPage .login_btn { position: relative; z-index: 2; width: 100%; margin: 4px 0 15px; } #loginPage .login_btn .btn-blue { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 !important; border: 2px solid #ffd970 !important; border-radius: 12px !important; color: #fff6d4 !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .8px !important; background: linear-gradient( 180deg, #b452ed 0%, #7624b6 46%, #3a0d60 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 6px rgba(255,211,87,.75), 0 0 15px rgba(188,61,255,.65) !important; text-shadow: 0 1px 2px rgba(41,0,59,.9) !important; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } #loginPage .login_btn .btn-blue:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 8px #ffd96c, 0 0 19px rgba(201,73,255,.85) !important; } #loginPage .login_btn .btn-blue:active { transform: scale(.98); } /* ========================================================= FORGOT PASSWORD ========================================================= */ #loginPage .login_forgetpsd { text-align: center; margin-top: 2px !important; } #loginPage .login_forgetpsd a, #loginPage a.login_forgetpsd { color: #d998ff !important; font-size: 12px !important; font-weight: 600; text-decoration: none !important; text-shadow: 0 0 4px rgba(187,75,255,.55); transition: color .2s ease; } #loginPage .login_forgetpsd a:hover, #loginPage a.login_forgetpsd:hover { color: #ffe17e !important; } /* ========================================================= REGISTER AREA ========================================================= */ #loginPage .login_toreg { position: relative; z-index: 2; margin-top: 18px; padding-top: 14px; text-align: center; color: #d8c9e0 !important; font-size: 12px; border-top: 1px solid rgba(213,131,255,.28); } #loginPage .login_toreg::before { content: ""; position: absolute; top: -1px; left: 50%; width: 65%; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, #ae45eb, #ffd56e, #ae45eb, transparent ); } #loginPage .m-register-link { color: #ffe17d !important; font-weight: 800 !important; text-decoration: none !important; text-shadow: 0 0 5px rgba(255,204,73,.65); cursor: pointer; } /* ========================================================= LOGIN ERROR ========================================================= */ #loginPage #loginErr { height: auto !important; padding: 10px 12px !important; margin-bottom: 12px !important; border: 1px solid rgba(255,83,136,.65) !important; border-radius: 9px !important; background: linear-gradient( 180deg, rgba(132,17,65,.5), rgba(71,8,37,.55) ) !important; box-shadow: 0 0 8px rgba(255,52,124,.25); } #loginPage #loginErr > div { color: #ff90ba !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { #loginPage.theme2 { width: calc(100% - 16px); margin: 12px auto; padding: 18px 13px 20px; border-radius: 16px; } #loginPage .logo_big img { width: 72% !important; } #loginPage > .title span { font-size: 17px !important; } #loginPage .login_centent_item.input_item { height: 44px; } #loginPage .login_centent_item.input_item > label { width: 44px; height: 44px; flex-basis: 44px; } #loginPage .standard-input { font-size: 13px !important; } #loginPage .login_btn .btn-blue { height: 41px; font-size: 13px !important; } } /* ========================================================= DAILY CHECK-IN LUXURY PURPLE + GOLD + DIAMOND THEME ========================================================= */ .daily-checkin-content { position: relative; width: calc(100% - 20px); max-width: 720px; margin: 18px auto; padding: 18px 14px 20px; box-sizing: border-box; border: 2px solid #f3c763; border-radius: 18px; background: radial-gradient( circle at 50% 0%, rgba(183, 71, 255, .35), transparent 36% ), linear-gradient( 180deg, #431263 0%, #280840 42%, #13051f 100% ); box-shadow: 0 0 5px rgba(255,255,255,.25), 0 0 12px rgba(255,197,67,.6), 0 0 24px rgba(173,57,255,.45), inset 0 1px 0 rgba(255,255,255,.18); overflow: hidden; } /* inner gold line */ .daily-checkin-content::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,220,123,.4); border-radius: 13px; pointer-events: none; } /* top diamond */ .daily-checkin-content::after { content: ""; position: absolute; top: -8px; left: 50%; width: 15px; height: 15px; transform: translateX(-50%) rotate(45deg); border: 1px solid #ffd76b; background: linear-gradient( 135deg, #f0c4ff 0%, #c04aff 35%, #6d1aae 70%, #dd7eff 100% ); box-shadow: 0 0 4px #fff, 0 0 7px #cb5aff, 0 0 12px rgba(255,210,83,.55); } /* ========================================================= TITLE ========================================================= */ .daily-checkin-content-titlewrap { position: relative; z-index: 2; text-align: center; margin: 0 0 14px; } .daily-checkin-content-title { margin: 0 !important; color: #f4edf8 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(201,91,255,.35); } /* make the 7 gold instead of red */ .daily-checkin-content-title .red-color { color: #ffe07d !important; font-size: 18px; font-weight: 900; text-shadow: 0 0 5px rgba(255,213,82,.9), 0 0 9px rgba(189,63,255,.55); } /* decorative line */ .daily-checkin-content-titlewrap::after { content: ""; display: block; width: 160px; height: 1px; margin: 9px auto 0; background: linear-gradient( 90deg, transparent, #ae48ef, #ffd86d, #ae48ef, transparent ); box-shadow: 0 0 5px rgba(196,76,255,.65); } /* ========================================================= COLLECT BUTTON ========================================================= */ .daily-checkin-content-button-activeRed { position: relative; z-index: 3; width: 145px !important; height: 38px !important; margin: 0 auto 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 2px solid #ffd76d !important; border-radius: 11px !important; color: #fff5d3 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .6px; text-transform: uppercase; background: linear-gradient( 180deg, #ff58cc 0%, #d71891 45%, #7a0754 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 6px rgba(255,211,87,.8), 0 0 15px rgba(255,64,197,.65) !important; text-shadow: 0 1px 2px rgba(73,0,37,.9); cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } .daily-checkin-content-button-activeRed:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 9px #ffd56e, 0 0 20px rgba(255,59,198,.85) !important; } /* ========================================================= PROGRESS AREA ========================================================= */ .daily-checkin-progress { position: relative; z-index: 2; padding: 12px 4px 4px; } /* horizontal progress line */ .daily-checkin-progress-line { position: absolute; left: 6%; right: 6%; top: 39px; height: 3px; border-radius: 3px; background: linear-gradient( 90deg, #ffd769 0%, #c24eff 50%, #ffd769 100% ) !important; box-shadow: 0 0 6px rgba(255,209,91,.5), 0 0 9px rgba(192,67,255,.5); opacity: .7; } /* ========================================================= DAYS WRAPPER ========================================================= */ .daily-checkin-progress-wrap { position: relative; z-index: 3; width: 100%; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 6px; } /* ========================================================= EACH DAY ========================================================= */ .daily-checkin-progress-day { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } /* overwrite those inline vw wrappers */ .daily-checkin-progress-day > div:first-child { position: relative !important; width: 58px !important; height: 58px !important; padding: 4px; box-sizing: border-box; border: 1px solid #e5aeff; border-radius: 50%; background: radial-gradient( circle, rgba(128,38,171,.85), rgba(42,9,64,.95) ); box-shadow: 0 0 5px rgba(213,122,255,.6), 0 0 8px rgba(255,211,80,.3), inset 0 0 8px rgba(255,255,255,.08); } /* ========================================================= DAY ICONS ========================================================= */ .daily-checkin-progress-day img { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 100% !important; object-fit: contain !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)) drop-shadow(0 0 4px rgba(211,108,255,.35)); } /* Day 1 / active */ .daily-checkin-progress-day:first-child > div:first-child { border: 2px solid #ffd86d; background: radial-gradient( circle, rgba(201,85,255,.8), rgba(73,17,107,.95) ); box-shadow: 0 0 6px #ffd96b, 0 0 13px rgba(202,82,255,.75), inset 0 0 8px rgba(255,221,116,.18); } /* ========================================================= DAY TEXT ========================================================= */ .daily-checkin-progress-day-text { margin: 7px 0 5px !important; color: #eee3f4 !important; font-size: 11px !important; font-weight: 700 !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0,0,0,.9); } /* future days slightly muted */ .daily-checkin-progress-day:not(:first-child) .daily-checkin-progress-day-text { color: #c9b6d5 !important; opacity: .7 !important; } /* active day */ .daily-checkin-progress-day:first-child .daily-checkin-progress-day-text { color: #ffe489 !important; text-shadow: 0 0 5px rgba(255,211,79,.65); } /* ========================================================= COIN / REWARD BADGE ========================================================= */ .daily-checkin-progress-day-coinbg { min-width: 50px !important; height: 22px !important; padding: 0 7px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #daa2ff !important; border-radius: 20px !important; background: linear-gradient( 180deg, #8a34c3 0%, #4a176e 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 5px rgba(196,78,255,.4); box-sizing: border-box; } /* override inline silver */ .daily-checkin-progress-day .daily-checkin-progress-day-coinbg[style] { background: linear-gradient( 180deg, #6a3a79 0%, #37203f 100% ) !important; } /* active reward */ .daily-checkin-progress-day:first-child .daily-checkin-progress-day-coinbg { border-color: #ffd468 !important; background: linear-gradient( 180deg, #ffd96d 0%, #d89c23 55%, #a6620e 100% ) !important; box-shadow: 0 0 6px rgba(255,207,70,.75), inset 0 1px 0 rgba(255,255,255,.5); } /* reward value */ .daily-checkin-progress-day-coin { margin: 0 !important; padding: 0 !important; font-size: 10px !important; font-weight: 800 !important; line-height: 20px !important; color: #f6e9fb !important; white-space: nowrap; } /* active amount */ .daily-checkin-progress-day:first-child .daily-checkin-progress-day-coin { color: #3b1b00 !important; text-shadow: 0 1px 0 rgba(255,255,255,.45); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .daily-checkin-content { width: calc(100% - 12px); margin: 10px auto; padding: 15px 8px 16px; border-radius: 15px; } .daily-checkin-content-title { font-size: 12px !important; } .daily-checkin-content-title .red-color { font-size: 15px; } .daily-checkin-content-button-activeRed { width: 125px !important; height: 34px !important; font-size: 11px !important; margin-bottom: 15px !important; } .daily-checkin-progress { padding-left: 0; padding-right: 0; } .daily-checkin-progress-wrap { gap: 2px; } .daily-checkin-progress-day > div:first-child { width: 44px !important; height: 44px !important; padding: 3px; } .daily-checkin-progress-line { top: 31px; } .daily-checkin-progress-day-text { font-size: 9px !important; margin: 5px 0 4px !important; } .daily-checkin-progress-day-coinbg { min-width: 38px !important; height: 18px !important; padding: 0 4px !important; } .daily-checkin-progress-day-coin { font-size: 8px !important; line-height: 16px !important; } } /* ========================================================= VERY SMALL SCREEN ========================================================= */ @media (max-width: 380px) { .daily-checkin-progress-day > div:first-child { width: 38px !important; height: 38px !important; } .daily-checkin-progress-line { top: 28px; } .daily-checkin-progress-day-coinbg { min-width: 34px !important; padding: 0 3px !important; } .daily-checkin-progress-day-coin { font-size: 7px !important; } } .daily-checkin-content-title{ max-width: 80.93333vw!important; } /* ========================================================= REGISTRATION PAGE LUXURY PURPLE + GOLD + DIAMOND THEME ========================================================= */ #registrationPage { width: calc(100% - 20px); max-width: 460px; margin: 18px auto 30px; padding: 20px 16px 24px; position: relative; box-sizing: border-box; border: 2px solid #f4c75f; border-radius: 20px; background: radial-gradient( circle at 50% 0%, rgba(184, 68, 255, .32), transparent 34% ), linear-gradient( 180deg, #421261 0%, #26083d 45%, #12041f 100% ); box-shadow: 0 0 5px rgba(255,255,255,.25), 0 0 12px rgba(255,198,64,.65), 0 0 26px rgba(173,56,255,.48), inset 0 1px 0 rgba(255,255,255,.18); } /* inner border */ #registrationPage::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,220,120,.38); border-radius: 15px; pointer-events: none; } /* top diamond */ #registrationPage::after { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); border: 1px solid #ffd66d; background: linear-gradient( 135deg, #f5c8ff, #be4eff 35%, #711ab4 70%, #e78bff ); box-shadow: 0 0 4px #fff, 0 0 8px #cc5cff, 0 0 13px rgba(255,210,78,.6); z-index: 10; } /* ========================================================= MAIN TITLE ========================================================= */ #registrationPage .form-title { position: relative; z-index: 2; margin: 2px 0 18px !important; text-align: center; color: #ffe07d !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: .7px; text-transform: uppercase; text-shadow: 0 1px 1px #492100, 0 0 5px rgba(255,211,77,.85), 0 0 10px rgba(189,68,255,.45); } /* ========================================================= PROGRESS BAR ========================================================= */ #registrationPage .reg-progress-bar-section { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 24px; } /* number circles */ #registrationPage .step-wrapper { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border: 2px solid #9c58bb; border-radius: 50%; color: #cbb8d5; font-size: 13px; font-weight: 800; background: linear-gradient( 180deg, #422052, #1e0c29 ); box-shadow: inset 0 0 6px rgba(255,255,255,.05); } /* current / completed */ #registrationPage .step-wrapper.on, #registrationPage .step-wrapper.current-step { color: #3c1a00; border-color: #ffd869; background: linear-gradient( 180deg, #ffe78b 0%, #f5c44b 48%, #c77b11 100% ); box-shadow: 0 0 6px rgba(255,211,76,.85), 0 0 10px rgba(195,69,255,.45), inset 0 1px 0 rgba(255,255,255,.55); } /* checkmark circle */ #registrationPage .step-wrapper svg { width: 16px !important; height: 16px !important; } #registrationPage .step-wrapper svg path { fill: #ceb6d9 !important; } #registrationPage .step-wrapper.on svg path { fill: #3b1700 !important; } /* connecting lines */ #registrationPage .progressBar { width: 70px; height: 3px; flex: 0 1 70px; background: linear-gradient( 90deg, #a64fe1, #ffd766, #a64fe1 ); box-shadow: 0 0 5px rgba(190,73,255,.55); } /* ========================================================= FORM SECTIONS ========================================================= */ #registrationPage .reg-form-section { position: relative; z-index: 2; width: 100%; } /* each field */ #registrationPage .register-input-container { width: 100%; margin-bottom: 14px; } /* ========================================================= LABELS ========================================================= */ #registrationPage .standard-label { display: block; margin: 0 0 6px; color: #efd9fa !important; font-size: 12px !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(0,0,0,.8); } /* ========================================================= FORM FIELDS ========================================================= */ #registrationPage .standard-form-field { width: 100%; } #registrationPage .standard-form-field-wrapper { position: relative; width: 100%; height: 44px; box-sizing: border-box; border: 1px solid rgba(255,210,101,.65); border-radius: 10px; background: linear-gradient( 180deg, rgba(69,19,98,.96), rgba(28,7,46,.98) ); box-shadow: inset 0 0 8px rgba(173,58,233,.15), 0 0 5px rgba(255,204,78,.12); transition: border-color .2s ease, box-shadow .2s ease; } /* focus */ #registrationPage .standard-form-field-wrapper:focus-within { border-color: #dc8bff; box-shadow: 0 0 6px rgba(211,105,255,.65), 0 0 11px rgba(255,205,82,.22), inset 0 0 8px rgba(190,64,255,.18); } /* ========================================================= INPUTS ========================================================= */ #registrationPage .standard-input { width: 100% !important; height: 44px !important; padding: 0 13px !important; border: 0 !important; outline: none !important; box-sizing: border-box; background: transparent !important; color: #fff4d5 !important; font-size: 13px !important; font-weight: 500 !important; } #registrationPage .standard-input::placeholder { color: rgba(235,215,243,.62) !important; } /* password */ #registrationPage .password-field .standard-input { padding-right: 42px !important; } /* eye */ #registrationPage .standard-password-eye { position: absolute; top: 50%; right: 12px; width: 19px; height: 19px; transform: translateY(-50%); fill: #d797fb !important; cursor: pointer; filter: drop-shadow(0 0 3px rgba(199,82,255,.5)); } /* ========================================================= ERRORS ========================================================= */ #registrationPage .standard-error-validation { margin: 5px 3px 0 !important; color: #ff82b8 !important; font-size: 10px !important; line-height: 1.35; text-shadow: 0 0 4px rgba(255,57,144,.3); } /* ========================================================= AFFILIATE FIELD ========================================================= */ #registrationPage .affiliateid .standard-form-field { padding: 9px 10px 10px; box-sizing: border-box; border: 1px solid rgba(198,113,237,.35); border-radius: 10px; background: linear-gradient( 180deg, rgba(87,28,118,.35), rgba(36,9,54,.35) ); } /* ========================================================= SELECT / DROPDOWN ========================================================= */ #registrationPage .standard-select { min-height: 42px; display: flex; align-items: center; position: relative; padding: 0 32px 0 12px; box-sizing: border-box; border: 1px solid rgba(255,210,101,.65); border-radius: 9px; color: #fff0ce !important; font-size: 12px; background: linear-gradient( 180deg, #481566, #25083b ); box-shadow: inset 0 0 7px rgba(175,64,233,.13); cursor: pointer; } /* arrow */ #registrationPage .standard-select-arrow { position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; transform: translateY(-65%) rotate(45deg); border-right: 2px solid #ffd66d; border-bottom: 2px solid #ffd66d; } /* dropdown */ #registrationPage .standard-select-dropdown { z-index: 999; border: 1px solid #c26df0 !important; border-radius: 9px !important; background: #240738 !important; box-shadow: 0 4px 14px rgba(0,0,0,.6), 0 0 8px rgba(188,71,255,.35) !important; overflow: hidden; } /* dropdown options */ #registrationPage .standard-select-options { padding: 9px 12px !important; color: #e9dff0 !important; font-size: 11px; background: #26083b !important; border-bottom: 1px solid rgba(198,109,240,.12) !important; } #registrationPage .standard-select-options:hover, #registrationPage .standard-select-options.active { color: #fff2b0 !important; background: linear-gradient( 90deg, #7130a0, #4b176b ) !important; } /* ========================================================= PHONE FIELD ========================================================= */ #registrationPage .phone-field { display: flex; align-items: center; gap: 7px; } #registrationPage .phone-field .standard-select { width: 90px !important; flex: 0 0 90px; } #registrationPage .phone-field .standard-form-field-wrapper { flex: 1; } /* ========================================================= DATE OF BIRTH ========================================================= */ #registrationPage .dob-field { display: flex; align-items: center; gap: 7px; } #registrationPage .dob-field .standard-select { flex: 1; min-width: 0; } /* ========================================================= BANK ========================================================= */ #registrationPage .bankid-3835, #registrationPage [class*="bankid-"] { color: #fff3d5; } /* ========================================================= CAPTCHA ========================================================= */ #registrationPage .dob-field > .standard-input { flex: 1; border: 1px solid rgba(255,210,101,.65) !important; border-radius: 9px !important; background: linear-gradient( 180deg, #451362, #230737 ) !important; } #registrationPage .dob-field img { height: 42px !important; flex: 0 0 45%; object-fit: cover; border: 1px solid #d295ef; border-radius: 8px !important; box-shadow: 0 0 5px rgba(191,75,255,.35); } /* ========================================================= BUTTON SECTION ========================================================= */ #registrationPage .transaction-button-section { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* main button wrapper */ #registrationPage .standard-button-container { flex: 1; } /* NEXT + REGISTER */ #registrationPage .next-button, #registrationPage .regsub-button { width: 100% !important; height: 42px !important; display: flex; align-items: center; justify-content: center; padding: 0 !important; border: 2px solid #ffd76e !important; border-radius: 11px !important; color: #fff6d5 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .5px; text-transform: uppercase; background: linear-gradient( 180deg, #ff58ca 0%, #d6168c 44%, #7a0753 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 6px rgba(255,209,78,.75), 0 0 14px rgba(255,61,193,.55) !important; text-shadow: 0 1px 2px rgba(69,0,37,.9); cursor: pointer; } /* disabled */ #registrationPage .next-button:disabled { opacity: .45 !important; filter: grayscale(.2); cursor: not-allowed; } /* hover */ #registrationPage .next-button:not(:disabled):hover, #registrationPage .regsub-button:hover { transform: translateY(-1px); filter: brightness(1.12); } /* ========================================================= BACK BUTTON ========================================================= */ #registrationPage .back-button { width: 42px !important; height: 42px !important; flex: 0 0 42px; border: 1px solid #d48cf4 !important; border-radius: 10px !important; background: linear-gradient( 180deg, #6f2d96, #3b1251 ) !important; box-shadow: 0 0 6px rgba(193,77,255,.35) !important; } #registrationPage .back-button svg path { fill: #ffe17c !important; } /* ========================================================= NOTICE ========================================================= */ #registrationPage .reg-notice-section { position: relative; z-index: 1; margin-top: 14px; padding: 12px; border: 1px solid rgba(197,108,235,.28); border-radius: 9px; color: #cdbfd4 !important; font-size: 9.5px !important; line-height: 1.5; text-align: center; background: linear-gradient( 180deg, rgba(70,20,96,.38), rgba(32,8,46,.38) ); } #registrationPage .reg-notice-section .text-info { color: #ffe17b !important; font-weight: 700; text-decoration: none; } /* ========================================================= ALREADY HAVE ACCOUNT ========================================================= */ #registrationPage .prompt-login-section { position: relative; z-index: 1; margin-top: 14px; padding-top: 13px; text-align: center; color: #ddcfE4 !important; font-size: 11px; border-top: 1px solid rgba(205,112,247,.25); } #registrationPage .prompt-login-section::before { content: ""; position: absolute; top: -1px; left: 50%; width: 65%; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, #b14aec, #ffd66b, #b14aec, transparent ); } #registrationPage .prompt-login-section a { margin-left: 3px; color: #ffe17b !important; font-weight: 800; text-decoration: none; text-shadow: 0 0 5px rgba(255,205,72,.55); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { #registrationPage { width: calc(100% - 12px); margin: 10px auto 20px; padding: 16px 12px 20px; border-radius: 16px; } #registrationPage .form-title { font-size: 15px !important; } #registrationPage .step-wrapper { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; } #registrationPage .progressBar { width: 48px; } #registrationPage .standard-form-field-wrapper, #registrationPage .standard-input { height: 41px !important; } #registrationPage .standard-input { font-size: 12px !important; } #registrationPage .standard-select { min-height: 39px; font-size: 11px; } #registrationPage .dob-field { gap: 4px; } #registrationPage .phone-field { gap: 5px; } #registrationPage .phone-field .standard-select { width: 78px !important; flex-basis: 78px; } #registrationPage .next-button, #registrationPage .regsub-button, #registrationPage .back-button { height: 39px !important; } #registrationPage .back-button { width: 39px !important; flex-basis: 39px; } } /* ========================================================= LANGUAGE PAGE PURPLE + GOLD + DIAMOND THEME ========================================================= */ #pageLanguage { width: calc(100% - 20px); max-width: 460px; margin: 20px auto; padding: 22px 16px 24px; position: relative; box-sizing: border-box; border: 2px solid #f3c75e; border-radius: 20px; background: radial-gradient( circle at 50% 0%, rgba(190, 72, 255, .32), transparent 35% ), linear-gradient( 180deg, #441263 0%, #28083f 46%, #13041f 100% ); box-shadow: 0 0 5px rgba(255,255,255,.22), 0 0 12px rgba(255,198,66,.65), 0 0 26px rgba(171,55,255,.48), inset 0 1px 0 rgba(255,255,255,.18); } /* inner gold border */ #pageLanguage::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,220,120,.4); border-radius: 15px; pointer-events: none; } /* top diamond decoration */ #pageLanguage::after { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); border: 1px solid #ffd76b; background: linear-gradient( 135deg, #f6cbff, #c04fff 35%, #731ab7 70%, #e98dff ); box-shadow: 0 0 4px #fff, 0 0 8px #ce5fff, 0 0 12px rgba(255,209,79,.65); z-index: 10; } /* ========================================================= ROW ========================================================= */ #pageLanguage .row { position: relative; z-index: 2; display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 !important; } /* ========================================================= LANGUAGE ITEM ========================================================= */ #pageLanguage .lang-item { width: 100% !important; padding: 0 !important; margin: 0 !important; float: none !important; } /* Card */ #pageLanguage .lang-item .center-block { position: relative; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 10px; box-sizing: border-box; border: 1px solid rgba(255,210,101,.6); border-radius: 14px; background: radial-gradient( circle at 50% 20%, rgba(150,54,207,.38), transparent 55% ), linear-gradient( 180deg, rgba(74,20,106,.95), rgba(30,7,49,.98) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 12px rgba(178,64,238,.12), 0 0 7px rgba(255,204,77,.18); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease; } /* hover */ #pageLanguage .lang-item .center-block:hover { transform: translateY(-3px); border-color: #ffd66d; box-shadow: 0 0 7px rgba(255,213,89,.75), 0 0 15px rgba(199,75,255,.55), inset 0 0 12px rgba(195,73,255,.18); filter: brightness(1.08); } /* ========================================================= FLAG ICON ========================================================= */ #pageLanguage .m-language-icon { width: 64px !important; height: 64px !important; object-fit: cover; margin: 0 auto 8px !important; padding: 3px; border: 2px solid #f5cd65; border-radius: 50% !important; background: linear-gradient( 145deg, #ffe997, #d89018 ); box-shadow: 0 0 5px rgba(255,210,78,.75), 0 0 10px rgba(192,68,255,.45), inset 0 0 4px rgba(255,255,255,.4); transition: transform .2s ease, box-shadow .2s ease; } /* flag hover */ #pageLanguage .lang-item:hover .m-language-icon { transform: scale(1.08); box-shadow: 0 0 7px rgba(255,222,103,.9), 0 0 14px rgba(201,77,255,.65); } /* ========================================================= LANGUAGE NAME ========================================================= */ #pageLanguage .m-register-link { display: block; margin-top: 3px; color: #f7e8ff !important; font-size: 13px !important; font-weight: 700 !important; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(188,73,255,.4); cursor: pointer; } /* hover text */ #pageLanguage .lang-item:hover .m-register-link { color: #ffe27f !important; text-shadow: 0 0 5px rgba(255,211,83,.75); } /* ========================================================= SMALL DIAMOND AT BOTTOM OF EACH CARD ========================================================= */ #pageLanguage .lang-item .center-block::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); border: 1px solid #ffd56c; background: linear-gradient( 135deg, #edb5ff, #b746f0, #6c1aad ); box-shadow: 0 0 4px rgba(210,100,255,.7); } /* ========================================================= OPTIONAL FIRST ITEM ACTIVE STYLE English highlighted ========================================================= */ #pageLanguage .lang-selection-en .center-block { border-color: #ffd86c; background: radial-gradient( circle at 50% 20%, rgba(209,85,255,.45), transparent 55% ), linear-gradient( 180deg, #692291, #35104f ); box-shadow: 0 0 6px rgba(255,211,79,.7), 0 0 13px rgba(198,72,255,.5), inset 0 0 10px rgba(255,255,255,.08); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { #pageLanguage { width: calc(100% - 14px); margin: 12px auto; padding: 17px 12px 20px; border-radius: 16px; } #pageLanguage .row { gap: 10px; } #pageLanguage .lang-item .center-block { min-height: 108px; padding: 12px 6px; } #pageLanguage .m-language-icon { width: 52px !important; height: 52px !important; } #pageLanguage .m-register-link { font-size: 11px !important; } } /* ========================================================= VERY SMALL SCREEN ========================================================= */ @media (max-width: 340px) { #pageLanguage .row { gap: 7px; } #pageLanguage .lang-item .center-block { min-height: 96px; } #pageLanguage .m-language-icon { width: 46px !important; height: 46px !important; } #pageLanguage .m-register-link { font-size: 10px !important; } } /* ========================================================= CONTACT US NAV LUXURY PURPLE + GOLD + DIAMOND THEME ========================================================= */ .contactus_nav { width: calc(100% - 20px); max-width: 520px; margin: 18px auto; padding: 14px; list-style: none; border: 2px solid #f4c75f; border-radius: 18px; background: radial-gradient( circle at 50% 0%, rgba(181, 65, 255, .32), transparent 34% ), linear-gradient( 180deg, #431262 0%, #28083f 45%, #13041f 100% ); box-shadow: 0 0 5px rgba(255,255,255,.25), 0 0 12px rgba(255,198,66,.62), 0 0 24px rgba(171,55,255,.46), inset 0 1px 0 rgba(255,255,255,.16); box-sizing: border-box; } /* ========================================================= EACH CONTACT ITEM ========================================================= */ .contactus_nav > li { position: relative; width: 100%; margin: 0 0 10px; padding: 0; list-style: none; } .contactus_nav > li:last-child { margin-bottom: 0; } /* clickable card */ .contactus_nav > li > a { position: relative; width: 100%; min-height: 72px; display: flex; align-items: center; padding: 10px 14px; box-sizing: border-box; text-decoration: none !important; border: 1px solid rgba(255,210,101,.62); border-radius: 13px; background: radial-gradient( circle at 15% 50%, rgba(168, 61, 226, .28), transparent 40% ), linear-gradient( 180deg, rgba(73,20,103,.96), rgba(30,7,49,.98) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 12px rgba(183,65,241,.12), 0 0 6px rgba(255,204,77,.16); overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease; } /* hover */ .contactus_nav > li > a:hover { transform: translateY(-2px); border-color: #ffd76d; box-shadow: 0 0 7px rgba(255,212,85,.72), 0 0 14px rgba(198,75,255,.5), inset 0 0 12px rgba(196,73,255,.16); filter: brightness(1.08); } /* ========================================================= ICON BOX ========================================================= */ .contactus_nav .i { width: 54px; height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: center; margin-right: 13px; position: relative; border: 1px solid #ffd76b; border-radius: 12px; background: linear-gradient( 145deg, #7c2eb0 0%, #4d176e 48%, #2b0a42 100% ); box-shadow: 0 0 6px rgba(255,210,78,.45), 0 0 10px rgba(192,67,255,.35), inset 0 1px 0 rgba(255,255,255,.18); } /* small diamond decoration */ .contactus_nav .i::after { content: ""; position: absolute; bottom: -4px; right: -4px; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid #ffd66e; background: linear-gradient( 135deg, #f1bbff, #b842f2 45%, #6b1aaa ); box-shadow: 0 0 4px #cf65ff; } /* ========================================================= ICONS ========================================================= */ .contactus_nav .icon { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 29px !important; color: #ffd66f !important; text-shadow: 0 1px 1px #4b2500, 0 0 5px rgba(255,211,81,.8), 0 0 8px rgba(193,64,255,.45); transition: transform .2s ease, filter .2s ease; } /* make FontAwesome icons inherit gold */ .contactus_nav .fab { color: #ffd66f !important; } /* icon hover */ .contactus_nav > li > a:hover .icon { transform: scale(1.08); filter: brightness(1.15); } /* ========================================================= TEXT BOX ========================================================= */ .contactus_nav .text_box { flex: 1; min-width: 0; text-align: left; } /* Main contact title */ .contactus_nav .text_box > span { display: block; margin-bottom: 4px; color: #ffe384 !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .3px; text-transform: uppercase; text-shadow: 0 1px 1px #4a2300, 0 0 5px rgba(255,211,82,.65); } /* Description / number */ .contactus_nav .text_box > div { color: #dfd2e7 !important; font-size: 11px !important; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,.85); } /* ========================================================= TELEGRAM SPECIAL GLOW ========================================================= */ .contactus_nav .fa-telegram { color: #8fcfff !important; text-shadow: 0 0 5px rgba(91,190,255,.85), 0 0 9px rgba(107,121,255,.5); } /* ========================================================= WHATSAPP SPECIAL GLOW ========================================================= */ .contactus_nav .fa-whatsapp { color: #75f7b3 !important; text-shadow: 0 0 5px rgba(74,255,174,.8), 0 0 9px rgba(45,206,124,.45); } /* ========================================================= LIVE CHAT SPECIAL ========================================================= */ .contactus_nav .icon-livechat { color: #ffe17b !important; text-shadow: 0 0 5px rgba(255,213,83,.85), 0 0 9px rgba(199,74,255,.45); } /* ========================================================= SIDE GLOW ACCENT ========================================================= */ .contactus_nav > li > a::before { content: ""; position: absolute; top: 15%; left: 0; width: 3px; height: 70%; border-radius: 3px; background: linear-gradient( 180deg, transparent, #d05bff, #ffd66e, #d05bff, transparent ); box-shadow: 0 0 6px rgba(203,84,255,.75); } /* ========================================================= ARROW ON RIGHT ========================================================= */ .contactus_nav > li > a::after { content: ""; width: 8px; height: 8px; margin-left: 10px; flex: 0 0 8px; transform: rotate(-45deg); border-right: 2px solid #ffd66c; border-bottom: 2px solid #ffd66c; opacity: .8; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { .contactus_nav { width: calc(100% - 12px); margin: 10px auto; padding: 10px; border-radius: 15px; } .contactus_nav > li { margin-bottom: 8px; } .contactus_nav > li > a { min-height: 62px; padding: 8px 10px; border-radius: 11px; } .contactus_nav .i { width: 45px; height: 45px; flex-basis: 45px; margin-right: 10px; border-radius: 10px; } .contactus_nav .icon { font-size: 24px !important; } .contactus_nav .text_box > span { font-size: 12px !important; } .contactus_nav .text_box > div { font-size: 9.5px !important; } } #pageContactUs{ background: #140628!important; } /* ========================================================= PROVIDER SWIPER LUXURY PURPLE + GOLD + DIAMOND THEME ========================================================= */ .swiper-wrapper { align-items: center !important; padding: 8px 4px 12px !important; box-sizing: border-box; } /* ========================================================= EACH PROVIDER SLIDE ========================================================= */ .swiper-wrapper .swiper-slide { position: relative !important; height: 72px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* ========================================================= PROVIDER BUTTON ========================================================= */ .swiper-wrapper .button-style-1 { position: relative; width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(255, 211, 105, .72); border-radius: 13px; background: radial-gradient( circle at 50% 10%, rgba(191, 71, 255, .34), transparent 45% ), linear-gradient( 180deg, #4b176b 0%, #2b0a43 52%, #170523 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 10px rgba(183, 65, 244, .12), 0 0 5px rgba(255, 203, 76, .2); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease; } /* inner gold line */ .swiper-wrapper .button-style-1::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255, 224, 132, .25); border-radius: 9px; pointer-events: none; } /* ========================================================= SMALL DIAMOND DECORATION ========================================================= */ .swiper-wrapper .button-style-1::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #ffd66b; background: linear-gradient( 135deg, #f3c4ff, #bc48f7 40%, #6d19ad ); box-shadow: 0 0 4px rgba(203, 88, 255, .7); } /* ========================================================= PROVIDER LOGO ========================================================= */ .swiper-wrapper .provider { position: relative; z-index: 3; display: block !important; max-width: 82% !important; max-height: 44px !important; transform: scale(.92); filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(255, 211, 87, .2)); transition: transform .2s ease, filter .2s ease; } /* ========================================================= HOVER ========================================================= */ .swiper-wrapper .swiper-slide:hover .button-style-1 { transform: translateY(-2px); border-color: #ffd76c; box-shadow: 0 0 6px rgba(255, 210, 80, .65), 0 0 13px rgba(194, 73, 255, .45), inset 0 0 10px rgba(202, 80, 255, .15); filter: brightness(1.08); } .swiper-wrapper .swiper-slide:hover .provider { transform: scale(1); filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255, 218, 105, .4)); } /* ========================================================= ACTIVE PROVIDER ========================================================= */ .swiper-wrapper .swiper-slide-active .button-style-1 { border: 2px solid #ffd76b; background: radial-gradient( circle at 50% 15%, rgba(221, 100, 255, .46), transparent 48% ), linear-gradient( 180deg, #70269b 0%, #42115f 50%, #250735 100% ); box-shadow: 0 0 5px rgba(255,255,255,.25), 0 0 9px rgba(255, 210, 83, .8), 0 0 17px rgba(199, 72, 255, .6), inset 0 0 12px rgba(255,255,255,.06); } /* active logo */ .swiper-wrapper .swiper-slide-active .provider { transform: scale(1); filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 5px rgba(255, 213, 87, .5)); } /* ========================================================= ACTIVE BOTTOM GLOW ========================================================= */ .swiper-wrapper .swiper-slide-active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 10px; background: linear-gradient( 90deg, transparent, #bd4cff, #ffd86d, #bd4cff, transparent ); box-shadow: 0 0 5px rgba(196, 77, 255, .8); } /* ========================================================= OPTIONAL NEXT SLIDE SLIGHT HIGHLIGHT ========================================================= */ .swiper-wrapper .swiper-slide-next .button-style-1 { border-color: rgba(220, 145, 255, .65); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .swiper-wrapper { padding-top: 5px !important; padding-bottom: 8px !important; } .swiper-wrapper .swiper-slide { height: 61px !important; } .swiper-wrapper .button-style-1 { height: 55px; border-radius: 10px; } .swiper-wrapper .provider { max-width: 80% !important; max-height: 37px !important; } .swiper-wrapper .button-style-1::after { width: 6px; height: 6px; right: 6px; bottom: 6px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .swiper-wrapper .swiper-slide { height: 56px !important; } .swiper-wrapper .button-style-1 { height: 50px; } .swiper-wrapper .provider { max-height: 33px !important; } } /* ========================================================= LUCKY BOX TERMS - CLEAR / OUTSTANDING TEXT ========================================================= */ pre { display: block; width: calc(100% - 30px); max-width: 620px; margin: 20px auto !important; padding: 20px 18px !important; box-sizing: border-box; /* IMPORTANT: allow long wording to wrap */ white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: break-word !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.75 !important; letter-spacing: 0.15px !important; /* brighter wording */ color: #ffffff !important; /* dark panel so text stands out from purple background */ background: linear-gradient( 180deg, rgba(28, 7, 45, 0.92) 0%, rgba(47, 12, 69, 0.92) 50%, rgba(24, 5, 38, 0.94) 100% ) !important; border: 1px solid rgba(255, 214, 105, 0.75) !important; border-radius: 15px !important; box-shadow: 0 0 6px rgba(255, 211, 91, 0.35), 0 0 14px rgba(190, 74, 255, 0.35), inset 0 0 14px rgba(207, 98, 255, 0.08) !important; /* makes wording readable even over bright background */ text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9) !important; } /* subtle gold line on left */ pre { border-left: 4px solid #ffd76d !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { pre { width: calc(100% - 24px); margin: 16px auto !important; padding: 16px 14px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.7 !important; border-radius: 13px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { pre { width: calc(100% - 18px); padding: 14px 12px !important; font-size: 13px !important; line-height: 1.65 !important; } } /* ========================================================= HOME NOTICE - COMPACT BLACK / PURPLE / GOLD STYLE ========================================================= */ .home_notice { position: relative; width: calc(100% - 10px); max-width: 800px; height: 30px; margin: 5px auto; display: flex; align-items: center; padding: 0 8px; box-sizing: border-box; overflow: hidden; border-top: 2px solid #c66cff; border-bottom: 2px solid #e8b95d; border-left: 1px solid #8146a6; border-right: 1px solid #8146a6; border-radius: 4px; background: linear-gradient( 180deg, #21122d 0%, #0f0b14 40%, #08080a 100% ); box-shadow: 0 0 5px rgba(180, 74, 255, .55), 0 0 7px rgba(255, 199, 79, .3), inset 0 1px 0 rgba(255,255,255,.08); } /* subtle purple glow line */ .home_notice::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient( 90deg, transparent, #eb8cff, #ffd16b, #eb8cff, transparent ); box-shadow: 0 0 4px #b94dff; } /* ========================================================= NOTICE ICON ========================================================= */ .home_notice > .icons { position: relative; z-index: 5; width: 25px; height: 25px; flex: 0 0 25px; display: flex; align-items: center; justify-content: center; margin-right: 7px; color: #ffd66f !important; font-size: 15px !important; border-right: 1px solid rgba(255,255,255,.18); text-shadow: 0 0 4px rgba(255,211,87,.85), 0 0 7px rgba(183,74,255,.55); } /* ========================================================= NOTICE SLIDER ========================================================= */ #sliderNotice { position: relative; flex: 1; height: 100%; display: flex; align-items: center; overflow: hidden; } /* ========================================================= SCROLL CONTENT ========================================================= */ .annoucement-infinite-container { display: flex; align-items: center; height: 100%; white-space: nowrap; } .notice-item { display: flex; align-items: center; height: 100%; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 1px 2px rgba(0,0,0,1); } #pageHome #homePage .home_notice .icon_home_notice:before{ color:#fff!important; } .notice-item span { color: #ffffff !important; white-space: nowrap !important; background-color: rgba(0,0,0,1.00)!important; } /* ========================================================= OPTIONAL SEPARATOR EFFECT Makes the wording look like: Welcome ... | Established ... ========================================================= */ .notice-item span { word-spacing: 3px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .home_notice { width: calc(100% - 6px); height: 27px; margin: 3px auto; padding: 0 6px; border-radius: 3px; } .home_notice > .icons { width: 22px; height: 22px; flex-basis: 22px; margin-right: 5px; font-size: 13px !important; } .notice-item { font-size: 9px !important; } } /* ========================================================= ALL NAV BUTTONS - SHINE / BLINK EFFECT Applies to every .nav-item ========================================================= */ .nav-item .nav-link { position: relative; overflow: hidden; border-radius: 12px; animation: navPulse 2.6s ease-in-out infinite, navGlow 1.8s ease-in-out infinite alternate; } /* moving shine sweep */ .nav-item .nav-link::before { content: ""; position: absolute; top: -40%; left: -90%; width: 35%; height: 180%; z-index: 10; pointer-events: none; transform: rotate(20deg); background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.9) 50%, rgba(255,235,155,0.7) 62%, transparent 100% ); filter: blur(1px); animation: navShine 3s ease-in-out infinite; } /* outer glow */ .nav-item .nav-link::after { content: ""; position: absolute; inset: 1px; z-index: 9; pointer-events: none; border-radius: 11px; animation: navBorderBlink 1.6s ease-in-out infinite; } /* keep content above effects */ .nav-item .nav-link .i, .nav-item .nav-link span { position: relative; z-index: 11; } /* icon glow */ .nav-item .nav-link .icon { animation: navIconGlow 1.8s ease-in-out infinite alternate; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes navShine { 0% { left: -90%; opacity: 0; } 12% { opacity: 1; } 42% { left: 130%; opacity: 1; } 55%, 100% { left: 130%; opacity: 0; } } @keyframes navPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } } @keyframes navGlow { 0% { filter: brightness(1) drop-shadow(0 0 2px rgba(255,211,85,.25)); } 100% { filter: brightness(1.08) drop-shadow(0 0 5px rgba(255,211,85,.7)) drop-shadow(0 0 7px rgba(186,70,255,.5)); } } @keyframes navBorderBlink { 0%, 100% { opacity: .35; box-shadow: inset 0 0 5px rgba(255,255,255,.08), 0 0 3px rgba(255,210,80,.3), 0 0 6px rgba(180,70,255,.2); } 50% { opacity: 1; box-shadow: inset 0 0 9px rgba(255,255,255,.24), 0 0 7px rgba(255,221,112,.85), 0 0 13px rgba(198,83,255,.65); } } @keyframes navIconGlow { 0% { filter: brightness(1) drop-shadow(0 0 1px rgba(255,210,80,.2)); } 100% { filter: brightness(1.15) drop-shadow(0 0 4px rgba(255,221,110,.7)) drop-shadow(0 0 5px rgba(205,85,255,.45)); } } section#progressivejackpot.theme1 .home-jackpot-content { display: inline-block; padding: 4px 14px; border-radius: 10px; background: rgba(18, 4, 28, 0.55); border: 1px solid rgba(255, 215, 90, 0.55); } /* ========================================================= LOGIN + JOIN NOW SAME SHINE ANIMATION AS SIDE MENU ========================================================= */ .right-member .btn-login, .right-member .btn-reg { position: relative; overflow: hidden; border-radius: 8px; animation: headerBtnPulse 2.6s ease-in-out infinite, headerBtnGlow 1.8s ease-in-out infinite alternate; } /* moving shine */ .right-member .btn-login::before, .right-member .btn-reg::before { content: ""; position: absolute; top: -40%; left: -90%; width: 35%; height: 180%; z-index: 10; pointer-events: none; transform: rotate(20deg); background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,.9) 50%, rgba(255,235,155,.72) 62%, transparent 100% ); filter: blur(1px); animation: headerBtnShine 3s ease-in-out infinite; } /* outer blink glow */ .right-member .btn-login::after, .right-member .btn-reg::after { content: ""; position: absolute; inset: 1px; z-index: 9; pointer-events: none; border-radius: 7px; animation: headerBtnBorderBlink 1.6s ease-in-out infinite; } /* make JOIN NOW slightly delayed */ .right-member .btn-reg::before { animation-delay: .5s; } .right-member .btn-reg::after { animation-delay: .2s; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes headerBtnShine { 0% { left: -90%; opacity: 0; } 12% { opacity: 1; } 42% { left: 130%; opacity: 1; } 55%, 100% { left: 130%; opacity: 0; } } @keyframes headerBtnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } @keyframes headerBtnGlow { 0% { filter: brightness(1) drop-shadow(0 0 2px rgba(255,211,85,.25)); } 100% { filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,211,85,.75)) drop-shadow(0 0 7px rgba(186,70,255,.55)); } } @keyframes headerBtnBorderBlink { 0%, 100% { opacity: .35; box-shadow: inset 0 0 5px rgba(255,255,255,.08), 0 0 3px rgba(255,210,80,.3), 0 0 6px rgba(180,70,255,.2); } 50% { opacity: 1; box-shadow: inset 0 0 9px rgba(255,255,255,.24), 0 0 7px rgba(255,221,112,.85), 0 0 13px rgba(198,83,255,.65); } } .home-jackpot-content.myr .home-jackpot-running::after { content: "✦"; display: inline-block; margin-left: 5px; color: #e6b8ff; font-size: .7em; animation: jackpotSparkle 1.4s ease-in-out infinite; } @keyframes jackpotSparkle { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } } /* ========================================================= JACKPOT RUNNING NUMBER NEON PURPLE + SIMPLE ANIMATION ========================================================= */ .home-jackpot-content.myr .home-jackpot-running { color: #f7eaff !important; font-weight: 900 !important; letter-spacing: 1px; -webkit-text-stroke: .5px #b954ff; text-shadow: 0 0 2px #ffffff, 0 0 5px #e5b4ff, 0 0 9px #c05cff, 0 0 15px #9a20ff, 0 0 24px rgba(138, 37, 255, .85); filter: drop-shadow(0 0 4px rgba(194, 88, 255, .7)); animation: jackpotPurpleGlow 1.8s ease-in-out infinite alternate, jackpotFloat 3s ease-in-out infinite; } /* MYR slightly gold/purple */ .home-jackpot-content.myr #jackpot_currency { color: #f0d58d !important; margin-right: 3px; -webkit-text-stroke: .3px #8c35ca; text-shadow: 0 0 3px #fff1c9, 0 0 6px #c366ff, 0 0 11px rgba(153, 46, 255, .75); } /* ========================================================= PURPLE NEON BREATHING ========================================================= */ @keyframes jackpotPurpleGlow { 0% { filter: brightness(1) drop-shadow(0 0 3px rgba(174, 67, 255, .55)); text-shadow: 0 0 2px #fff, 0 0 4px #d99aff, 0 0 8px #a93cff, 0 0 13px rgba(126, 24, 255, .7); } 100% { filter: brightness(1.22) drop-shadow(0 0 8px rgba(199, 93, 255, .95)); text-shadow: 0 0 3px #fff, 0 0 7px #efc7ff, 0 0 13px #cf68ff, 0 0 20px #9f2cff, 0 0 30px rgba(132, 31, 255, .9); } } /* very subtle floating effect */ @keyframes jackpotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } /* ===================================================== 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(./img1822_ucucikiss/ucuci_tele.jpg?v=8) !important; } .headertitle-secondarybanner .banner-img { background-image: url(./img1822_ucucikiss/ucuci_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(./img1822_ucucikiss/uvip.png?v=8) !important; } /* 2 - UMENANG */ .partner-container .company-Myrs9sk .banner-img { background-image: url(./img1822_ucucikiss/umenang.png?v=8) !important; } /* 3 - UCUCI */ .partner-container .company-myrs9lc .banner-img { background-image: url(./img1822_ucucikiss/ucuci.png?v=8) !important; } /* 4 - ULUCKY */ .partner-container .company-myrs9gw .banner-img { background-image: url(./img1822_ucucikiss/ulucky.png?v=8) !important; } /* 5 - UKAYA */ .partner-container .company-myrs9wt .banner-img { background-image: url(./img1822_ucucikiss/ukaya.png?v=8) !important; } /* 6 - USUKA */ .partner-container .company-myrs9sw .banner-img { background-image: url(./img1822_ucucikiss/usuka.png?v=8) !important; } /* 6 - U99 */ .partner-container .company-myrs9pw .banner-img { background-image: url(./img1822_ucucikiss/u99.png?v=8) !important; } .icon-partnership { background-image: url(img1822_ucucikiss/partnership.png) !important; } /* ========================================================= REGISTRATION DROPDOWN MOBILE FIX FIX: CAN'T SEE FULL LIST / CAN'T SCROLL DOB ========================================================= */ /* --------------------------------------------------------- 1. IMPORTANT: DO NOT CLIP DROPDOWNS INSIDE REGISTRATION PAGE --------------------------------------------------------- */ #registrationPage, #registrationPage .reg-form-section, #registrationPage .register-input-container, #registrationPage .standard-form-field, #registrationPage .standard-form-field-wrapper, #registrationPage .standard-m-form-col-full, #registrationPage .input-group { overflow: visible !important; } /* --------------------------------------------------------- 2. SELECT BOX MUST BE RELATIVE --------------------------------------------------------- */ #registrationPage .standard-form-field-wrapper { position: relative !important; } /* --------------------------------------------------------- 3. DROPDOWN --------------------------------------------------------- */ #registrationPage .standard-select-dropdown { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: min(280px, 45vh) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior: contain; box-sizing: border-box !important; z-index: 999999 !important; border: 1px solid #d7b56d !important; border-radius: 9px !important; background: linear-gradient( 180deg, #0c1a2b 0%, #050b12 100% ) !important; box-shadow: 0 8px 20px rgba(0,0,0,.75), 0 0 10px rgba(33,105,199,.35) !important; } /* --------------------------------------------------------- 4. CLOSED STATE --------------------------------------------------------- */ #registrationPage .standard-select-dropdown.isHide { display: none !important; } /* --------------------------------------------------------- 5. OPEN STATE --------------------------------------------------------- */ #registrationPage .standard-select-dropdown.isOpen { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* --------------------------------------------------------- 6. DROPDOWN OPTIONS --------------------------------------------------------- */ #registrationPage .standard-select-options { position: relative; min-height: 42px !important; display: flex !important; align-items: center !important; padding: 9px 12px !important; box-sizing: border-box; color: #d9e3ee !important; font-size: 12px !important; border-bottom: 1px solid rgba(95,148,210,.18) !important; background: transparent !important; white-space: normal !important; cursor: pointer; touch-action: manipulation; } #registrationPage .standard-select-options:last-child { border-bottom: 0 !important; } /* selected */ #registrationPage .standard-select-options.active { color: #f1d99d !important; background: linear-gradient( 90deg, rgba(30,94,171,.8), rgba(10,39,74,.9) ) !important; } /* ========================================================= DATE OF BIRTH SCROLL FIX ========================================================= */ /* This covers dropdowns used for: Day / Month / Year */ #registrationPage [class*="birth"] .standard-select-dropdown, #registrationPage [class*="dob"] .standard-select-dropdown, #registrationPage [class*="date"] .standard-select-dropdown { max-height: 240px !important; overflow-y: scroll !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } /* scrollbar - optional */ #registrationPage .standard-select-dropdown::-webkit-scrollbar { width: 4px; } #registrationPage .standard-select-dropdown::-webkit-scrollbar-track { background: #07111d; } #registrationPage .standard-select-dropdown::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, #5b9fea, #d7b56d ); border-radius: 20px; } /* ========================================================= VERY IMPORTANT MOBILE FIX ========================================================= */ @media (max-width: 768px) { #registrationPage .standard-select-dropdown.isOpen { max-height: 42vh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; z-index: 9999999 !important; } #registrationPage .standard-select-options { min-height: 44px !important; padding: 11px 12px !important; font-size: 12px !important; } } /* ========================================================= REGISTRATION DROPDOWN - FORCE TO TOP LAYER ========================================================= */ /* 1. REMOVE PARENT STACKING CONTEXT / CLIPPING */ #registrationPage, #registrationPage .reg-form-section, #registrationPage .register-input-container, #registrationPage .standard-form-field, #registrationPage .standard-form-field-wrapper, #registrationPage .standard-m-form-col-full, #registrationPage .input-group, #registrationPage .col-10, #registrationPage .row { overflow: visible !important; transform: none !important; filter: none !important; isolation: auto !important; } /* ========================================================= NORMAL FIELDS ========================================================= */ #registrationPage .standard-form-field { position: relative !important; z-index: 1; } /* ========================================================= WHEN DROPDOWN OPEN BRING ENTIRE FIELD TO FRONT ========================================================= */ #registrationPage .standard-form-field:has( .standard-select-dropdown.isOpen ) { position: relative !important; z-index: 99999999 !important; } /* wrapper also front */ #registrationPage .standard-form-field-wrapper:has( .standard-select-dropdown.isOpen ) { position: relative !important; z-index: 99999999 !important; } /* ========================================================= DROPDOWN ========================================================= */ #registrationPage .standard-select-dropdown.isOpen { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: 0 !important; width: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 2147483647 !important; max-height: 42vh !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; pointer-events: auto !important; border: 1px solid #d7b56d !important; border-radius: 8px !important; background: linear-gradient( 180deg, #0b1b2e 0%, #050a11 100% ) !important; box-shadow: 0 10px 30px rgba(0,0,0,.9), 0 0 15px rgba(126,48,255,.5), 0 0 8px rgba(215,181,109,.4) !important; } /* ========================================================= SELECT ITSELF ========================================================= */ #registrationPage .standard-select { position: relative !important; z-index: 2; } /* ========================================================= OTHER FIELDS MUST NOT COVER OPEN DROPDOWN ========================================================= */ #registrationPage .standard-form-field:not( :has(.standard-select-dropdown.isOpen) ) { z-index: 1 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { #registrationPage { position: relative !important; z-index: 1 !important; overflow: visible !important; } #registrationPage .reg-form-section { position: relative !important; overflow: visible !important; } #registrationPage .standard-form-field:has( .standard-select-dropdown.isOpen ) { z-index: 999999999 !important; } #registrationPage .standard-select-dropdown.isOpen { z-index: 2147483647 !important; max-height: 45vh !important; } }