/* ng vue route overlay. Colors only via colors.css. */

html.vp-route{
  --vp-bg:var(--ng-page-bg);
  --vp-card:var(--ng-card);
  --vp-text:var(--ng-text);
  --vp-text-2:var(--ng-text-2);
  --vp-line:var(--ng-border);
  --vp-accent:var(--ng-primary);
  --vp-accent-rgb:var(--ng-primary-rgb);
  --vp-on:var(--ng-on-primary);
  --vp-soft:var(--ng-primary-soft);
  --vp-btn:var(--ng-button-bg);
  --vp-nav:var(--ng-card);
  --vp-nav-idle:var(--ng-footer-icon);
  --vp-nav-text:var(--ng-footer-text);
  --vp-radius:12px;
  --vp-btn-radius:12px;
  --vp-nav-h:74px;
  --vp-scheme:light;
}

/* vue route chrome. Tokens above come only from this site colors.css.
   Routes: deposit withdraw rebate subordinate activities wallet profile message vip agent all-games explore game play bulletin diamond-exchange group-invite channel-invite group-ranking.
   Does not style game iframes. */
html.vp-route{
  --Accent-Accent:var(--vp-accent)!important;
  --Accent-Accent-RGB:var(--vp-accent-rgb)!important;
  --Accent-Accent_hover:var(--vp-accent)!important;
  --Accent-Accent_Pressed:var(--vp-accent)!important;
  --Accent-Accent_56:rgba(var(--vp-accent-rgb),.56)!important;
  --Accent-Accent_32:rgba(var(--vp-accent-rgb),.32)!important;
  --Accent-Accent_16:rgba(var(--vp-accent-rgb),.16)!important;
  --Accent-Tonal-Bright:var(--vp-soft)!important;
  --Accent-Tonal-Bright_2:var(--vp-accent)!important;
  --Accent-Tonal-Tonal_56:rgba(var(--vp-accent-rgb),.56)!important;
  --Accent-Tonal-Tonal_32:rgba(var(--vp-accent-rgb),.32)!important;
  --Accent-Tonal-Tonal_16:rgba(var(--vp-accent-rgb),.16)!important;
  --Accent:var(--vp-btn)!important;
  --Green-Green:var(--vp-accent)!important;
  --Green-Green_Hover:var(--vp-accent)!important;
  --Green-Green_Pressed:var(--vp-accent)!important;
  --Green-Green_56:rgba(var(--vp-accent-rgb),.56)!important;
  --Green-Green_32:rgba(var(--vp-accent-rgb),.32)!important;
  --Green-Green_16:rgba(var(--vp-accent-rgb),.16)!important;
  --Green-Green_12:rgba(var(--vp-accent-rgb),.12)!important;
  --green-tonal-green-bright-1:var(--vp-soft)!important;
  --color-gren:var(--vp-accent)!important;
  --Text-Primary:var(--vp-text)!important;
  --Text-Secondary:var(--vp-text-2)!important;
  --Base-Background:var(--vp-bg)!important;
  --Base-Background_Dark:var(--vp-bg)!important;
  --Base-Background_Light:var(--vp-card)!important;
  --Base-Accent:var(--vp-text)!important;
  --Base-Inverse:var(--vp-text)!important;
  --Neutral-Neutral_100:var(--vp-text)!important;
  --Neutral-Neutral_80:var(--vp-text)!important;
  --Neutral-Neutral_72:var(--vp-text-2)!important;
  --Neutral-Neutral_56:var(--vp-text-2)!important;
  --Neutral-Neutral_32:var(--vp-line)!important;
  --Neutral-Neutral_20:var(--vp-line)!important;
  --Neutral-Neutral_12:var(--vp-line)!important;
  --Neutral-Neutral_8:var(--vp-card)!important;
  --Corner_02:8px!important;
  --Corner_04:var(--vp-radius)!important;
  --Corner_05:var(--vp-radius)!important;
  color-scheme:var(--vp-scheme);
}
html.vp-route,html.vp-route body{background:var(--vp-bg)!important;color:var(--vp-text)!important;max-width:100%;overflow-x:hidden!important}
html.vp-route #boot{background:var(--vp-bg)!important;color:var(--vp-accent)!important}
@media(min-width:768px){
  html.vp-route{background:var(--vp-bg)!important}
  html.vp-route #app{width:min(100%,430px)!important;max-width:430px!important;margin-left:auto!important;margin-right:auto!important;min-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.12)}
}
html.vp-route #app,html.vp-route .app-container:not(.is-game-page),html.vp-route .app-container:not(.is-game-page) main,html.vp-route .app-container:not(.is-game-page) .page{background:var(--vp-bg)!important;color:var(--vp-text)!important;max-width:100%;overflow-x:hidden!important;box-sizing:border-box}
html.vp-route :is(.deposit-page,.withdraw-page,.rebate-page,.subordinate-page,.wallet-page,.profile-page,.message-page,.vip-detail-page,.activity-layout,.activities,.activities-content,.activity-tab){background:var(--vp-bg)!important;color:var(--vp-text)!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box!important;padding-bottom:calc(var(--vp-nav-h) + 28px + env(safe-area-inset-bottom,0px))!important}
html.vp-route :is(.page-header,.page-header-safe-mask,.deposit-fixed-header,.withdraw-fixed-header,.wallet-fixed-header,.message-fixed-header,.vip-fixed-header,.vip-header,.rebate-header,.deposit-header,.withdraw-header,.message-header){background:var(--vp-card)!important;color:var(--vp-text)!important;box-shadow:inset 0 3px 0 var(--vp-accent),0 1px 0 var(--vp-line)!important;border-bottom:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important;padding-left:10px!important;padding-right:10px!important;overflow:hidden!important}
html.vp-route :is(.page-header__name,.page-header__wallet-balance,.page-header__action-label,.deposit-title,.withdraw-title,.wallet-title,.message-title,.vip-title,.rebate-title,.profile-card__nickname,.activity-title){color:var(--vp-text)!important;max-width:100%}
html.vp-route :is(.deposit-subtitle,.withdraw-subtitle,.wallet-subtitle,.message-subtitle,.vip-subtitle,.rebate-subtitle,.profile-card__id,.profile-card__meta,.empty-text,.wallet-item__label,.deposit-item__label,.withdraw-item__label){color:var(--vp-text-2)!important}
html.vp-route :is(.page-header__user,.page-header__actions,.page-header__wallet){min-width:0!important;flex-shrink:1!important;max-width:46vw}
html.vp-route :is(.deposit-item,.withdraw-item,.message-item,.subordinate-item,.wallet-item,.profile-card,.vip-card,.vip-card-detail,.rebate-card,.activity-card,.activity-banner-item,.stat-card,.stats-card,.invitation-card,.task-card,.filter-section){background:var(--vp-card)!important;color:var(--vp-text)!important;border:1px solid var(--vp-line)!important;border-radius:var(--vp-radius)!important;box-shadow:0 6px 16px rgba(var(--vp-accent-rgb),.08)!important;max-width:calc(100% - 20px)!important;box-sizing:border-box!important}
html.vp-route :is(.deposit-tabs,.withdraw-tabs,.activity-categories,.subordinate-tab){max-width:100%;overflow-x:auto;box-sizing:border-box}
html.vp-route :is(.btn-primary,.button_primary,.button.button_primary,.action-btn--deposit,.wallet-allout-btn,.rebate-card__button,.load-more-btn,.task-btn,.deposit-tab-btn.active,.withdraw-tab-btn.active,.task-tab-btn.active,.activity-tab.active){background:var(--vp-btn)!important;color:var(--vp-on)!important;border:0!important;border-radius:var(--vp-btn-radius)!important;box-shadow:none!important;max-width:100%}
html.vp-route :is(.btn-secondary,.button_grey,.action-btn--withdraw,.action-btn--transfer-out,.action-btn--transfer-in){background:var(--vp-soft)!important;color:var(--vp-accent)!important;border:1px solid var(--vp-line)!important;border-radius:var(--vp-btn-radius)!important;max-width:100%}
html.vp-route :is(.empty-state,.wallet-empty,.deposit-empty,.withdraw-empty,.group-list__empty,.empty-container){background:transparent!important;color:var(--vp-text-2)!important;text-align:center!important;max-width:100%!important}
html.vp-route :is(.empty-state,.wallet-empty,.deposit-empty,.withdraw-empty,.group-list__empty,.empty-container) img{display:none!important}
html.vp-route :is(.empty-state,.wallet-empty,.deposit-empty,.withdraw-empty,.group-list__empty,.empty-container)::before{content:"";display:block;width:64px;height:64px;margin:28px auto 10px;border-radius:16px;background:var(--vp-soft);box-shadow:inset 0 0 0 1.5px var(--vp-accent)}
html.vp-route .empty-icon{background:var(--vp-soft)!important;color:var(--vp-accent)!important}
html.vp-route :is(.form-input,input,textarea,select){background:var(--vp-card)!important;color:var(--vp-text)!important;border-color:var(--vp-line)!important;max-width:100%;box-sizing:border-box}
html.vp-route :is(.modal-container,.modal-content,.modal-header,.modal-body,.message-modal,.message-modal__content,.withdraw-form,.deposit-modal){background:var(--vp-card)!important;color:var(--vp-text)!important;border-color:var(--vp-line)!important;max-width:min(430px,calc(100vw - 24px))!important;box-sizing:border-box}
html.vp-route .modal-overlay{background:rgba(0,0,0,.45)!important}
html.vp-route #bottom-menu,html.vp-route #bottom-menu.menu{background:var(--vp-nav)!important;color:var(--vp-nav-text)!important;width:min(100%,430px)!important;max-width:100%!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:0!important;border-radius:0!important;border:0!important;border-top:1px solid var(--vp-line)!important;box-shadow:0 -6px 18px rgba(0,0,0,.06)!important;box-sizing:border-box!important;overflow:hidden!important}
html.vp-route #bottom-menu .menu__nav,html.vp-route .menu__nav{background:var(--vp-nav)!important;height:calc(56px + env(safe-area-inset-bottom,0px))!important;padding:4px 2px env(safe-area-inset-bottom,0px)!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;width:100%!important;box-sizing:border-box!important}
html.vp-route .menu__btn{color:var(--vp-nav-text)!important;min-width:0!important;flex:1 1 0!important}
html.vp-route .menu__label{color:var(--vp-nav-text)!important;opacity:1!important}
html.vp-route .menu__btn.active .menu__label,html.vp-route .menu__btn.router-link-active .menu__label{color:var(--vp-accent)!important}
html.vp-route .menu__btn:not(.active):not(.router-link-active) :is(.icon--color,.menu__icon-inactive){background-color:var(--vp-nav-idle)!important}
html.vp-route .menu__btn.active :is(.icon--color,.menu__icon-active),html.vp-route .menu__btn.router-link-active :is(.icon--color,.menu__icon-active){background-color:var(--vp-accent)!important}
html.vp-route .menu__indicator{background:var(--vp-accent)!important;box-shadow:none!important}
html.vp-route :is(#woai52-page-brand,.woai52-page-brand,#woai52-tg-logo,.global-logo,img[src*="52-logo"],img[src*="52-splash"],img[src*="woai52"]){display:none!important}
html.vp-route :is(img[alt*="52.COM"],img[alt*="52.com"],img[alt*="52.COM "]){display:none!important}
html.vp-route :is(.activity-card,.activity-banner-item,.activity-banners).vp-nocopy{background:var(--vp-card)!important;border:1px solid var(--vp-line)!important;border-radius:var(--vp-radius)!important;min-height:72px}
html.vp-route :is(.activity-card,.activity-banner-item).vp-nocopy img{display:none!important}
html.vp-route :is(.rebate-table,table){max-width:100%!important}
html.vp-route .app-container.is-game-page,html.vp-route .app-container.is-game-page main,html.vp-route .app-container.is-game-page .page,html.vp-route iframe:not(.game-iframe){background:initial;color:initial}
@media(max-width:390px){
  html.vp-route :is(.page-header,[class$="-fixed-header"],.rebate-header,.vip-header){padding-left:8px!important;padding-right:8px!important}
  html.vp-route :is(.page-header__deposit,.page-header__wallet,.page-header__invite,.page-header__action){padding-left:6px!important;padding-right:6px!important;font-size:11px!important}
  html.vp-route .menu__label{font-size:10px!important}
  html.vp-route :is(.deposit-item,.withdraw-item,.wallet-item,.message-item,.activity-card,.rebate-card){margin-left:8px!important;margin-right:8px!important;max-width:calc(100% - 16px)!important}
}

/* more routes. Same tokens. Does not style .game-iframe or third-party game frames. */
html.vp-route :is(.all-games,.explore,.page-play,.bulletin-page,.diamond-exchange-page,.group-invite-page,.channel-invite-page,.page-group-ranking){background:var(--vp-bg)!important;color:var(--vp-text)!important;max-width:100%!important;overflow-x:hidden!important;box-sizing:border-box!important}
html.vp-route :is(.explore,.page-play,.bulletin-page,.diamond-exchange-page,.group-invite-page,.channel-invite-page,.page-group-ranking){padding-bottom:calc(var(--vp-nav-h) + 28px + env(safe-area-inset-bottom,0px))!important}
html.vp-route .page-play:after,html.vp-route .page-group-ranking:after{background:none!important;border:0!important;display:none!important}
html.vp-route :is(.all-games-fixed-header,.all-games-header,.bulletin-header,.exchange-header,.page-group-ranking .head){background:var(--vp-card)!important;color:var(--vp-text)!important;box-shadow:inset 0 3px 0 var(--vp-accent),0 1px 0 var(--vp-line)!important}
html.vp-route :is(.all-games-title,.bulletin-title,.exchange-title,.invite-hero__title,.head__title,.group-card__name,.invite-card__title,.group-invite-card__name,.balance-card__amount,.notes-title,.exchange-rate-text,.preview-value,.you-can-win__title,.lottery-log-modal__title,.lottery-log__user){color:var(--vp-text)!important}
html.vp-route :is(.exchange-subtitle,.invite-hero__subtitle,.head__subtitle,.bulletin-meta,.bulletin-time,.bulletin-body,.balance-card__label,.exchange-rate-card__title,.form-label,.form-hint,.preview-label,.notes-list li,.group-stats__label,.group-card__row,.group-card__meta,.invite-card__desc,.invite-card__list,.group-invite-card__meta,.tab-item,.diamond-balance__label,.broadcast-text,.lottery-log__row,.lottery-log__state,.lottery-log__count){color:var(--vp-text-2)!important}
html.vp-route .diamond-balance__value,html.vp-route .group-stats__value,html.vp-route .stats-card__value,html.vp-route .preview-value.highlight,html.vp-route .exchange-rate-text .highlight,html.vp-route .tab-item--active{color:var(--vp-accent)!important}
html.vp-route :is(.invite-hero,.group-stats,.group-card,.group-invite-card,.invite-card,.balance-card,.exchange-rate-card,.exchange-preview,.exchange-notes,.stats-card,.bulletin-content,.diamond-section,.you-can-win__item,.you-can-win__amount,.filter-modal,.lottery-log-modal__panel,.lottery-log__item,.broadcast-bar,.lottery-log-fab){background:var(--vp-card)!important;color:var(--vp-text)!important;border:1px solid var(--vp-line)!important;border-radius:var(--vp-radius)!important;box-shadow:0 6px 16px rgba(var(--vp-accent-rgb),.08)!important}
html.vp-route .game-card{background:var(--vp-card)!important;border:1px solid var(--vp-line)!important;box-shadow:0 6px 16px rgba(var(--vp-accent-rgb),.08)!important}
html.vp-route .game-card__title-overlay{background:linear-gradient(transparent,var(--vp-card))!important}
html.vp-route .game-card__title{color:var(--vp-text)!important;text-shadow:none!important}
html.vp-route :is(.all-games .virtual-games-list,.explore .virtual-games-list,.all-games .games-list){padding-bottom:calc(var(--vp-nav-h) + 16px + env(safe-area-inset-bottom,0px))!important}
html.vp-route :is(.search-box,.category-tab,.supplier-tab,.tab-wrapper){background:var(--vp-soft)!important;color:var(--vp-text)!important;border-color:var(--vp-line)!important}
html.vp-route :is(.category-tab.active,.supplier-tab.active,.retry-btn,.retry-button,.exchange-btn,.invite-hero__action,.button_green,.spin-win-modal__button,.btn-confirm){background:var(--vp-btn)!important;color:var(--vp-on)!important;border-color:transparent!important}
html.vp-route :is(.max-btn,.btn-reset,.button_secondary,.diamond-section .button,.diamond-section .button span){background:var(--vp-soft)!important;color:var(--vp-accent)!important;border:1px solid var(--vp-line)!important}
html.vp-route :is(.game-topbar__btn,.tg-game-actions__btn){background:var(--vp-card)!important;color:var(--vp-accent)!important;border:1px solid var(--vp-line)!important;box-shadow:none!important}
html.vp-route :is(.bulletin-html-content,.bulletin-html-content *){color:var(--vp-text)}
html.vp-route .empty-container p,html.vp-route .page-play .empty span{color:var(--vp-text-2)!important;background:none!important}