/* app download banner */
.app_download_banner_container {
  height: 70px;
}

.app_download_banner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, #004381 0%, #378FC1 100%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

#close_app_download img{
  filter: brightness(0) invert(99%) sepia(2%) saturate(9%) hue-rotate(54deg) brightness(103%) contrast(100%);
}

.app_download_icon {

}

.app_download_title {
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.app_download_text {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
}

.body_container{
  padding-top: 0;
  margin: 0;
  padding: 0 var(--main-inset)
}

.footer_nav_container{
  margin-top: 0;
}

/* index highlight banner */
.highlight_banner {
  width: 100%;
  margin-bottom: 9px;
}

.banner_holder{
  position: relative;
}

.banner_holder:before{
  content:'';
  display: block;
  padding-top: calc(170 / 375 * 100%);
}

@media screen and (max-width: 390px){
  .banner_holder:before{
    padding-top: calc(165 / 375 * 100%);
  }
}

@media screen and (max-width: 360px){
  .banner_holder:before{
    padding-top: calc(155 / 375 * 100%);
  }
}

@media screen and (max-width: 320px){
  .banner_holder:before{
    padding-top: calc(140 / 375 * 100%);
  }
}


.banner_holder .banner_holder_y_container{
  overflow: hidden;
  position: absolute;
  top: calc(-1 * var(--header-height));
  right: 0;
  bottom: -70px;
  left: 0;
}

.banner_holder .banner_holder_bg{
  position: absolute;
  top: -60px;
  bottom: -70px;
  left: 0;
  right: 0;
  background-size: cover;
}

.banner_swiper {
  width: 100%;
  overflow: visible;
}

.banner_swiper .swiper-slide{
  overflow: visible!important;
}

.banner_swiper .slide_under_bg{
  position: absolute;
  top: -60px;
  bottom: -70px;
  left: 0;
  right: 0;
  background-size: cover;
  filter: blur(3px);
}

.banner_swiper:not(.loaded) .swiper-slide{
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, rgba(255,255,255,0.2) 8%, rgba(255,255,255,0.22) 18%, rgba(255,255,255,0.2) 33%);
  background-size: 100vw 100vh;
  position: relative;
}

.banner_swiper .swiper-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 87px;
}

.banner_swiper .swiper-pagination-bullet{
  width:10px;
  height: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
}

.banner_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #fff!important;
}

.banner_swiper  .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: var(--component-bg-color);
  /* Center slide text vertically */
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1125 / 870;
  position: relative;
  overflow: hidden;
}

.banner_swiper  .swiper-slide a{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.banner_swiper  .swiper-slide img{
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination-bullet {
  opacity: .5 !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: #23252A !important;
}

/* index announcement */
.announcement_container {
  display: flex;
  margin-bottom: 9px;
}

.announcement_container .marquee {
  margin-left: 9px;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: #E6CC2F;
  width: 100%;
  overflow: hidden;
}

.announcement_container .marquee {
  white-space: nowrap;
}

.announcement_container .marquee .js-marquee {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.announcement_container .marquee .js-marquee>div {
  margin-right: 30px;
}

.announcement_container .marquee .js-marquee>div:last-child {
  margin-right: 0;
}

.announcement_container stop:first-child {
  stop-color: #ABE2FF;
}

.announcement_container stop:last-child {
  stop-color: #5191B2;
}

/* index login section */
.login_section_container {
  padding: 7px 10px;
  background: var(--component-bg-color);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.login_section_icon {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.login_section_text {
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
}

/* index app list */
.app_list_container {
  display: flex;
}

.app_list_categories {
  display: flex;
  flex-direction: column;
  margin-right: 13px;
  padding-bottom: 10px;
}

.app_list_categories>.item {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #A7A7A7;
  padding: 8px 5px;
  margin-bottom: 3px;
  width: 100%;
}

.app_list_categories>.item.active {
  background: var(--theme-button-bg-gt1);
  border-radius: 10px 10px 0px 10px;
  color: #FFFFFF;
  padding: 5px 5px;
}

.app_list_categories>.item.active svg path {
  fill: #FFFFFF;
}

.app_list_categories>.item>.icon {
  margin-right: 11px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app_list_categories>.item>.icon img{
  max-width: 100%;
  max-height: 100%;
}

.app_list_categories>.item>.icon path {
  fill: #A7A7A7
}

.app_list {
  width: 100%;
  height: 343px;
  overflow-y: auto;
}

.app_list>.listing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 11px;
  row-gap: 16px;
  margin-bottom: 16px;
}

.app_list>.listing img {
  width: 100%;
}

.app_list>.listing .text {
  text-align: center;
  margin-top: 8px;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;
  color: #FFFFFF;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.app_list>.large.listing {
  grid-template-columns: 1fr;
}

.app_list>.large.listing .text {
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  padding: 6px 9px;
  background: #23252A;
  border-radius: 0 0 10px 10px;
  width: 100%;
  margin-top: 0;
  text-align: center;
}

#game_app_list.loading {
  background: url(../images/general/loading.svg) center center no-repeat;
  background-size: 50px 50px;
  min-height: 200px;
}

#game_app_list .empty_content img{
  width: 70px;
  max-width: 100%;
}

.game-app-list-wrap{
  flex-grow: 1;
}

.game-app-list-wrap .app_list{
  height: calc(100% - 52px);
  padding-bottom: 124px;
}

.game-app-list-wrap .search_input_dark{
  margin-bottom: 10px;
}

.game-app-list-wrap .game_search_item [rel=img_container]{
  aspect-ratio: 1;
  max-width: 100%;
}

/* index announcement */
.index_announcement_title {
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  color: #FFFFFF;
  padding-top: 23px;
  margin-bottom: 22px;
  text-align: center;
}

.index_announcement_list {
  display: flex;
  flex-direction: column;
}

.index_announcement_list>.item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #DDDDDD;
}

.index_announcement_list>.item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.index_announcement_list>.item>.title {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.index_announcement_list>.item>.date {
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 13px;
  color: var(--theme-hili-color);
  margin-bottom: 8px;
}

.index_announcement_list>.item>.desc {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #ccc;
}

/* modal_announcement */
/* #modal_announcement .modal_content {
  height: 100%;
  top: 0;
  transform: none;
  left: 0;
  width: 100%;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

#modal_announcement .modal_inner_content {
  max-height: none;
  height: 100%;
}


#modal_announcement .swiper-pagination{
  bottom: 50px;
} */

#modal_announcement .modal_inner_content {
  max-height: none;
  height: 100%;
  border-radius: inherit;
  overflow-y: auto;
  min-height: initial;
  flex-grow: 1;
  margin-bottom:10px;
}

#modal_announcement .modal_content{
  padding: 0;
  width: 600px;
  max-width: calc(100% - 24px);
  height: 60vh;
  border-radius: 16px;
  background: var(--component-bg-color);
  display: flex;
  flex-direction: column;
}

#modal_announcement .item {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #404D65;
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

#modal_announcement .item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#modal_announcement .item>.title {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  margin-bottom: 16px;
}

#modal_announcement .item>.date {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 13px;
  margin-bottom: 8px;
  color:#A5ADC1;
}

#modal_announcement .item>.desc {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #ccc;
}

#modal_announcement .item>.desc img,
#modal_announcement .item>.desc video,
#modal_announcement .item>.desc iframe
{
  max-width: 100%;
}

#modal_announcement .modal_close {
  bottom: -42px;
}

#modal_announcement .swiper-slide img{
  max-width: 100%;
  object-fit: contain;
}

#modal_announcement .checkbox_container {
  padding-left: 30px;
}

#modal_announcement .checkmark {
  height: 20px;
  width: 20px;
}

#modal_announcement .checkmark:after {
  left: 6px;
  top: 3px;
}

#modal_announcement .modal_close_button {
  width:28px;
}



.landing_user_section {
  font-size: 12px;
  color: #FFFFFF;
}

.landing_user_section .name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.landing_user_section .wallet {
  font-size: 14px;
  font-weight: 700;
}

.landing_user_section .vip_icon {
  background: none;
  width: 2.2em;
  height: auto;
}

.landing_user_section .vip_icon .vip_label {
  font-size: 4px;
  display: none;
}

.landing_user_section .vip_icon img{
  max-width: 100%;
}

.landing_user_section .name>div:first-child {
  width: 42px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.mini_game_container {
  position: fixed;
  right: 10px;
  bottom: 100px;
}

.mini_game_container img {
  width: 72px;
  filter: drop-shadow(0px 0px 5px #FFE500);
}

.apptoolbar{
  position: fixed;
  width: 60px;
  transition: width .3s, right .3s;
  z-index: var(--zindex-apptoolbar);
}


.apptoolbar.hide .apptoolbar__tube{
  height: 52px!important;
  bottom: -3px;

  transform: scaleX(calc(52 / 60));
  border-radius: 50%;
  padding: 9px;
}

.apptoolbar.hide .apptoolbar__tube-item{
  transition: .3s;
  opacity: 0;
}

.apptoolbar_right-bottom{
  /* bottom: 65px; */
  bottom: 75px;
  right: 10px;
}

.apptoolbar img{
  max-width: 100%;
  max-height: 100%;
}

.apptoolbar__door{
  display: block;
  width: 46px;
  aspect-ratio: 1;
  position: relative;
  border-radius: 50%;
  margin: 0 auto;
  transition: margin-bottom .3s, opacity .3s;
  
  overflow: hidden;
  position: relative;
}

.apptoolbar__door:before{
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    1250deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  left: -100%;
  transition: 0.65s ease-in-out;
  z-index: 1;
}

.apptoolbar__door:active:before{
  left: 100%;
}

.apptoolbar__door img{
  transform: scale(1.3);
}

.apptoolbar__tube-item{
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  position: relative;
}

.apptoolbar__tube-item:not(:last-child){
  margin-bottom: 10px;
}

.apptoolbar__tube-item:last-child{
  margin-bottom: 48px;
}

.apptoolbar__tube-item.mini-game img{
  position: absolute; 
  top:50%; 
  left:50%; 
  transform: translate(-50%, -50%) translateX(-2px);
  max-width: none;
  max-height: none;
  width: 70px;
}

.apptoolbar__tube{
  background: #000000cc;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 7px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  bottom: -3px;
  transition: .3s;
  height: 288px;
  overflow: hidden;
}

.apptoolbar__tools{
  position: relative;
  margin-bottom: 15px;
}

.apptoolbar__tool-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-hili-color);
  border: 1px solid #ffffff17;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

.apptoolbar__tool-btn:after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #fff;
  opacity: 0.2;
  border-radius: inherit;
}

.apptoolbar__tool-btn.cs img{
  width: 100%;
}

#modal_news .modal_content{
  border-radius: 10px;
  padding: 18px;
  height: calc(665 / 812 * 100vh);
  display: flex;
  flex-direction: column;
}

#modal_news .modal_inner_content{
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

.news-glist{
  padding: 0;
}

.news-glist li + li{
  padding-top: 25px;
}

.news-gitem{
  display: block;
  padding-left: 35px;
  position: relative;
  padding-bottom: 10px;
}

.news-gitem:before{
  content:'';
  display: block;
  position: absolute;
  left: 35px;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid #144663;
}

.news-gitem__icon{
  position: absolute;
  top:0;
  left:0;
}

.news-gitem__info{
  font-size: 12px;
  color: #A7A7A7;
}

.news-gitem__content{
  color: #fff;
  font-size: 14px;
}

/* topbar_section */
.topbar_section{
  position: relative;
  display: flex;
  align-items: center;
  color:#fff;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  width: 100%;
}
.topbar_section .right_group{
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.topbar_section .wallet{
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}
.topbar_section .wallet_prefix{
  font-weight: normal;
  display: inline-block;
  margin-right: 5px;
}
.topbar_section .wallet span{
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 16px;
  margin-right: 5px;
}
.topbar_section .wallet .wallet_reload{
  width: 18px;
  pointer-events: none;
  opacity: 0.4;
}
.topbar_section .wallet .wallet_reload img{
  width: 100%;
}
.logged-in .topbar_section .wallet .wallet_reload{
  pointer-events: all;
  opacity: 1;
}
input[type=text].topbar_search_ipt{
  background: #23252A;
  caret-color: #A7A7A7;
  border: none;
  color: #A7A7A7;
  background-image: url(../images/general/search_opacity_70.svg);
  background-position: right 13px center;
  background-repeat: no-repeat;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 17px;
}
.topbar_overlay{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}
.topbar_overlay ~ * {
  opacity: 1;
  transition: opacity .3s;
}
.topbar_search_overlay{
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 1;
}
.topbar_overlay.active{
  opacity: 1;
  visibility: visible;
}
.topbar_overlay.active ~ *{
  opacity: 0;
}
.topbar_btns{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar_btn{
  display: flex;
  justify-content: center;
  height: 30px;
  align-items: center;
  background: linear-gradient(360deg, #5C5FFF 0%, #8F91FF 100%);
  border: 1px solid #FFFFFFCC;
  border-radius: 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  min-width: 65px;
  box-shadow: 0px 4px 4px 0px #0000001A;
}
.topbar_btn.deposit{
  padding-left: 2px;
}
.topbar_btn.deposit .topbar_btn_deco{
  margin-right: 4px;
  margin-top: -7px;
  user-select: none;
}
.topbar_btn_outline{
  color: #DD6419;
  border: 1px solid currentColor;
  background: none;
}
/* topbar_section / */

.section-title{
  font-size: 14px;
  font-weight: 700;
  color:#fff;
  margin: 0;
  margin-bottom: 15px;
}

.game_items{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 8px;
}
.game_item{
  color:#fff;
  position: relative;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.game_item .fav-btn{
  flex-shrink: 0;
}
.game_item_media{
  position: relative;
}
.game_item_media:before{
  content:'';
  display: block;
  padding-top: 100%;
}
.game_item_radius{
  border-radius: 8px 8px 0 0;
  background: #262753;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.game_item_radius:not(.loaded){
  background-image: url("/assets/images/general/spinner.svg");
}
.game_item_img{
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.game_item_tag{
  position: absolute;
  top: 0;
  background: var(--component-bg-color);
  font-size: 13px;
  font-weight: 700;
  padding: 18px;
  padding-bottom: 2px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(45deg) translateY(-70%);
  right: 0%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transform-origin: center;
}
.game_item_tag img{
  max-width: 100%;
  max-height: 20px;
}
.game_item_label{
  position: absolute;
  top: -3px;
  left: -5px;
  background-image: url(/assets/images/general/hot_label2.svg);
  width: 36px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
}
.game_item_foot{
  background: var(--game-item-bg);
  display: flex;
  gap: 7px;
  justify-content: space-between;
  border: 1px solid var(--game-item-bg);
  border-top: 0;
  padding: 8px 10px;
  border-radius: 0 0 12px 12px;
  flex-grow: 1;
}
.game_item_text{
  font-size: 12px;
  line-height: calc(13 / 11);
  font-weight: 500;
  color: #8D8EBD;
}

/* banner_box */
.banner_box{
  margin-bottom: 20px;
}
.banner_box_img{
  width: 100%;
}
/* banner_box / */

/* sticky */
.topbar_section_container{
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  /* backdrop-filter: blur(20px); */
  /* -webkit-backdrop-filter: blur(20px); */
  transition: backdrop-filter .3s, -webkit-backdrop-filter .3s, background .3s;
}
.category_tab_container.underlined_tab_container{
  position: sticky;
  top: var(--header-height);
  z-index: 2;
  background: linear-gradient(180deg, rgba(24, 25, 62, 0.6) 0%, #18193E 100%);
  display: flex;
  margin-bottom: 0;
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0;
  padding-bottom: 5px;
  filter: drop-shadow(0px -1px 0px rgba(255, 255, 255, 0.1));
  transition: backdrop-filter .3s, -webkit-backdrop-filter .3s, transform .3s;
}
.simple_tab_container{
  position: sticky;
  top: calc(var(--header-height) + 75px);
  z-index: 1;
  background: var(--theme-bg);
  overflow: hidden;
}
.scroll_down .topbar_section_container{
  background: #18193EE5;
}

.category_tab_noround .topbar_section_container{
  background: var(--theme-bg);
}

.category_tab_noround .category_tab_container.underlined_tab_container{
  border-radius: 0;
  border: var(--theme-bg);
  background: var(--theme-bg);
}
.category_tab_sticky .category_tab_container.underlined_tab_container{
  transform: translateY(-41px);
}
.category_tab_sticky .category_tab_container.underlined_tab_container [data-id]{
  transform: translateY(7px);
}
.category_tab_sticky .category_tab_container.underlined_tab_container .tab_container_serach_btn img{
  transform: translateY(22px);
}
.category_tab_sticky .category_tab_container.underlined_tab_container .tab_container_serach_btn:after{
  border-radius: 0;
}
.category_tab_sticky .vendor_tab_container{
  transform: translateY(-42px);
}
.category_tab_sticky.scroll_down .vendor_tab_container{
  transform: translateY(-50px) translateY(-42px);
}
/* sticky / */

.page_contents .empty_content{
  grid-column-start: 2;
}

.page_content .game_items{
  margin-bottom: 36px;
  padding: 0 var(--main-inset);
  padding-top: 5px;
}

.user_profile{
  display: inline-block;
  position: relative;
  line-height: 1;
  width: 36px;
  flex-shrink: 0;
}
.user_profile_media{
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}
.user_profile_media img{
  max-width: 100%;
}
.user_profile .vip_icon{
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 13px;
  background: url(../images/vip/vip_label.svg) center no-repeat;
  display: none;
}
.user_profile .vip_icon img{
  max-width: 100%;
}
.user_profile .vip_level{
  font-size: 12px;
  color: #fff;
  position: absolute;
  bottom: 0px;
  left: 10px;
  transform: scale(calc(8 / 12));
  transform-origin: center right;
  font-family: arial;
  width: 2em;
  text-align: center;
}
.user_profile .vip_level_double_digit{
  width: 40px;
}
.user_profile .vip_level_double_digit .vip_level{
  left: 24px;
}

.spinner5{
  margin-top: 20px;
}

.category_tab_container [data-id] img{
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  max-width: 24px;
  max-height: 24px;
  filter: var(--filter-to-5B5B7E);
}

.category_tab_container.tab_container:before{
  display: none;
}

.category_tab_container  .tab_content a,
.category_tab_container  .tab_content a.active
{
  font-size: 14px;
}

.category_tab_container  .tab_content a.active {
  color: #fff
}

.category_tab_container  .tab_content a.active img{
  filter: var(--filter-to-white);
}

.category_tab_container.tab_container a.active::after{
  display: none;
}

.vendor_tab_container{
  padding: 0 var(--main-inset);
  padding-bottom: 10px;
  margin-bottom: 0;
  overflow: hidden;
  transition: transform .3s;
}
.vendor_tab_container::-webkit-scrollbar{
  display: none;
}
.vendor_tab_container.tab_container .tab_content{
  gap: 0;
}
.vendor_tab_container.tab_container a{
  padding: 5px 14px;
  border-radius: 13px;
  font-size: 14px;
}
.vendor_tab_container .tab_content a.active{
  font-size: 14px;
  color:#fff;
  background: rgba(255, 255, 255, 0.2);
}

.vendor_tab_container .tab_content a:last-child{
  margin-right: 16px;
}

.inline_search_widget_wrapper{
  position: sticky;
  top: 0;
  z-index: 2;
}

.inline_search_widget{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--theme-bg);
  padding: 10px;
}

.inline_search_widget .sp_ipt{
  margin: 0;
  flex-grow: 1;
}

.inline_search_widget input{
  background: var(--component-bg-color);
  color: #fff;
  margin: 0;
  border-radius: 17px;
  padding: 10px 16px;
  font-size: 14px;
}

.inline_search_widget input::placeholder{
  color: rgba(255, 255, 255, 0.3);
}

.inline_search_widget .inline_search_widget_close img{
  filter: var(--filter-to-white)
}

.inline_search_widget .sp_ipt_ion{
  width: 18px;
  filter: var(--filter-to-68707B);
}

.foot_notes{
  display: flex;
  flex-wrap: wrap;
  gap: 37px;
  padding-top: 35px;
  padding-bottom: 50px;
  background: var(--theme-bg);
  justify-content: center;
  margin-top: auto;
}

.foot_note{
  width: calc(100% - 24px);
  max-width: 327px;
  margin: auto;
}

.foot_note img{
  max-height: 100%;
  max-width: 100%;
}

.mid_banner{
  padding-bottom: 20px;
  padding-top: 10px;
}

.mid_banner .mid_banner_img{
  max-width: 100%;
}

#modal_rg_notice{
  z-index: 999;
}

#modal_rg_notice .modal_content {
  padding: 20px 20px;
}

#modal_rg_notice .modal_inner_content{
  color: #fff;
  max-height: 70vh;
}
#modal_rg_notice .modal_title{
  color: white;
  font-size: 18px;
  line-height: 20.7px;
  margin-bottom: 10px;
}

#modal_rg_notice .notice_subitlte{
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 13.8px;
}

#modal_rg_notice ul{
  margin: 0;
  padding: 0;
}

#modal_rg_notice p,#modal_rg_notice ul{
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin: 8px 0;
}

#modal_rg_notice .brand_img{
  margin: 1em 0;
  max-width: 100%;
}

.confirm_terms_checkbox {
  margin-bottom: 10px;
}

.confirm_terms_text{
  color: #afafaf;
}

.confirm_terms_checkbox .confirm_terms_link{
  color: #fff;
  text-decoration: underline;
}

#terms_and_conditions_modal{
  z-index: 999;
}

.terms_modal_body{
  min-height: 68vh;
  padding-bottom: 8px;
}