/*
 * Alto777 professional visual override
 * Visual-only layer for the existing W1/Diamond home.
 * Backend, APIs, login, signup, balance, database, routes and games untouched.
 */

html.alto777-theme,
body.alto777-theme,
.alto777-theme {
  --skin__ID: 9-1 !important;
  --skin__layout: 9 !important;
  --skin__filter_active: #006CFF !important;
  --skin__filter_active__toRgbString: 0,108,255 !important;
  --skin__bg_2: #FFFFFF !important;
  --skin__bg_2__toRgbString: 255,255,255 !important;
  --skin__bg_1: #EEF5FF !important;
  --skin__bg_1__toRgbString: 238,245,255 !important;
  --skin__home_bg: #EEF5FF !important;
  --skin__home_bg__toRgbString: 238,245,255 !important;
  --skin__border: #BAD7FF !important;
  --skin__border__toRgbString: 186,215,255 !important;
  --skin__primary: #006CFF !important;
  --skin__primary__toRgbString: 0,108,255 !important;
  --skin__lead: #006CFF !important;
  --skin__lead__toRgbString: 0,108,255 !important;
  --skin__search_icon: #006CFF !important;
  --skin__search_icon__toRgbString: 0,108,255 !important;
  --skin__bs_topnav_bg: #00CCFF !important;
  --skin__bs_topnav_bg__toRgbString: 0,204,255 !important;
  --skin__web_topbg_1: #D5E6FF !important;
  --skin__web_topbg_1__toRgbString: 213,230,255 !important;
  --skin__web_topbg_3: #EEF5FF !important;
  --skin__web_topbg_3__toRgbString: 238,245,255 !important;
  --skin__web_btmnav_db: #FFFFFF !important;
  --skin__web_btmnav_db__toRgbString: 255,255,255 !important;
  --skin__web_filter_gou: #FFFFFF !important;
  --skin__web_filter_gou__toRgbString: 255,255,255 !important;
  --skin__web_plat_line: #BAD7FF !important;
  --skin__web_plat_line__toRgbString: 186,215,255 !important;
  --skin__leftnav_active: #006CFF !important;
  --skin__leftnav_active__toRgbString: 0,108,255 !important;
  --skin__btmnav_active: #006CFF !important;
  --skin__btmnav_active__toRgbString: 0,108,255 !important;
  --skin__btmnav_def: #4E98FE !important;
  --skin__btmnav_def__toRgbString: 78,152,254 !important;
  --skin__icon_1: #006CFF !important;
  --skin__icon_1__toRgbString: 0,108,255 !important;
  --skin__profile_toptext: #006CFF !important;
  --skin__profile_toptext__toRgbString: 0,108,255 !important;
  --skin__text_primary: #006CFF !important;
  --skin__text_primary__toRgbString: 0,108,255 !important;
  --skin__btn_color_1: #006CFF !important;
  --skin__btn_color_1__toRgbString: 0,108,255 !important;
  --skin__btn_color_2: #00CCFF !important;
  --skin__btn_color_2__toRgbString: 0,204,255 !important;
  --skin__cards_text: #FFFFFF !important;
  --skin__cards_text__toRgbString: 255,255,255 !important;
  --skin__neutral_1: #4E98FE !important;
  --skin__neutral_2: #92C0FF !important;
  --skin__neutral_3: #9CC6FF !important;
  --alto-bg: #EEF5FF;
  --alto-card: #FFFFFF;
  --alto-blue: #006CFF;
  --alto-blue-soft: #4E98FE;
  --alto-line: #BAD7FF;
  --alto-cyan: #00D9FF;
}

html.alto777-theme,
html.alto777-theme body,
html.alto777-theme #app,
html.alto777-theme [class*="_home-layout_"],
html.alto777-theme [class*="_section-content_"] {
  background: var(--alto-bg) !important;
}

/* Header / top */
.alto777-theme header,
.alto777-theme header > div,
.alto777-theme header > div > div:not(:has([class*="_top-download_"])) {
  height: 1rem !important;
  min-height: 1rem !important;
  background: linear-gradient(180deg, #D5E6FF 0%, #EEF5FF 100%) !important;
}

.alto777-theme header > div > div:has([class*="_top-download_"]),
.alto777-theme header [class*="_top-download_"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.alto777-theme .lobby-home-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  width: 100% !important;
  height: 1rem !important;
  min-height: 1rem !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #D5E6FF 0%, #EEF5FF 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.alto777-theme [class*="_header-bg_"] {
  width: 100% !important;
  height: 1rem !important;
  background: linear-gradient(180deg, #D5E6FF 0%, #EEF5FF 100%) !important;
  background-size: cover !important;
}

.alto777-theme [class*="_header_"] {
  height: 100% !important;
  background-color: transparent !important;
}

.alto777-theme .lobby-home-header-container__section--left,
.alto777-theme .lobby-home-header-container__section--right {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  z-index: 2 !important;
}

.alto777-theme .lobby-home-header-container__section--right {
  width: .9rem !important;
  min-width: .9rem !important;
  justify-content: flex-end !important;
}

.alto777-theme ._header_107a1_30 ._un-login_cvqqm_30 {
  display: none !important;
}

.alto777-theme [class*="_icon-wrap_"] {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 .1rem 0 .3rem !important;
  padding: 0 !important;
}

.alto777-theme header svg,
.alto777-theme [class*="_arrow-icon_"],
.alto777-theme [class*="_icon-wrap_"] svg {
  color: #006CFF !important;
  fill: #006CFF !important;
}

.alto777-theme [class*="_arrow-icon_"] {
  font-size: .5rem !important;
  z-index: 2 !important;
}

.alto777-theme ._header_107a1_30 [class*="_arrow-icon_"] svg {
  display: none !important;
}

.alto777-theme ._header_107a1_30 [class*="_arrow-icon_"] {
  width: .61rem !important;
  height: .48rem !important;
  font-size: 0 !important;
  position: relative !important;
}

.alto777-theme ._header_107a1_30 [class*="_arrow-icon_"]::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: .006rem !important;
  width: .52rem !important;
  height: .08rem !important;
  border-radius: .08rem !important;
  background: #006CFF !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 .195rem 0 #006CFF, 0 .39rem 0 #006CFF !important;
}

.alto777-theme [class*="_assemblyLogo_"],
.alto777-theme ._header_107a1_30 [class*="_logo-box_"],
.alto777-theme ._header_107a1_30 [class*="_logo_"] {
  --assembly-logo-area-height: .8rem;
  --assembly-logo-area-width: 4.8rem;
  --img-text-logo-width: 4.8rem;
  --img-text-logo-img-width: .8rem;
  --img-text-logo-img-height: .8rem;
  --img-text-logo-img-title-size: .32rem;
  --img-text-logo-img-content-size: .26rem;
  width: 4.8rem !important;
  height: .8rem !important;
  max-width: calc(100% - 1.4rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
}

.alto777-theme [class*="_logoArea_"] {
  height: var(--assembly-logo-area-height, .8rem) !important;
  width: var(--assembly-logo-area-width, 4.8rem) !important;
}

.alto777-theme [class*="_logo-box_"] {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.alto777-theme [class*="_custom-logo_"] {
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
  vertical-align: middle !important;
}

.alto777-theme ._header_107a1_30 [class*="_custom-logo_"] {
  height: .8rem !important;
  width: auto !important;
}

/* Banner */
.alto777-theme [class*="_banner-container_"] {
  --banner-box-3-height: 2.1rem !important;
  --banner-box-3-border-radius: .16rem !important;
  --banner-box-3-margin: .2rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.alto777-theme [class*="_banner-container_"] > [class*="_banner-box-3_"],
.alto777-theme [class*="_banner-box-3_"] {
  height: 2.1rem !important;
  min-height: 2.1rem !important;
  margin: .2rem !important;
  border-radius: .16rem !important;
  overflow: hidden !important;
  box-shadow: 0 .04rem .12rem rgba(0,108,255,.12) !important;
}

.alto777-theme [class*="_banner-item_"],
.alto777-theme [class*="_banner-item_"] [class*="_bg-img_"] {
  border-radius: .16rem !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Tabs/search box */
.alto777-theme [class*="_tabs_"],
.alto777-theme [class*="_tab-container_"] [class*="_tab-header_"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(100% - .4rem) !important;
  height: .6rem !important;
  margin: .03rem .2rem .15rem !important;
  background: #fff !important;
  border-radius: .14rem !important;
  border: .01rem solid #BAD7FF !important;
  box-shadow: 0 0 .05rem #00D9FF !important;
}

.alto777-theme [class*="_headerItem_"] {
  height: .4rem !important;
  border-radius: .28rem !important;
  background: #BAD7FF !important;
  color: #006CFF !important;
  font-size: .18rem !important;
}

.alto777-theme [class*="_headerItem_"][class*="_active_"] {
  background: #006CFF !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Game categories */
.alto777-theme [class*="_tab-item-title_"] {
  width: 100% !important;
  height: 100% !important;
  border-radius: .14rem !important;
  box-shadow: 0 0 .05rem #00D9FF !important;
  border: .01rem solid #BAD7FF !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #006CFF !important;
}

.alto777-theme [class*="_tab-item-title_"] [class*="_icon_"] {
  width: .6rem !important;
  height: auto !important;
}

.alto777-theme [class*="_tab-item-title_"] [class*="_text_"] {
  height: .26rem !important;
  font-size: .18rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: #006CFF !important;
}

.alto777-theme [class*="_is-active_"],
.alto777-theme .ui-tab--active [class*="_tab-item-title_"] {
  background-image: linear-gradient(0deg, #B5FEFF, #FFFFFF 52%, #B1FEFF) !important;
  border: .01rem solid #03C3FF !important;
  font-weight: 700 !important;
}

/* Category/menu list */
.alto777-theme [class*="_gameContent_"] [class*="_menuList_"],
.alto777-theme [class*="_game-exhibition_"] .ui-tabs__nav {
  padding: .15rem .7rem !important;
  min-height: 1.2rem !important;
  background: #EEF5FF !important;
}

.alto777-theme [class*="_gameContent_"] [class*="_titleClass_"],
.alto777-theme [class*="_game-exhibition_"] .ui-tab {
  width: 1.4rem !important;
  min-height: .9rem !important;
  padding: .03rem !important;
  margin-right: .15rem !important;
}

/* Marquee / notice */
.alto777-theme [class*="_marqueue-box_"] {
  position: relative !important;
  z-index: 0 !important;
  margin: 0 .2rem !important;
}

.alto777-theme [class*="_marquee_"],
.alto777-theme .global-marquee {
  height: .5rem !important;
  min-height: .5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #006CFF !important;
  background: #FFFFFF !important;
  border: .01rem solid #BAD7FF !important;
  border-radius: .14rem !important;
  box-shadow: 0 .03rem .09rem rgba(0,108,255,.08) !important;
  margin: 0 .2rem !important;
}

.alto777-theme [class*="_marquee_"] *,
.alto777-theme .global-marquee *,
.alto777-theme [class*="_marquee_"] [class*="_swiper-container_"] {
  color: #006CFF !important;
  fill: currentColor !important;
}

/* Cards/game list */
.alto777-theme [class*="_game-list-box_"],
.alto777-theme [class*="_game-list_"],
.alto777-theme [class*="_layout-box_"],
.alto777-theme [class*="_tab-item-game-list_"] {
  background: #EEF5FF !important;
}

.alto777-theme [class*="_poster-box_"],
.alto777-theme [class*="_poster-image_"],
.alto777-theme [class*="_game-item_"] {
  background: #FFFFFF !important;
  border: .01rem solid #BAD7FF !important;
  border-radius: .16rem !important;
  box-shadow: 0 .04rem .12rem rgba(0,108,255,.10) !important;
}

.alto777-theme [class*="_game-name-normal_"],
.alto777-theme [class*="_game-platform-name_"] {
  color: #006CFF !important;
}

/* Bottom nav */
.alto777-theme [class*="_tabbar-bg_"] {
  height: 1.3rem !important;
  background-color: #FFFFFF !important;
  background-size: 100% 100% !important;
  margin-top: -.3rem !important;
  box-shadow: 0 -.04rem .12rem rgba(0,108,255,.10) !important;
}

.alto777-theme [class*="_tabbar_"],
.alto777-theme .ui-tabbar,
.alto777-theme [class*="_footerBox_"] {
  height: 1.24rem !important;
  background-color: #FFFFFF !important;
  border-top: .01rem solid #BAD7FF !important;
  box-shadow: 0 -.04rem .12rem rgba(0,108,255,.10) !important;
}

.alto777-theme [class*="_itemImg_"] {
  height: .5rem !important;
  color: #4E98FE !important;
}

.alto777-theme [class*="_itemActiveImg_"],
.alto777-theme [class*="_active_"] {
  color: #006CFF !important;
  fill: currentColor !important;
}

.alto777-theme [class*="_tabbar_"] [class*="_text_"],
.alto777-theme .ui-tabbar [class*="_text_"],
.alto777-theme [class*="_footerBox_"] [class*="_text_"] {
  color: #4E98FE !important;
}

.alto777-theme [class*="_text_"][class*="_active_"],
.alto777-theme [class*="_active_"] [class*="_text_"] {
  color: #006CFF !important;
  font-weight: 700 !important;
}

/* Side menu opened by the three-bar button */
.alto777-theme .ui-overlay:has(.ui-popup--left),
.alto777-theme .ui-overlay.wg-fixed-no-desktop:has(.ui-popup--left) {
  background: rgba(0, 33, 84, .22) !important;
  backdrop-filter: blur(.015rem);
}

.alto777-theme .ui-popup--left[class*="_aside-popup-container_"],
.alto777-theme [class*="_aside-popup-container_"] {
  width: 3.2rem !important;
  max-width: 82vw !important;
  background: #FFFFFF !important;
  border-right: .01rem solid #BAD7FF !important;
  box-shadow: .08rem 0 .22rem rgba(0,108,255,.18) !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_scroll-content_"],
.alto777-theme [class*="_aside-popup-container_"] [class*="_main_"] {
  padding: .25rem .25rem 2rem !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 42%, #EEF5FF 100%) !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_search-board_"] {
  height: .5rem !important;
  margin: 0 0 .18rem !important;
  padding: 0 .16rem !important;
  background: #FFFFFF !important;
  border: .01rem solid #BAD7FF !important;
  border-radius: .14rem !important;
  box-shadow: 0 0 .05rem rgba(0,217,255,.75) !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_search-board_"] [class*="_text_"] {
  margin-left: 0 !important;
  color: #4E98FE !important;
  font-size: .22rem !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_search-board_"] [class*="_icon_"],
.alto777-theme [class*="_aside-popup-container_"] [class*="_search-board_"] svg {
  color: #006CFF !important;
  fill: #006CFF !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_game-menu_"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .12rem !important;
  margin: 0 0 .18rem !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_game-menu_"] [class*="_item_"] {
  width: auto !important;
  height: 1.02rem !important;
  min-height: 1.02rem !important;
  margin: 0 !important;
  padding: .08rem .06rem !important;
  background: #BAD7FF !important;
  border: .01rem solid rgba(0,108,255,.18) !important;
  border-radius: .16rem !important;
  box-shadow: 0 .03rem .09rem rgba(0,108,255,.10) !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_game-menu_"] [class*="_item_"]:active,
.alto777-theme [class*="_aside-popup-container_"] [class*="_game-menu_"] [class*="_item_"][class*="_active_"] {
  background: #006CFF !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_game-menu_"] [class*="_img-wrap_"] {
  width: .44rem !important;
  height: .44rem !important;
  margin: .04rem auto .04rem !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_game-menu_"] [class*="_text_"] {
  color: #006CFF !important;
  font-size: .2rem !important;
  font-weight: 500 !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_betting-record_"],
.alto777-theme [class*="_aside-popup-container_"] [class*="_promote_"] {
  display: flex !important;
  align-items: center !important;
  min-height: .6rem !important;
  margin: 0 0 .1rem !important;
  padding: 0 .14rem !important;
  color: #006CFF !important;
  background: #FFFFFF !important;
  border: .01rem solid #BAD7FF !important;
  border-radius: .14rem !important;
  box-shadow: 0 .03rem .09rem rgba(0,108,255,.08) !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_betting-record_"] i,
.alto777-theme [class*="_aside-popup-container_"] [class*="_promote_"] i {
  margin: 0 .18rem 0 0 !important;
  color: #006CFF !important;
  font-size: .32rem !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_betting-record_"] span,
.alto777-theme [class*="_aside-popup-container_"] [class*="_promote_"] span {
  color: #006CFF !important;
  font-size: .22rem !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_discount-center_"] {
  margin: .18rem 0 !important;
  padding: .12rem .1rem .02rem !important;
  background: #EEF5FF !important;
  border: .01rem solid #BAD7FF !important;
  border-radius: .16rem !important;
  box-shadow: 0 .03rem .1rem rgba(0,108,255,.08) !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_discount-center_"] [class*="_title_"] {
  width: 100% !important;
  padding-bottom: .12rem !important;
  color: #006CFF !important;
  font-size: .24rem !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_discount-center_"] [class*="_menu-item_"] {
  border-radius: .14rem !important;
  overflow: hidden !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_other-item_"] {
  display: flex !important;
  align-items: center !important;
  min-height: .6rem !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #006CFF !important;
  font-size: .22rem !important;
  background: transparent !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_other-item_"] [class*="_icon-wrap_"] {
  width: .34rem !important;
  min-width: .34rem !important;
  height: .34rem !important;
  margin-right: .2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #006CFF !important;
  background: transparent !important;
  border-radius: 50% !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_other-item_"] [class*="_icon-wrap_"] i,
.alto777-theme [class*="_aside-popup-container_"] [class*="_other-item_"] [class*="_icon-wrap_"] svg {
  width: .32rem !important;
  height: .32rem !important;
  color: #006CFF !important;
  fill: #006CFF !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_other-item_"] > span {
  color: #006CFF !important;
  font-size: .22rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_official-channel_"] {
  margin: .2rem 0 !important;
  padding: 0 !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_official-channel_"] [class*="_title_"] {
  display: block !important;
  margin-bottom: .2rem !important;
  color: #006CFF !important;
  font-size: .24rem !important;
  font-weight: 700 !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_official-channel_"] [class*="_item_"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: .6rem !important;
  margin: 0 0 .1rem !important;
  padding: .08rem 0 !important;
  background: #FFFFFF !important;
  border: .01rem solid #BAD7FF !important;
  border-radius: .1rem !important;
  box-shadow: 0 .03rem .09rem rgba(0,108,255,.08) !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_official-channel_"] [class*="_icon_"] {
  width: .44rem !important;
  height: .44rem !important;
  margin-left: .08rem !important;
}

.alto777-theme [class*="_aside-popup-container_"] [class*="_official-channel_"] [class*="_item_"] > span {
  width: 100% !important;
  margin-left: .1rem !important;
  color: #006CFF !important;
  font-size: .22rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}