::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0);
  width: 0;
}

input::placeholder {
  font-weight: 300;
  color: rgb(255 255 255 / 50%);
}

.select,
select,
.input,
input,
.login-form li input,
.login-form li select {
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  font-weight: 300;
}

.login-form li input,
.login-form li select {
  padding: 0 40px;
}

.btn.btn-register {
  background: unset;
  border: 1px solid rgb(255 255 255 / 50%) !important;
  box-shadow: unset;
}

body.sapphire .btn,
body.green .btn,
body[color="red"] .btn,
body.red .btn,
body.blue .btn {
  border-width: thin;
}

.btn {
  border: unset !important;
  height: 44px !important;
  line-height: 44px;
  box-shadow: inset 5px -5px 10px rgba(0, 0, 0, 0.3);
  font-size: 15px;
  font-weight: 400;
  border-radius: 0.1rem !important;
  /* margin-bottom: 10px; */
}

.btn::before {
  content: unset;
}

.form li input,
.form li select {
  background-color: var(--deep);
  color: var(--txt);
  border: unset;
}

.form li select {
  color: rgb(255 245 235 / 50%);
}

.form o {
  line-height: 44px;
}

nav li a span {
  color: var(--color);
}

nav li:nth-child(3) a span {
  color: var(--txt);
}

#depoForm,
#withForm,
#depoOnlineForm,
.forgot-wrapper {
  background-image: unset;
  border: unset;
}

body[color="red"] nav li:nth-child(2) a,
body.red nav li:nth-child(2) a,
body[color="green"] nav li:nth-child(2) a,
body.green nav li:nth-child(2) a,
body[color="sapphire"] nav li:nth-child(2) a,
body.sapphire nav li:nth-child(2) a,
body[color="blue"] nav li:nth-child(2) a,
body.blue nav li:nth-child(2) a {
  background-image: url(../images/theme13/blue/bar.png);
  color: var(--txt);
}

body[color="red"] nav li:nth-child(3) a,
body.red nav li:nth-child(3) a {
  background-image: url(../images/theme13/red/bar.svg);
}

body[color="green"] nav li:nth-child(3) a,
body.green nav li:nth-child(3) a {
  background-image: url(../images/theme13/green/bar.svg);
}

body[color="sapphire"] nav li:nth-child(3) a,
body.sapphire nav li:nth-child(3) a {
  background-image: url(../images/theme13/sapphire/bar.svg);
}

body[color="blue"] nav li:nth-child(3) a,
body.blue nav li:nth-child(3) a {
  background-image: url(../images/theme13/blue/bar.svg);
}

nav li:nth-child(2) a {
  width: inherit;
  height: inherit;
  background-image: unset;
  position: unset;
  color: var(--color);
  padding: 0.08rem 0;
}

nav li:nth-child(2) a i {
  font-size: inherit;
}

nav li:nth-child(3) a {
  width: 7rem;
  height: 7rem;
  background-image: url(../images/theme13/gold/bar.svg);
  position: absolute;
  left: 0;
  right: 0;
  top: -2.9rem;
  margin: auto;
  color: var(--txt);
  padding: 1.2rem;
}

nav li:nth-child(3) a i {
  font-size: 3.0rem;
}

.ico-home::before,
.ico-login::before,
.ico-deposit::before,
.ico-promotion::before,
.ico-customer::before {
  display: block;
  content: "";
  width: 28px;
  height: 28px;
  margin: auto;
}

.ico-home::before {
  background-image: url(../images/theme13/gold/footer-icon-home.png);
  background-size: contain;
  background-position: center;
}

.ico-login::before {
  background-image: url(../images/theme13/gold/footer-icon-login.png);
  background-size: contain;
  background-position: center;
}

.ico-deposit::before {
  background-image: url(../images/theme13/gold/footer-icon-deposit.png);
  background-size: contain;
  background-position: center;
}

.ico-promotion::before {
  background-image: url(../images/theme13/gold/footer-icon-promo.png);
  background-size: contain;
  background-position: center;
}

.ico-customer::before {
  background-image: url(../../images/theme7/gold/footer-icon-customer.png);
  background-size: contain;
  background-position: center;
}

.ico-line::before {
  display: block;
  content: "";
  width: 41px;
  height: 41px;
  margin: auto;
  background-image: url(../images/theme13/ico/icon-line.png);
  background-size: contain;
  background-position: center;
}

.ico-diamond::before {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  margin: auto;
  background-image: url(../../images/theme7/ico/diamond_inThe_sky.png);
  background-size: contain;
  background-position: center;
}

@media (max-width: 640px) {
  nav.anime-fade-in-up {
    height: 50px;
  }

  nav li {
    padding: 0 0.08rem;
  }
}

.navigation li a i::after {
  border-radius: 10% !important;
}

.navigation li a i {
  border: unset;
  border-radius: 10%;
}

@media (min-width: 400px) {
  .navigation li a i::after {
    width: 100%;
    height: 100%;
  }

  .navigation li a i {
    width: 1.2rem;
    height: 1rem;
  }
}

.btn.h-btn-with,
body.red .btn.h-btn-with,
body.blue .btn.h-btn-with,
body.green .btn.h-btn-with,
body.sapphire .btn.h-btn-with {
  background-image: unset;
  background-color: unset;
  border: 1px solid var(--color);
}

.btn.h-btn-with {
  border: 1px solid var(--color) !important;
}

.Curr_onPoint {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.Curr_onPoint .text-point {
  font-size: 18px;
  font-weight: 700;
}

.item-menter {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 0 15px;
}

.item-menter h5 {
  color: #ecd64c;
  font-size: 14px;
}

#v-pills-tab .nav-link {
  padding: unset;
  height: 75px;
  border-radius: 1.1rem;
  background-image: var(--btn);
  color: rgb(255 245 235 / 50%);
  font-size: 12px;
  font-weight: 300;
}

#v-pills-tab .nav-link.active {
  background-image: var(--lg);
  color: var(--txt);
}

html,
body {
  overflow-x: hidden;
  /* Prevent horizontal overflow */
}

/* Styles for the custom icons */
.ico-1,
.ico-2,
.ico-3,
.ico-4,
.ico-5,
.ico-6,
.ico-7,
.ico-8,
.ico-9,
.ico-10 {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  /* Align icon with text */
  font-style: normal;
  /* Prevent any unwanted styles from <i> tags */
}

/* Button and icon alignment */
#v-pills-tab .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin: 8px 40px;
}

#v-pills-tab .nav-link:first-child {
  margin-top: 0px;
}

#v-pills-tabContent .game,
.allbig-menues-tab .col-3,
.allbig-menues-tab .col-9 {
  padding: unset;
}

.allbig-menues-tab {
  margin: 0 5px;
}

.allbig-menues-tab {
  display: flex;
  height: 100%;
  justify-content: space-between;
}

section.playing {
  height: calc(100% - 100px);
  margin-top: 14px;
  transform: translateX(-20px);
}

.content-tab-right {
  border-radius: 8px;
  overflow-y: auto;
  padding-bottom: 60px;
  width: 76%;
  height: calc(100% - 50px);
  margin-top: -20px;
}

.content-tab-right #v-pills-hotgame {
  margin-top: 20px !important;
}

.menues-tab-left {
  border-radius: 8px;
  overflow-y: auto;
  padding-bottom: 60px;
  scrollbar-width: none;
  width: 21%;
  height: calc(100% - 50px);
}

#v-pills-tabContent .hot-game {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.tab-content .tab-pane {
  display: none;
}

.tab-content .tab-pane.show.active {
  display: block;
}

/* Theme1  */
:root body.vital {
  --primary-1: #72ae99;
  --primary-2: #3a6a44;
  --box-page-1: #060d0b;
  --box-page-2: #102e24;
  --form-background: #1b3c31;
  --light-purple: #b7beab;
  --Teal: #0b3b15;
  --background-navigation: linear-gradient(360deg,
      #0c1f19 4.08%,
      #2c6854 96.81%);
  --background-primary: linear-gradient(180deg,
      #0a1a11 0%,
      #35725e 160px,
      #2a6350 35.94%,
      #183a2f 68.75%,
      #0a1a14 100%);
}

.bg-vital {
  background-color: #0b3b15 !important;
}

body.vital {
  --color: #1b3c31;
  --deep: var(--form-background);
  --txt: #fff5eb;
  --btn: radial-gradient(#1b3c31, #1b3c31);
  --box: linear-gradient(180deg, var(--box-page-1) 0%, var(--box-page-2) 100%);
  --lg: linear-gradient(270deg, var(--primary-1) 0%, var(--primary-2) 100%);
  --lg-90: linear-gradient(90deg, #1b3c31, #1b3c31, #1b3c31, #1b3c31);
  --reward-bg-opacity: #1b3c313f;
  --reward-border: #0c1f19;

  background: var(--background-primary);
}

body[color="vital"] nav li:nth-child(3) a,
body.vital nav li:nth-child(3) a {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../images/theme13/green/bar.svg);
  border-radius: 50%;
  /* This makes the element round */
}

body.vital nav {
  background-image: url(../images/theme13/green/bar.png);
  /* mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzg0MCIgaGVpZ2h0PSI3MCIgdmlld0JveD0iMCAwIDM4NDAgNzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuODczMDEzQzAgMC44NzMwMTMgMTgxMi4zNCAtMS4wOTEyNyAxODU4LjUgMC44NzMwMTNDMTg4NS45OCAyLjA0MjMxIDE4OTIuOTkgMzUgMTkyMC41IDM1QzE5NDguMDEgMzUgMTk1MS40OSAxLjIxOTY1IDE5NzkgMC44NzMwMTNDMjAyNS4xNiAwLjI5MTI3MyAzODQwIDAuODczMDEzIDM4NDAgMC44NzMwMTNWNzBIMFYwLjg3MzAxM1oiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl82ODVfMjcyMDEpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjg1XzI3MjAxIiB4MT0iOS4xNjkxNGUtMDYiIHkxPSI0My4yNzMiIHgyPSIzODM5Ljk5IiB5Mj0iNDguODYxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM3ODEwQUYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNDIxRjg3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==) center no-repeat;
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzg0MCIgaGVpZ2h0PSI3MCIgdmlld0JveD0iMCAwIDM4NDAgNzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuODczMDEzQzAgMC44NzMwMTMgMTgxMi4zNCAtMS4wOTEyNyAxODU4LjUgMC44NzMwMTNDMTg4NS45OCAyLjA0MjMxIDE4OTIuOTkgMzUgMTkyMC41IDM1QzE5NDguMDEgMzUgMTk1MS40OSAxLjIxOTY1IDE5NzkgMC44NzMwMTNDMjAyNS4xNiAwLjI5MTI3MyAzODQwIDAuODczMDEzIDM4NDAgMC44NzMwMTNWNzBIMFYwLjg3MzAxM1oiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl82ODVfMjcyMDEpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjg1XzI3MjAxIiB4MT0iOS4xNjkxNGUtMDYiIHkxPSI0My4yNzMiIHgyPSIzODM5Ljk5IiB5Mj0iNDguODYxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM3ODEwQUYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNDIxRjg3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==) center no-repeat;
  background: var(--background-navigation);
  border-radius: 20px 20px 0 0; */
}

body.vital .user {
  /* background-image: url(../../images/theme7/green/bg.jpg); */
  /* background: var(--background-navigation); */
  background: unset;
}

/* Theme2  */

:root body.pink {
  --primary-1: #d68ad8;
  --primary-2: #961b8a;
  --box-page-1: #2b0831;
  --box-page-2: #4a0c44;
  --form-background: #2f1530;
  --light-purple: #beabb8;
  --Magenta: #9e1e99;
  --background-navigation: linear-gradient(360deg,
      #3d1344 4.08%,
      #81147e 96.81%);
  --background-primary: linear-gradient(180deg,
      #320d36 0%,
      #921b95 160px,
      #751879 35.94%,
      #4e1554 68.75%,
      #320d36 100%);
}

/* .bg-pink {
  background-color: var(--Magenta) !important;
} */

body.pink {
  --color: var(--primary-2);
  --deep: var(--form-background);
  --txt: white;
  --orange: #ffba00;
  --btn: radial-gradient(#e96ce5, #853282);
  --box: linear-gradient(180deg, var(--box-page-1) 0%, var(--box-page-2) 100%);
  --lg: linear-gradient(250deg, var(--primary-1) 0%, var(--primary-2) 60%);
  --lg-90: linear-gradient(90deg, #2f1530, #2f1530, #2f1530, #2f1530);
  --reward-bg-opacity: rgba(48, 33, 117, 0.3);
  --reward-border: #08162e;

  background: var(--background-primary);
}

body[color="pink"] nav li:nth-child(3) a,
body.pink nav li:nth-child(3) a {
  background-image: linear-gradient(rgba(226, 3, 255, 0.5),
      rgba(219, 0, 248, 0.5)),
    url(../images/theme13/red/bar.svg);
  border-radius: 50%;
  /* This makes the element round */
}

body.pink nav {
  background-image: url(../images/theme13/red/bar.png);
  /* background: var(--background-navigation); */
  /* border-radius: 20px 20px 0 0; */
}

body.pink .user {
  /* background-image: url(../../images/theme7/red/bg.jpg); */
  /* background: var(--background-navigation); */
  background: unset;
}

body.pink .form li input,
body.pink .form li select {
  border: unset;
}

.main .head {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.subject {
  padding: 0;
}

.item {
  padding: 16px;
}

.head-cont {
  padding: 20px 0;
}

.head-cont h1 {
  margin: inherit;
  height: auto;
}

.head-cont h1 img {
  width: 95px;
  height: auto;
}

.head-cont hop>a {
  width: 30px;
  height: 30px;
}

hop-cont a {
  padding: 10px !important;
}

hop {
  margin-left: 0;
}

hop a {
  height: 45px;
  line-height: 45px;
}

hop a i {
  width: 25px;
  height: 25px;
}

hop[right] hop-cont {
  right: -7px;
}

a.ico.ico-angle-loop-horizontal {
  font-size: 18px;
  color: #ecd64c;
}

.head-cont:first-child {
  border-bottom: unset;
}

.contant {
  background-image: unset;
  border: unset;
}

.main,
.mobile {
  width: 100%;
  height: 100%;
  padding: 0;
}

.main.center {
  height: auto;
  padding: 25px 10px;
}

main.main-container {
  height: 100% !important;
  background-image: var(--box);
  margin-top: 25px;
  border-radius: 25px;
}


main.main-container[data-p="login"] {
  margin-top: 200px !important;
}

main.main-container[data-p="register"] {
  margin-top: 200px !important;
}


main.main-container .swiper.swiper-banner {
  width: 100%;
  /* max-height: 200px; */
  max-height: 100px;
}

@media screen and (min-width:400px) {
  main.main-container .swiper.swiper-banner {
    max-height: 120px;
  }
}

@media screen and (min-width:678px) {
  main.main-container .swiper.swiper-banner {
    max-height: 300px;
  }
}

.qrcode-bank-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

#qrImg {
  width: 200px;
}

.btn-depo-amt-wrapper {
  gap: 1%;
}

.btn-depo-amt-wrapper a {
  flex: 0 0 16%;
  -ms-flex: 0 0 16%;
  max-width: 16%;
}

#depoForm,
#withForm,
#depoOnlineForm,
.forgot-wrapper {
  padding: 0.25rem;
}

/* .mySwiperSlotsMenu .swiper-slide .btn {
  margin-bottom: unset;
}
.mySwiperSlotsMenu {
  max-height: fit-content !important;
} */

/* Theme 5 more  */

/* Theme 1 */
:root body.darkGold {
  --primary-1: #e7cd80;
  --primary-2: #b28b53;
  --box-page-1: #463620;
  --box-page-2: #4b3a23;
  --form-background: #2e2212;
  --light-purple: #bebdab;
  --Darkgold: #503f16;
  --background-navigation: linear-gradient(360deg,
      #443818 4.08%,
      #6b5724 96.81%);
  --background-primary: linear-gradient(180deg,
      #2c2410 0%,
      #766028 160px,
      #59491e 35.94%,
      #423617 68.75%,
      #2c2410 100%);
}

.bg-darkGold {
  background-color: #b28b53 !important;
}

body.darkGold {
  --color: var(--primary-2);
  --deep: var(--form-background);
  --txt: white;
  --orange: #ffba00;
  --btn: linear-gradient(var(--primary-1), var(--primary-2));
  --box: linear-gradient(180deg, var(--box-page-1) 0%, var(--box-page-2) 100%);
  --lg: linear-gradient(250deg, var(--primary-1) 0%, var(--primary-2) 60%);
  --lg-90: linear-gradient(90deg, #302417, #302417, #302417, #302315);
  --reward-bg-opacity: rgba(48, 33, 117, 0.3);
  --reward-border: #08162e;

  background: var(--background-primary);
}

body[color="darkGold"] nav li:nth-child(3) a,
body.darkGold nav li:nth-child(3) a {
  background-image: linear-gradient(rgba(255, 207, 103, 0.767),
      rgba(248, 161, 0, 0.671)),
    url(../images/theme13/red/bar.svg);
  border-radius: 50%;
  /* This makes the element round */
}

body.darkGold nav {
  background-image: url(../images/theme13/green/bar.png);
}

body.darkGold .user {
  background: unset;
}

body.darkGold .form li input,
body.darkGold .form li select {
  border: unset;
}

/* Theme 2 */
:root body.stoneGold {
  --primary-1: #9e761e;
  --primary-2: #4a360c;
  --box-page-1: #312608;
  --box-page-2: #4a360c;
  --form-background: #302715;
  --light-purple: #beb8ab;
  --StoneGold: #9e761e;
  --background-navigation: linear-gradient(360deg,
      #442f13 4.08%,
      #814e14 96.81%);
  --background-primary: linear-gradient(180deg,
      #281b05 0%,
      #764a1b 160px,
      #764a1b 25.52%,
      #4f3310 72.4%,
      #2a1c05 100%,
      #2f1f07 100%);
}

.bg-stoneGold {
  background-color: #9e6b1e !important;
}

body.stoneGold {
  --color: var(--primary-2);
  --deep: var(--form-background);
  --txt: white;
  --orange: #ffba00;
  --btn: linear-gradient(var(--primary-1), var(--primary-2));
  --box: linear-gradient(180deg, var(--box-page-1) 0%, var(--box-page-2) 100%);
  --lg: linear-gradient(250deg, var(--primary-1) 0%, var(--primary-2) 60%);
  --lg-90: linear-gradient(90deg, #302315, #302315, #302315, #302215);
  --reward-bg-opacity: rgba(48, 33, 117, 0.3);
  --reward-border: #08162e;

  background: var(--background-primary);
}

body[color="stoneGold"] nav li:nth-child(3) a,
body.stoneGold nav li:nth-child(3) a {
  background-image: linear-gradient(rgba(255, 188, 3, 0.568),
      rgba(150, 97, 0, 0.637)),
    url(../images/theme13/red/bar.svg);
  border-radius: 50%;
  /* This makes the element round */
}

body.stoneGold nav {
  background-image: url(../images/theme13/green/bar.png);
  /* background: var(--background-navigation); */
  /* border-radius: 20px 20px 0 0; */
}

body.stoneGold .user {
  /* background-image: url(../../images/theme7/red/bg.jpg); */
  /* background: var(--background-navigation); */
  background: unset;
}

body.stoneGold .form li input,
body.stoneGold .form li select {
  border: unset;
}

/* Theme 3 */
:root body.darkGreen {
  --primary-1: #0c4a0c;
  --primary-2: #093108;
  --box-page-1: #093108;
  --box-page-2: #0c4a0c;
  --form-background: #153016;
  --light-purple: #acbeab;
  --darkGreen: #229e1e;
  --background-navigation: linear-gradient(360deg,
      #194413 4.08%,
      #188114 96.81%);
  --background-primary: linear-gradient(180deg,
      #14250e 0%,
      #0a6907 160px,
      #044108 35.94%,
      #052d0a 68.75%,
      #14250e 100%);
}

.bg-darkGreen {
  background-color: #0a6907 !important;
}

body.darkGreen {
  --color: var(--primary-2);
  --deep: var(--form-background);
  --txt: white;
  --orange: #ffba00;
  --btn: linear-gradient(var(--primary-1), var(--primary-2));
  --box: linear-gradient(180deg, var(--box-page-1) 0%, var(--box-page-2) 100%);
  --lg: linear-gradient(250deg, var(--primary-1) 0%, var(--primary-2) 60%);
  --lg-90: linear-gradient(90deg, #14250e, #14250e, #14250e, #0e2704);
  --reward-bg-opacity: rgba(48, 33, 117, 0.3);
  --reward-border: #08162e;

  background: var(--background-primary);
}

body[color="darkGreen"] nav li:nth-child(3) a,
body.darkGreen nav li:nth-child(3) a {
  background-image: linear-gradient(rgba(11, 255, 3, 0.568),
      rgba(0, 150, 7, 0.637)),
    url(../images/theme13/red/bar.svg);
  border-radius: 50%;
  /* This makes the element round */
}

body.darkGreen nav {
  background-image: url(../images/theme13/green/bar.png);
}

body.darkGreen .user {
  background: unset;
}

body.darkGreen .form li input,
body.darkGreen .form li select {
  border: unset;
}

/* Theme 4 */
:root body.darkRed {
  --primary-1: #4a0c0f;
  --primary-2: #31080a;
  --box-page-1: #31080a;
  --box-page-2: #4a0c0f;
  --form-background: #301516;
  --light-purple: #beabad;
  --darkRed: #9e1e29;
  --background-navigation: linear-gradient(360deg,
      #441315 4.08%,
      #81141d 96.81%);
  --background-primary: linear-gradient(180deg,
      #1c0707 0%,
      #80070c 140px,
      #67080b 35.94%,
      #4b0a0a 68.75%,
      #1c0707 100%);
}

.bg-darkRed {
  background-color: #69070f !important;
}

body.darkRed {
  --color: var(--primary-2);
  --deep: var(--form-background);
  --txt: white;
  --orange: #ffba00;
  --btn: linear-gradient(var(--primary-1), var(--primary-2));
  --box: linear-gradient(180deg, var(--box-page-1) 0%, var(--box-page-2) 100%);
  --lg: linear-gradient(250deg, var(--primary-1) 0%, var(--primary-2) 60%);
  --lg-90: linear-gradient(90deg, #1c0707, #1c0707, #1c0707, #380e0e);
  --reward-bg-opacity: rgba(48, 33, 117, 0.3);
  --reward-border: #08162e;

  background: var(--background-primary);
}

body[color="darkRed"] nav li:nth-child(3) a,
body.darkRed nav li:nth-child(3) a {
  background-image: linear-gradient(rgba(255, 3, 16, 0.452),
      rgba(150, 0, 12, 0.432)),
    url(../images/theme13/red/bar.svg);
  border-radius: 50%;
  /* This makes the element round */
}

body.darkRed nav {
  background-image: url(../images/theme13/green/bar.png);
}

body.darkRed .user {
  background: unset;
}

body.darkRed .form li input,
body.darkRed .form li select {
  border: unset;
}

/* Theme 5 */
:root body.darkBlue {
  --primary-1: #0c2e4a;
  --primary-2: #081d31;
  --box-page-1: #081d31;
  --box-page-2: #0c2e4a;
  --form-background: #152730;
  --light-purple: #abb8be;
  --darkBlue: #1e6b9e;
  --background-navigation: linear-gradient(360deg,
      #132e44 4.08%,
      #144781 96.81%);
  --background-primary: linear-gradient(180deg,
      #1b2333 0%,
      #254b8e 160px,
      #244682 35.94%,
      #1f3357 68.75%,
      #1b2333 100%);
}

.bg-darkBlue {
  background-color: #074269 !important;
}

body.darkBlue {
  --color: var(--primary-2);
  --deep: var(--form-background);
  --txt: white;
  --orange: #ffba00;
  --btn: linear-gradient(var(--primary-1), var(--primary-2));
  --box: linear-gradient(180deg, var(--box-page-1) 0%, var(--box-page-2) 100%);
  --lg: linear-gradient(250deg, var(--primary-1) 0%, var(--primary-2) 60%);
  --lg-90: linear-gradient(90deg, #1b2333, #1b2333, #1b2333, #1f3357);
  --reward-bg-opacity: rgba(48, 33, 117, 0.3);
  --reward-border: #08162e;

  background: var(--background-primary);
}

body[color="darkBlue"] nav li:nth-child(3) a,
body.darkBlue nav li:nth-child(3) a {
  background-image: linear-gradient(rgba(3, 163, 255, 0.452),
      rgba(0, 90, 150, 0.432)),
    url(../images/theme13/blue/bar.svg);
  border-radius: 50%;
  /* This makes the element round */
}

body.darkBlue nav {
  background-image: url(../images/theme13/green/bar.png);
}

body.darkBlue .user {
  background: unset;
}

body.darkBlue .form li input,
body.darkBlue .form li select {
  border: unset;
}

nav li .ico-line::before {
  width: 32px;
  height: 32px;
  margin: -2px auto;
}

.main-container .row .h-btn-deposit,
.main-container .row .h-btn-with {
  margin-bottom: 10px;
}

/* for register new design */

#registerForm .row .radial-bars {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#registerForm .row .radial-bars .radial-bar {
  width: 100%;
  /* Make it take 100% of the parent's width */
  height: auto;
  /* Adapt height automatically */
  margin-bottom: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 200px;
  /* You can adjust this to your desired width */
  aspect-ratio: 1 / 1;
  /* Maintain a square aspect ratio */
}

#registerForm .row .radial-bars .radial-bar svg {
  width: 100%;
  /* Take 100% of the parent's width */
  height: 100%;
  /* Take 100% of the parent's height */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  /* Optional: If you want to maintain aspect ratio */
  max-width: 100%;
  max-height: 100%;
}

#registerForm .row .radial-bar .progress-bar {
  stroke-width: 15;
  stroke: black;
  fill: transparent;
  stroke-dasharray: 502;
  stroke-linecap: round;
  animation: animate-bar 1s linear forwards;
}

@keyframes animate-bar {
  100% {
    stroke-dashoffset: -1;
  }
}

#registerForm .row .path {
  stroke-width: 15;
  stroke: #3a6a44;
  fill: transparent;
  stroke-dasharray: 502;
  stroke-dashoffset: 502;
  stroke-linecap: round;
}

#registerForm .row .path-1 {
  stroke: url(#grad1);
  animation: animate-path1 1s 1s linear forwards;
}

#registerForm .row .path-2 {
  stroke: url(#grad2);
  animation: animate-path2 1s 1s ease-in-out forwards;
}

@keyframes animate-path1 {
  100% {
    stroke-dashoffset: 251;
  }
}

@keyframes animate-path2 {
  100% {
    stroke-dashoffset: 0;
  }
}

#registerForm .row .radial-bar .percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 500;
  animation: showText 0.5s linear forwards;
}

#registerForm .row .progress-bar .text {
  width: 100%;
  position: absolute;
  text-align: center;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  font-size: 17px;
  animation: showText 0.5s 1s linear forwards;
  opacity: 0;
}

#registerForm .no-pad-child {
  padding: 0 !important;
}

#registerForm .row h4 {
  font-size: 21.525px;
}

#registerForm .row .text-light-purple {
  font-size: 15.5px;
  color: #bebdab;
}



/* register  */
#registerForm .step.active {
  display: block;
}

#registerForm .step {
  display: none;
}

.sweet-alert .text-muted {
  color: #000;
}

html:lang(th) *:not(.ico):not(o):not(.far){
  box-sizing: border-box;
  font-family: "Prompt",
    sans-serif !important;
  font-weight: 400;
}

.favorite_slots {
  background: url(../images/favorite/favor.png) no-repeat !important;
  width: 20px;
  height: 20px;
  position: relative;
  left: 163px;
  top: -24px;
  cursor: pointer;
  z-index: 9;
}

.favorite_slots.active {
  background: url(../images/favorite/favor-active.png) no-repeat !important;
}

.favorite.active {
  background: url(../images/favorite/favor-active.png) no-repeat !important;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 17px;
  top: 17px;
  cursor: pointer;
  z-index: 9;
}

.favorite {
  background: url(../images/favorite/favor.png) no-repeat !important;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 17px;
  top: 17px;
  cursor: pointer;
  z-index: 9;
}

.favorite.effect {
  animation: zoominoutsinglefeatured 1s
}

.favorited {
  animation: bounceIn 2s
}

.game-favourite p span {
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding-left: 15px;
}

.game-favourite p {
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/*sign*/
.sign {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  margin: 20px 0;
}

.sign li:last-child {
  grid-column: span 2;
}

.sign li a {
  background-color: var(--f7);
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  text-transform: capitalize;
  font-weight: bold;
  height: 70px;
  background-position: right center;
}

.sign li:nth-child(1) a {
  background-image: url(../images/bonus/sign/1.png);
}

.sign li:nth-child(2) a {
  background-image: url(../images/bonus/sign/2.png);
}

.sign li:nth-child(3) a {
  background-image: url(../images/bonus/sign/3.png);
}

.sign li:nth-child(4) a {
  background-image: url(../images/bonus/sign/4.png);
}

.sign li:nth-child(5) a {
  background-image: url(../images/bonus/sign/5.png);
}

.sign li:nth-child(6) a {
  background-image: url(../images/bonus/sign/6.png);
}

.sign li:nth-child(7) a {
  background-image: url(../images/bonus/sign/7.png);
}

.sign li a.lost {
  background-color: var(--ddd);
}

.sign li a.done {
  background-color: var(--color);
  color: white;
}

.sign li a.wait {
  background-color: var(--orange);
}

.deop-bonus-pop .cliam-bonus {
  text-transform: capitalize;
  color: #fff;
  margin: 5px;
  height: 40px;
  padding-left: 10px;
  border-radius: 5px;
  white-space: nowrap;
}

.deop-bonus-pop .cliam-bonus.disabled {
  pointer-events: none;
  background: #ccc;
}

.deop-bonus-pop article li {
  padding: 5px 0;
}

.deop-bonus-pop .amount {
  padding: 20px 50px
}

.deop-bonus-pop .amount-list li {
  border-bottom: 1px solid;

  padding: 10px 0;
  line-height: 200%;
  display: flex;
  align-items: center;
  border-color: #f1f1f1;
}

.deop-bonus-pop .amount-list li h6 {
  flex: 1;
}

.deop-bonus-pop .amount-list li span {
  font-weight: 700
}

.deop-bonus-pop .amount-list li b {
  font-size: 30px;
  color: var(--orange)
}

.deop-bonus-pop .amount-list .depo-claim-bonus {
  line-height: 32px;
}

article,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article p {
  padding: 10px 0;
}

.deop-bonus-pop .center {
  margin-top: 15px;
  width: 100%;
  overflow: hidden;
  padding: 15px;
  border-radius: 10px;
}

.deop-bonus-pop pop-main {
  width: 90%;
  max-width: 720px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.deop-bonus-pop pop-title {
  background-color: var(--color);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-width: 1px;
  border-bottom: 1px solid #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.deop-bonus-pop pop-title h3 {
  width: 100%;
  line-height: 50px;
  padding: 0 20px;
  flex: 1;
  min-width: 0;
  font-size: 18px;
}

.deop-bonus-pop pop-title h3:nth-child(2) {
  padding: 0;
}

.deop-bonus-pop pop-title .ico {
  line-height: 50px;
  width: 50px;
  height: 50px;
}

.deop-bonus-pop pop-title .close:after {
  content: '';
  display: none;
}

.deop-bonus-pop pop-cont {
  background-color: var(--color);
  display: block;
}

.deop-bonus-pop pop-main {
  border-radius: 10px;
}

.deop-bonus-pop pop-cont {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
  border: none !important;
}

.deop-bonus-pop pop-main {
  background-image: unset !important;
}
.popup_maintenance{
  left: 0 !important;
}