.text-secondary{
  color: #C6A481 !important;
}
.announcement-box
{
    display: flex;
    align-items: center;
    padding-left: 30px;
    gap: 0.5rem;
}
.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.marquee__line {
    display: flex;
    padding: 10px 0;
    gap: calc(var(--marquee-gap) / 2);
}
.marquee__message {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--marquee-gap) / 2 - 2px);
    font-size: 14px;
    left: 0;
    line-height: 130%;
    white-space: nowrap;
    color: #f9f7f7;
    cursor: pointer;
}

.site-nav-listing
{
    text-align: center;
    border-top: 1px solid #70707036;
}
.site-nav-options
{
    display: flex;
    align-items: center;
    padding: 12px 0px 12px 8px;
    border-top: 1px solid rgba(112, 112, 112, 0.11);
    cursor: pointer;
    transition: all .25s ease-in;
    text-decoration: unset;
}
.site-nav-options .n 
{
  display: inline;
}
.site-nav-options .b
{
  display: none;
}
.site-nav-options span 
{
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
}
.site-nav-options b {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--SECONDARY-COLOR);
}
.site-nav-options i 
{
    font-size: 13px;
}
.site-nav-options-sub
{
  padding: 5px 0;
  display: none;
  animation: fadeIn 0.15s ease-in;
}
.site-nav-options-sub .site-nav-options
{
  display: flex;
  align-items: center;
  gap: 15px;
  color: #707070;
  border: none;
  padding: 8px 0px 8px 8px;
  text-align: left;
}
.site-nav-options-sub .site-nav-options span
{
  font-weight: 400;
  font-size: 12px;
  text-transform: capitalize;
}
.site-nav-options-sub .site-nav-options img
{
  width: 15px;
}
.site-nav-options-sub .site-nav-options i
{
  
}
.site-nav-options-sub .site-nav-options.card {
  width: auto;
  margin-right: unset;
  border-radius: 0;
  box-shadow: unset;
  margin-left: 0;
  flex-direction: row;
}
.site-nav-options-sub .site-nav-options.active
{
  color: #C6A481;
  font-weight: 700;
}
.site-nav-options.active .n 
{
  display: none;
}
.site-nav-options.active .b
{
  display: inline;
}

.site-nav-options:hover 
{
  
}
.wallet-view-more
{
  display: none;
}
.wallet-view-more.show 
{
  display: block;
}

.main-wallet-listing
{
    text-align: left;
}
.main-wallet-listing .main-wallet-box
{
    padding: 10px 8px;
    border-bottom: 1px solid rgba(112, 112, 112, 0.11);
    cursor: pointer;
    transition: all .25s ease-in;
}
.main-wallet-listing .main-wallet-box span 
{
    color: #2A2D34AF;
    font-size: 12px;
}
.main-wallet-listing .main-wallet-box i 
{
    color: #2A2D34AF;
}
.main-wallet-listing .main-wallet-box figure 
{
    font-size: 14px;
    margin: 0;
}
.main-wallet-box:hover
{
  
}

.welcome-msg
{
    font-size: 14px;
}
.username 
{
    color: var(--SECONDARY-COLOR);
    font-size: 16px;
}
.btn--site-topup
{
    background-color: var(--PLACEHOLDER-MEDIUM-COLOR);
    border: none;
    min-width: 140px;
    border-radius: 17px;
    text-transform: uppercase;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all .25s ease-in;
}
.btn--site-topup span 
{
    font-size: 10px;
    font-weight: 400;
}
.btn--site-topup b 
{
    font-size: 14px; 
    font-weight: 500;
}
.btn--site-topup i
{
    font-size: 16px;
}
.sys-date
{
    font-size: 12px;
}
.language-popup-box
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--PLACEHOLDER-MEDIUM-COLOR);
    padding: 0.45rem 1rem;
    border-radius: 10px;
    cursor: pointer;
}
.language-popup-box img
{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.language-popup-box span
{
    font-size: 11px;
    font-weight: 500;
}
.language-popup-box i
{

}
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@media (max-width: 768px)
{
  .site-nav-options {
    border: none;
  }
  .welcome-msg
  {
      font-size: 13px;
  }
  .username 
  {
      color: var(--SECONDARY-COLOR);
      font-size: 15px;
      margin-bottom: 10px;
  }
  .main-wallet-listing
  {
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    gap: 10px;
    padding: 10px 20px;
  }
  .main-wallet-listing .main-wallet-box
  {
    border: none;
    padding: 10px 8px;
    background-color: white;
  }
  .main-wallet-listing .main-wallet-box span
  {
    font-size: 11px;
  }
  .main-wallet-listing .main-wallet-box figure
  {
    font-size: 12px;
  }
}

/* Footer Nav */
.footer-nav
{
    padding: 1rem 1.5rem;
    background-color: var(--THIRD-COLOR);
}
.sect-footer
{
    border-bottom: 1.25px solid var(--PLACEHOLDER-DARK-COLOR);
    padding: 1rem 0 1.5rem;
}
.sect-footer .footer-nav-title
{
    color: var(--PLACEHOLDER-DARK-COLOR);
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 0.5rem;
}
.footer-nav-desc
{
    color: #757575;
    font-size: 12px;
}
.footer-nav-link
{
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    gap: 0.3rem;
    color: #fff;
}
.footer-nav-link a 
{
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.footer-nav-link a:hover 
{
    color: var(--SECONDARY-COLOR);
    text-decoration: underline;
}
.footer-nav-link a.bolded 
{
  color: var(--SECONDARY-COLOR);
  text-decoration: underline;
}
.footer-nav-title
{
    color: #fff;
    font-size: 13px;
    margin-bottom: 0.5rem;
}
.footer-nav-view
{
    color: #5d5b5b;
    font-size: 12px;
    text-transform: capitalize;
    text-decoration: underline;
    margin-top: 0.5rem;
}
.footer-nav img 
{
  width: 48px;
}
.footer-nav img.sm
{
  width: 40px;
}
.payment--footer
{
  width: 100%;
  max-width: 33.3%;
  margin-left: 30px;
}
.gaming--footer
{
  width: 100%;
  max-width: 33.3%;
}
.gaming--footer .footer-provider img
{
  width: 25px;
}
.footer-nav .title--footer-box{
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ffffff3c;
}
.footer-nav .title--footer-box span{
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 400;
}
.footer-nav .title--footer-box.bolded span{
  color: var(--SECONDARY-COLOR);
}
.footer-nav .title--footer-box i{
  color: #fff;
  font-size: 13px;
}
.footer-nav .content--footer-box{
  padding: 0.75rem 0;
}
.footer-nav .content--footer-box a{
  display: block;
  font-size: 12px;
  padding: 3px 0;
}
.footer-nav .content--footer-box a.bolded{
  color: var(--SECONDARY-COLOR);
}
.footer-nav .content--footer-box .xs {
  display: block;
}
.footer-nav .content--footer-box .sm {
  display: block;
}
.footer-nav .content--footer-box .footer-logo {
  width: 80px;
}
@media (max-width: 768px)
{
  .footer-nav-link
  {
    justify-content: start;
  }
  .footer-nav img 
  {
    width: 40px;
  }
  .footer-nav img.sm
  {
    width: 35px;
  }
  .gaming--footer
  {
    width: 100%;
    max-width: 100%;
  }
  .gaming--footer .footer-provider img
  {
    width: 70px;
  }
}
/* Footer Nav */



/* home */
.home-content {
    padding: 35px 35px;
}
.quota-home-box {
    background-color: var(--PRIMARY-COLOR);
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
}
.quota-home-box .badget
{
    background: rgba(244, 226, 206, 0.6);
    width: 0.75rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    
}
.quota-home-box .title
{
    padding: 1rem 2rem;
    font-size: 15px;
    font-weight: 500;
}
.small-banner-image {
    width: 100%;
    height: auto;
}
.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /* Fix of Webkit flickering */
    z-index: 1;
  }
  
  .swiper-vertical > .swiper-wrapper {
    flex-direction: column;
  }
  
  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
  }
  
  .swiper-android .swiper-slide,
  .swiper-wrapper {
    transform: translate3d(0px, 0, 0);
  }
  
  .swiper-pointer-events {
    touch-action: pan-y;
  }
  .swiper-pointer-events.swiper-vertical {
    touch-action: pan-x;
  }
  
  .swiper-slide {
    flex-shrink: 0;
    width: auto;
    height: 100%;
    position: relative;
    transition-property: transform;
  }
  
  .swiper-slide-invisible-blank {
    visibility: hidden;
  }
  
  /* Auto Height */
  .swiper-autoheight,
  .swiper-autoheight .swiper-slide {
    height: auto;
  }
  .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
  }
  
  /* 3D Effects */
  .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
  }
  .swiper-3d .swiper-wrapper,
  .swiper-3d .swiper-slide,
  .swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top,
  .swiper-3d .swiper-slide-shadow-bottom,
  .swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
  .swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top,
  .swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  
  /* CSS Mode */
  .swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    /* For Firefox */
    -ms-overflow-style: none;
    /* For Internet Explorer and Edge */
  }
  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }
  .swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  
  .swiper-horizontal.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: x mandatory;
  }
  
  .swiper-vertical.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: y mandatory;
  }
  
  .swiper-centered > .swiper-wrapper::before {
    content: "";
    flex-shrink: 0;
    order: 9999;
  }
  .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before);
  }
  .swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    width: var(--swiper-centered-offset-after);
  }
  .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before);
  }
  .swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    height: var(--swiper-centered-offset-after);
  }
  .swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
  }
  
  .swiper-pagination {
    position: absolute;
    text-align: right;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
  }
  .swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
  }

  .banner .banner-link .banner-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
  left: 0;
  width: 90%;
  margin: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.swiper-pagination.f-left 
{
  justify-content: start;
}
.swiper-pagination.f-right 
{
  justify-content: end;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--PLACEHOLDER-DARK-COLOR);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  background: var(--SECONDARY-COLOR);
  width: 30px;
  border-radius: 30px;
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 3px;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}


.home-game-type{
    height: 184px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.home-game-type-div1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: bottom;
    background-size: 100%;
    border-radius: 10px;
    z-index: 1;
    background-repeat: no-repeat;
}
.home-game-type-div2{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-radius: 10px;
    z-index: 2;
}
.home-game-type-name{
    position: absolute;
    bottom: 15px;
    font-weight: 500;
    width: 100%;
    text-align: center;
    z-index: 3;
    color: var(--PRIMARY-COLOR);
    font-size: 14px;
}
.home-game-type:hover .home-game-type-div1{
    filter: unset;
    transform: unset;
    transition: all 0.15s ease;
}
.home-game-type:hover .home-game-type-name{
    bottom: 42%;
    transition: all 0.15s ease
}
  
  .home-game-type-div2.home-game-shadow-1{
    /*background-image: linear-gradient(180deg, #AF00E400 0%, #AF00E400 50%, #000000 100%);*/
    background-image: unset;
  }
  .home-game-type:hover .home-game-type-div2.home-game-shadow-1{
    /*background-image: linear-gradient(180deg, #00000076 0%, #00000076 50%, #00000076 100%);*/
    background-image: unset;
  }
  .home-game-type-div2.home-game-shadow-2{
    /*background-image: linear-gradient(180deg, #AF00E400 0%, #AF00E400 50%, #000000 100%);*/
    background-image: unset;
  }
  .home-game-type:hover .home-game-type-div2.home-game-shadow-2{
    /*background-image: linear-gradient(180deg, #00000076 0%, #00000076 50%, #00000076 100%);*/
    background-image: unset;
  }
  .home-game-type-div2.home-game-shadow-3{
    /*background-image: linear-gradient(180deg, #AF00E400 0%, #AF00E400 50%, #000000 100%);*/
    background-image: unset;
  }
  .home-game-type:hover .home-game-type-div2.home-game-shadow-3{
    /*background-image: linear-gradient(180deg, #00000076 0%, #00000076 50%, #00000076 100%);*/
    background-image: unset;
  }
  .home-game-type-div2.home-game-shadow-4{
    /*background-image: linear-gradient(180deg, #AF00E400 0%, #AF00E400 50%, #000000 100%);*/
    background-image: unset;
  }
  .home-game-type:hover .home-game-type-div2.home-game-shadow-4{
    /*background-image: linear-gradient(180deg, #00000076 0%, #00000076 50%, #00000076 100%);*/
    background-image: unset;
  }
  .home-game-type-div2.home-game-shadow-5{
    /*background-image: linear-gradient(180deg, #AF00E400 0%, #AF00E400 50%, #000000 100%);*/
    background-image: unset;
  }
  .home-game-type:hover .home-game-type-div2.home-game-shadow-5{
    /*background-image: linear-gradient(180deg, #00000076 0%, #00000076 50%, #00000076 100%);*/
    background-image: unset;
  }
  .home-game-type-div2.home-game-shadow-6{
    /*background-image: linear-gradient(180deg, #AF00E400 0%, #AF00E400 50%, #000000 100%);*/
    background-image: unset;
  }
  .home-game-type:hover .home-game-type-div2.home-game-shadow-6{
    /*background-image: linear-gradient(180deg, #00000076 0%, #00000076 50%, #00000076 100%);*/
    background-image: unset;
  }

  .container-game-type4
  {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 20px;
  }
  .container-game-type3
  {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 20px;
  }
  .container-game-type2
  {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
  }
  .benefit--listing
  {
    display: grid;
    grid-template-columns: auto;
    gap: 20px;
  }
  .benefit--listing .benefit-box
  {
    display: flex;
    align-items: center;
    gap: 18px;

  }
  .benefit--listing .benefit-box .points 
  {
    min-width: 65px;
    width: 65PX;
    height: 65px;
    border-radius: 50%;
    background-color: #c6a38185;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .benefit--listing .benefit-box .points i 
  {
    color: var(--FONT-COLOR);
    font: normal normal normal 26px/1 "Material Design Icons";
  }
  .benefit--listing .benefit-box .title
  {
    color: var(--FONT-COLOR);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
  }
.benefit--listing .benefit-box .desc
{
    color: var(--FONT-COLOR);
    font-size: 14px;
}
.category-gaming-box
{
  margin-right: 40px;
}
.category-gaming-box .main-con
{
  background: linear-gradient(to top, rgba(28, 28, 28, 0.7), rgba(28, 28, 28, 0.7), rgba(0, 0, 0, 0.5)), url("../../img/4746@2x.png?v=1.1");
  background-position-y: bottom;
  background-size: cover;
  min-height: 280px;
  padding: 20px 40px;
  position: relative;
  display: flex;
  
}
.category-gaming-box .main-con .data-sbox
{
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: calc(33.3% - 1rem) calc(33.3% - 1rem) calc(33.3% - 1rem);
  gap: 1.5rem;
  width: 100%;
}
.category-gaming-box .main-con .data-sbox-empty
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}
.category-gaming-box .main-con .button--category
{
  background: linear-gradient(to top, rgba(28, 28, 28, 0), rgba(28, 28, 28, 0), rgba(0, 0, 0, 0)), url("../../img/button@2x.png?v=1.1");
  position: relative;
  width: 180px;
  min-width: 160px;
  height: 40px;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  cursor: pointer;
  margin-bottom:1em;
  border:none;
  padding: 0 20px;
  text-align:left;
 /* background:
    linear-gradient(-120deg, transparent 1em, #F7F7F7 1.05em , #F7F7F7 1.5em, transparent 1.45em, transparent 2em, #F7F7F7 2.05em) top no-repeat,
    linear-gradient(300deg, transparent 1em, #F7F7F7 1.05em , #F7F7F7 1.5em, transparent 1.45em, transparent 2em, #F7F7F7 2.05em) bottom no-repeat ;
*/

  background-size: cover;
  transition: all .15s ease-in;
}
.category-gaming-box .main-con .button--category:hover 
{
  scale: 1.05;
}
.category-gaming-box .main-con .button--category.bolded
{
  background: linear-gradient(to top, rgba(28, 28, 28, 0), rgba(28, 28, 28, 0), rgba(0, 0, 0, 0)), url("../../img/active-button@2x.png?v=1.1");
  width: 180px;
  height: 40px;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 0 20px;

  /*background:
    linear-gradient(-120deg, transparent 1em, #ffe1c2fe 1.05em , #ffe1c2fe 1.5em, transparent 1.45em, transparent 2em, #ffe1c2fe 2.05em) top no-repeat,
    linear-gradient(300deg, transparent 1em, #ffe1c2fe 1.05em , #ffe1c2fe 1.5em, transparent 1.45em, transparent 2em, #ffe1c2fe 2.05em) bottom no-repeat ;*/
    background-size: cover;

}
.category-gaming-box .main-con .character-box
{
  position: absolute;
  bottom: 0;
  left: 20%;
}
.category-gaming-box .main-con .character
{
  width: 154px;
  height: auto;
}
.category-gaming-box .main-con .logo
{
  width: 120px;
}
.category-gaming-box .main-con .desc
{
  color: #F7F7F7;
  font-size: 14px;
  line-height: 1.24;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
.category-gaming-box .main-con .btn--play
{
  background-image: linear-gradient(#F7F7F7, #CEAD8C);
  border: none;
  min-width: 120px;
  padding: 0.5rem;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  transition: all .15s ease-in;
}
.category-gaming-box .main-con .btn--play:hover
{
  
}
.category-gaming-box .main-con .bet 
{
  width: 350px;
}
.category-gaming-box .main-con .bet-board
{
  display: flex;
  align-items: center;
  gap: 8px;
}
.category-gaming-box .main-con .bet-board i 
{
  color: #fff;
  font: normal normal normal 16px/1 "Material Design Icons";

}
.category-gaming-box .main-con .bet-board .board
{
  width: 263px;
  min-height: 138px;
  background-color: #ececec75;
  border-radius: 10px;
}
.category-gaming-box .main-con-empty
{
  background: linear-gradient(to top, rgba(28, 28, 28, 0.7), rgba(28, 28, 28, 0.7), rgba(0, 0, 0, 0.5)), url("../../img/4746@2x.png?v=1.1");
  background-position-y: bottom;
  background-size: cover;
  min-height: 280px;
  padding: 20px 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content:center;
  grid-template-columns: calc(33.3% - 1rem) calc(33.3% - 1rem) calc(33.3% - 1rem);
  gap: 1.5rem;
}
.category-gaming-box .nav-con
{
  background-image: linear-gradient(#F7F7F7, #CEAD8C);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-gaming-box .nav-con .nav-con-box
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 24%;
  border-right: 1px solid #fff;
}
.category-gaming-box .nav-con .nav-con-box i 
{
  font: normal normal normal 30px/1 "Material Design Icons";
  opacity: 0.89;
}
.category-gaming-box .nav-con .nav-con-box span
{
  font-size: 14px;
  font-weight: bold;
}
.category-gaming-box .nav-con .nav-con-box:last-child
{
  border: none;
}
.game-listing
{
  align-items: end;
}
.game-listing .main-game-character
{
  width: 305px;
  height: 430px;
  padding-bottom: 36px;
}
.game-listing .countdown-amount
{
  position: absolute;
  left: 0;
  top: 79px;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 30px;
  font-weight: bold;

}
.game-listing .ab--label
{
  position: absolute;
  left: 0;
  top: 131px;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 10px;
}
.game-listing .main-game---listing
  {
    max-width: calc(100% - 375px);
    min-width: calc(100% - 375px);
  }
.game-listing .main-game-title
{
  border-bottom: 1px solid #707070;
  display: flex;
  align-items: center;
  width: 100%;
}
.game-listing .main-game-title .title
{
  padding: 15px 32px;
  background-image: linear-gradient(#F4E2CE, #CEAD8C);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.game-listing .main-game-title a
{
  margin-left: auto;
  text-decoration: underline;
  font-size: 12px;

}
.game-listing .main-game-listing
{
  /*max-width: calc(55vw) !important;*/

}
.region-label 
{
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.region-box {
  padding: 10px 0px 15px;
}
.region-box .nav, .dropdown-item{
  width: 100%;
  padding: 0 10px;
  font-size: 12px;
  color: #2A2D34;
  
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  cursor: pointer;
}
.region-box .nav
{
  border-right: 1px solid #2A2D34;
  max-width: fit-content;
}
.region-box .nav.bolded, .dropdown-item:hover{
  color: #C6A481;
}
.region-box .nav.bolded, .dropdown-item:active{
  color: #C6A481;
  background-color: transparent;
  font-weight: 600;

}
.region-box .nav:last-child
{
  border: none;
}
.video-box
{
  width: 100%;
  height: auto;
  min-height: 300px;
  border-radius: 18px;
  border: none;
  outline: none;
}
.swiper-slide
{
  border-radius: 0px !important;
}
.featured-game
{
  padding: 0;
  border-radius: 0;
}
.featured-game .grid-featured {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));*/
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
}

.featured-game .grid-featured > * {
  max-width: 230px;
  width: 100%;
}
.featured-game-box 
{
  position: relative;
  transition: all .15s ease-in-out;
}
.featured-game-box:hover
{
  opacity: 0.75;
}
.featured-game-link
{
  position: relative;
  border-radius: 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  cursor: pointer;
}
.featured-game-link .play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: all .15s ease-in;
  opacity: 0;
}
.featured-game-link .play i{
  color: var(--PRIMARY-COLOR);
  font-size: 60px;

}
.featured-game-link:hover .play{
  opacity: 1;
}
.featured-game .featured-game-img {
  border-radius: 0px;
  width: 100%;
  /*height: 180px;*/
  height: auto;
  aspect-ratio: 1;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.featured-game-info
{
  border-radius: 0px;
  width: calc(100% + 1px);
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
  position: absolute;
  left: -0.5px;
  right: 0;
  bottom: 0;
  background-color: var(--PLACEHOLDER-MEDIUM-COLOR);
  padding: 5px;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  color: var(--PLACEHOLDER-DARK-COLOR);
}

.swiper .swiper-pagination .swiper-pagination-bullet
{
  width: 0.5rem;
  height: 0.5rem;
  background-color: #373737;

}
.swiper .swiper-pagination .swiper-pagination-bullet:hover
{
  background-color: #9a9a9a;
}
.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active
{
  background-color: var(--SECONDARY-COLOR);
  height: 0.5rem;
}

@media (max-width: 768px)
{
  .home-content {
    padding: 10px 15px;
  }
  .quota-home-box {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .quota-home-box .title
  {
    padding: 0.5rem 1.5rem;
    font-size: 11px;
    font-weight: 500;
  }
  .container-game-type4
  {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
  }
  .container-game-type3
  {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
  }
  .container-game-type2
  {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
  }
  .home-game-type-name{
    position: absolute;
    bottom: 15px;
    font-weight: 500;
    width: 100%;
    text-align: center;
    z-index: 3;
    color: var(--PRIMARY-COLOR);
    font-size: 13px;
  }

  .benefit--listing {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 0px;
  }

  .benefit--listing .benefit-box {
    display: block;
    
    min-height: 200px;
    text-align: center;
  }
  .benefit--listing .benefit-box:nth-child(1) .txtcon{
    border: none;
  }
  .benefit--listing .benefit-box .txtcon {
    border-left: 2px solid #2a2d3417;
    padding: 0 10px;
    height: calc(200px - 65px);
  }

  .benefit--listing .benefit-box .points 
  {
    min-width: 50px;
    width: 50PX;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    
  }
  .benefit--listing .benefit-box .points i 
  {
    font: normal normal normal 25px/1 "Material Design Icons" !important;
  }
  .benefit--listing .benefit-box .title
  {
    color: var(--FONT-COLOR);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 3px;
    margin-top: 15px;
    text-align: center;
  }
  .benefit--listing .benefit-box .desc
  {
    color: var(--FONT-COLOR);
    font-size: 10px;
    text-align: center;
  }
  .game-listing
  {
    /*align-items: start;*/
  }
  .game-listing .main-game-char
  {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;

  }
  .game-listing .main-game---listing
  {
    max-width: calc(100%);
  }
  .game-listing .countdown-amount
  {
    position: absolute;
    left: 0;
    top: 91px;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-weight: bold;

  }
  .game-listing .ab--label
  {
    position: absolute;
    left: 0;
    top: 145px;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 10px;
  }
  .game-listing .main-game-title
  {
    border-bottom: 1px solid #707070;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
  }
  .game-listing .main-game-title .title
  {
    padding: 5px 20px;
    background-image: linear-gradient(#F4E2CE, #CEAD8C);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 12px;
    font-weight: 600;
  }
  .game-listing .main-game-title a
  {
    margin-left: auto;
    text-decoration: underline;
    font-size: 10px;

  }
  .game-listing .main-game-listing
  {
    max-width: 100% !important;
  }
  .region-label 
  {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
  }
  .region-box {
    padding: 10px 0px 15px;
  }
  .region-box .nav, .dropdown-item{
    padding: 0 10px;
    font-size: 12px;
    color: #2A2D34;
    
    text-decoration: none;
    cursor: pointer;
    max-width: 100%;
  }
  .region-box .nav {
    border-right: 1px solid #2A2D34;
  }
  .region-box .nav.bolded, .dropdown-item:hover{
    color: #C6A481;
  }
  .region-box .nav:last-child
  {
    border: none;
  }
  .featured-game .grid-featured
  {
    display: grid;
    grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
  }
  .home-game-type{
    height: 74px;
  }
  .game-listing .main-game-character
  {
    width: 100%;
    height: 430px;
  }
  .swiper .swiper-pagination .swiper-pagination-bullet {
    opacity: 0;
  }
  .quota-home-box .badget {
    width: 0.5rem;
  }
  .promo-banner-mb-listing {
    display: flex;
    gap: 10px;
    max-width: 100%;
    overflow: auto;
  }
  .promo-banner-mb-listing .small-banner-image {
    width: 250px;
    height: auto;
    margin-bottom: 8px;
  }
  .swiper-slide {

  }
  .sports-banner-mb-sec {
    display: grid;
    grid-template-areas: 'nav stage';
    gap: 20px;
    margin-top: 20px;
  }
  .sports-banner-mb-sec .navs{
    grid-area: nav;
    width: 70px;
    background: #F7F7F7;
  }
  .sports-banner-mb-sec .navs .sports-nav{
    font-size: 12px;
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
    padding: 15px 10px;
  }
  .sports-banner-mb-sec .navs .sports-nav.card{
    
    width: auto;
    margin: unset;
    border: none;
    padding: 15px 10px;
    box-shadow: unset;

  }
  .sports-banner-mb-sec .navs .sports-nav.bolded{
    color: #000;
    background-color: #C6A481;
    font-weight: 500;
  }
  .sports-banner-mb-sec .cont-stage{
    grid-area: stage;
    width: calc(100% - 90px);
  }
  .sports-banner-mb-sec .cont-stage .stage{
    width: calc(100vw - 125px);
  }
  .sports-banner-mb-sec .cont-stage .stage .labelx{
    font-size: 12px;
    color: #000;
    margin: 0.5rem 0;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing{
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: calc(100vw - 30px);
    overflow: auto;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing .gamex{
    background: linear-gradient(to top, rgba(28, 28, 28, 0.7), rgba(28, 28, 28, 0.7), rgba(0, 0, 0, 0.5)), url("../../img/4746_MB.png?v=1.1");
    background-position-y: bottom;
    min-width: 200px;
    display: flex;
    margin-top: 15px;
    min-height: 115px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing .gamex .logo{
    width: 40px;
    margin-bottom: 5px;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing .gamex .character{
    width: 55px;
    position: absolute;
    bottom: 0;
    left: 10px;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing .gamex .details{
    font-size: 6px;
    color: #fff;
    margin-bottom: 5px;
    flex-grow: 1;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing .gamex .content{
    margin-left: 80px;
    padding: 18px 10px 15px;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing .gamex .btn--launch-play{
    background: linear-gradient(to bottom, #F5F5F5, #CEAD8C);
    color: #000;
    font-size: 8px;
    border-radius: 5px;
    padding: 2px 13px;
    text-transform: uppercase;
    border: none;
  }
  .sports-banner-mb-sec .cont-stage .stage .gamex-listing .gamex .type-icon {
    width: 1.5rem;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .category-main-box.s2 {
    width: calc(100px) !important;
    min-height: 130px !important;
    border-top-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
  }
  .category-main-box.s2 img {
    border-top-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
  }
  .category-main-box.s2.recommended .game-caption {
    border-bottom-right-radius: 30px !important;
    padding: 0 0 10px !important;
    font-size: 12px !important;
  }
  .game-title-box {
    padding: 7px 10px 5px !important;
  }
  .game-title-box .name-type {
    font-size: 9px !important;
    margin-top: 0px !important;
    margin-bottom: 7px !important;
  }
  .game-title-box .name-rtp {
    font-size: 10px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
  }
  .gamex-listing2 {
    display: grid;
    grid-template-columns: auto auto auto;
    max-width: 100%;
    gap: 10px;
    width: calc(100vw - 30px);
    margin-bottom: 30px;
  }
  .gamex-listing2 .eachx {
    width: 100%;
    position: relative;
  }
  .tutorial--listing-mb {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: auto;
    max-width: 100%;
  }
  .tutorial--listing-mb .tutorial-box {
    min-width: 250px;
  }
  .tutorial--listing-mb .tutorial-reminder {
    color: var(--FONT-COLOR);
    font-size: 12px;
  }
  .video-box {
    width: 100%;
    height: auto;
    min-height: 150px;
    border-radius: 15px;
    border: none;
    outline: none;
  }
}

@keyframes fadeInBottom {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  0% {
      opacity: 0;
      transform: translateX(-150px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
      opacity: 0;
      transform: translateX(20px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

/* Create a class to apply the animation */
.fadeInBottom {
  animation: fadeInBottom 1s ease-out forwards;
}
.fadeInLeft {
  animation: fadeInLeft 0.65s ease-out forwards;
}
.fadeInRight {
  animation: fadeInRight 1s ease-out forwards;
}




/* Login Page */
.page-content
{
  padding: 24px 40px;
}
.login--form
{
  width: 300px;
  padding: 30px 22px;
  background-color: var(--CARD-CONTENT-BOX-BG-COLOR);
  border-radius: 18px;
}
.card--box 
{
  background-color: var(--CARD-CONTENT-BOX-BG-COLOR);
  border-radius: 18px;
}
.login--banner
{
  max-height: 300px;
  object-fit: cover;
  object-position: top;
  border-radius: 15px;
}
.login--seo
{
  font-size: 16px;
}
.login--seo-img
{
  width: 280px;
  max-width: 280px;
  height: auto;
  margin-top: -1rem;
}
@media (max-width: 768px) {
  .page-content
  {
    padding: 30px 20px;
    background-color: #ECECEC;
  }
  .login--form
  {
    width: auto;
    padding: 15px 0px;
    background-color: var(--CARD-CONTENT-BOX-BG-COLOR);
    border-radius: 18px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .login--banner
  {
    max-height: 200px;
    object-fit: cover;
  }
  .login--seo
  {
    font-size: 10px;
  }
  .login--seo-img
  {
    width: 120px;
  }
  .category-gaming-box
  {
    margin-right: 0px;
  }

  .category-gaming-box .main-con
  {
    background-size: cover;
    min-height: 300px;
    padding: 20px 40px;
    position: relative;
    display: block;
    align-items: center;
    justify-content: space-between;
  }
  .category-gaming-box .category-btn-box
  {
    position: absolute;
    left: 0;
    top: 20px;
  }
  .category-gaming-box .info-con
  {
    width: 35%;
    position: absolute;
    left: 20px;
    bottom: 20px;
    text-align: left !important;
  }
  .category-gaming-box .main-con .button--category, .category-gaming-box .main-con .button--category.bolded
  {
    width: 140px;
    min-width: 140px;
    height: 30px;
    font-size: 12px;
    padding: 0 10px;
  }
  
  .category-gaming-box .main-con .character-box
  {
    left: unset;
    right: 0px;
  }
  .category-gaming-box .main-con .character
  {
    width: 154px;
  }
  .category-gaming-box .main-con .logo
  {
    width: 65px;
  }
  .category-gaming-box .main-con .desc
  {
    max-width: 230px;
    color: #F7F7F7;
    font-size: 10px;
    line-height: 1.24;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .category-gaming-box .main-con .btn--play
  {
    background-image: linear-gradient(#F7F7F7, #CEAD8C);
    border: none;
    min-width: 100px;
    padding: 0.25rem;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 500;
    transition: all .15s ease-in;
  }
  .category-gaming-box .main-con .btn--play:hover
  {
    opacity: 0.75;
  }
  .category-gaming-box .main-con .bet 
  {
    width: 55%;
    position: absolute;
    right: 5px;
    bottom: 15px;
  }
  .category-gaming-box .main-con .bet-board
  {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .category-gaming-box .main-con .bet-board i 
  {
    color: #fff;
    font: normal normal normal 16px/1 "Material Design Icons";

  }
  .category-gaming-box .main-con .bet-board .board
  {
    width: 263px;
    min-height: 138px;
    background-color: #ececec75;
    border-radius: 10px;
  }
  .category-gaming-box .nav-con
  {
    background-image: linear-gradient(#F7F7F7, #CEAD8C);
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: start;
    white-space: nowrap;
    max-width: 100%;
    overflow: auto;
    gap: 10px;
  }
  .category-gaming-box .nav-con .nav-con-box
  {
    
    min-width: 50%;
    gap: 10px;
  }
  .category-gaming-box .nav-con .nav-con-box i 
  {
    font: normal normal normal 20px/1 "Material Design Icons";
    opacity: 0.89;
  }
  .category-gaming-box .nav-con .nav-con-box span
  {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  .category-gaming-box .nav-con .nav-con-box:last-child
  {
    border: none;
  }
  .form--reminder {
    font-size: 9px;
  }
  .step-num {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .step-num .separator{
    width: 30%;
    height: 1px;
    background-color: #70707065;
  }
  .step-num .num{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    background-color: #C6A481;
  }
  .step-num .num.bolded{
    background-color: #8BBE9D;
  }
  .card--box 
  {
    background-color: transparent;
    border-radius: 18px;
  }
  .profile-info {
    padding: 10px 15px !important;
  }
}


/* Register Page */
.register--benefit-row
{
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 30px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 50px;
}
.register--benefit-row .benefit-each
{
  text-align: center;
}
.register--benefit-row .benefit-dots
{
  background: var(--SECONDARY-COLOR);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: inline-block;
}
@media (max-width: 768px)
{
  .register--benefit-row
  {
    display: grid;
    grid-template-columns: auto auto;
    gap: 30px;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 50px;
  }
}

/* About Us */
.header-box
{
  width: 100%;
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(to top, rgba(28, 28, 28, 0.2), rgba(28, 28, 28, 0.2), rgba(0, 0, 0, 0.2)), url("../../img/Image 18@2x.png?v=1.1");

}
.header-nav-box
{
  background-color: var(--CARD-CONTENT-BOX-BG-COLOR);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
  gap: 20px;
  max-width: 100%;
  overflow: auto;

}
.header-nav-box .nav
{
  color: #707070;
  font-weight: 400;
  white-space: nowrap;
  padding: 10px 5px;
  font-size: 14px;
  position: relative;
}
.header-nav-box .nav .badge-red
{
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: normal;
  position: absolute;
  top: 3px;
  right: -15px;
  width: 18px;
  height: 18px;
}

.header-nav-box .nav.active, .header-nav-box .nav.bolded
{
  color: #2A2D34;
  font-weight: 400;
  border-bottom: 2px solid var(--SECONDARY-COLOR);
}

.header-body-box
{

}
.header-body-box .tab-pane
{
  padding: 50px 5vw;
  display: none;
}
.header-body-box .tab-pane.active
{
  display: block;
}
.header-body-box .card
{
  background-color: var(--PLACEHOLDER-MEDIUM-COLOR);
}
.header-body-box span
{
  font-size: 13px;
  font-weight: 500;
  color: var(--FONT-COLOR) !important;
}
.header-body-box p 
{
  font-size: 14px;
  color: var(--PLACEHOLDER-DARK-COLOR);
}
.header-body-box .flag 
{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.header-body-box h4 
{
  text-transform: uppercase;
  color: var(--FONT-COLOR) !important;
  font-weight: 500;
}
.header-body-box h5 
{
  text-transform: uppercase;
  color: var(--FONT-COLOR) !important;
  font-weight: 500;
}
.header-body-box .nav-item
{
  background-color: var(--PLACEHOLDER-COLOR);
  padding: 15px 10px;
  border-radius: 10px;
}
.header-body-box .nav-item label
{
  font-size: 13px;
  color: #fff;
}
.header-body-box .nav-item a
{
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
}

/* Category */
.banner-div
{
  background-color: rgba(0, 0, 0, 0.25);
  position: relative;
}
.banner-div img 
{
  width: 100%;
  object-fit: contain;
}
.banner-div .con 
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 80px;
}
.banner-div .con .title
{
  font-size: 30px;
  font-weight: 500;
  color: var(--FONT-COLOR);
}
.banner-div .con .separator
{
  background-color: var(--FONT-COLOR);
  width: 80px;
  height: 1.5px;
  margin-top: 10px;
  margin-bottom: 20px;
  opacity: 0.4;
}
.banner-div .con .desc
{
  
}
.category-filter-box
{
  border-bottom: 1px solid #70707067;
  display: flex;
  align-items: end;
  gap: 70px;
  white-space: nowrap;
  margin-bottom: 30px;

}
.search-input-box
{
  width: 190px;
  position: relative;
  border: 1px solid #707070bf;
  background-color: var(--PLACEHOLDER-MEDIUM-COLOR);
  color: var(--PLACEHOLDER-DARK-COLOR);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.search-input-box i
{
  position: absolute;
  left: 10px;
  top: 5px;
  color: var(--PLACEHOLDER-DARK-COLOR);
}
.search-input-box input
{
  width: 100%;
  padding: 5px 8px;
  background: transparent;
  border: none;
  outline: unset !important;
  padding-left: 30px;
  font-size: 14px;
  
}
.category-filter-box .search-filter-boxes
{
  display: flex;
  align-items: end;
  gap: 15px;
  max-width: 100%;
  overflow: auto;
}
.category-filter-box .filter-box
{
  padding: 5px 30px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--PLACEHOLDER-DARK-COLOR);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.category-filter-box .filter-box.active
{
  background: var(--SECONDARY-COLOR);
  color: var(--PRIMARY-COLOR);
}
.category-data-listing
{
  display: flex;
  align-items: start;
  gap: 40px;
}
.category-data-listing .category-type
{
  width: 220px;
  min-width: 220px;
}
.category-data-listing .category-type .type-box
{
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  padding: 15px 20px;
  cursor: pointer;
  height: 4rem;
  position: relative;
}
.category-data-listing .category-type .type-box i 
{
  color: var(--PLACEHOLDER-DARK-COLOR);
}
.category-data-listing .category-type .type-box img 
{
  width: 30px;
  object-fit: contain;
}
.category-data-listing .category-type .type-box .type-icon
{
  width: 35px !important;
  height: auto !important;
  position: absolute;
  top: 0px;
  left: 0px;
}
.category-data-listing .category-type .type-box span
{
  text-transform: uppercase;
  font-size: 13px;
  color: var(--PLACEHOLDER-DARK-COLOR);
  line-height: 1;
}
.category-data-listing .category-type .type-box.active
{
  background: var(--SECONDARY-COLOR);
  color: var(--PRIMARY-COLOR);
}
.category-data-listing .category-type .type-box.active i
{
  color: var(--PRIMARY-COLOR);
}
.category-data-listing .category-type .type-box.active img
{
  width: 30px;
}
.category-data-listing .category-type .type-box.active span
{
  color: var(--PRIMARY-COLOR);
}
.recommended-category-data-listing .data 
{
  width: calc(100%) !important;
}
.recommended-category-data-listing
{
  position: relative;
}
.recommended-category-data-listing .category-data
{
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
  gap: 1.5rem !important;
}
.recommended-category-data-listing .left-icon
{
  position: relative;
  left: 20px;
  height: 50%;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 60px;
}
.recommended-category-data-listing .left-icon i
{
  font-size: 3rem;
  color: var(--PLACEHOLDER-DARK-COLOR);
}
.recommended-category-data-listing .right-icon
{
  position: relative;
  right: 20px;
  height: 50%;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 60px;
}
.recommended-category-data-listing .right-icon i
{
  font-size: 3rem;
  color: var(--PLACEHOLDER-DARK-COLOR);
}
.left-icon, .right-icon {
  cursor: pointer;
  opacity: 0.65;
}
.left-icon:hover , .right-icon:hover
{
  opacity: 1;
}
[class^="sd"], [class^="dd"], [class^="fd"] {
  flex: 1;
  display: none; /* Hide all tabs by default */
}
.active {
  display: block; /* Show the active tab */
}
.category-data-listing .data 
{
  width: calc(100% - 20px);
}
.category-data-listing .category-data, .category-main-box-list
{
  width: calc(100%);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /*grid-template-columns: calc(200px - 1rem) calc(200px - 1rem) calc(200px - 1rem) calc(200px - 1rem) calc(200px - 1rem);*/
}
.category-main-box-list
{
  width: calc(80vw - 40px);
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow: auto;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #2a2d342b;
}
.category-data-listing .category-data .category-main-box
{
  width: calc(200px - 1rem);
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
  cursor: pointer;
  position: relative;
  background: black;
  margin-left: 5px;
  margin-right: 5px;
  min-height: 160px;
}
.category-main-box
{
  width: calc(50px - 1rem);
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
  cursor: pointer;
  position: relative;
  background: black;
  margin-left: 5px;
  margin-right: 5px;
  min-height: 160px;
}
.category-data-listing .category-data .category-main-box.recommended, .category-main-box.recommended
{
  background:#C6A481;
}
.category-data-listing .category-data .category-main-box img, .category-main-box.recommended img
{
  width: 100%;
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;

  min-height: inherit;
  object-fit: scale-down;
  object-position: top;
}
.category-data-listing .category-data .category-main-box .content, .category-main-box.recommended .content
{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(0px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.category-data-listing .category-data .category-main-box .content span,
.category-data-listing .category-data .category-main-box .content button,
.category-main-box.recommended .content span,
.category-main-box.recommended .content button
{
  color: var(--PRIMARY-COLOR);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 50px;
  text-align: center;
  width: 100% !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-data-listing .category-data .category-main-box:hover, .category-main-box.recommended:hover
{
  scale: 1.05;
  transition: all 0.15s ease-in;
  box-shadow: -4px 7px 30px -1px rgba(198, 164, 129,0.95);
  -webkit-box-shadow: -4px 7px 30px -1px rgba(198, 164, 129,0.95);
  -moz-box-shadow: -4px 7px 30px -1px rgba(198, 164, 129,0.95);
  
}
.category-data-listing .category-data .category-main-box:hover img, .category-main-box.recommended:hover img
{
  
}
.category-data-listing .category-data .category-main-box:hover .content, .category-main-box.recommended:hover .content
{
  
  opacity: 1;
  transform: translateY(0);
  z-index: 30;
}
.category-data-listing .category-data .game-caption, .category-main-box.recommended .game-caption
{
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(42, 45, 52, 0),rgba(42, 45, 52, 0.75), rgba(42, 45, 52, 1), rgba(42, 45, 52, 1));
  text-align: center;
  border-bottom-right-radius: 70px;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 0.5rem 0 1.25rem;
  color: var(--PRIMARY-COLOR);
  font-size: 14px;
  font-weight: 400;
}
.category-data-listing .category-data .category-main-box.recommended .game-caption, .category-main-box.recommended .game-caption
{
  background: linear-gradient(to bottom, rgba(198, 164, 129, 0),rgba(198, 164, 129, 0.75), rgba(198, 164, 129, 1), rgba(198, 164, 129, 1));
  color: var(--FONT-COLOR);
}
.col-form-label
{
  font-size: 14px;
  font-weight: 500;
}
.game-title-box
{
  padding: 15px 10px;
}
.game-title-box .name-title
{
  font-size: 16px;
  color: var(--FONT-COLOR);
  font-weight: 400;
  text-align: center;
}
.game-title-box .name-type
{
  font-size: 16px;
  color: #A9A6A6;
  font-weight: 400;
  text-align: center;
}
.game-title-box .name-rtp
{
  background-color: #C6A481;
  border-radius: 50px;
  padding: 5px 15px 5px;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  margin-top: 11px;
}


@media (max-width: 768px)
{
  .banner-div
  {
    background-color: rgba(0, 0, 0, 0.25);
    min-height: 150px;
    position: relative;
  }
  .banner-div.bb {
    margin-top: 50px;
  }
  .banner-div img 
  {
    min-height: 150px;
    width: 100%;
    object-fit: cover;
  }
  .category-filter-box
  {
    gap: 20px;
  }
  .category-filter-box .search-filter-boxes
  {
    gap: 5px;
  }
  .search-input-box
  {
    min-width: 100px;
  }
  .category-data-listing .data 
  {
    width: calc(100%);
  }
  .category-data-listing .category-data
  {
    width: calc(100%);
    display: grid;
    gap: 1rem;
    grid-template-columns: calc(50% - 0.75rem) calc(50% - 0.75rem);
    margin-bottom: 1.25rem;
  }
  .category-data-listing .category-data .category-main-box
  {
    width: 100%;
  }
  .recommended-category-data-listing .category-data
  {
    display: grid;
    justify-content: center;
    margin-bottom: 50px;
    gap: 1rem !important;
  }

  .header-box
  {
    width: 100%;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    background: linear-gradient(to top, rgba(28, 28, 28, 0.2), rgba(28, 28, 28, 0.2), rgba(0, 0, 0, 0.2)), url("../../img/Image 18@2x.png?v=1.1");

  }
  .header-body-box .tab-pane {
    padding: 30px 5vw;
  }
  .header-body-box h4 {
    font-size: 14px;
    margin-bottom: 1rem !important;
  }
  .header-body-box p {
    font-size: 11px;
  }
  .header-body-box span {
    font-size: 11px;
  }
  .header-body-box ol, .header-body-box ul {
    font-size: 12px;
    opacity: 0.65;
  }
  .header-body-box .card {
    background-color: transparent !important;
  }
  .header-body-box h5 {
    font-size: 12px;
  }
  .contact-us-boxin .rowx {
    display: block !important;
  }
  .contact-us-boxin .country-img {
    margin-bottom: 20px;
  }
  .contact-us-boxin .rowx .contact-list {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .contact-us-boxin .rowx .contact-list .contacts {
    padding: 10px !important;
    gap: 5px !important;
  }
  .contact-us-boxin .rowx .contact-list .contacts .contact-img {
    width: 30px;
    height: 30px;
  }
  .contact-us-boxin .rowx .contact-list .contacts .name {
    font-size: 11px !important;

  }
  .contact-us-boxin .rowx .contact-list .contacts .val, .contact-us-boxin .rowx .contact-list .contacts a {
    font-size: 9px !important;
  }
}

/* Sports */
.header-nav-other-box
{
  background-color: var(--CARD-CONTENT-BOX-BG-COLOR);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
  /*gap: 20px;*/
  max-width: 100%;
  overflow: auto;

}
.header-nav-other-box .nav
{
  color: #707070;
  font-weight: 400;
  white-space: nowrap;
  padding: 20px 50px;
  font-size: 14px;
  text-transform: uppercase;
  transition: all .15s ease-in;
  position: relative;
}
.header-nav-other-box .nav .type-icon {
  width: 40px !important;
  height: auto !important;
  top: 0;
  left: 0;
}

.header-nav-other-box .nav:hover, .header-nav-other-box .nav.active, .header-nav-other-box .nav.bolded
{
  color: var(--PRIMARY-COLOR);
  font-weight: 400;
  background-color: var(--SECONDARY-COLOR);
  
}
.sports-reminder
{
  text-align: center;
  padding: 2rem 1rem;
}
.sports-reminder .sports-reminder-title
{
  font-size: 20px;
  font-weight: 600;
  padding: 1rem 0;
}
.sports-reminder .sports-reminder-desc
{
  color: #2A2D34AF;
  font-size: 16px;
  font-weight: 500;
}
.sports-bg
{
  margin-top: -3rem;
}
.banner-div .con .desc .d1
{
  color: #C6A481;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.banner-div .con .desc .d2
{
  font-size: 14px;
  font-weight: 500;
  max-width: 350px;
}
.banner-div .con .desc .d3
{
  color: #C6A481;
  font-size: 22px;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.banner-div .con .desc .d4
{
    color: #2A2D34AF;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 768px)
{
  .banner-div .con 
  {
    
    padding: 0 25px;
  }
  .banner-div .con .title
  {
    font-size: 14px;
    font-weight: 500;
    color: var(--FONT-COLOR);
    margin-bottom: 0.5rem;
  }
  .banner-div .con .separator
  {
    background-color: var(--FONT-COLOR);
    width: 30px !important;
    height: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    opacity: 0.4;
  }
  .banner-div .con .desc .d1
  {
    font-size: 8px;
    margin-bottom: 0;
  }
  .banner-div .con .desc .d2
  {
    font-size: 7px;
    max-width: 110px;
  }
  .banner-div .con .desc .d3
  {
    font-size: 13px;
  }
  .banner-div .con .desc .d4
  {
    font-size: 11px;
  }
  .header-nav-other-box .nav
  {
    padding: 10px 30px;
    font-size: 12px;
  }
  .sports-reminder
  {
    padding: 0rem 20px;
  }
  .sports-reminder .sports-reminder-title
  {
    font-size: 16px;
    font-weight: 600;
    padding: 1rem 0;
  }
  .sports-reminder .sports-reminder-desc
  {
    color: #2A2D34AF;
    font-size: 14px;
    font-weight: 500;
  }
  .btn--primary-md
  {
    min-width: 130px;
    max-width: 200px;
    font-size: 14px;
    
  }
  .sports-bg
  {
    margin-top: -2rem;
  }
}



/* Promotion */
.promotion-listing
{
  /*display: grid;
  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
  gap: 1rem;*/
  display: flex;
  align-items: start;
  gap: 1rem;
  flex-wrap: wrap;
}
.promotion-listing .promotion-info
{
  width: 448px;
}
.promotion-listing .promotion-info-box
{
  border-radius: 15px;
  min-height: 180px;
  /*background: var(--PLACEHOLDER-MEDIUM-COLOR);*/
  position: relative;
  cursor: pointer;
  transition: all .15s ease-in;
}
.promotion-listing .promotion-info-box img
{
  width: 100%;
  border-radius: 15px;
  aspect-ratio: 1;
  /*object-fit: cover;
  object-position: top left;*/
  max-height: 220px;
  /*opacity: 0.85;*/
}
.promotion-listing .promotion-info-box .info
{
  position: absolute;
  left: 30px;
  top: 30px;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.promotion-listing .promotion-info-box .info .info-title
{
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.promotion-listing .promotion-info-box .info .info-desc
{
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}
.promotion-listing .promotion-info-box .info--remain
{
  background-color: var(--SECONDARY-COLOR);
  position: absolute;
  top: -0.5px;
  right: -0.5px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 15px;
  padding: 0.25rem 0.5rem;
  font-size: 10px;
  color: #fff;
}
.promotion-listing .promotion-info-box .info--remain  span
{
  color: #fff !important;
}
.promotion-listing .promotion-info-box .info > .buttons
{
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
  position: absolute;
  bottom: 50px;
  z-index: 20;
}
.promotion-listing .promotion-info-box .info > .buttons .claims-btn
{
  width: 120px;
  min-width: unset;
  font-size: 11px;
}
.promotion-listing .promotion-info-box .info > .buttons .claimed-btn
{
  width: 120px;
  min-width: unset;
  font-size: 11px;
  cursor: not-allowed;
}
.promotion-listing .promotion-info-box .info > .buttons .infos-btn
{
  width: 120px;
  min-width: unset;
  font-size: 11px;
  background-color: var(--PRIMARY-COLOR);
  text-align: center;
  transition: all .15s ease-in-out;
}
.promotion-listing .promotion-info-box .info > .buttons .infos-btn:hover 
{
  background-color: var(--SECONDARY-COLOR);
  border: 1px solid var(--SECONDARY-COLOR);
}
.promotion-listing .promotion-info-box .info > .buttons .claimed-btn.disabled
{
  cursor: not-allowed;
}
.promotion-listing .promotion-info-box:hover
{
  scale: 1.05;
}
.card
{
  background: var(--PRIMARY-COLOR) !important;
  margin-left: -5px;
  margin-right: -5px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  font-size: 13px;
}
@media (max-width: 768px)
{
  .promotion-listing
  {
    grid-template-columns: calc(100% - 0rem);
    gap: 0;
    margin-top: -10px;
  }
  .promotion-listing .promotion-info {
    padding: 20px 0;
    border-bottom: 1px solid #ECECEC;
  }
  .promotion-listing .promotion-info-box .info > .buttons .infos-btn {
    font-size: 10px;
  }
  .promotion-listing .promotion-info-box .info > .buttons .claims-btn {
    font-size: 10px;
  }
  .promotion-listing .promotion-info-box img {
    aspect-ratio: unset;
  }
  .promotion-listing .promotion-info-box .info {
    top: 20px;
    left: 20px;
  }
  .category-filter-box {
    position: fixed;
    top: calc( var(--TOP-MENU-HEIGHT) - 10px);
    left: 0;
    z-index: 20;
    background-color: #ECECEC;
    padding: 10px 15px;
    border: none;
    width: 100%;
  }
  .category-filter-box .bootstrap-select > .dropdown-toggle {
    border-radius: 0px;
  }
  .category-filter-box .search-input-box {
    border-radius: 0;
    background: #fff;
    border: none;
    flex-grow: 1;
  }
  .category-filter-box .search-input-box input{
    padding-left: 8px;
    padding-right: 24px;
  }
  .category-filter-box .search-input-box i{
    right: 8px;
    left: unset;
  }
  .category-filter-box .search-input-box input::placeholder{
    text-align: left;
  }
  .promotion-listing .promotion-info-box .info {
    width: auto;
  }
}
.filters--bar {
  gap: 0.5rem;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.filter-all-btn {
  color: var(--SECONDARY-COLOR);
  font-size: 20px;
}
.custom-dropdown {
  border: none;
  background-color: #F7F7F7;
  min-width: 50%;
  display: flex;
  align-items: center;
  padding: 4px 10px;
}
.custom-dropdown .dropdown-toggle {
  color: #707070;
  font-size: 12px;
  border: none;
  background-color: #F7F7F7;
}
.custom-dropdown .dropdown-menu {
  background-color: #F7F7F7;
}
.custom-dropdown .dropdown-item {
padding-top: 5px;
padding-bottom: 5px;
}
.custom-dropdown .dropdown-item.active {
  background-color: var(--SECONDARY-COLOR);
}

/* Gaming */


@media (max-width: 768px)
{

}

/* My Profile */


@media (max-width: 768px)
{
  
}

/* Change Password / Bank details */
.listing-header
{
  background: #2A2D343A;
  border-radius: 4px;
  
}
.listing-header th 
{
  color: var(--FONT-COLOR);
  font-size: 14px;
  font-weight: 400 !important;
}
.listing-data td
{
  color: var(--FONT-COLOR);
  font-size: 14px;
  font-weight: 400 !important;
}
.btn--edit
{
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 2px;
  cursor: pointer;
}
.btn--edit i 
{
  font-size: 12px !important;
}
.btn--edit:hover
{
  background-color: var(--SECONDARY-COLOR);
  color: var(--PRIMARY-COLOR);
}
.btn--verified
{
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 2px;
  border: 1px solid var(--SUCCESS-COLOR);
}
.btn--verified i 
{
  font: normal normal normal 12px/1 "Material Design Icons";
  color: var(--SUCCESS-COLOR);

}


@media (max-width: 768px)
{
  .listing-header
  {
    background: #2A2D34;
    border-radius: 4px;
    
  }
  .listing-header th 
  {
    color: #fff;
    font-size: 10px;
    font-weight: 400 !important;
  }
  .listing-data td
  {
    color: var(--FONT-COLOR);
    font-size: 10px;
    font-weight: 400 !important;
  }
}

/* Deposit */
.grid-profile { display: grid; grid-template-columns: 300px auto; gap: 20px; }
.profile-info {
  padding: 25px 35px;
}
.card--header
{
  font-size: 14px;
  font-weight: 400;
}
.sub-card-box
{
  padding: 20px 20px;
  border-radius: 8px;
  background: #fff;
}
.sub-card-box-min
{
}
.sub-card-box-min img {
  width: 30px;
  height: auto;
}
.nav-deposit
{
  /*background-color: #2A2D3414;*/
  border-radius: 13px;
}
.nav-deposit .nav-item .nav-link
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.8;
  padding: 12px 25px;
}
.nav-deposit .nav-item .nav-link i 
{
  font-size: 1rem !important;
}
.nav-deposit .nav-item .nav-title
{
  padding: 0;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 400;
}
.nav-deposit .nav-item .nav-link.active
{
  opacity: 1;
  background: #C6A481;
  color: #fff;
}
.amounts-box
{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.amounts-box .btn-amount
{
  min-width: 70px;
  background: #fff;
  border-radius: 4px;
  border: none;
  outline: none;
  color: #707070;
  font-size: 12px;
  font-weight: 500;
  padding: 10px;
  transition: all .15s ease-in-out;
}
.amounts-box .btn-amount:hover, .amounts-box .btn-amount.active
{
  background-color: var(--SECONDARY-COLOR);
  color: #fff;
}
.btn-browse
{
  min-width: 200px;
  background-color: var(--SECONDARY-COLOR);
  border-radius: 3px;
  padding: 10px;
  color: #F7F7F7 !important;
  font-weight: 400;
  font-size: 14px;
}
.btn-browse.uploaded 
{
  background-color: #2A2D34AF;
  font-size: 14px;
}
.payment-remarks-box div
{
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px;
}
.payment-remarks-box .text-secondary
{
  font-size: 15px;
  font-weight: 400;
}
.payment-remarks-box .text-secondary i
{
  opacity: 0.68;
  font-size: 20px;
}



@media (max-width: 768px)
{
  

  .grid-profile { display: block; grid-template-columns: auto; gap: 20px; }
  .nav-deposit .nav-item .nav-link {
    padding: 8px 15px;
    gap: 10px;
  }
  .nav-deposit .nav-item .nav-link i {
    font-size: 12px !important;
  }
  .nav-deposit .nav-item .nav-link span {
    font-size: 10px;
  }
  .nav-deposit {
    border-radius: 0px;
  }
  .nav-deposit .nav-item .nav-link.active {
    border-radius: 8px;
  }

  .custom-select-box-1 .bootstrap-select , .form-select-2 .bootstrap-select{
    width: 100% !important;
    border-radius: 5px;
    border: 1px solid #9393935C;
  }
  .custom-select-box-1 .dropdown-toggle, .form-select-2 .dropdown-toggle {
    padding: 6px 22px;
    outline: none !important;
    border-radius: 5px;
    
  }
  .amounts-box .btn-amount {
    background-color: #F7F7F7;
    font-weight: 500;
  }
  .btn-browse {
    font-size: 12px;
    padding: 8px;
  }
  .btn--success-md {
    width: 100%;
    padding: 10px;
    max-width: unset;
    font-size: 12px;
    line-height: 1;
    border-radius: 3px;
    font-weight: normal;
  }
  .payment-remarks-box {
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: -35px;
    background-color: #ECECEC;
    margin-top: 30px;
    padding: 20px 40px;
  }
  .payment-remarks-box .text-secondary {
    font-size: 12px;
  }
  .payment-remarks-box .text-secondary i {
    font-size: 12px;
  }
  .payment-remarks-box div {
    font-size: 10px;
  }
  .payment-remarks-box div li {
    margin-bottom: 5px;
  }
  .card--header
  {
    font-size: 12px;
    font-weight: 500;
    padding-bottom: 1.25rem !important;
  }
  #form-edit label {
    font-size: 12px !important;
  }
  #form-edit span {
    font-size: 12px !important;
  }
  #form-edit .btn--edit {
    background-color: #ECECEC;
  }


}


/* Withdrawal */


@media (max-width: 768px)
{
  #new_bank, #existing_bank {
    min-width: 35%;
  }
}


/* Transfer */
.all-in-title 
{
  font-size: 14px;
  padding: 20px 0 15px;
}
.all-in-listing
{
  display: grid;
  grid-template-columns: calc(33.3% - 33.3px) calc(33.3% - 33.3px) calc(33.3% - 33.3px);
  row-gap: 20px;
  column-gap: 50px;
  margin-bottom: 40px;
}
.all-in-listing .allin-box
{
  
}
.all-in-listing .allin-box .allin-balance
{
  background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
}
.all-in-listing .allin-box .allin-balance .resource
{
  width: 50px;
  height: 50px;
  background-color: #707070;
}
.all-in-listing .allin-box .allin-balance .provider-image
{
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: grayscale(1);
}
.all-in-listing .allin-box .allin-balance .namex
{
  display: block;
  font-size: 14px;
  color: #2A2D34AF;
}
.all-in-listing .allin-box .allin-balance .valuex
{
  display: block;
  font-size: 14px;
  color: var(--SUCCESS-COLOR);
}
.all-in-listing .btn--allin
{
  width: 100%;
  border-radius: 0;
  border: none;
  outline: none;
  background-color: var(--FOURTH-COLOR);
  color: #2A2D34AF;
  text-transform: uppercase;
  font-size: 12px;
  padding: 8px 10px;
  transition: all .15s ease-in;
}
.all-in-listing .btn--allin:hover
{
  background-color: var(--SUCCESS-COLOR);
  color: #fff;
}
.btn-swap
{
  font: normal normal normal 30px/1 "Material Design Icons";
  color: var(--SECONDARY-COLOR);

}
.wallet-balance-box
{
  min-width: 300px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 30px;
  border-radius: 20px;
  background-color: #DCDCDC;
}
.wallet-balance-box .title
{
  color: #2A2D34AF;
  font-size: 14px;
}
.wallet-balance-box .amount
{
  color: #2A2D34AF;
  font-size: 14px;
}
.btn-refresh-game-wallet
{
  font-size: 1rem;
}

@media (max-width: 768px)
{
  .mb-border {
    border-bottom: 1px solid #7070705f;
    border-radius: 0;
    padding-bottom: 30px !important;
  }
  .mb-flex {
    display: flex;
    align-items: center;
  }
  .mb-flex .form--label {
    width: 30%;
  }
  .mb-flex .flex-box {
    width: 70%;
  }
  #form-transfer .w--50 {
    width: 100%;
  }
  #form-transfer .mbml-3 {
    margin-left: 30%;
  }
  #form-transfer .form-select-2 {
    display: flex;
    align-items: center;
  }
  #form-transfer .form--label {
    min-width: 30%;
  }
  .all-in-title 
  {
    font-size: 12px;
    padding: 20px 0 5px;
  }
  .all-in-listing
  {
    display: block;
    grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
    row-gap: 1rem;
    column-gap: 1rem;
  }
  .all-in-listing .allin-box {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
  }
  .all-in-listing .btn--allin {
    width: auto;
    min-width: 100px;
    margin-left: auto;
    border-radius: 30px;
    font-size: 10px;
    padding: 8px 15px;
    line-height: 1;
  }
  .all-in-listing .allin-box .allin-balance
  {
    gap: 10px;
    padding: 8px 15px;
    align-items: start;
    background-color: #3b3f4667;
    width: 100%;
    border-radius: 30px;
    margin-bottom: 0;
    line-height: 1;
  }

  .all-in-listing .allin-box .c {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    
  }

  .all-in-listing .allin-box .allin-balance .resource
  {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    background-color: #707070;
    display: none;
  }
  .all-in-listing .allin-box .allin-balance .provider-image
  {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    display: none;
  }
  .all-in-listing .allin-box .allin-balance .namex
  {
    display: block;
    font-size: 10px;
    color: #fff;
  }
  .all-in-listing .allin-box .allin-balance .valuex
  {
    display: block;
    font-size: 10px;
    color: #fff;
  }

  .wallet-balance-box
  {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: #DCDCDC;
  }
  .wallet-balance-box .title
  {
    color: #2A2D34AF;
    font-size: 12px;
  }
  .wallet-balance-box .amount
  {
    color: #2A2D34AF;
    font-size: 13px;
  }
  .btn-refresh-game-wallet
  {
    font-size: 1rem;
    color: #2a2d346b;
    
  }
  #game-wallet {
    width: auto;
  }
}

/* History  */
.date--listing
{
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 1rem;
}
.date--listing .btn-date, .date--listing .btn-type, .date--listing .btn-reg-date
{
  width: 100%;
  background: transparent;
  border-radius: 7px;
  font-size: 14px;
  border: none;
  outline: none;
  padding: 15px;
}
.date--listing .btn-date.active, .date--listing .btn-type.active, .date--listing .btn-reg-date.active
{
  background-color: var(--SECONDARY-COLOR);
  color: white;
}


@media (max-width: 768px)
{
  .date--listing
  {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
  }
  .date--listing .btn-date
  {
    width: 100%;
    background: transparent;
    border-radius: 7px;
    font-size: 12px;
    padding: 10px;
  }
  .date--listing .btn-reg-date
  {
    width: 100%;
    background: transparent;
    border-radius: 7px;
    font-size: 12px;
    padding: 10px;
  }
  .bb {
    margin-top: 60px;
  }
}

/* Notification */
.inbox-table .data--box
{
  color: #2A2D34AF !important;
  cursor: pointer;
  background-color: #dcdcdcb6;
}
.inbox-table .data--box .text-secondary
{
  color: #C6A481 !important;
}
.inbox-table .data--box.readed
{
  background-color: transparent;
}
.inbox-table .data--box.readed .text-secondary
{
  color: #2A2D34AF !important;
  font-weight: 400;
}
.inbox-table .data--box.selected, .inbox-table .data--box.selected:hover
{
  background-color: #c2c2c2;
}
.inbox-table .data--box.selected .text-secondary
{
  color: #2A2D34AF !important;
  font-weight: 400;
}
.inbox-table .data--box:hover 
{
  opacity: 0.75;
  background-color: transparent;
}
.inbox-table .data--box td
{
  font-size: 10px;
}
.inbox-table .data--box h2 
{
  font-size: 14px;
}
.inbox-table .data--box p  
{
  font-size: 12px;
}
.inbox-listing-header
{
  background-color: #C6A481;
  color: #fff !important;
  display: flex;
  align-items: center;

}
.inbox-listing-header *
{
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.inbox-listing-header .custom-control-label
{
  padding: 0;
}
.notification-title-info
{
  font-size: 14px;
  font-weight: 500;

}
.notification-title-info .text-secondary
{
  color: #C6A481 !important;
}
.notification-message-info
{
  font-size: 14px;
  color: var(--PLACEHOLDER-DARK-COLOR);
}
.notification-message-info .text-secondary
{
  color: #C6A481 !important;
}
.notification-date-info
{
  color: var(--PLACEHOLDER-DARK-COLOR);
  font-size: 12px;
}
.separator
{
  height: 1px;
  width: 100%;
  background: #70707064;
  margin: 20px 0;
}



@media (max-width: 768px)
{
  .inbox-table .data--box
  {
  }
  .inbox-table .data--box p
  {
  }
  .inbox-table .data--box .text-secondary
  {
    font-size: 12px;
  }
  .inbox-table .data--box .text-right 
  {
    width: auto !important;
    margin-left: auto;
    white-space: nowrap;
  }
  .inbox-table .data--box.readed , .inbox-table .data--box.selected, .inbox-table .data--box:hover{
  }
  .inbox-table .data--box.readed p, .inbox-table .data--box.selected p, .inbox-table .data--box:hover p{
    opacity: 0.65;
  }
  .inbox-table .data--box.readed .text-right, .inbox-table .data--box.selected .text-right, .inbox-table .data--box:hover .text-right {
  }
  .inbox-table .data--box.readed .text-secondary, .inbox-table .data--box.selected .text-secondary, .inbox-table .data--box:hover .text-secondary {
  }

  #form-password-edit > div {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #form-password-edit .form--input-box-3 {
    width: 100%;
    max-width: 100%;
    line-height: 1;
  }
  #form-password-edit .form--input-box-3 input {
    text-align: left;
  }
  #form-password-edit label {
    width: 100%;
    max-width: 100%;
    color: #2A2D34AF;
    font-size: 14px;
  }
  .ua-box .data{
    margin-left: -30px;
    margin-right: -30px;
  }
  .ua-box .listing-header {
    background-color: #2A2D34AF;
    white-space: nowrap;
  }
  .ua-box .listing-data td {
    font-size: 12px;
  }
  .ua-box .listing-header th {
    font-size: 12px;
  }
  .ua-box .listing-data td {
    padding: 1rem 0.3rem;
  }
  .ua-box .table thead th:first-child, .ua-box .table thead th:last-child{
    border-radius: 0px;
  }
  #form-create .form--input-box-2 {
    margin-bottom: 1rem;
  }
  
}

/* Modals */

.modal-open {
  overflow: hidden;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: auto;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: min-content;
  content: "";
}
.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}
.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 475px;
  min-height: 50px;
  pointer-events: auto;
  background-color: var(--PLACEHOLDER-MEDIUM-COLOR) !important;
  background-clip: padding-box;
  border: 0 solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  outline: 0;
  box-shadow: 0px 5px 10px #F7F7F7A1;
  
}
.announcement > .modal-body {
  padding: 3rem;
  max-height: 280px;
  overflow-x: auto;
  padding-top: 0.75rem !important;
  position: relative;
}
.modal-dialog.announcement 
{
  max-width: 675px;
}
.modal-content.announcement
{
  background: linear-gradient(to top, rgba(28, 28, 28, 0), rgba(28, 28, 28, 0), rgba(0, 0, 0, 0)), url("../../img/abstract-high-tech-white-border-futuristic-technology-background-generative-ai copy@2x.png?v=1.1") !important;
  background-position: top !important;
  background-size: contain !important;
  width: 675px;
  height: 500px;
  background-repeat: no-repeat !important;
  padding: 4rem;
  position: relative;
  box-shadow: unset;
  padding-top: 5.25rem;
}
.form-popup-status-toggle
{
  position: sticky;
  left: 3rem;
  bottom: 0rem;
  margin-left: 3rem;
}
.modal-content.lg
{
  width: 85%;
  min-height: 200px;
  padding: 35px 40px;
  border-radius: 16px !important;
  position: relative;
  box-shadow: 0px 5px 10px #F7F7F7A1;
}
.modal-title-a
{
  color: var(--FONT-COLOR);
  font-size: 16px;
  font-weight: 300;
  padding-bottom: 20px;
}
.modal-title-b
{
  color: var(--PLACEHOLDER-DARK-COLOR);
  font-size: 20px;
  font-weight: 600;
}
.modal-title-c
{
  color: var(--PLACEHOLDER-DARK-COLOR);
  font-size: 13px;
  font-weight: 300;
}
.modal-message
{
  padding: 1.5rem 0;
  text-align: center;
}
.modal-message span , .modal-message div
{
  color: var(--FONT-COLOR);
  font-size: 15px;
  font-weight: 500;
}
.confirm-buttons
{
  display: grid;
  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
  align-items: center;
  gap: 1rem;
}

.div-tab button{
  width:100%;
  background: var(--PRIMARY-COLOR);
  color: var(--FONT-COLOR);
  font-size: 12px;
  font-weight: 500;
  margin-top: 15px;
}
.div-tab:hover button {
  background: var(--SECONDARY-COLOR) !important;
  color:var(--PRIMARY-COLOR) !important;
  
}
.selected-tag {
  background: var(--SECONDARY-COLOR) !important;
  color:var(--PRIMARY-COLOR) !important;
}

.btn-otp-send, .btn-email-verification-send, .btn-sms-verification-send, .btn-withdrawal-otp-send
{
  white-space: nowrap;
  width: 130px;
  height: auto;
  text-transform: capitalize;
  background: var(--SECONDARY-COLOR) !important;
  color:var(--PRIMARY-COLOR) !important;
  font-size: 12px;
  font-weight: 300;
  border-radius: 8px;
  outline: none;
}
.btn-otp-send:hover , .btn-email-verification-send:hover, .btn-sms-verification-send:hover, .btn-withdrawal-otp-send:hover
{
  background: var(--SUCCESS-COLOR) !important;
  color:var(--PRIMARY-COLOR) !important;
}
.btn-otp-send.disabled , .btn-email-verification-send.disabled, .btn-sms-verification-send.disabled , .btn-withdrawal-otp-send.disabled
{
  opacity: 1 !important;
}


.modal-backdrop {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: 0.5;
}
.close-modal-box {
  position: absolute;
  top: -10px;
  right: -10px;
}
.close-modal-box .close-new
{
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: var(--PRIMARY-COLOR);
  color: #000;
  transition: all .15s ease-in;
  opacity: 1;
  box-shadow: 3px 3px 5px #2A2D34;
}
.close-modal-box .close-new:hover 
{
  background: var(--SECONDARY-COLOR);
  color: var(--PRIMARY-COLOR);
}
.close-modal-box .close-new i
{
  font: normal normal normal 20px/1 "Material Design Icons";
}
.drawer {
  width: 275px;
  height: 100vh;
  background-color: #F7F7F7;
  position: fixed;
  top: 0;
  left: -275px;
  z-index: 10;
  transition: left 0.3s ease;
  overflow: auto;
}

.drawer.active {
  left: 0;
  box-shadow: 0px 3px 8px #00000029;
}

.popup-header
{
  text-align: center;
  font-weight: 600;
  padding: 0.5rem 0;
  font-size: 16px;
}
.popup-body
{
  font-size: 14px;
  opacity: 0.75;
  text-align: center;
}
#banner_tab
{
  
}
#banner_web, #banner_mob
{
  width: 100%;
  /*max-height: 150px;*/
  object-fit: cover;
}
.swal2-popup
{
  border-radius: 26px !important;
  box-shadow: 0px 5px 10px #F7F7F7A1;
}
.swal2-select
{
  display: none !important;
}
.swal2-close
{
  position: absolute !important;
  right: -5px !important;
  top: -5px !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #fff !important;
  box-shadow: 3px 3px 5px #2A2D34;
  font-size: 1.45rem !important;
  outline: none;
  border-radius: 50% !important;
  color: var(--FONT-COLOR) !important;
  transition: all .15s ease-in !important;
}
.swal2-close:hover 
{
  background: var(--SECONDARY-COLOR) !important;
  color: var(--PRIMARY-COLOR) !important;
  transition: all .15s ease-in !important;
}
.swal2-title
{
  text-transform: uppercase !important;
  font-size: 32px !important;
}
.swal2-content
{
  font-size: 14px !important;
  padding-bottom: 1rem !important;
}
.announcement-list-box
{
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid #7070705b;
}
.announcement-list-box .title-announcement
{
  padding-bottom: 10px;
  color: var(--FONT-COLOR);
  font-size: 14px;
  font-weight: 500;
}
.announcement-list-box .desc-announcement
{
  color: var(--PLACEHOLDER-DARK-COLOR);
  font-size: 13px;
}
.announcement-list-box .date-announcement
{
  color: var(--PLACEHOLDER-DARK-COLOR);
  font-size: 13px;
  text-align: right;
  margin-top: 10px;
}
.inbox-listing
{
  width: 100%;
}
.inbox-listing .header
{
  background-color: #2A2D34AF;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 15px;
}

.checkbox-div.light
{
  width: 15px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid #F7F7F7;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  cursor: pointer;
}
.checkbox-div.light.checked
{
  opacity: 1;
}
.checkbox-div.light input
{
  display: none;
}
.checkbox-div.light i
{
  color: #F7F7F7;
  display: none;
}
.checkbox-div.light.checked i
{
  display: block;
}
.checkbox-div.dark
{
  width: 15px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid #2A2D34;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  cursor: pointer;
}
.checkbox-div.dark.checked
{
  opacity: 1;
}
.checkbox-div.dark input
{
  display: none;
}
.checkbox-div.dark i
{
  color: #2A2D34;
  display: none;
}
.checkbox-div.dark.checked i
{
  display: block;
}
.checkbox-div.light:hover 
{
  opacity: 0.75;
}
.select--all
{
  font-size: 14px;
  font-weight: 400;
  color: var(--PRIMARY-COLOR);
  cursor: pointer;
}
.mark-read
{
  font-size: 12px;
  font-weight: 400;
  color: var(--PRIMARY-COLOR);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  outline: none;
  border: none;
}
.mark-read i
{
  color: var(--PRIMARY-COLOR);
  font: normal normal normal 17px/1 "Material Design Icons";
  height: 13px;
}
.inbox-listing .list
{
  display: flex;
  align-items: center;
  padding: 10px 15px;
  gap: 20px;
  border-bottom: 1.25px solid var(--PLACEHOLDER-DARK-COLOR);
}
.inbox-listing .list.unread
{
  background: #bbbec786;
}

.inbox-listing .list.selected
{
  background: #2A2D343A;
}
.inbox-listing .list
{
  display: flex;
  align-items: center;
  padding: 10px 15px;
  gap: 20px;
  border-bottom: 1.25px solid var(--PLACEHOLDER-DARK-COLOR);
  cursor: pointer;
}
.inbox-listing .list.unread .text-secondary, .inbox-listing .list.selected .text-secondary,
.inbox-listing .list.unread .title-content, .inbox-listing .list.selected .title-content
{
  font-weight: 600;
}
.inbox-listing .list .content
{

}
.inbox-listing .list .content .title-content
{
  color: #2A2D34;
  font-size: 12.8px;
}
.inbox-listing .list .content .desc-content
{
  color: #2A2D34AF;
  font-size: 12px;
  margin-bottom: 0;
}
.inbox-listing .content .desc-content span 
{
  font-size: 12px;
}
.inbox-listing .list span 
{
  color: #2A2D34AF;
  font-size: 12.8px;
}
.empty-box 
{
  margin: 10vh 20px;
  text-align: center;

}
.empty-box img
{
  opacity: 0.75;
}
.empty-box .labelx
{
  color: var(--PLACEHOLDER-DARK-COLOR);
  font-size: 13px;
  padding: 1.25rem 0;
  text-align: center;
}
.announcement-listx
  {
    max-height:400px;
    overflow:auto;
    padding-right: 38px;
    margin-right: -38px;
}


@media (max-width: 768px)
{
  .modal-content {
    width: 95%;
  }
  .modal-title-a
  {
    color: var(--FONT-COLOR);
    font-size: 14px;
    font-weight: 300;
    padding-bottom: 20px;
  }

  .modal-content.announcement {
    background: linear-gradient(to top, rgba(28, 28, 28, 0), rgba(28, 28, 28, 0), rgba(0, 0, 0, 0)), url("../../img/abstract-high-tech-white-border-futuristic-technology-background-generative-ai copy.png?v=1.1");
    width: 350px;
    height: 250px;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2.5rem;
    margin-left: 0;
    margin-right: 0;
    padding-top: 2.5rem;
  }
  .modal-content.lg
  {
    padding: 20px;
  }
  .announcement > .modal-body {
    padding: 0.5rem 1.5rem;
    max-height: 140px;
    overflow-x: auto;
    padding-top: 1.25rem !important;
  }
  .form-popup-status-toggle
  {
    position: sticky;
    left: 2rem;
    bottom: -1rem;
    margin-left: 1.5rem;
  }
  .modal-title-b
  {
    color: var(--PLACEHOLDER-DARK-COLOR);
    font-size: 14px;
    font-weight: 600;
  }
  .modal-title-c
  {
    color: var(--PLACEHOLDER-DARK-COLOR);
    font-size: 10px;
    font-weight: 300;
    margin-bottom: -1rem;
  }
  .confirm-buttons {
    grid-template-columns: calc(65% - 0.5rem);
    gap: 0.5rem;
    justify-content: center;
  }
  .announcement-listx
  {
    max-height:400px;
    overflow:auto;
    padding-right: 20px;
    margin-right: -20px;
  }
}















.custom-control-input
{
  opacity: 0;
}
.custom-control-label
{
  color: #707070;
  font-size: 12px;
  padding-top: 0.25rem;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: var(--SECONDARY-COLOR);
  background-color: transparent;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--SECONDARY-COLOR);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #506189;
  border-color: #506189;
}
.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}
.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #171c28;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}
.custom-control-label::before {
  position: absolute;
  top: 0.1rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: rgba(0, 0, 0, 0);
  border: rgba(0, 0, 0, 0.5) solid 1px;
}
.text-white.custom-control-label::before, .text-white.custom-control-label::after
{
  border: rgba(255, 255, 255, 1) solid 1px !important;
  top: -0.1rem;
}
.text-white.normal.custom-control-label::before, .text-white.normal.custom-control-label::after
{
  border: rgba(255, 255, 255, 1) solid 1px !important;
  top: 0.1rem;
}
.custom-control-label::after {
  position: absolute;
  top: 0.1rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: 50%/50% 50% no-repeat;
  border: 1px solid #939393;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0px;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23000' d='M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #939393;
  border-radius: 3px;
}
.custom-checkbox .custom-control-input:checked ~ .text-white.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23fff' d='M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #939393;
  border-radius: 3px;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #0e1118;
  background-color: #0e1118;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(14, 17, 24, 0.5);
}
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(14, 17, 24, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(14, 17, 24, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}
.custom-switch .custom-control-label::after {
  top: calc(0.1rem + 3px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: var(--SECONDARY-COLOR);
  border-radius: 0.5rem;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #0e1118;
  transform: translateX(0.75rem);
}
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(14, 17, 24, 0.5);
}

.custom-switch-new {
  padding-left: 1.25rem;
  display: flex;
  align-items: center;
}
.custom-switch-new .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}
.custom-switch-new .custom-control-label::after {
  top: calc(0.1rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #ffffffa5;
  border-radius: 0.5rem;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .custom-switch-new .custom-control-label::after {
    transition: none;
  }
}
.custom-switch-new .custom-control-input:checked ~ .custom-control-label::after {
  background-color: var(--SECONDARY-COLOR);
  transform: translateX(0.75rem);
}
.custom-switch-new .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(14, 17, 24, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  vertical-align: middle;
  background: #0e1118 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid var(--SECONDARY-COLOR);
  border-radius: 5px;
  appearance: none;
}
.custom-select:focus {
  border-color: var(--SECONDARY-COLOR);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(14, 17, 24, 0.25);
}
.custom-select:focus::-ms-value {
  color: #fff;
  background-color: #0e1118;
}
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}
.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}
.custom-select::-ms-expand {
  display: none;
}
.custom-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}
.bootstrap-select .dropdown-menu {
  /* padding: 0.5rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0; */
  background-color: #e9ecef;
  cursor: pointer;
}


.contact-us-boxin
{
  border-top: 1px solid #70707065;
  padding: 50px 0;
}
.contact-us-boxin .rowx
{
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 40px;
}
.contact-us-boxin .rowx .contact-list
{
  display: flex;
  align-items: center;
  gap: 45px;
  
}
.contact-us-boxin .rowx .contact-list .contacts
{
  border-radius: 7px;
  background-color: #C6A481;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
}
.contact-us-boxin .rowx .contact-list .contacts .name
{
  color: #F7F7F7 !important;
  font-size: 1rem;
  display: block;
  text-align: center;
}
.contact-us-boxin .rowx .contact-list .contacts .val, .contact-us-boxin .rowx .contact-list .contacts a
{
  color: #F7F7F7 !important;
  font-size: 1rem;
  display: block;
  text-align: center;
}
.collapse-header
{
  padding: 1.5rem 1.5rem 0;
  background-color: rgba(0, 0, 0, 0.03);
  cursor: pointer;

}


/*Bank*/
.bank-options-selection
{
  background-color: #2A2D3414;
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.bank-options-selection .main , .bank-options-selection .more
{
  display: grid;
  grid-template-columns: calc(25% - 1.33rem) calc(25% - 1.33rem) calc(25% - 1.33rem) calc(25% - 1.33rem);
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem;
}
.bank-options-selection .bank-option-box
{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.bank-options-selection .bank-option-box .img-x
{
  width: 36px;
  height: 36px;
  background-color: white;
  border-radius: 5px;
  padding: 3px;
}
.bank-options-selection .bank-option-box .img-x img
{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bank-options-selection .bank-option-box .name-x
{
  font-size: 14px;
  color: #A9A6A6;

}
.bank-options-selection .bank-option-box.selected, .bank-options-selection .bank-option-box:hover
{

}
.bank-options-selection .bank-option-box.selected .img-x, .bank-options-selection .bank-option-box:hover .img-x
{
  border: 2px solid #C6A481;
}
.bank-options-selection .bank-option-box.selected .img-x img
{
  
}
.bank-options-selection .bank-option-box.selected .name-x, .bank-options-selection .bank-option-box:hover .name-x
{
  font-size: 14px;
  font-weight: 500;
  color: var(--FONT-COLOR);
}
.bank-option-view
{
  font-size: 12px;
  color: #2A2D34AF;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 1rem 1.25rem;
  cursor: pointer;
}
.overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.9;
  background-color: rgba(255,255,255,0.6) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.overlay-message {
  color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
}
.text-success {
  color: #8BBE9D;
}
.text-error {
  color: #BF6969;
}
.non-app-div
{
  width: 100%;
}
.app-div
{
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  color: var(--FONT-COLOR);
  max-width: 90%;
}
.web__method__listing {
  display: flex;
  flex-direction: row;
  gap: 120px;
}

@media (max-width: 768px)
{
  .app-div{
    max-width: 90vw;
  }
  
}




.promotion-banner
{
  position: relative;
  margin: -1rem -2rem;
  margin-bottom: 0;
}
.promotion-banner #promotion-img
{
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.promotion-banner #promotion-imgMb
{
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.promotion-banner .info
{
  position: absolute;
  left: 30px;
  top: 30px;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.promotion-banner .info-title
{
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.promotion-banner .info-desc
{
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}
.info-contentx
{
  padding: 1.25rem 2rem 0.25rem;
  margin: 0 -2rem;
  max-height: 50vh;
  overflow: auto;
  
}
.underlined
{
  text-decoration: underline;
}
.info-contentx .desc1
{
  font-size: 12px;
  font-weight: 600;
}
.info-contentx .desc1 p
{
  margin-bottom: 0.15rem;
}
.info-contentx .desc2
{
  font-size: 12px;
}
.info-contentx .quota-home-box.small
{

}
.info-contentx .quota-home-box.small .title
{
  padding: 0.5rem 2rem;
  font-size: 13px;
}
@media (max-width: 768px) {
  .info-contentx {
    padding: 1.25rem 1rem 0.25rem;
    margin: 0 -2rem;
    
  }
}


/* mobile app */
.app-info-section
{
  padding: 2rem 0 2rem 10rem;
}
.app-info-section .app--info-box
{
  display: flex;
  align-items: center;
  gap: 120px;
  width: 100%;
  margin-bottom: 50px;
}
.app--info-box .info-logo
{
  text-align: left;
  display: flex;

}
.app--info-box .info-logo img
{
  width: 200px;
}
.app--info-box .info-logo p
{
  color: #707070;
  font-size: 14px;
}
.app--info-box .info-inputs
{
  width: 100%;
  max-width: 50%;
  min-width: 300px;
}
.app--method-box
{
  
}
.app--method-box .title
{
  color: #707070;
  font-size: 14px;
  margin-bottom: 25px;
}
.app--method-box .web-grid
{
  background: url("../../img/theme2/phone_mockup.png?v=1.3");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 200px;
  min-height: 400px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.app--method-box .web-grid2
{
  background: url("../../img/theme2/phone_mockup.png?v=1.3");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 200px;
  min-height: 400px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
.web-grid2 .logo
{
  width: 80%;
  margin: 0 auto;
}
.web-grid2 .others, .others
{
  color: #707070;
  font-size: 10px;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  margin-top: .5rem;
}
.mobile-steps {
  margin-top: 1rem;
  position: relative;
  padding: 2rem 1.25rem;
}

.qr-box
{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: column;
}
.qr-box img
{
  width: 80px;
}
.qr-box div 
{
  color: #707070;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
}
.more-info-page {
  position: relative;
}
.close-new-page {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #707070;
  color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.web__info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-left: -7rem;
}
.web__info .step-box {
  width: 100%;
  max-width: 300px;
}

.btn--android
{
  max-width: 100%;
  min-width: 100%;
  background-color: var(--SUCCESS-COLOR);
  padding: 0.5rem 1rem;
  border-radius: 40px;
  font-weight: normal;
  transition: all .15s ease-in;
  color: #fff;
  font-size: 13px;
  border: none;
  outline: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.btn--android:hover
{
  color: #fff;
  background-color: #5c846a;
  font-size: 14px;
}
.btn--ios1
{
  max-width: 100%;
  min-width: 100%;
  background-color: var(--ERROR-COLOR);
  padding: 0.5rem 1rem;
  border-radius: 40px;
  font-weight: normal;
  transition: all .15s ease-in;
  color: #fff;
  font-size: 13px;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn--ios1:hover
{
  color: #fff;
  background-color: #793434;
  font-size: 14px;
}
.arrow-btn-step
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 45%;
  left: 0;
  width: calc(100% + 80px);
  margin-left: -40px;
  margin-right: -40px;
  
}
.swiper-button-prev, .swiper-button-next
{
  position: relative;
  margin-top: 0;
  top: unset;
  background-color: transparent;
  color: #707070;
  padding: 0;
  width: auto !important;
  height: auto !important;
}


@media (max-width: 768px)
{
  .app-info-section
  {
    padding: 0;
  }
  .app-info-section .app--info-box
  {
    display: block;
  }
  .app--info-box .info-logo
  {
    text-align: center;
    width: 100%;
    min-width: unset;
    justify-content: center;
  }
  .app--info-box .info-inputs
  {
    width: 100%;
    max-width: 100%;
  }
  .app--method-box
  {
    text-align: center;
  }
  .app--method-box .web-grid
  {
    display: block;
  }
  .btn--android, .btn--ios1, .btn--ios2 {
    max-width: 70%;
    min-width: 70%;
  }
  .swiper-button-prev {
    left: -30px;
  }
  .swiper-button-next {
    right: -30px;
  }
  .swiper-button-prev:after, .swiper-button-next:after
  {
    font-size: 25px;
  }
  .mob--padding {
    padding: 0 20px;
  }
  .game-listing-v {
    display: grid;
    grid-template-columns: 100%;
    gap: 0.5rem;
  }
  .game-listing-v .game--box {
    width: 100%;
    border-radius: 5px;
    background-image: linear-gradient(to top, rgba(28, 28, 28, 0.7), rgba(28, 28, 28, 0.7), rgba(0, 0, 0, 0.5)), url("../../img/4746_MB.png?v=1.1");
    background-position-y: center;
    min-width: 230px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 13px 25px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .game-listing-v .game--box .thumb{
    position: absolute;
    left: 30px;
    bottom: 0;
  }
  .game-listing-v .game--box .inner{
    text-align: center;
  }
  .game-listing-v .game--box .inner img{
    width: 70px;
    height: auto;
    margin-bottom: 8px;
  }
  .game-listing-v .game--box .inner .btn--primary-md{
    display: block;
    width: 77px;
    padding: 0.25rem;
    font-size: 0.6rem;
    min-width: 77px;
  }
  
  .arrow-btn-step
  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 45%;
    left: 0;
    width: calc(100%);
    margin-left: 0px;
    margin-right: 0px;
    
  }
}


.inbox-listing .custom-control-inline
{
  align-items: center;
}
.inbox-listing .custom-control-label
{
  padding-top: 0;
  font-size: 12px;
  height: 12px;
  display: flex;
  align-items: center;
}
@media (max-width: 768px)
{
  .inbox-listing .header
  {
    gap: 0px;
  }
}
.promotion-body-pop
{
  min-width: 650px;
}
.promotion-body-pop .modal-body
{
  padding-bottom: 1rem;
}
@media (max-width: 768px)
{
  .promotion-body-pop
  {
    min-width: 275px;
  }
}

/* Default styles */
.below_xl {
  display: none !important;
}
.on_xl {
  display: none !important;
}
.above_xl {
  display: none !important;
}

/* Media query for screens below 768px */
@media (max-width: 768px) {
  .below_xl {
    display: flex !important;
  }
  .on_xl {
    display: none !important;
  }
  .above_xl {
    display: none !important;
  }
}

/* Media query for screens between 768px and 1440px */
@media (min-width: 769px) and (max-width: 1440px) {
  .below_xl {
    display: none !important;
  }
  .on_xl {
    display: flex !important;
  }
  .above_xl {
    display: none !important;
  }
}

/* Media query for screens above 1440px */
@media (min-width: 1441px) {
  .below_xl {
    display: none !important;
  }
  .on_xl {
    display: none !important;
  }
  .above_xl {
    display: flex !important;
  }
}


.game--listing-home {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 20px;
  row-gap: 15px;
}
.game--listing-home2 {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 20px;
  row-gap: 15px;
}
.game--listing-home2 img {
  width: 100%;
}
.game--listing-home .eachx {
  cursor: pointer;
}
.game--listing-home .eachx img{
  width: 100%;
  height: auto;
  position: relative;
}
.type-icon {
  position: absolute;
  top: 1.5px;
  left: 1px;
  width: 30px !important;
  height: auto !important;
}

@media (max-width: 768px)
{
  .game--listing-home {
    display: flex;
    overflow: auto;
    max-width: 100%;
  }
  .game--listing-home2 {
    display: none;
  }
  .game--listing-home .eachx {
    min-width: 220px;
    height: auto;
  }
  .eachx {width: calc(100vw - 40px);}
  .eachx img {
    width: 100%;
    height: auto;
  }
}


/* VIP Page */
.vip-page {
  background-color: #2A2D34;
  color: #fff;
  border-bottom: 1px solid #f7f7f782;
}
.vip-lounge {
  padding: 50px 80px;
}
.title-big {
  color: #F7F7F7;
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 35px;
}
.title--2 {
  color: #C6A481;
  font-size: 20px;
}
.title--3 {
  color: #fff;
  font-size: 18px;
}
.title--4 {
  padding-top: 100px;
  font-size: 18px;
  margin-top: 20px;
}
.title--5 {
  font-size: 15px;
  margin-top: 15px;
  margin-bottom: 30px;
  line-height: 1.75rem;
  width: 60%;
}
.title--6 {
  font-size: 14px;
  color: #ECECEC;
  opacity: 0.68;
  width: 60%;
}
.vip--sect {
  padding: 40px 0 16px;
}
.vip-top-labels {
  color: #C6A481;
  font-size: 20px;
  font-weight: 500;
}
.vip--box-label {
  display: flex;
  align-items: end;
  padding: 20px 0;
}
.vip--box-label .badget-label {
  color: #C6A481;
  font-size: 20px;
  width: 40%;
}
.vip--box-label .badget-info-label {
  text-align: center;
  width: calc(60% / 5);
}
.vip--box-label .badget-info-label .ranking-img {
  width: 60px;
  height: auto;
}
.vip--box-label .badget-info-label .ranking-label {
  color: #F7F7F7;
  font-size: 14px;
}
.vip--box {
  padding-bottom: 20px;
}
.vip--box .box-labels {
  font-size: 14px;
  color: #ECECEC;
  padding: 10px 0;
  text-transform: uppercase;
}
.vip--box .value-box {
  display: flex;
  
}
.vip--box .value-box .vip--value {
  text-align: center;
  width: calc(60% / 5);
  color: #fff;
}
.vip--box .value-box .vip--value:nth-child(1) {
  text-align: left;
  width: 40%;
  color: #f7f7f7ab;

}
.vip--box .value-box .vip--value .box-values{
  font-size: 12px;
}

@media (max-width: 768px)
{
  .vip-lounge {
    padding: 20px 20px;
  }
  .title-big {
    color: #F7F7F7;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .title--2 {
    font-size: 8px;
  }
  .title--3 {
    font-size: 7px;
  }
  .title--4 {
    padding-top: 30px;
    font-size: 14px;
    margin-top: 20px;
  }
  .title--5 {
    font-size: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    line-height: 1.25rem;
    width: 100%;
  }
  .title--6 {
    font-size: 10px;
    color: #ECECEC;
    opacity: 0.68;
    width: 100%;
  }
  .vip--sect {
    padding: 20px 0 16px;
  }
  .vip-top-labels {
    color: #C6A481;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 25px;
  }
  .vip--box-label {
    display: flex;
    align-items: end;
    padding: 20px 0;
    overflow: auto;
  }
  .badget-label {
    color: #F7F7F7;
    font-size: 14px;
  }
  .vip--box-label .badget-label {
    color: #C6A481;
    font-size: 20px;
    width: 40%;
  }
  .vip--box-label .badget-info-label {
    text-align: center;
    width: 70px;
    min-width: 70px;
  }
  .vip--box-label .badget-info-label .ranking-img {
    width: 40px;
    height: auto;
  }
  .vip--box-label .badget-info-label .ranking-label {
    color: #F7F7F7;
    font-size: 7px;
  }
  .vip--box {
    padding-bottom: 20px;
  }
  .vip--box .box-labels {
    font-size: 10px;
    color: #C6A481;
    padding: 10px 0;
  }
  .vip--box .value-box {
    display: flex;
    
  }
  .vip--box .value-box .vip--value {
    text-align: right;
    width: 50%;
    color: #fff;
  }
  .vip--box .value-box .vip--value:nth-child(1) {
    text-align: left;
    width: 100%;
    color: #fff;
  
  }
  .vip--box .value-box .vip--value .box-values{
    font-size: 10px;
  }
}

/* Milestone */
.animated-progress {
  width: 100%;
  background: #ECECEC;
}
.animated-progress span {
  background: var(--SUCCESS-COLOR);
}
.rank-info-current {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0.75rem;
}
.rank-info-current .ranking-img {
  width: 25px;
  height: auto;
}
.rank-info-current span {
  font-size: 16px;
}
.val-current-bar {
  font-size: 12px;
  color: #707070;
  text-align: left;
  margin-top: -0.15rem;
}

.hover-val-box {
  position: absolute;
  top: 45px;
  left: 10px;
  background-color: #ECECEC;
  padding: 12px 12px;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
  display: none;
}
.hover-val-box .rank-val-list {
  display: flex;
  align-items: center;
}
.val-img {
  width: 20px;
  height: auto;
  margin-right: -5px;
}
.arrow-r {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -3px;
}
.arrow-r i {
  font-size: 20px;
}
.arrow-r i:nth-child(2) {
  margin-left: -15px;
}
.vip--btn {
  min-width: 120px;
  padding: 4px 15px;
  font-size: 10px;
  color: #F7F7F7 !important;
  background-color: #C6A481;
  border-radius: 20px;
}
.vip--btn:hover {
  background-color: var(--SUCCESS-COLOR);

}


/* Sub Nav */
.mobile-subnav {
  background: #ECECEC;
}

.back-nav-box {
  padding: 10px 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.back-nav-box i{
  font-size: 15px;
  color: #C6A481;
}
.back-nav-box span{
  font-size: 12px;
  color: #707070;
}

.user-nav-box {
  background-color: #F7F7F7;
  padding: 5px 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-nav-box .avatar {
  width: 30px;
  height: auto;
}
.user-nav-box .title {
  color: #C6A481;
  font-size: 12px;
  font-weight: 500;

}
.user-nav-box .current-rank-info {
  display: flex;
  align-items: center;
  gap: 5px;
}
.user-nav-box .current-rank-info span{
  font-size: 12px;
  color: #2A2D34;
}
.user-nav-box .current-rank-info .ranking-img{
  width: 18px;
  height: auto;
}

.wallet-nav-box {
  padding: 10px 30px;
  border-bottom: 1px solid #70707052;
  
}
.wallet-nav-box .rowx-1 {
  display: flex;
  align-items: end;
}

.sec-nav-box {
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: auto;
  padding: 10px 0 20px;
  gap: 8px;
}

.sec-nav-box .nav--item {
  min-width: 20vw;
  text-align: center;
  line-height: 1;
  
}
.sec-nav-box .nav--item span {
  color: #2A2D34;
  font-size: 10px;
  display: block;
  margin-bottom: 10px;
  white-space: nowrap;
  position: relative;
}
.sec-nav-box .nav--item .nav-ico {
  font-size: 23px;
}
.sec-nav-box .nav--item .badge-red {
  position: absolute;
  right: 8px;
  bottom: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #BF6969;
  color: #fff;
}
.sec-nav-box .nav--item .nav-ico .mdi-currency-usd {
  font-size: 19px;
  background-color: #000000;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
}
.sec-nav-box .nav--item:hover *{
  color: #C6A481;
  fill: #C6A481;
}
.sec-nav-box .nav--item:hover .nav-ico .mdi-currency-usd{
  background-color: #C6A481;
  color: #fff;
}
.sec-nav-box .nav--item.bolded {
  /* Styles for each navigation item */
}
.sec-nav-box .nav--item.bolded span {
  /* Styles for the navigation icons */
}
.sec-nav-box .nav--item.bolded .nav-ico {
  /* Styles for the navigation icons */
}
.hide-sub-box {
  background-color: #c6a3817e;
  padding: 2px 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hide-sub-box i {
  font-size: 20px;
  color: #2A2D34;
}
.hide-sub-box span {
  font-size: 10px;
  color: #2A2D34;
}

.lbl-wallet {
  display: flex;
  align-items: center;
  gap: 17px;
}
.lbl-wallet i{
  font-size: 13px;
  color: #BF6969;
  display: block;
}
.lbl-wallet span{
  color: #2A2D34;
  font-size: 10px;

}

.val-wallet {
  background-color: #FFFFFF;
  padding: 2px 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  min-width: 130px;
  line-height: 1;
}
.val-wallet span{
  font-size: 8px;
  color: #707070;
}
.val-wallet b{
  font-size: 12px;
  color: #707070;
  font-weight: 600 !important;
}
.val-wallet i{
  color: #8BBE9D;
  font-size: 14px;
}

.btn--restore {
  padding: 5px 20px;
  min-width: 80px;
  line-height: 1;
  background-color: #8BBE9D;
  color: #fff;
  border-radius: 5px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn--restore i{
  font-size: 13px;
}
.btn--restore span{
  font-size: 12px;
}

/* Additional styles can be added as needed */

.bottom-nav-box {
  background-color: #2A2D34;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 60px;
  z-index: 10;
  color: #fff;
  padding: 5px 20px;
  align-items: center;
}

.bottom-nav-box .nav-item{
  width: 25%;
  text-align: center;
}

.bottom-nav-box .nav-item .ico{
  font-size: 20px;
  line-height: 1;
}
.bottom-nav-box .nav-item .lbl{
  font-size: 11px;
}
.bottom-nav-box .nav-item:hover *{
  color: #C6A481;
  fill: #C6A481;
}
.bottom-nav-box .nav-item.bolded{
  color: #C6A481;
  font-weight: 500;
}

.bottom-nav-box .nav-item.bolded .ico *{
  color: #C6A481;
  fill: #C6A481;
}
.bottom-nav-box .nav-item.bolded .lbl{
  
}

.bottom-nav-box .nav-item.bigger{
  min-width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid #C6A481;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -50px;
  background-color: #2A2D34;
}

.bottom-nav-box .nav-item.bigger .ico{
  background: #fff;
  border-radius: 50%;
  color: #000;
  display: inline-flex;
  align-items: center;
  font-size: 40px;
}
.bottom-nav-box .nav-item.bigger .lbl{
  
}
.bottom-nav-box .nav-item.bigger.bolded{
  
}

.bottom-nav-box .nav-item.bigger.bolded .ico{
  
}
.bottom-nav-box .nav-item.bigger.bolded .lbl{
  
}
.red-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ERROR-COLOR);
  color: #fff;
  font-size: 7px;
  line-height: 1;
}

.header-nav-other-box a .header-nav-other-box-icon {
  height: 1.75rem;
  width: auto;
  filter: invert(0.6);
  padding-right: 10px;
  transition: all .15s ease-in;
}
.header-nav-other-box .nav.active .header-nav-other-box-icon, .header-nav-other-box .nav:hover .header-nav-other-box-icon {
  filter: invert(0);
}


.glowing-theme2{
  animation: glowing 1300ms infinite;
}
@keyframes glowing {
  0% {
    box-shadow: 0 0 3px #C6A481;
  }
  50% {
    box-shadow: 0 0 10px #C6A481;
  }
  100% {
    box-shadow: 0 0 3px #C6A481;
  }
}
.loading-sec {
  width: 100%;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: lightgray;
  transition: all .15s ease-in;
}
.loading-sec .spinnergif {
  width: 50px;
  height: auto;

}
@media (max-width: 768px) {
  .loading-sec {
    width: 100%;
    height: 200px;
  }
  .red-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ERROR-COLOR);
    color: #fff;
    font-size: 7.25px !important;
    line-height: 1;
  }
  .sec-nav-box .nav--item .badge-red {
    width: 18px;
    height: 18px;
    font-size: 7.25px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 5px;
    bottom: -10px;
    line-height: 1;
    font-weight: normal;
  }
  .lbl-wallet * {
    line-height: 1;
  }
  .lbl-wallet {
    margin-bottom: 0.25rem;
  }
}

.custom-popover {
  display: none; /* Hide by default */
  position: absolute;
  top: 80px; /* Adjust the position as needed */
  right: 50px;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-width: 60vw;
}
.rank-info-current span {
  font-size: 12px;
}
.sub-card-box-min * {
  font-size: 12px;
}
.sub-card-box-min .val-current-bar {
  font-size: 10px;
}
.sub-card-box-min .animated-progress {
  height: 8px !important;
}

/* .centers {
  top: 1.5px;
} */

#modal-daily-checkin .modal-content{
  border: 2px solid #FFECAF;
  background-color: #2D2D2DCC;
  box-shadow: inset 4px 7px 6px 0rem #FFFFFF29;
  width: 100%;
  font-size: 0.8rem;
}

#modal-daily-checkin .modal-body{
  max-height: 50vh;
  overflow-y: auto;
}

#modal-daily-checkin .modal-dialog-centered {
  align-items: center;
}

@media (min-width: 576px) {
  #modal-daily-checkin .modal-dialog {
      max-width: 80%;
  }
}
@media (min-width: 992px) {
  #modal-daily-checkin .modal-dialog {
      max-width: 50%;
  }
}

#floating-menu{
  position: fixed;
  z-index: 1000;
  width: 100px;
  height: auto;
  touch-action: none;
}
#floating-menu .dropdown-toggle{
  position: relative;
  z-index: 2;
}
#floating-menu .dropdown-toggle::after{ content: none; }
#floating-menu-main-img{
  width: 100px;
  height: auto;
}
#floating-menu-main-img:hover{ cursor: pointer; }
#floating-menu .floating-menu-div{
  text-align: center;
  min-width: 75px;
  width: 75px;
  transform: translateY(35%) !important;
  left: 13px !important;
  padding-top: 50px;
  z-index: 1;
  border-bottom-left-radius: 45px;
  border-bottom-right-radius: 45px;
  border: 1px solid var(--main-color);
  background-color: rgba(0, 0, 0, .2);
}
#floating-menu .floating-menu-div .floating-menu-item{
  width: 80%;
  height: auto;
  padding-bottom: 15px;
}
#floating-menu .floating-menu-div2{
  text-align: center;
  min-width: 75px;
  width: 75px;
  transform: translateY(-65%) !important;
  left: 12px !important;
  padding-bottom: 50px;
  z-index: 1;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border: 1px solid var(--main-color);
  background-color: rgba(0, 0, 0, .2);
}
#floating-menu .floating-menu-div2 .floating-menu-item{
  width: 80%;
  height: auto;
  padding-top: 15px;
}
#floating-menu .floating-menu-div .floating-menu-item:hover, #floating-menu .floating-menu-div2 .floating-menu-item:hover{
  cursor: pointer;
}
.marquee-text-home:hover {
  color: #C6A481;
}

.profile-info .pagination {
  margin-top: -1.5rem;
}
table {
  overflow: auto;
  max-width: 100%;
}
.promotion-body-pop .info-contentx p{
  margin-bottom: 1rem;
  font-weight: 500;
}
