@charset "UTF-8";

:root {
  --app-height: 100vh;
  --header-height: 30px;
  --bottom-bar-height: 60px;
  --background-footer-color: transparent;
  --text-white-color: #ffffff;
  --text-theme-color: #0e2e26;
  --text-secondary-color: #ffc32e;
  --text-lightgreen-color: #82c71d;
  --text-darkgreen-color: #004136;
  --text-grey-color: #6f6f6f;
  --text-lightgrey-color: #aeaeae;
  --text-success-color: #82c71d;
  --text-warning-color: #ffc32e;
  --text-danger-color: #ff3e3e;
  --background-theme-color: #0e2e26;
  --background-secondary-color: #327f63;
  --background-warning-color: #ffc32e;
  --background-lightgreen-color: #82c71d;
  --background-darkgreen-color: #004136;
  --background-green-color: #38825f;
  --background-white-color: #ffffff;
  --background-grey-color: #f5f5f5;
  --background-lightgrey-color: #f5f5f5;
  --background-theme-gradient: linear-gradient(to bottom, #e1f7bd, #7ec519);
  --border-white-1-color: #ffffff;
  --border-theme-1-color: #1fb3ba;
  --border-light-theme-1-color: #00bf96;
  --border-lightgreen-color: #82c71d;
  --border-darkgreen-color: #004136;
  --border-lightgrey-50-color: #aeaeae80;
  --border-radius-standard: 20px;
  --border-radius-small: 10px;
  --border-radius-medium: 15px;
  --border-radius-large: 30px;
  --sidebar-close-width: 80px;
  --sidebar-open-width: 350px;
  --sidebar-padding: 10px;
  --sidebar-transition: all linear 0.2s;
  --card-padding: 30px 40px;
  --card-border-radius: 15px;
  --label-small-width: 110px;
  --tabbar-height: 70px;
  --swiper-navigation-sides-offset: 12.5%;
  --swiper-navigation-color: #ffffff;
  --swiper-navigation-size: 24px;
  --swiper-pagination-bottom: 4% !important;
  --swiper-pagination-color: #006857 !important;
  --swiper-pagination-bullet-inactive-color: #b8c0c5 !important;
  --swiper-pagination-bullet-height: 10px !important;
  --swiper-pagination-bullet-width: 10px !important;
  --swiper-pagination-bullet-horizontal-gap: 5px !important;
  --border-botton: #82c71d;
}

@media (max-width: 1024px) {
  :root {
    --border-radius-small: 5px;
    --border-radius-standard: 10px;
    --border-radius-medium: 10px;
    --border-radius-large: 20px;
    --sidebar-open-width: 350px;
    --header-height: 10px;
    --swiper-pagination-bullet-height: 8px !important;
    --swiper-pagination-bullet-width: 8px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --sidebar-open-width: 500px;
  }
}

.btn-theme {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: var(--text-darkgreen-color);
  background: linear-gradient(to bottom, #e1f7bd, #7ec519);
  border: 1px solid #82c71d;
  white-space: nowrap;
}

.input-group-copy .js-copy,
.btn_refer .js-copy {
  position: absolute;
  right: 7px;
  width: 35px;
  height: 100%;
  border: none;
  background: none;
  z-index: 4;
}

.input-group-copy .js-copy img,
.btn_refer .js-copy img {
  width: 100%;
}

@media (max-width: 767px) {
  .btn-theme {
    font-size: 12px;
    /* height: 30px; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.btn-theme:focus,
.btn-theme:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-theme.btn-disabled-theme:disabled {
  --btn-color: #5b988c;
  background: #036352;
  border: unset;
  cursor: not-allowed;
}

.btn-warning {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: var(--text-darkgreen-color);
  background: linear-gradient(to bottom, #ffedba, #efbe22);
  border: 1px solid #efbe22;
}

@media (max-width: 767px) {
  .btn-warning {
    font-size: 12px;
  }
}

.btn-warning:focus,
.btn-warning:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-outline-theme {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: var(--text-lightgreen-color);
  background: transparent;
  border: 1px solid #82c71d;
}

@media (max-width: 767px) {
  .btn-outline-theme {
    font-size: 12px;
  }
}

.btn-outline-theme:focus,
.btn-outline-theme:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-outline-theme:focus,
.btn-outline-theme:hover {
  border: 1px solid var(--text-lightgreen-color);
  outline: unset;
  box-shadow: unset;
  background: transparent;
}

.btn-outline-secondary {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  border: 1px solid var(--text-secondary-color);
  background: transparent;
  --btn-color: var(--text-secondary-color);
}

@media (max-width: 767px) {
  .btn-outline-secondary {
    font-size: 12px;
  }
}

.btn-outline-secondary:focus,
.btn-outline-secondary:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:hover {
  border: 1px solid var(--text-secondary-color);
  outline: unset;
  box-shadow: unset;
  background: transparent;
}

.btn-no-outline-theme {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: var(--text-lightgreen-color);
  background: transparent;
  border: unset;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .btn-no-outline-theme {
    font-size: 12px;
  }
}

.btn-no-outline-theme:focus,
.btn-no-outline-theme:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-secondary {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: #87a4a6;
  background: #2f6265;
  border: 1px solid #2f6265;
}

@media (max-width: 767px) {
  .btn-secondary {
    font-size: 12px;
  }
}

.btn-secondary:focus,
.btn-secondary:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-lightgreen-theme {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: var(--text-white-color);
  background: var(--background-lightgreen-color);
  border: unset;
}

@media (max-width: 767px) {
  .btn-lightgreen-theme {
    font-size: 12px;
  }
}

.btn-lightgreen-theme:focus,
.btn-lightgreen-theme:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-darkgreen-theme {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: var(--text-white-color);
  background: var(--background-darkgreen-color);
  border: unset;
}

@media (max-width: 767px) {
  .btn-darkgreen-theme {
    font-size: 12px;
  }
}

.btn-darkgreen-theme:focus,
.btn-darkgreen-theme:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-green-theme {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: var(--text-white-color);
  background: var(--background-green-color);
  border: unset;
}

@media (max-width: 767px) {
  .btn-green-theme {
    font-size: 12px;
  }
}

.btn-green-theme:focus,
.btn-green-theme:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-transparent {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  background: transparent;
  --btn-color: var(--text-white-color);
  border: unset;
}

@media (max-width: 767px) {
  .btn-transparent {
    font-size: 12px;
  }
}

.btn-transparent:focus,
.btn-transparent:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-disabled {
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  padding: 18px 24px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: var(--btn-color);
  --btn-color: #5b988c;
  background: #036352;
  border: unset;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .btn-disabled {
    font-size: 12px;
  }
}

.btn-disabled:focus,
.btn-disabled:hover {
  outline: unset;
  box-shadow: unset;
  color: var(--btn-color);
}

.btn-small {
  padding: 10px 20px;
}

.btn-medium {
  padding: 13px 20px;
}

.btn-modal {
  padding: 15px 20px;
}

@media (max-width: 767px) {
  .btn-modal {
    padding: 13px 20px;
  }
}

@media (min-width: 768px) {
  .btn-md-medium {
    padding: 15px 20px;
  }
}

.btn-extra-small {
  padding: 8px 20px;
  font-size: 14px;
}

.btn-copy {
  background: unset;
  border: unset;
  outline: unset;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 10px;
  padding: 0px 10px;
  border-radius: 8px;
  z-index: 4;
}

.btn-copy img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.header_wrap {
  position: relative;
  height: 20px;
  height: 57px !important;
}

#header {
  position: fixed;
  background-color: #004136;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 10px 0px;
  transition: var(--sidebar-transition);
}

@media (min-width: 1600px) {

  #header .container,
  #header .container-lg,
  #header .container-md,
  #header .container-sm,
  #header .container-xl,
  #header .container-xxl {
    max-width: 1520px;
  }
}

#header .justify-content-end {
  align-items: center;
}

#header .header-rotate-icon {
  cursor: pointer;
}

#header .header-left-wrapper {
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
}

@media (max-width: 1024px) {
  #header .header-left-wrapper {
    gap: 10px;
  }
}

#header .header-bar-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0px;
  cursor: pointer;
  width: 25px;
  flex: 0 0 25px;
}

#header .header-bar-toggle img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  #header .header-bar-toggle {
    display: block;
  }
}

#header .header-logo {
  max-width: 125px;
}

@media (max-width: 1024px) {
  #header .header-logo {
    max-width: 120px;
    transform: scale(1.1) translateX(5px);
  }
}

#header .icon-btn {
  background-color: #006857;
  border: none;
  padding: 5px 8px;
  height: 100%;
  border-radius: var(--border-radius-large);
  transition: transform 0.3s ease-in-out;
  padding-right: 40px;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

@media (max-width: 1024px) {
  #header .icon-btn {
    padding: 7px;
    width: 30px;
    height: 30px;
  }
}

#header .icon-btn span {
  color: var(--text-white-color);
}

@media (max-width: 1024px) {
  #header .icon-btn span {
    display: none;
  }
}

#header .icon-btn img {
  max-width: 30px;
  aspect-ratio: 1/1;
}

@media (max-width: 1024px) {
  #header .icon-btn img {
    max-width: 18px;
  }
}

#header .icon-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  background: url("../img/global/arrow-down-white.png") no-repeat center center;
  background-size: contain;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

@media (max-width: 1199px) {
  #header .icon-btn:after {
    display: none;
  }
}

#header .icon-btn:focus:after {
  transform: translateY(-50%) rotate(180deg);
}

#header .header-dropdown {
  position: relative;
}

@media (max-width: 1024px) {
  #header .header-dropdown {
    aspect-ratio: 1/1;
  }
}

#header .header-dropdown:focus-within .dropdown-body {
  display: block;
}

#header .header-dropdown .dropdown-body {
  position: absolute;
  background: rgba(28, 126, 106, 0.35);
  width: 300px;
  list-style: none;
  display: none;
  -webkit-backdrop-filter: blur(22px) brightness(1.15);
  backdrop-filter: blur(22px) brightness(1.15);
  padding: 0;
  top: 50%;
  right: 0px;
  margin-top: 11px;
  border-radius: var(--border-radius-small);
}

#header .header-dropdown .dropdown-body ul {
  padding: 10px 0px;
  list-style: none;
}

#header .header-dropdown .dropdown-body ul li {
  padding: 0px 10px;
}

#header .header-dropdown .dropdown-body ul li a {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  font-size: 14px;
  color: var(--text-white-color);
  font-weight: 300;
  position: relative;
  border-radius: var(--border-radius-small);
  padding: 10px 20px;
}

#header .header-dropdown .dropdown-body ul li a:hover {
  background: rgba(58, 163, 153, 0.35);
  -webkit-backdrop-filter: blur(22px) brightness(1.15);
  backdrop-filter: blur(22px) brightness(1.15);
}

#header .header-dropdown .dropdown-body ul li a.red-dot p {
  position: relative;
}

#header .header-dropdown .dropdown-body ul li a.red-dot p:after {
  content: "";
  position: absolute;
  background: red;
  top: 0px;
  right: -20px;
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
}

#header .header-dropdown .dropdown-body ul li a .total-notification {
  padding: 5px;
  background: red;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header .header-dropdown .dropdown-body ul li a .total-notification span {
  color: var(--text-white-color);
  font-size: 12px;
}

#header .header-dropdown .dropdown-body ul li a img {
  width: 30px;
  aspect-ratio: 1/1;
}

#header .header-actions {
  display: flex;
  flex-flow: row nowrap;
  max-width: 285px;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  #header .header-actions {
    max-width: 200px;
    max-width: 255px;
    gap: 5px;
  }
}

.header-dropdown .dropdown-body .icon-dropdown {
  width: 30px;
  height: 30px;
}

.header-dropdown .dropdown-body .icon-profile {
  background: url(../img/header/auth/profile-menu/my-profile.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-deposit {
  background: url(../img/header/auth/profile-menu/deposit.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-withdraw {
  background: url(../img/header/auth/profile-menu/withdraw.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-history {
  background: url(../img/header/auth/profile-menu/history.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-transfer {
  background: url(../img/header/auth/profile-menu/transfer.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-top-vip {
  background: url(../img/header/auth/profile-menu/vip.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-referral {
  background: url(../img/header/auth/profile-menu/referral.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-inbox {
  background: url(../img/header/auth/profile-menu/inbox.png) center no-repeat;
  background-size: 100%;
}

.header-dropdown .dropdown-body .icon-logout {
  background: url(../img/header/auth/profile-menu/logout.png) center no-repeat;
  background-size: 100%;
}

#header .header-actions>* {
  flex: 1;
}

#header .user-wallet-actions {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  max-width: 300px;
  align-items: center;
  padding-right: 50px;
  margin-right: 10px;
  position: relative;
}

@media (max-width: 1024px) {
  #header .user-wallet-actions {
    padding-right: 0px;
    margin-right: 0px;
  }
}

#header .user-wallet-actions::after {
  content: "";
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  height: 100%;
  width: 1px;
  right: 0;
  top: 0;
}

@media (max-width: 1024px) {
  #header .user-wallet-actions::after {
    display: none;
  }
}

#header .user-wallet-actions .header-wallet {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  font-size: 14px;
  color: var(--text-white-color);
  width: 250px;
  text-wrap: nowrap;
  background: linear-gradient(to bottom, #0a2f28 0%, #0c4937 100%);
  border: 1px solid var(--border-lightgreen-color);
  border-radius: 8px;
  padding: 4px 10px;
  flex: 2;
  height: 100%;
}

@media (max-width: 1024px) {
  #header .user-wallet-actions .header-wallet {
    max-width: 200px;
    width: 100%;
    gap: 5px;
    font-size: 12px;
  }
}

#header .user-wallet-actions .header-wallet .icon {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header .user-wallet-actions .header-wallet .icon img {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  #header .user-wallet-actions .header-wallet .icon img {
    width: 15px;
    height: 15px;
  }
}

#header .user-wallet-actions button {
  flex: 1;
}

#sidebar {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.5s;
  z-index: 1001;
  max-width: var(--sidebar-open-width);
  background-color: #004136;
  --btn-language-height: 70px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.27);
}

@media (max-width: 1024px) {
  #sidebar {
    width: 100%;
  }
}

#sidebar .sidebar-language {
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
  display: none;
}

@media (max-width: 1024px) {
  #sidebar .sidebar-language {
    display: block;
  }
}

#sidebar .sidebar-language.active .sidebar-more-language {
  transform: translateY(0%);
}

#sidebar .sidebar-language .sidebar-current-language {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 30px;
  gap: 10px;
}

#sidebar .sidebar-language .sidebar-current-language .sidebar-img {
  max-width: 35px;
}

#sidebar .sidebar-language .sidebar-current-language span {
  padding-right: 30px;
  position: relative;
  font-size: 14px;
  color: var(--text-white-color);
}

#sidebar .sidebar-language .sidebar-current-language span:after {
  content: "";
  width: 10px;
  height: 10px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  transition: var(--sidebar-transition);
  background-image: url("../img/sidebar/arrow-down.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
}

#sidebar .sidebar-language .sidebar-more-language {
  background: #316b5c;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: translateY(100%);
  transition: var(--sidebar-transition);
  z-index: -1;
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin-bottom: var(--btn-language-height);
  width: 100%;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-item {
  background: transparent;
  border: 0px;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-button {
  background: transparent;
  color: var(--text-white-color);
  font-size: 14px;
  outline: unset;
  box-shadow: unset;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-button .language-icon {
  max-width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-button::after {
  background: url("../img/sidebar/arrow-down.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 15px;
  display: block;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-button:hover,
#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-button:focus {
  outline: unset;
  box-shadow: unset;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-body {
  padding: 0px;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-body .list-group .list-group-item {
  background: transparent;
  border: 0px;
  padding: 0.2rem 1rem;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-body .list-group .list-group-item a {
  color: var(--text-white-color);
  text-decoration: none;
  font-size: 14px;
  padding: 0.7rem 0.3rem;
  padding-left: 2rem;
  width: 100%;
  display: block;
}

#sidebar .sidebar-language .sidebar-more-language .accordion .accordion-body .list-group .list-group-item a.active {
  background: #4a8475;
  border-radius: var(--border-radius-small);
}

#sidebar .sidebar-language .btn-sidebar-language {
  background: #002f27;
  width: 100%;
  border: unset;
  outline: unset;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  max-height: var(--btn-language-height);
  padding: 20px 22px;
  z-index: 1;
  position: relative;
}

#sidebar .sidebar-language .btn-sidebar-language .sidebar-img {
  max-width: 35px;
}

#sidebar .sidebar-language .btn-sidebar-language span {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-white-color);
}

#sidebar .sidebar-separate {
  width: 100%;
  height: 1px;
  background: #1f5a4d;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%);
  margin: 20px 0px;
}

#sidebar .sidebar-top-nav {
  width: 100%;
  height: 55px;
  position: relative;
}

#sidebar .sidebar-top-nav .toggle-sidebar-wrapper {
  background: #1f5a4d;
  border: unset;
  outline: unset;
  width: 35px;
  height: 25px;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 105%;
  transform: translateY(-50%) translateX(-100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--sidebar-transition);
}

@media (max-width: 1024px) {
  #sidebar .sidebar-top-nav .toggle-sidebar-wrapper {
    left: 95%;
    left: 98%;
    transform: translateY(-50%) translateX(-95%);
    background: unset;
  }
}

#sidebar .sidebar-top-nav .toggle-sidebar-wrapper .toggle-sidebar {
  transform: rotate(180deg);
  transition: var(--sidebar-transition);
  padding: 7px;
}

@media (max-width: 1024px) {
  #sidebar .sidebar-top-nav .toggle-sidebar-wrapper .toggle-sidebar {
    padding: 2px;
  }
}

#sidebar .sidebar-wrapper {
  padding: 0px 14px;
  overflow-y: auto;
  height: 100%;
  transition: var(--sidebar-transition);
  padding-bottom: calc(var(--btn-language-height) + 75px);
}

#sidebar .menu-list {
  padding: 0px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0px;
}

#sidebar .menu-list .menu-item .menu-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  text-decoration: none;
}

#sidebar .menu-list .menu-item .menu-link .menu-img {
  max-width: 28px;
}

/* sidebar */
#sidebar .menu-grid-list .menu-item .menu-link .menu-img .icon-sidebar {
  width: 35px;
  height: 35px;
}

#sidebar .menu-list .menu-item .menu-link .menu-img .icon-sidebar {
  width: 28px;
  height: 28px;
}

.menu-item .menu-img .icon-lucky-spin {
  background: url(../img/sidebar/sidebar-icon/lucky-spin.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-daily-check {
  background: url(../img/sidebar/sidebar-icon/daily-check-in.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-mission-daily {
  background: url(../img/sidebar/sidebar-icon/mission-daily.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-casino {
  background: url(../img/sidebar/sidebar-icon/live-casino.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-slots {
  background: url(../img/sidebar/sidebar-icon/slots.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-sports {
  background: url(../img/sidebar/sidebar-icon/sports.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-esports {
  background: url(../img/sidebar/sidebar-icon/e-sports.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-poker {
  background: url(../img/sidebar/sidebar-icon/p2p.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-lottery {
  background: url(../img/sidebar/sidebar-icon/lottery.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-number {
  background: url(../img/sidebar/sidebar-icon/number.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-fish {
  background: url(../img/sidebar/sidebar-icon/fish.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-cock {
  background: url(../img/sidebar/sidebar-icon/cockfight.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-horse {
  background: url(../img/sidebar/sidebar-icon/horse.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-home {
  background: url(../img/sidebar/sidebar-icon/home.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-promo {
  background: url(../img/sidebar/sidebar-icon/promotion.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-vip {
  background: url(../img/sidebar/sidebar-icon/vip.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-affiliate {
  background: url(../img/sidebar/sidebar-icon/affiliate.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-refer {
  background: url(../img/sidebar/sidebar-icon/referral.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-side-info {
  background: url(../img/sidebar/sidebar-icon/info-centre.png) center no-repeat;
  background-size: 100%;
}

/* end */

#sidebar .menu-list .menu-item .menu-link span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-white-color);
}

#sidebar .menu-list .menu-item .menu-link:hover,
#sidebar .menu-list .menu-item .menu-link.active {
  background: #1b5b4c;
}

#sidebar .menu-list .menu-item .menu-link:hover span {
  color: var(--text-lightgreen-color);
}

#sidebar .menu-grid-list {
  padding: 0px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

#sidebar .menu-grid-list .menu-item:first-child {
  grid-column: 1/-1;
}

#sidebar .menu-grid-list .menu-item .menu-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  border-radius: var(--border-radius-small);
  max-height: 70px;
  padding: 20px 10px;
}

#sidebar .menu-grid-list .menu-item .menu-link.pattern-1 {
  background: linear-gradient(222deg, #0d7560, #523cae);
}

#sidebar .menu-grid-list .menu-item .menu-link.pattern-2 {
  background: linear-gradient(222deg, #d8cd43, #258f61);
}

#sidebar .menu-grid-list .menu-item .menu-link.pattern-3 {
  background: linear-gradient(222deg, #b8aceb, #b9427f);
}

#sidebar .menu-grid-list .menu-item .menu-link span {
  color: #ffffff;
  font-size: 13px;
}

#sidebar .menu-grid-list .menu-item .menu-link .menu-img {
  max-width: 35px;
}

#sidebar .menu-grid-list .menu-item .menu-link .menu-img.angpao img {
  transform: scale(1.1) translateY(-6px);
}

#sidebar .menu-grid-list .menu-item .menu-link .menu-img.mission img {
  transform: scale(1.1) translateY(-5px);
}

body[data-sidebar=false] #sidebar {
  display: flex;
  flex-direction: column;
}

body[data-sidebar=false] #sidebar .sidebar-top-nav .toggle-sidebar-wrapper {
  top: 50%;
  left: 98%;
  left: 95%;
  transform: translateY(-50%) translateX(-50%);
}

body[data-sidebar=false] #sidebar .sidebar-top-nav .toggle-sidebar-wrapper .toggle-sidebar {
  transform: rotate(0deg);
}

body[data-sidebar=false] #sidebar .sidebar-wrapper {
  padding: 0px;
  padding-top: 20px;
  /*padding-bottom: calc(var(--btn-language-height) + 20px);*/
}

body[data-sidebar=false] #sidebar .menu-grid-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: calc(var(--sidebar-close-width) - 5px);
  margin: 0 auto;
  transition: var(--sidebar-transition);
}

body[data-sidebar=false] #sidebar .menu-grid-list .menu-item .menu-link {
  transition: var(--sidebar-transition);
  padding: 0;
  border-radius: 50%;
  max-width: 50px;
  height: 50px;
  margin: 0 auto;
  background: unset;
}

body[data-sidebar=false] #sidebar .menu-grid-list .menu-item .menu-link .menu-img {
  margin: 0 auto;
}

body[data-sidebar=false] #sidebar .menu-grid-list .menu-item .menu-link span {
  display: none;
  opacity: 0;
  transition: var(--sidebar-transition);
  transition-delay: 0.5s;
}

body[data-sidebar=false] #sidebar .menu-list {
  width: calc(var(--sidebar-close-width) - 5px);
  margin: 0 auto;
  transition: var(--sidebar-transition);
}

body[data-sidebar=false] #sidebar .menu-list .menu-item .menu-link {
  transition: var(--sidebar-transition);
  padding: 0;
  border-radius: var(--border-radius-small);
  max-width: 50px;
  height: 50px;
  margin: 0 auto;
}

body[data-sidebar=false] #sidebar .menu-list .menu-item .menu-link .menu-img {
  margin: 0 auto;
}

body[data-sidebar=false] #sidebar .menu-list .menu-item .menu-link span {
  display: none;
  opacity: 0;
  transition: var(--sidebar-transition);
}

body[data-sidebar=false] #sidebar .sub-menu-list {
  display: none;
}

body[data-sidebar=true] #sidebar .menu-list {
  width: 100%;
  transform: translateX(0%);
  transition: var(--sidebar-transition);
}

body[data-sidebar=true] #sidebar .menu-list .menu-item .menu-link {
  transition: var(--sidebar-transition);
  padding: 10px var(--sidebar-padding);
  border-radius: var(--border-radius-small);
  position: relative;
}

body[data-sidebar=true] #sidebar .menu-list .menu-item .menu-link.menu-dropdown::after {
  content: "";
  width: 10px;
  height: 10px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: var(--sidebar-transition);
  background-image: url("../img/sidebar/arrow-down.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
}

body[data-sidebar=true] #sidebar .menu-list .menu-item .menu-link span {
  display: block;
  opacity: 1;
  transition: var(--sidebar-transition);
}

body[data-sidebar=true] #sidebar .menu-list .menu-item.active .menu-link.menu-dropdown::after {
  transform: translateY(-50%) rotate(180deg);
}

body[data-sidebar=true] #sidebar .sub-menu-list {
  max-height: 0px;
  overflow: hidden;
  transition: all 0.3s;
}

body[data-sidebar=true] #sidebar .sub-menu-list ul {
  margin: 10px 0px;
  list-style-type: none;
  padding-left: 70px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

body[data-sidebar=true] #sidebar .sub-menu-list .sub-menu-item .sub-menu-link {
  color: rgba(255, 255, 255, 0.5019607843);
  font-weight: 300;
  font-size: 13px;
  text-decoration: none;
  padding: 3px 0px;
}

body[data-sidebar=true] #sidebar .sub-menu-list .sub-menu-item .sub-menu-link:hover {
  color: var(--text-white-color);
}

body[data-sidebar=true] #sidebar .menu-item.active .sub-menu-list {
  max-height: 300px;
  transition: all 0.3s;
}

#side-menu {
  position: sticky;
  top: calc(var(--header-height) + 50px);
  background: var(--background-darkgreen-color);
  padding: 30px;
  border-radius: var(--border-radius-medium);
}

#side-menu ul {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  margin-top: -10px;
}

#side-menu ul li {
  padding: 18px 20px;
  padding-left: 0px;
  position: relative;
}

#side-menu ul li::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #3c7769;
}

#side-menu ul li a {
  color: #76ad9b;
  font-size: 16px;
  text-decoration: none;
}

#side-menu ul li:last-child::after {
  display: none;
}

.input-group {
  clip-path: rect(0 100% 100% 0 round 10px);
}

.input-group .input-group-text {
  background: var(--background-white-color);
  border: unset;
}

.input-group .input-group-text img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.input-group input {
  outline: unset;
  box-shadow: unset;
  border: unset;
}

.input-group input:focus {
  outline: unset;
  box-shadow: unset;
}

.input-group-gap-3 {
  display: flex;
  gap: 1rem;
  flex-flow: row nowrap;
  align-items: center;
}

.input-group-gap-3 input,
.input-group-gap-3 select {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.btn-eye {
  background: var(--background-white-color);
  border: unset;
  outline: unset;
  padding: 0px 20px;
  border-radius: 8px;
  z-index: 4;
}

.btn-eye img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.form-small {
  max-width: var(--label-small-width);
  outline: unset;
  box-shadow: unset;
  border: unset;
}

.form-label {
  font-size: 15px;
  color: var(--text-white-color);
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .form-label {
    font-size: 14px;
    margin-bottom: 5px;
  }
}

.form-group-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.form-group.horizontal {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  align-items: center;
}

.form-group.horizontal label {
  max-width: var(--label-small-width);
  width: 100%;
}

.form-control {
  position: relative;
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 12px 20px;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .form-control {
    padding: 10px 15px;
    font-size: 13px;
  }
}

.form-control:focus {
  background: #ffffff;
  outline: unset;
  box-shadow: unset;
}

.form-control:-moz-read-only {
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  font-weight: 300;
}

.form-control:read-only {
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  font-weight: 300;
}

@media (max-width: 767px) {
  .form-control:-moz-read-only {
    font-size: 13px;
  }

  .form-control:read-only {
    font-size: 13px;
  }
}

.input-group-copy {
  border-radius: 8px;
  overflow: hidden;
}

.input-group-copy input {
  background: #c5f6de !important;
  position: relative;
  z-index: 1;
}

.input-group-copy input::-moz-selection {
  background: transparent;
}

.input-group-copy input::selection {
  background: transparent;
}

.dropdown-input {
  position: relative;
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 8px 20px;
  border-radius: 8px;
  width: 100%;
  text-align: left;
}

@media (max-width: 767px) {
  .dropdown-input {
    padding: 8px 15px;
    font-size: 13px;
  }
}

.dropdown-input.dropdown-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  background: url("../img/global/arrow-down.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: unset;
  transform: translateY(-50%);
}

.dropdown-input.show.dropdown-toggle::after {
  background: url("../img/global/arrow-up.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.dropdown-input img {
  max-width: 30px;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.dropdown-input+.dropdown-menu {
  background: linear-gradient(to bottom, #2d7e6f, #53968b);
  width: 100%;
  max-height: 323px;
  overflow: scroll;
}

.dropdown-input+.dropdown-menu .dropdown-item {
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-white-color);
}

.dropdown-input+.dropdown-menu .dropdown-item img {
  max-width: 30px;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.dropdown-input+.dropdown-menu .dropdown-item:hover {
  background: #489c8d;
}

.dropdown-input+.dropdown-menu .dropdown-item.active {
  background: #489c8d;
}

.form-select {
  position: relative;
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 12px 20px;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media (max-width: 767px) {
  .form-select {
    padding: 10px 15px;
    font-size: 13px;
  }
}

.form-select:focus {
  background: #ffffff;
  outline: unset;
  box-shadow: unset;
}

.form-select:-moz-read-only {
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  font-weight: 300;
}

.form-select:read-only {
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  font-weight: 300;
}

@media (max-width: 767px) {
  .form-select:-moz-read-only {
    font-size: 13px;
  }

  .form-select:read-only {
    font-size: 13px;
  }
}

.warning-message {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-secondary-color);
}

.form-control[data-file] {
  position: relative;
  background: #c9d5d5;
  color: #434343;
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 12px 20px;
  border: unset;
  border-radius: 5px;
  overflow: hidden;
}

.form-control[data-file] .btn-upload {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 102%;
  background: #00bdb3;
  border: 0px;
  outline: unset;
  box-shadow: unset;
  aspect-ratio: 1/1;
  padding: 12px;
}

.form-control[data-file] input[type=file] {
  position: absolute;
  left: -99999px;
  top: -99999px;
}

.form-check {
  padding-left: 0px;
}

.form-check label {
  font-size: 14px;
  color: var(--text-white-color);
}

.form-check input[type=checkbox] {
  width: 20px;
  height: 20px;
}

.form-check label {
  position: relative;
  padding-left: 30px;
}

.form-check label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: transparent;
  border: 1px solid var(--border-lightgreen-color);
  border-radius: 5px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.form-check input[type=checkbox] {
  display: none;
}

.form-check input[type=checkbox]:checked+label::before {
  background-color: var(--background-lightgreen-color);
}

.form-check input[type=checkbox]:checked+label::after {
  content: "";
  border: solid white;
  border-width: 0 2px 2px 0;
  position: absolute;
  top: 8.4px;
  left: 7px;
  transform: translateY(-50%) translateX(0%) rotate(45deg);
  width: 5px;
  height: 10px;
}

.date-range-wrapper {
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
}

@media (max-width: 767px) {
  .date-range-wrapper {
    flex-flow: column nowrap;
    align-items: flex-start;
  }
}

.date-range-wrapper span {
  color: var(--text-white-color);
  font-size: 14px;
}

@media (max-width: 767px) {
  .date-range-wrapper span {
    font-size: 13px;
  }
}

.date-range-wrapper button {
  max-width: 180px;
}

.checkbox-container {
  /* display: block; */
  position: relative;
  padding-left: 23px;
  /* margin-bottom: 12px; */
  cursor: pointer;
  font-size: 14px;
  /* -webkit-user-select: none; */
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  color: var(--text-white-color);
}

.checkbox-container a {
  color: #08e0e2;
  text-decoration: none;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: transparent;
  border: 1px solid var(--border-theme-1-color);
  border-radius: 5px;
}

.checkbox-container:hover input~.checkmark {
  background-color: transparent;
  border: 1px solid var(--border-theme-1-color);
}

.checkbox-container input:checked~.checkmark {
  background-color: transparent;
  border: 1px solid var(--border-theme-1-color);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked~.checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

select.form-control {
  background: #c9d5d5;
  color: #434343;
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 12px 20px;
  border-radius: 5px;
}

.breadcrumb-wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 20px;
  background: #2b735b;
  padding: 11px 25px 11px 19px;
  border-radius: 8px;
}

@media (max-width: 1199px) {
  .breadcrumb-wrapper {
    gap: 10px;
    padding: 10px 20px 10px 15px;
  }
}

.breadcrumb-wrapper .arrow {
  width: 5px;
  opacity: 0.6;
}

.breadcrumb-wrapper .btn-breadcrumb {
  font-size: 16px;
  line-height: 19px;
  color: #a9c6bc;
  text-decoration: none;
}

@media (max-width: 1199px) {
  .breadcrumb-wrapper .btn-breadcrumb {
    font-size: 13px;
    line-height: 16px;
  }
}

.breadcrumb-wrapper .btn-breadcrumb-main {
  font-size: 16px;
  line-height: 19px;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  .breadcrumb-wrapper .btn-breadcrumb-main {
    font-size: 13px;
    line-height: 16px;
  }
}

:root {
  --swiper-pagination-color: #ffffff;
  --swiper-pagination-bullet-inactive-color: #ffffff;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-width: 6px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-bottom: 2px;
  --swiper-pagination-bullet-horizontal-gap: 2px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 23px;
  border-radius: 20px;
}

.swiper-top-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mt-10 {
  margin-top: 10px;
}

.mr-10 {
  margin-right: -10px;
}

.swiper-game .swiper-slide {
  position: relative;
}

.swiper-actions {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
}

.swiper-actions>* {
  flex: 0 0 auto;
}

.btn-swiper-more {
  background: linear-gradient(to bottom, #43755a, #43755a);
  border: unset;
  border-radius: 4px;
  color: var(--text-white-color);
  padding: 5px 20px;
  font-size: 12px;
}

.swiper-btn-rounded {
  background: #4a8568;
  border: 1px solid #ffffff;
  border-radius: 50%;
  max-width: var(--swiper-custom-size, 40px);
  height: var(--swiper-custom-size, 40px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.swiper-btn-rounded img {
  width: 12px;
  height: auto;
  vertical-align: middle;
}

.swiper-btn-rounded.swiper-btn-prev {
  position: absolute;
  left: 0px;
  transform: translateX(0%) transformY(-50%);
}

.swiper-btn-rounded.swiper-btn-next {
  position: absolute;
  left: 100%;
  transform: translateX(-100%) transformY(-50%);
}

@media (max-width: 767px) {
  .swiper-btn-rounded.swiper-md-hidden {
    display: none;
  }
}

.swiper-btn {
  outline: unset;
  border: unset;
  background: linear-gradient(to bottom, #43755a, #43755a);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.swiper-btn img {
  width: 8px;
  height: auto;
  vertical-align: middle;
}

.swiper-btn.active {
  background: #004136;
}

.swiper-btn:not(:disabled) {
  background: #004136;
}

.swiper-game-desc {
  display: flex;
  flex-flow: column nowrap;
  padding: 10px;
}

.swiper-game-desc p {
  font-size: 13px;
  color: var(--text-white-color);
}

@media (max-width: 767px) {
  .swiper-game-desc p+p {
    margin-top: -3px;
  }
}

.swiper-game-desc small {
  color: var(--text-lightgreen-color);
}

.swiper-referral .swiper-slide {
  position: relative;
  flex-shrink: 1;
  margin-left: 10px;
}

.swiper-referral .swiper-slide-next+.swiper-slide+.swiper-slide::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(to left, #0b1734, rgba(12, 27, 61, 0));
}

.swiper-referral-bonus .swiper-wrapper {
  width: 90%;
}

.swiper-referral-bonus .swiper-slide {
  position: relative;
  flex-shrink: 1;
  margin-left: 8px;
}

.swiper-referral-bonus .swiper-slide-next+.swiper-slide+.swiper-slide::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(to left, #0b1734, rgba(12, 27, 61, 0));
}

#footer {
  padding: 40px 0px;
  background: #06211b;
}

@media (max-width: 767px) {
  #footer {
    margin-bottom: var(--tabbar-height);
  }
}

@media (max-width: 1024px) {
  #footer {
    padding: 20px 0px;
  }
}

@media (min-width: 1600px) {

  #footer .container,
  #footer .container-lg,
  #footer .container-md,
  #footer .container-sm,
  #footer .container-xl,
  #footer .container-xxl {
    max-width: 1520px;
  }
}

#footer .footer-group {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

#footer .footer-group p {
  color: var(--text-grey-color);
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
}

@media (max-width: 1024px) {
  #footer .game-license {
    margin: 0 auto;
    margin-bottom: 40px;
  }
}

#footer .footer-line {
  height: 1px;
  background: var(--text-grey-color);
  width: 100%;
  margin: 20px auto;
}

@media (max-width: 1024px) {
  #footer .footer-line {
    display: none;
  }
}

#footer .footer-wrapper {
  display: grid;
  gap: 10px;
  grid-template-areas: ". z z z z z z z z z z z z z z ." "x x x x x x x x x x x x x x x x" ". a a a a b . c c . d d d d . ." ". a a a a b . c c . d d d d . ." ". a a a a b . c c . d d d d . ." "y y y y y y y y y y y y y y y y" ". e e e e . . f f . g . . h h h" ". e e e e . . f f . g . . h h h";
  grid-template-columns: repeat(16, 1fr);
}

@media (max-width: 1024px) {
  #footer .footer-wrapper {
    grid-template-areas: "z z z z z z" "x x x x x x" "a a a a a a" "b b b b b b" "c c c c c c" "y y y y y y" "e e e e e e" "d d d g g g" "h h h f f f";
    grid-template-columns: repeat(6, 1fr);
    row-gap: 15px;
  }
}

#footer .footer-wrapper h2 {
  font-size: 15px;
  color: var(--text-white-color);
}

#footer .footer-wrapper a {
  color: var(--text-grey-color);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper a {
    font-size: 16px;
  }
}

#footer .footer-wrapper .footer-content.swiper-provider-wrapper {
  grid-area: z;
}

#footer .footer-wrapper .footer-content.line-1 {
  grid-area: x;
}

#footer .footer-wrapper .footer-content.about {
  grid-area: a;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper .footer-content.about .footer-group {
    margin-bottom: 40px;
    text-align: center;
  }
}

#footer .footer-wrapper .footer-content.about img {
  max-width: 100%;
  height: 50px;
  -o-object-fit: contain;
  object-fit: contain;
}

#footer .footer-wrapper .footer-content.games {
  grid-area: b;
}

#footer .footer-wrapper .footer-content.info {
  grid-area: c;
}

#footer .footer-wrapper .footer-content.certification {
  grid-area: d;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper .footer-content.certification .footer-group {
    margin-bottom: 0px;
  }
}

#footer .footer-wrapper .footer-content.certification img {
  max-width: 100%;
  height: 45px;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper .footer-content.certification img {
    height: 35px;
  }
}

#footer .footer-wrapper .footer-content.line-2 {
  grid-area: y;
}

#footer .footer-wrapper .footer-content.payment-methods {
  grid-area: e;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper .footer-content.payment-methods .footer-group {
    margin-bottom: 40px;
  }
}

#footer .footer-wrapper .footer-content.payment-methods .footer-group {
  max-width: 400px;
}

#footer .footer-wrapper .footer-content.payment-methods img {
  max-width: 100%;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper .footer-content.payment-methods img {
    height: 32px;
  }
}

#footer .footer-wrapper .footer-content.follow-us {
  grid-area: f;
}

#footer .footer-wrapper .footer-content.follow-us img {
  max-width: 100%;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
}

#footer .footer-wrapper .footer-content.security {
  grid-area: g;
}

#footer .footer-wrapper .footer-content.security img {
  max-width: 100%;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
}

#footer .footer-wrapper .footer-content.responsible-gaming {
  grid-area: h;
}

#footer .footer-wrapper .footer-content.responsible-gaming img {
  max-width: 100%;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
}

#footer .footer-wrapper .footer-desc-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
  max-width: 300px;
  margin-bottom: 100px;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper .footer-desc-wrapper .footer-group:first-child {
    margin-bottom: 0px;
  }
}

@media (max-width: 1024px) {
  #footer .footer-wrapper .footer-desc-wrapper {
    margin-bottom: 0px;
    margin: 0 auto;
    max-width: 350px;
  }
}

#footer .footer-wrapper .footer-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#footer .footer-wrapper ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

#footer .footer-wrapper ul.horizontal {
  flex-flow: row wrap;
  align-items: center;
  gap: 20px 15px;
}

#footer .footer-wrapper ul li a {
  display: block;
}

#footer p.copyright {
  color: var(--text-white-color);
  text-align: center;
  font-size: 14px;
  font-weight: 200;
  margin-top: 100px;
}

#footer p.copyright sup {
  color: var(--text-white-color);
}

@media (max-width: 1024px) {
  #footer p.copyright {
    margin-top: 100px;
  }
}

.modal-standard .modal-content,
.modal-transfer-credit .modal-content,
#modal-register-congratulations .modal-content,
.modal-auth .modal-content {
  background: var(--background-darkgreen-color);
  border-radius: 12px;
}

.modal-standard .modal-header,
.modal-transfer-credit .modal-header,
#modal-register-congratulations .modal-header,
.modal-auth .modal-header {
  display: flex;
  border-bottom: 0px;
  position: relative;
  max-height: 80px;
  height: 100%;
  flex-flow: row nowrap;
  justify-content: space-between;
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
}

@media (max-width: 1199px) {

  .modal-standard .modal-header,
  .modal-transfer-credit .modal-header,
  #modal-register-congratulations .modal-header,
  .modal-auth .modal-header {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.modal-standard .modal-header:after,
.modal-transfer-credit .modal-header:after,
#modal-register-congratulations .modal-header:after,
.modal-auth .modal-header:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #457b85;
}

.modal-standard .modal-header h2,
.modal-transfer-credit .modal-header h2,
#modal-register-congratulations .modal-header h2,
.modal-auth .modal-header h2 {
  text-align: center;
  font-size: 20px;
  margin: 0;
  color: var(--text-white-color);
}

.modal-standard .modal-header .modal-logo,
.modal-transfer-credit .modal-header .modal-logo,
#modal-register-congratulations .modal-header .modal-logo,
.modal-auth .modal-header .modal-logo {
  max-width: 150px;
  height: auto;
}

@media (max-width: 1199px) {

  .modal-standard .modal-header .modal-logo,
  .modal-transfer-credit .modal-header .modal-logo,
  #modal-register-congratulations .modal-header .modal-logo,
  .modal-auth .modal-header .modal-logo {
    max-width: 100px;
  }
}

.modal-standard .modal-header .modal-header-right,
.modal-transfer-credit .modal-header .modal-header-right,
#modal-register-congratulations .modal-header .modal-header-right,
.modal-auth .modal-header .modal-header-right {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: 150px;
}

.modal-standard .modal-header .btn-close,
.modal-transfer-credit .modal-header .btn-close,
#modal-register-congratulations .modal-header .btn-close,
.modal-auth .modal-header .btn-close {
  cursor: pointer;
  width: 25px;
  height: 25px;
  background-color: transparent;
  border: 0;
  opacity: 1;
  padding: 0px;
  outline: unset;
  box-shadow: unset;
  margin: 0px;
}

@media (max-width: 1199px) {

  .modal-standard .modal-header .btn-close,
  .modal-transfer-credit .modal-header .btn-close,
  #modal-register-congratulations .modal-header .btn-close,
  .modal-auth .modal-header .btn-close {
    width: 20px;
    height: 20px;
  }
}

.modal-standard .modal-header .btn-close img,
.modal-transfer-credit .modal-header .btn-close img,
#modal-register-congratulations .modal-header .btn-close img,
.modal-auth .modal-header .btn-close img {
  max-width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  vertical-align: baseline;
}

.modal-standard .modal-body,
.modal-transfer-credit .modal-body,
#modal-register-congratulations .modal-body,
.modal-auth .modal-body {
  padding: 0px 40px;
}

@media (max-width: 1199px) {

  .modal-standard .modal-body,
  .modal-transfer-credit .modal-body,
  #modal-register-congratulations .modal-body,
  .modal-auth .modal-body {
    padding: 0px 20px;
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
  }
}

#daily-checkin-modal .modal-content {
  background: unset;
}

.modal-auth .modal-title {
  margin-bottom: 10px;
  margin-top: -20px;
}

@media (max-width: 1199px) {
  .modal-auth .modal-title {
    margin-top: -25px;
    margin-bottom: 20px;
  }
}

.modal-auth .modal-title h2 {
  font-size: 20px;
  color: var(--text-lightgreen-color);
  font-weight: 500;
}

@media (max-width: 1199px) {
  .modal-auth .modal-title h2 {
    font-size: 18px;
  }
}

.modal-auth .modal-register-link {
  margin-top: 30px;
}

@media (max-width: 1199px) {
  .modal-auth .modal-register-link {
    margin-top: 20px;
  }
}

.modal-auth .modal-register-link span {
  color: var(--text-white-color);
  font-size: 14px;
}

@media (max-width: 1199px) {
  .modal-auth .modal-register-link span {
    font-size: 12px;
  }
}

.modal-auth .modal-register-link span a {
  color: var(--text-lightgreen-color);
  text-decoration: none;
}

.modal-auth .modal-forgot-link {
  margin-top: -10px;
}

.modal-auth .modal-forgot-link a {
  font-size: 12px;
  color: var(--text-warning-color);
  text-decoration: none;
}

.modal-auth .hr {
  color: var(--text-lightgrey-color);
}

.modal-auth .modal-footer-link {
  margin-top: 10px;
}

.modal-auth .modal-footer-link span {
  color: var(--text-white-color);
  font-size: 12px;
  line-height: 18px;
  display: block;
}

.modal-auth .modal-footer-link span span {
  color: var(--text-lightgreen-color);
  display: inline-block;
}

.modal-auth .modal-footer-link span a {
  color: var(--text-lightgreen-color);
  text-decoration: none;
}

#modal-register-congratulations .modal-logo {
  max-width: 250px;
  height: auto;
  margin: 0px auto;
  margin-bottom: 50px;
}

@media (max-width: 1199px) {
  #modal-register-congratulations .modal-logo {
    max-width: 200px;
  }
}

#modal-register-congratulations .modal-title {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

@media (max-width: 1199px) {
  #modal-register-congratulations .modal-title {
    gap: 10px;
  }
}

#modal-register-congratulations .modal-title h3 {
  color: var(--text-white-color);
  font-size: 30px;
  font-weight: 700;
}

@media (max-width: 1199px) {
  #modal-register-congratulations .modal-title h3 {
    font-size: 24px;
  }
}

#modal-register-congratulations .modal-title p {
  color: var(--text-white-color);
  font-size: 14px;
}

@media (max-width: 1199px) {
  #modal-register-congratulations .modal-title p {
    font-size: 12px;
  }
}

#modal-register-congratulations .done-img {
  max-width: 240px;
  height: auto;
  margin: 0px auto;
}

@media (max-width: 1199px) {
  #modal-register-congratulations .done-img {
    max-width: 180px;
    margin-bottom: 20px;
  }
}

.modal-transfer-credit .card {
  background: unset;
  border: unset;
  padding: 0px;
}

.modal-transfer-credit .card.card-account-copy {
  padding: 20px;
  background: #006857;
}

.modal-transfer-credit .card .card-body {
  padding: 0px;
}

.modal-transfer-credit .modal-body {
  padding-top: 30px;
}

.modal-transfer-credit .modal-header {
  max-height: unset;
  padding: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  align-items: flex-start;
  position: relative;
}

.modal-transfer-credit .modal-header .modal-title-img {
  max-width: 300px;
  margin: 0 auto;
}

.modal-transfer-credit .modal-header .btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-image: url("../img/global/close.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.modal-transfer-credit .modal-footer {
  border-top: 0px;
  border-radius: unset;
}

.modal-transfer-credit .card-account-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.modal-transfer-credit .card-account-wrapper+.card-account-wrapper {
  margin-top: 10px;
}

.modal-transfer-credit .card-account-wrapper .card-account {
  flex: 3;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
}

.modal-transfer-credit .card-account-wrapper .card-account p {
  font-size: 16px;
  color: var(--text-white-color);
  flex: 2.5;
}

@media (max-width: 1199px) {
  .modal-transfer-credit .card-account-wrapper .card-account p {
    font-size: 14px;
  }
}

.modal-transfer-credit .card-account-wrapper .card-account span {
  font-size: 16px;
  color: var(--text-lightgreen-color);
  font-weight: 500;
  flex: 4;
}

@media (max-width: 1199px) {
  .modal-transfer-credit .card-account-wrapper .card-account span {
    font-size: 14px;
  }
}

.modal-transfer-credit .card-account-wrapper .card-account-copy {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.modal-transfer-credit .card-account-wrapper .card-account-copy input[type=text] {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.modal-transfer-credit .card-account-wrapper .card-account-copy .btn-account-copy {
  padding: unset;
  background: unset;
  border: unset;
  cursor: pointer;
  outline: unset;
}

.modal-transfer-credit .card-account-wrapper .card-account-copy .btn-account-copy img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.modal-transfer-credit .card {
  border-radius: var(--border-radius-small);
}

.modal-transfer-credit .balance-item {
  display: flex;
  flex-flow: row nowrap;
}

.modal-transfer-credit .balance-item+.balance-item {
  margin-top: 5px;
}

.modal-transfer-credit .balance-item p {
  flex: 2;
  font-size: 16px;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  .modal-transfer-credit .balance-item p {
    font-size: 14px;
  }
}

.modal-transfer-credit .balance-item span {
  flex: 4;
  font-size: 16px;
  color: var(--text-warning-color);
  font-weight: 500;
}

@media (max-width: 1199px) {
  .modal-transfer-credit .balance-item span {
    font-size: 14px;
  }
}

.swal2-js-socials-html-container {
  margin: unset !important;
}

.swal2-referral-popup {
  padding: 40px 20px 20px !important;
}

.swal2-referral-popup .swal2-close {
  position: absolute;
  right: 5px;
  top: 5px;
}

.swal2-promotion-popup {
  padding: 40px !important;
}

.swal2-promotion-popup .swal2-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.swal2-promotion-popup .promotion-content {
  text-align: left;
}

.promotion-content .promo-content {
  color: #ffffffbf;
}

.swal2-promotion-popup .promotion-content img {
  width: 100%;
}

.swal2-promotion-popup .promotion-content a {
  text-decoration: none;
}

.swal2-promotion-popup .promotion-content h4,
.swal2-promotion-popup .promotion-content .promo-text {
  color: var(--text-white-color);
  font-size: 16px;
  margin: 10px 0px;
  margin-top: 30px;
}

.swal2-promotion-popup .promotion-content .promo-title {
  color: var(--text-white-color);
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.swal2-promotion-popup .promotion-content .info-text {
  color: var(--text-white-color);
  font-size: 12px;
  padding: 5px;
  font-weight: 200;
}

.swal2-promotion-popup .promotion-content .info-child {
  margin-left: 14px;
}

.swal2-promotion-popup .promotion-content ol {
  padding-left: 10px;
}

.swal2-promotion-popup .promotion-content span {
  margin-left: 10px;
  display: block;
  font-size: 14px;
  color: var(--text-white-color);
}

.swal2-promotion-popup .promotion-content table {
  margin: 10px 0px;
  border-collapse: separate;
  border-radius: 10px;
  border-spacing: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--text-white-color);
  overflow: hidden;
  border: 1px solid var(--border-white-1-color);
}

.swal2-promotion-popup .promotion-content th {
  color: var(--text-white-color);
  font-weight: 200;
  padding: 8px;
  position: relative;
  font-size: 14px;
}

.swal2-promotion-popup .promotion-content th:not(:last-child) {
  border-right: 1px solid var(--border-white-1-color);
  background-color: #106560;
}

.swal2-promotion-popup .promotion-content th:last-child {
  background-color: #106560;
}

.swal2-promotion-popup .promotion-content td:not(:last-child) {
  border-right: 1px solid var(--border-white-1-color);
}

.swal2-promotion-popup .promotion-content td {
  color: var(--text-white-color);
  font-weight: 200;
  padding: 8px;
  font-size: 14px;
}

.swal2-promotion-popup .promotion-content th,
.swal2-promotion-popup .promotion-content td :not(:last-child) {
  border-bottom: var(--border-white-1-color);
}

.swal2-promotion-popup .swal2-html-container {
  margin: 0px !important;
}

.swal2-promo-code-invalid-popup .swal2-icon {
  margin: 0 auto !important;
  margin-top: -20px !important;
  width: 50%;
  height: auto;
}

.swal2-promo-code-invalid-popup .swal2-title {
  margin-top: -30px;
}

.swal2-promo-code-invalid-popup .swal2-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.swal2-checkin-popup {
  background: transparent !important;
  border: 0px !important;
}

.swal2-checkin-popup .swal2-html-container {
  margin: 0px !important;
}

.swal2-checkin-popup .btn-swal2-confirm {
  border: unset !important;
  outline: unset !important;
  background: linear-gradient(to bottom, #ffc32e, #ff9100) !important;
  box-shadow: unset !important;
  font-size: 15px;
  color: var(--text-white-color);
  font-weight: 600;
  border-radius: 10px;
  max-width: 300px;
  padding: 10px 65px;
}

.swal2-checkin-popup .daily-checkin-container .daily-checkin-content {
  position: relative;
  margin-top: -50px;
}

.swal2-checkin-popup .daily-checkin-container .daily-checkin-content p {
  font-size: 13px;
  line-height: 20px;
  color: var(--text-white-color);
  font-weight: 500;
}

.swal2-checkin-popup .daily-checkin-container .daily-checkin-content p+h6 {
  margin-top: 11px;
}

.swal2-checkin-popup .daily-checkin-container .daily-checkin-content h6 {
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  color: #ffc32e;
}

div:where(.swal2-checkin-container).swal2-backdrop-show,
div:where(.swal2-checkin-container).swal2-noanimation {
  background: rgba(0, 0, 0, 0.88) !important;
}

.swal2-icon {
  border-radius: 0 !important;
  border: none !important;
}

.swal2-title {
  color: var(--text-white-color) !important;
  font-size: 1.2em !important;
}

.swal2-input {
  height: 4em !important;
}

.swal2-close {
  font-size: 1.5em !important;
  color: var(--text-white-color) !important;
}

.swal2-html-container {
  color: var(--text-white-color) !important;
  font-size: 12px !important;
}

.swal2-html-container span {
  color: var(--text-secondary-color);
}

.swal2-html-container p {
  color: #b6d6ca !important;
}

.swal2-content {
  padding: 0 !important;
}

.swal2-close {
  outline: unset !important;
  box-shadow: unset !important;
}

.custom-title {
  font-size: 25px !important;
  color: var(--text-white-color);
  font-weight: 300;
}

.custom-verify-title {
  font-size: 15px !important;
  color: var(--text-white-color);
  margin-bottom: 10%;
  font-weight: 300;
}

.current-pagination {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #f5f5f5 !important;
}

.total-pagination {
  font-size: 12px !important;
  color: #969696 !important;
}

.swal2-container .swal2-popup {
  padding: 30px 0px;
}

.swal2-container .swal2-modal {
  background: #0b2e2e;
}

.swal2-container .swal2-title {
  padding-top: 0px;
}

.swal2-container .swal2-notification-popup .swal2-icon {
  width: 100% !important;
  height: auto !important;
}

.swal2-container .swal2-confirm-button {
  background: linear-gradient(to right, #00c08b, #00bdbf);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 300;
  box-shadow: none;
  padding: 8px 40px;
  margin: 0px;
}

.swal2-container .swal2-confirm-button:focus,
.swal2-container .swal2-confirm-button:hover {
  background: linear-gradient(to right, #00c08b, #00bdbf) !important;
  box-shadow: none !important;
}

.jssocials-shares {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.jssocials-shares .jssocials-share {
  margin: unset;
  max-width: 90px;
  width: 100%;
}

.jssocials-shares .jssocials-share .jssocials-share-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.jssocials-shares .jssocials-share .jssocials-share-logo {
  max-width: 35px;
  height: auto;
}

.jssocials-shares .jssocials-share .jssocials-share-logo+.jssocials-share-label {
  margin-top: 10px;
}

.jssocials-shares .jssocials-share .jssocials-share-label {
  font-size: 12px;
  color: var(--text-white-color);
  padding: unset !important;
}

.jssocials-shares .jssocials-share+.jssocials-share {
  margin-left: 10px;
}

.table thead {
  background: var(--background-theme-gradient);
  color: var(--text-darkgreen-color);
  font-size: 16px;
  font-weight: 500;
  clip-path: rect(0px 100% 100% 0px round 7px 7px 0px 0px);
}

@media (max-width: 1199px) {
  .table thead {
    font-size: 14px;
  }
}

.table thead th {
  padding: 15px 15px;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .table thead th {
    padding: 15px 10px;
  }
}

.table thead tr,
.table tfoot tr {
  position: relative;
}

.table thead tr::after,
.table tfoot tr::after {
  content: "";
  position: absolute;
}

.table tbody {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  .table tbody {
    font-size: 13px;
  }
}

.table tbody tr {
  position: relative;
}

.table tbody tr::after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0));
  height: 1px;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

.table tbody tr:last-child::after {
  display: none;
}

.table tbody tr td {
  padding: 15px 0px;
  vertical-align: middle;
}

@media (max-width: 1199px) {
  .table tbody tr td {
    padding: 15px 10px;
  }
}

.table tfoot {
  background: #1a5c31;
}

.table tfoot td,
.table tfoot th {
  padding: 15px 0px;
}

.total-wrapper {
  display: inline-flex;
  flex-flow: row wrap;
  gap: 20px;
  align-items: center;
}

.total-wrapper p {
  font-size: 16px;
  color: var(--text-white-color);
  font-weight: 300;
}

@media (max-width: 1199px) {
  .total-wrapper p {
    font-size: 14px;
  }
}

.total-wrapper span {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  .total-wrapper span {
    font-size: 14px;
  }
}

.table> :not(:first-child) {
  border-top: 0px;
  text-align: center;
}

.table-bordered> :not(caption)>* {
  border-width: 0;
}

.table-bordered> :not(caption)>*>* {
  border-width: 0;
}

.table-border-lightgreen {
  border: 1px solid var(--border-lightgreen-color);
  border-radius: 8px;
}

.table-darkgreen-bg {
  background: var(--background-darkgreen-color);
}

.dataTables_empty {
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  /* padding: 80px 0 !important; */
}

@media (max-width: 1199px) {
  .dataTables_empty {
    padding: 40px 0 !important;
    font-size: 14px;
  }
}

.dataTables_paginate {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  width: 100%;
  margin-top: 40px;
}

@media (max-width: 1199px) {
  .dataTables_paginate {
    margin-top: 15px;
  }
}

.dataTables_paginate span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dataTables_paginate .paginate_button {
  background: #3a7f5f;
  color: var(--text-white-color);
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px 20px;
}

.dataTables_paginate .paginate_button.current {
  background: var(--background-darkgreen-color);
}

.dataTables_paginate .paginate_button.previous.disabled,
.dataTables_paginate .paginate_button.next.disabled {
  background: var(--background-darkgreen-color);
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  .dataTables_paginate .paginate_button {
    font-size: 14px;
  }
}

.empty-data {
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  padding: 80px 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

@media (max-width: 1199px) {
  .empty-data {
    padding: 40px 0;
    font-size: 14px;
  }
}

.empty-data .no-data-img {
  max-width: 80px;
  margin: 0 auto;
}

.empty-data p {
  color: var(--text-white-color);
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  .empty-data p {
    font-size: 14px;
  }
}

.progress {
  height: var(--progress-height, 10px);
  background: var(--progress-bg-color, var(--background-darkgreen-color));
}

.progress .progress-bar {
  background-color: var(--progress-bar-bg-color, var(--background-lightgreen-color));
  border-radius: var(--progress-bar-radius, 20px);
}

.announcement-wrapper .swiper-area {
  background-color: #154446;
  border-radius: 20px;
  padding: 1px 17px;
}

.announcement-wrapper .announcement-title {
  padding: 46px 0px 23px 0px;
}

.announcement-wrapper .announcement-title h6 {
  color: var(--text-white-color);
  font-weight: 600;
  font-size: 20px;
}

.announcement-wrapper .swiper-announcement {
  text-align: left !important;
  padding-bottom: 50px;
  margin-bottom: 15px;
  --swiper-navigation-top-offset: 98%;
  --swiper-pagination-bottom: 8px;
}

.announcement-wrapper .swiper-announcement .swiper-button-prev {
  background-image: url("../img/announcement/arrow-prev.png");
}

.announcement-wrapper .swiper-announcement .swiper-button-next {
  background-image: url("../img/announcement/arrow-next.png");
}

.announcement-wrapper .swiper-announcement .swiper-button-prev,
.announcement-wrapper .swiper-announcement .swiper-button-next {
  background-color: #23be9d;
  background-repeat: no-repeat;
  background-size: 10px auto;
  background-position: center;
  max-width: 28px;
  height: 28px;
  border-radius: 50%;
}

.announcement-wrapper .swiper-announcement .swiper-button-prev::after,
.announcement-wrapper .swiper-announcement .swiper-button-next::after {
  display: none;
}

.announcement-wrapper .swiper-announcement p,
.announcement-wrapper .swiper-announcement li {
  line-height: 21px;
  color: #f5f5f5 !important;
}

.announcement-wrapper .swiper-announcement .announcement-tick {
  display: inline-block;
  background: #23be9d;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 4px;
  margin-right: 5px;
}

.announcement-wrapper .swiper-announcement .announcement-tick img {
  vertical-align: unset;
}

.announcement-wrapper .swiper-announcement ul {
  padding-left: unset;
}

.announcement-wrapper .swiper-announcement ul li {
  list-style-type: none;
}

.announcement-wrapper .swiper-announcement ul li+li {
  margin-bottom: 5px;
}

.announcement-wrapper .announcement-banner {
  padding: 0px 1px;
}

.announcement-wrapper .announcement-banner+.announcement-description {
  margin-top: 18px;
}

.announcement-wrapper .announcement-description {
  padding: 0px 1px;
}

.announcement-wrapper .announcement-bottom-area {
  padding: 20px 0px;
}

.swiper-categories-1-wrapper {
  border-bottom: 2px solid var(--border-darkgreen-color);
  margin: 20px 0px;
}

.swiper-categories-1-wrapper .categories-item {
  padding: 9px 0px;
  color: var(--text-white-color);
}

.swiper-categories-2-wrapper .categories-item {
  background: #0d5140;
  border-radius: 8px;
  padding: 9px 23px;
  color: #9db8b2;
  transition: all ease 0.3s;
}

@media (max-width: 991px) {
  .swiper-categories-2-wrapper .categories-item {
    padding: 9px 15px;
  }
}

.swiper-categories-2-wrapper .categories-item.active,
.swiper-categories-2-wrapper .categories-item:hover {
  background: #2a745b;
  color: var(--text-white-color);
}

.swiper-categories-1-wrapper,
.swiper-categories-2-wrapper {
  --swiper-category-item-width: 200px;
}

.swiper-categories-1-wrapper .swiper-slide,
.swiper-categories-2-wrapper .swiper-slide {
  max-width: var(--swiper-category-item-width);
  width: unset !important;
  display: flex;
}

.swiper-categories-1-wrapper .categories-item,
.swiper-categories-2-wrapper .categories-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 13px;
  max-width: var(--swiper-category-item-width);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.swiper-categories-1-wrapper .categories-item.sports img,
.swiper-categories-2-wrapper .categories-item.sports img {
  position: relative;
  top: -4px;
}

@media (max-width: 991px) {

  .swiper-categories-1-wrapper .categories-item,
  .swiper-categories-2-wrapper .categories-item {
    font-size: 14px;
  }
}

.swiper-categories-1-wrapper .categories-item img,
.swiper-categories-2-wrapper .categories-item img {
  max-width: 35px;
  height: 35px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

/* games-menu */
.categories-item .icon-games {
  width: 35px;
  height: 35px;
  /* filter: opacity(0.5); */
}

.breakcrum_games .dropdown-body .categories-item .icon-games { 
  width: 28px;
}

.categories-item.active .icon-games,
.categories-item:hover .icon-games {
  filter: brightness();
}

.menu-item .menu-img .icon-sidebar {
  width: 35px;
  height: 35px;
}

.menu-item .menu-img .icon-lucky-spin {
  background: url(../img/sidebar/sidebar-icon/lucky-spin.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-daily-check {
  background: url(../img/sidebar/sidebar-icon/daily-check-in.png) center no-repeat;
  background-size: 100%;
}

.menu-item .menu-img .icon-mission-daily {
  background: url(../img/sidebar/sidebar-icon/mission-daily.png) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-casino {
  background: url(../img/categories/tabs/live-casino.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-slots {
  background: url(../img/categories/tabs/slot.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-sports {
  background: url(../img/categories/tabs/sports.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-esports {
  background: url(../img/categories/tabs/e-sports.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-poker {
  background: url(../img/categories/tabs/p2p.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-lottery {
  background: url(../img/categories/tabs/lottery.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-number {
  background: url(../img/categories/tabs/number.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-fish {
  background: url(../img/categories/tabs/fish.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-cock {
  background: url(../img/categories/tabs/cockfight.gif) center no-repeat;
  background-size: 100%;
}

.categories-item .icon-horse {
  background: url(../img/categories/tabs/horse.gif) center no-repeat;
  background-size: 100%;
}

/* slot_provider */
.swiper-categories-2-wrapper .provider-item {
  background: #0d5140;
  border-radius: 8px;
  color: #ffffffa3;
  transition: all ease 0.3s;
  width: 149px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991px) {
  .swiper-categories-2-wrapper .provider-item {
    padding: 9px 15px;
  }
}

.swiper-categories-2-wrapper .provider-item.active,
.swiper-categories-2-wrapper .provider-item:hover {
  background: #2a745b;
  color: var(--text-white-color);
}

.swiper-categories-2-wrapper .provider-item.active img,
.swiper-categories-2-wrapper .provider-item:hover img {
  filter: brightness();
}

.swiper-categories-1-wrapper,
.swiper-categories-2-wrapper {
  --swiper-category-item-width: 200px;
}

.swiper-categories-1-wrapper .swiper-slide,
.swiper-categories-2-wrapper .swiper-slide {
  max-width: var(--swiper-category-item-width);
  width: unset !important;
  display: flex;
}

.swiper-categories-1-wrapper .provider-item,
.swiper-categories-2-wrapper .provider-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 13px;
  max-width: var(--swiper-category-item-width);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

@media (max-width: 991px) {

  .swiper-categories-1-wrapper .provider-item,
  .swiper-categories-2-wrapper .provider-item {
    font-size: 14px;
  }
}

.swiper-categories-1-wrapper .provider-item img,
.swiper-categories-2-wrapper .provider-item img {
  max-width: 100%;
  height: 50px;
  filter: grayscale(1);
}

.provider_games_slots {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.games_provider {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 20px 0;
}

.games_provider img {
  width: 30px;
  display: flex;
  align-items: center;
}

.games_provider h4 {
  font-size: 25px;
  color: #fff;
  margin: 0;
}

/* end */

.game-filters {
  position: relative;
}

.game-filters .game-actions {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  height: 42px;
}

/* new-style */
#games-menu
/* .slots_menu_top  */
{
  padding-top: 60px;
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  #games-menu
  /* .slots_menu_top  */
  {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    /* top: 40px; */
    padding-top: 10px !important;
    background: #0e6341;
    padding-bottom: 10px;
  }
}

.slots_provider {
  z-index: 99;
  width: 100%;
  position: relative;
}

@media (max-width: 767px) {
  .slots_provider {
    height: 125px;
    height: 105px;
  }
  .slots_provider .game-filters {
    position: fixed;
    top: 115px;
    left: 0;
    right: 0;
    padding: 0 10px;
    background: #0e6341;
    z-index: 999;
  }
}
.all_provider {
  width: 100%;
  display: none;
} 

.all_provider .slot_provider {
  font-size: 12px;
}

.all_provider .dropdown-input {
  height: 38px;
  color: #fff;
  background: var(--background-darkgreen-color);
  border: unset;
}

.all_provider .dropdown-menu {
  min-height: 420px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

@media (max-width: 375px) {
  .all_provider .dropdown-menu {
    min-height: 370px;
  }
}

.all_provider .dropdown-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.all_provider .dropdown-item {
  font-size: 12px !important;
  padding: 7px 20px;
}

.all_provider .dropdown-item.active {
  background: #393319 !important;
}

.all_games_link {
  width: 100%;
  height: 38px;
  background: var(--background-darkgreen-color);
  border-radius: 8px;
  text-decoration: none;
  outline: unset !important;
  box-shadow: unset !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  display: none;
}

.all_games_link:focus,
.all_games_link:hover {
  color: #fff;
}

.sort_head {
  margin-top: 0;
}

.sort_slots {
  padding: 0 0px;
}
.slots_types .slot-nav-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sort_slots .slot-nav-title a {
  padding: 7px 20px;
  color: #8D8D8D;
  font-size: 11px;
  text-decoration: none;
}

.sort_slots #tab-slots_hacksaw.slot-nav-title a,
.sort_slots #tab-slots_nlc.slot-nav-title a {
  padding: 7px 50px;
}

.sort_slots .slot-nav-title a.active {
  background: #393319;
  border-radius: 30px;
  color: #FFBF29;
}

.slots_types {
  padding: 10px 0px;
  display: block !important;
}

.slots_types .slot-nav-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slots_types .slot-nav-title a {
  padding: 7px 20px;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}

.slots_types #tab-slots_hacksaw.slot-nav-title a,
.slots_types #tab-slots_nlc.slot-nav-title a {
  padding: 7px 50px;
}

.slots_types .slot-nav-title a.active {
  background: linear-gradient(to right, #266e56, #38845d);
  border-radius: 30px;
  color: #fff;
}
/* end */

.game-filters .filter-h6 h6 {
  font-size: 15px;
  color: var(--text-white-color);
  font-weight: 300;
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .game-filters .filter-h6 h6 {
    font-size: 12px;
  }
}

.game-filters .btn-filter-wrapper {
  display: flex;
  flex-flow: row nowrap;
  gap: 30px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
  margin-right: 10px;
}

@media (max-width: 767px) {
  .game-filters .btn-filter-wrapper {
    gap: 20px;
  }
}

.game-filters .btn-filter-wrapper .btn-filter {
  background: unset;
  border: unset;
  outline: unset;
  padding: 0px;
  color: var(--text-white-color);
  font-size: 15px;
  font-weight: 300;
  display: inline-block;
  cursor: pointer;
}

@media (max-width: 767px) {
  .game-filters .btn-filter-wrapper .btn-filter {
    font-size: 12px;
  }
}

.game-filters .search-input-wrapper {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  background: linear-gradient(to right, #266e56, #38845d);
  border-radius: 8px;
  /* height: 50px; */
  height: 100%;
}

/* @media (max-width: 767px) {
  .game-filters .search-input-wrapper {
    height: 38px;
  }
} */

.game-filters .search-input-wrapper input[type=text] {
  background: linear-gradient(to right, #266e56, #38845d);
  border-radius: 8px;
  border: unset;
  outline: unset;
  /* padding: 13px; */
  padding-left: 50px;
  color: var(--text-white-color);
  font-size: 15px;
  font-weight: 300;
  width: 100%;
  position: absolute;
  z-index: 0;
}

@media (max-width: 767px) {
  .game-filters .search-input-wrapper input[type=text] {
    font-size: 12px;
  }
}

.game-filters .search-input-wrapper input[type=text]::-moz-placeholder {
  color: var(--text-white-color);
  font-weight: 300;
  font-size: 15px;
}

.game-filters .search-input-wrapper input[type=text]::placeholder {
  color: var(--text-white-color);
  font-weight: 300;
  font-size: 15px;
}

@media (max-width: 767px) {
  .game-filters .search-input-wrapper input[type=text]::-moz-placeholder {
    font-size: 12px;
  }

  .game-filters .search-input-wrapper input[type=text]::placeholder {
    font-size: 12px;
  }
}

.game-filters .search-input-wrapper img {
  max-width: 28px;
  height: 28px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  position: relative;
  z-index: 1;
  margin-left: 10px;
}

.game-filters .dropdown-wrapper {
  position: relative;
}

@media (max-width: 1024px) {
  .game-filters .dropdown-wrapper {
    position: static;
    height: 100%;
  }
}

.game-filters .dropdown-wrapper .btn-game-filter {
  background: var(--background-darkgreen-color);
  border-radius: 8px;
  border: 1px solid var(--border-darkgreen-color);
  outline: unset;
  /* padding: 2px 10px;
  aspect-ratio: 1/1; */
  background: none;
  padding: 0;
}

/* Explore Slot Providers */
.cloes_explore {
  display: none;
}

@media (max-width: 767px) {
  .game-filters .dropdown-wrapper .btn-game-filter.btn-filter {
    background: var(--background-darkgreen-color) !important;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 9px;
    width: 100%;
    height: 45px;
    height: 100%;
  }

  .explore_slots {
    width: 100%;
  }

  .btn-game-filter.btn-filter span{
    color: #fff;
    font-size: 14px;
    width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cloes_explore {
    display: block;
  }
}
/* end */

.game-filters .dropdown-wrapper .btn-game-filter.active {
  border: 1px solid var(--border-lightgreen-color);
}

.game-filters .dropdown-wrapper .btn-game-filter img {
  max-width: 28px;
  height: 28px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 767px) {
  .game-filters .dropdown-wrapper .btn-game-filter img {
    max-width: 22px;
    height: 22px;
    margin: 0 5px;
  }
}

.game-filters .dropdown-wrapper .filter-selection {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  /* If you want to display a check mark */
}

@media (max-width: 767px) {
  .game-filters .dropdown-wrapper .filter-selection {
    gap: 5px;
  }
}

.game-filters .dropdown-wrapper .filter-selection input[type=checkbox] {
  display: none;
}

.game-filters .dropdown-wrapper .filter-selection label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .game-filters .dropdown-wrapper .filter-selection label {
    padding-left: 20px;
  }
}

.game-filters .dropdown-wrapper .filter-selection label::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  left: 0;
  background-color: white;
  border-radius: 3px;
  border: none;
}

.game-filters .dropdown-wrapper .filter-selection input[type=checkbox]:checked+label::before {
  background-color: var(--background-lightgreen-color);
}

.game-filters .dropdown-wrapper .filter-selection input[type=checkbox]:checked+label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.game-filters .dropdown-wrapper .filter-selection label {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--text-white-color);
  font-weight: 300;
}

@media (max-width: 767px) {
  .game-filters .dropdown-wrapper .filter-selection label {
    font-size: 12px;
    gap: 5px;
  }
}

.game-filters .dropdown-wrapper .filter-selection label img {
  max-width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.game-filters .dropdown-wrapper .dropdown-all-content {
  position: absolute;
  width: 900px;
  z-index: 2;
  right: 0px;
  margin-top: 10px;
}

@media (max-width: 1024px) {
  .game-filters .dropdown-wrapper .dropdown-all-content {
    max-width: 100%;
    width: 100%;
    margin-top: 5px;
  }
}

.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-grid-wrapper {
  border-radius: var(--border-radius-small);
  background-color: var(--background-darkgreen-color);
  width: 100%;
}

@media (max-width: 1024px) {
  .game-filters .dropdown-wrapper .dropdown-all-content .dropdown-grid-wrapper {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0px;
  }
}

@media (min-width: 768px) {
  .filter-hide {
    display: none;
  }

  .breakcrum_games {
    display: none;
  }
}

.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper {
  border-radius: var(--border-radius-small);
  background-color: var(--background-darkgreen-color);
  padding: 15px 10px;
  max-width: 200px;
  width: 100%;
  left: 100%;
  transform: translateX(-100%);
  position: absolute;
}

.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: flex;
  flex-flow: column nowrap;
  gap: 2px;
}

.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper ul li a,
.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper .slot-nav-title a {
  padding: 10px 15px;
  color: var(--text-white-color);
  font-weight: 500;
  font-size: 15px;
  display: block;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper ul li a,
  .game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper .slot-nav-title a {
    font-size: 12px;
  }
}

.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper ul li a.active,
.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper ul li a:hover,
.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper .slot-nav-title a.active,
.game-filters .dropdown-wrapper .dropdown-all-content .dropdown-list-wrapper .slot-nav-title a:hover {
  background-color: #25675b;
  border-radius: var(--border-radius-small);
}

.card-group-wrapper .card {
  border: 0px;
  border-radius: var(--card-border-radius);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: var(--card-padding);
  margin-bottom: 20px;
  background: var(--background-darkgreen-color);
}

@media (max-width: 767px) {
  .card-group-wrapper .card {
    padding: 20px;
  }
}

.card-group-wrapper .card .card-header {
  border: unset;
  padding: 0px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.card-group-wrapper .card .card-header.card-underlined {
  border-bottom: 1px solid #80a09b;
}

.card-group-wrapper .card .card-header h6 {
  color: var(--text-lightgreen-color);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  .card-group-wrapper .card .card-header h6 {
    font-size: 18px;
  }
}

.card-group-wrapper .card .card-body {
  padding: 0px;
}

ul.nav-pills {
  display: flex;
  flex-flow: row nowrap;
  flex-wrap: nowrap;
  gap: 15px;
  overflow: auto;
  padding-bottom: 5px;
}

ul.nav-pills::-webkit-scrollbar {
  display: none;
}

ul.nav-pills .nav-item {
  margin-bottom: 0;
}

ul.nav-pills .nav-item .nav-link {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 10px 20px;
  color: #83a49e;
  text-align: center;
  text-decoration: none;
  background: #08483d;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
  white-space: nowrap;
  gap: 10px;
}

ul.nav-pills .nav-item .nav-link img {
  max-width: 30px;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 767px) {
  ul.nav-pills .nav-item .nav-link img {
    max-width: 20px;
    height: 20px;
  }
}

@media (max-width: 767px) {
  ul.nav-pills .nav-item .nav-link {
    padding: 8px 13px;
    font-size: 14px;
    border-radius: 5px;
  }
}

ul.nav-pills .nav-item .nav-link.active {
  background: #1c5d52;
  color: var(--text-white-color);
}

.total-balance-amount-title {
  padding: var(--card-padding);
  background: var(--background-theme-gradient);
  border-radius: var(--card-border-radius);
}

@media (max-width: 1199px) {
  .total-balance-amount-title {
    padding: 20px 30px;
  }
}

.total-balance-amount-title .total-balance {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  gap: 10px;
}

.total-balance-amount-title .total-balance-label h6 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-darkgreen-color);
}

@media (max-width: 1199px) {
  .total-balance-amount-title .total-balance-label h6 {
    font-size: 12px;
  }
}

.total-balance-amount-title .total-balance-amount {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 20px;
}

.total-balance-amount-title .total-balance-amount h5 {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-darkgreen-color);
}

@media (max-width: 1199px) {
  .total-balance-amount-title .total-balance-amount h5 {
    font-size: 25px;
  }
}

.total-balance-amount-title .total-balance-amount .btn-refresh {
  padding: 0px;
  background: unset;
  border: unset;
}

.total-balance-amount-title .total-balance-amount .btn-refresh img {
  width: 25px;
  height: 25px;
}

@media (max-width: 1199px) {
  .total-balance-amount-title .total-balance-amount .btn-refresh img {
    width: 20px;
    height: 20px;
  }
}

.text-success {
  color: var(--text-success-color) !important;
  font-weight: 300 !important;
}

.text-warning {
  color: var(--text-warning-color) !important;
  font-weight: 300 !important;
}

.text-danger {
  color: var(--text-danger-color) !important;
  font-weight: 300 !important;
}

.text-lightgrey {
  color: var(--text-lightgrey-color) !important;
  font-weight: 300 !important;
}

.section-important-tips {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.section-important-tips .section-important-title h6 {
  color: var(--text-lightgreen-color);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.section-important-tips ol {
  padding-left: 15px;
  list-style-type: decimal;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.section-important-tips ol li {
  color: var(--text-lightgrey-color);
  font-size: 15px;
  padding-left: 20px;
}

@media (max-width: 1199px) {
  .section-important-tips ol li {
    font-size: 13px;
  }
}

.section-important-tips ol li span {
  color: var(--text-lightgreen-color);
}

.button-amount-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.button-amount-group .btn-amount {
  padding: 10px 0;
  border: unset;
  outline: unset;
  box-shadow: unset;
  text-align: center;
  transition: all 0.3s;
  background: #006857;
  color: var(--text-white-color);
  border-radius: 10px;
}

.accordion:not(.footer-accordion) {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.accordion:not(.footer-accordion) .accordion-item {
  background-color: var(--accordion-bg-color, #3b7038);
  clip-path: rect(0px 100% 100% 0px round var(--card-border-radius));
  box-shadow: unset;
  border: unset;
}

.accordion:not(.footer-accordion) .accordion-item .accordion-button {
  background-color: var(--accordion-button-bg-color, unset);
  color: var(--accordion-text-color, var(--text-lightgreen-color));
  clip-path: rect(0px 100% 100% 0px round var(--card-border-radius));
}

.accordion:not(.footer-accordion) .accordion-item .accordion-button:not(.collapsed) {
  box-shadow: unset;
}

.accordion:not(.footer-accordion) .accordion-item .accordion-button:hover,
.accordion:not(.footer-accordion) .accordion-item .accordion-button:focus {
  border: unset;
  box-shadow: unset;
  outline: unset;
}

.accordion:not(.footer-accordion) .accordion-item .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

@media (max-width: 767px) {
  .accordion:not(.footer-accordion) .accordion-item .accordion-button::after {
    width: 15px;
    height: 15px;
    background-size: cover;
  }
}

.accordion:not(.footer-accordion) .accordion-item .accordion-button.collapsed {
  background: var(--accordion-button-hover-bg-color, var(--background-darkgreen-color));
  color: var(--accordion-hover-text-color, var(--text-white-color));
}

.accordion:not(.footer-accordion) .accordion-item .accordion-body {
  color: #f2f1f1;
}

.accordion:not(.footer-accordion) .accordion-item.open .accordion-button {
  background: var(--accordion-button-hover-bg-color, var(--background-darkgreen-color));
  color: var(--accordion-hover-text-color, var(--text-white-color));
}

.accordion:not(.footer-accordion).accordion-icon-left .accordion-item {
  background: var(--background-darkgreen-color);
}

.accordion:not(.footer-accordion).accordion-icon-left .accordion-item .accordion-button {
  padding-left: 20px;
  padding-right: 20px;
  color: var(--text-white-color);
}

.accordion:not(.footer-accordion).accordion-icon-left .accordion-item .accordion-button::before {
  content: "";
  background-image: url("../img/global/accordion-up.png");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  margin-right: 20px;
}

@media (max-width: 1199px) {
  .accordion:not(.footer-accordion).accordion-icon-left .accordion-item .accordion-button::before {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background-size: 15px;
  }
}

.accordion:not(.footer-accordion).accordion-icon-left .accordion-item .accordion-button:after {
  display: none;
}

.accordion:not(.footer-accordion).accordion-icon-left .accordion-item .accordion-button.collapsed::before {
  background-image: url("../img/global/accordion-down.png");
  transform: rotate(180deg);
}

.accordion:not(.footer-accordion).accordion-icon-left .accordion-item .accordion-body {
  padding-left: 60px;
}

@media (max-width: 1199px) {
  .accordion:not(.footer-accordion).accordion-icon-left .accordion-item .accordion-body {
    padding-left: 45px;
  }
}

.accordion.footer-accordion {
  max-width: 350px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.accordion.footer-accordion .accordion-item {
  background: unset;
}

.accordion.footer-accordion .accordion-item .accordion-button {
  background: unset;
  color: var(--text-white-color);
  padding-left: 0px;
  padding-right: 0px;
  border-bottom: 0.4px solid var(--border-lightgrey-50-color) !important;
  border-radius: 0px;
}

.accordion.footer-accordion .accordion-item .accordion-button:not(.collapsed) {
  box-shadow: unset;
}

.accordion.footer-accordion .accordion-item .accordion-button:hover,
.accordion.footer-accordion .accordion-item .accordion-button:focus {
  border: unset;
  box-shadow: unset;
  outline: unset;
}

.accordion.footer-accordion .accordion-item .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

@media (max-width: 767px) {
  .accordion.footer-accordion .accordion-item .accordion-button::after {
    width: 15px;
    height: 15px;
    background-size: cover;
  }
}

.accordion.footer-accordion .accordion-item .accordion-button.collapsed {
  background: unset;
  color: var(--text-white-color);
}

.accordion.footer-accordion .accordion-item .accordion-body {
  padding: 15px;
}

.accordion-card-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.accordion-card-wrapper .accordion-card-header h6 {
  color: var(--text-white-color);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .accordion-card-wrapper .accordion-card-header h6 {
    font-size: 16px;
  }
}

.accordion-card-wrapper .accordion-card-body {
  font-size: 14px;
}

@media (max-width: 767px) {
  .accordion-card-wrapper .accordion-card-body {
    font-size: 12px;
  }
}

#tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--background-darkgreen-color);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  max-height: var(--tabbar-height);
  height: 100%;
}

@media (min-width: 768px) {
  #tabbar {
    display: none;
  }
}

#tabbar .tabbar-item {
  flex: 1;
  text-decoration: none;
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
  text-align: center;
}

#tabbar .tabbar-item img {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  display: block;
}

#tabbar .tabbar-item span {
  font-size: 12px;
  color: #c0cdc9;
}

#home {
  padding-top: calc(var(--header-height) + 10px);
}

#home .swiper-top-wrapper {
  margin: 1rem 0;
}

#home .home-banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 35px;
}

#home .swiper-banner-wrapper {
  position: relative;
}

#home .swiper-banner-wrapper .swiper-banner {
  position: relative;
  z-index: 0;
}

#home .swiper-banner-wrapper .swiper-btn-rounded.swiper-btn-prev {
  left: 0px;
}

#home .swiper-banner-wrapper .swiper-btn-rounded.swiper-btn-next {
  left: 100%;
}

#home .swiper-promo-wrapper {
  position: relative;
}

#home .swiper-promo-wrapper .swiper-promo {
  position: relative;
  z-index: 0;
}

#home .swiper-promo-wrapper .swiper-btn-rounded {
  z-index: 1;
}

#home .swiper-promo-wrapper .swiper-btn-rounded.swiper-btn-prev {
  left: -5%;
}

@media (max-width: 767px) {
  #home .swiper-promo-wrapper .swiper-btn-rounded.swiper-btn-prev {
    left: 0px;
  }
}

#home .swiper-promo-wrapper .swiper-btn-rounded.swiper-btn-next {
  left: 105%;
}

@media (max-width: 767px) {
  #home .swiper-promo-wrapper .swiper-btn-rounded.swiper-btn-next {
    left: 100%;
  }
}

#home .announcement-wrapper {
  background-color: var(--background-secondary-color);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16) inset;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 7.5px 30px;
  border-radius: var(--border-radius-standard);
  margin: 15px 0px;
  gap: 20px;
  text-decoration: none;
}

@media (max-width: 767px) {
  #home .announcement-wrapper {
    padding: 7.5px 15px;
  }
}

#home .announcement-wrapper .announcement-icon {
  width: 20px;
}

#home .announcement-wrapper .announcement-text {
  margin-bottom: 0px;
  width: calc(100% - 20px);
  display: inline-block;
  overflow: hidden;
}

#home .announcement-wrapper .announcement-text span {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  display: inline-block;
  color: var(--text-white-color);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  animation-name: marquee;
  /* animation-duration: 15s; */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes marquee {
  0% {
    margin-left: 100%;
    transform: translateX(0%);
  }

  100% {
    margin-left: 0;
    transform: translateX(-100%);
  }
}

#home .game-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

@media (max-width: 767px) {
  #home .game-title {
    gap: 10px;
  }
}

#home .game-title h6 {
  color: var(--text-white-color);
  font-weight: 500;
  font-size: 17px;
}

@media (max-width: 767px) {
  #home .game-title h6 {
    font-size: 15px;
  }
}

#home .game-title img {
  max-width: 30px;
  width: 100%;
}

#home section {
  padding: 20px 0px;
}

@media (max-width: 767px) {
  #home section {
    padding: 0px;
  }
}

#home .promo-section {
  margin-bottom: 100px;
}

#home .promo-section .promo-item {
  display: flex;
  flex-flow: column nowrap;
}

/* #home .promo-section .promo-item .promo-img {
  height: 230px;
} */

#home .promo-section .promo-item .promo-img img {
  height: 100%;
  width: 100%;
}

#home .promo-section .promo-item .promo-desc-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
  padding: 25px 15px;
  background: var(--background-darkgreen-color);
}

#home .promo-section .promo-item .promo-desc-wrapper h6 {
  color: var(--text-white-color);
  font-weight: 600;
  font-size: 22px;
}

#home .promo-section .promo-item .promo-desc-wrapper span {
  color: var(--text-lightgreen-color);
}

#home .promo-section .promo-item .promo-desc-wrapper p {
  color: var(--text-lightgrey-color);
  font-size: 14px;
}

@media (max-width: 1199px) {
  #home .promo-section .promo-item .promo-desc-wrapper p {
    font-size: 12px;
  }
}

#home .promo-section .promo-item .promo-desc-wrapper .promo-actions {
  display: flex;
  -moz-column-gap: 10px;
  column-gap: 10px;
  row-gap: 5px;
  flex-flow: row wrap;
}

#home .promo-section .promo-item .promo-desc-wrapper .promo-actions button,
#home .promo-section .promo-item .promo-desc-wrapper .promo-actions a {
  flex: 0 0 calc(50% - 10px);
}

#home .win-section .btn-wrapper {
  margin: 20px auto;
  max-width: 150px;
  margin-bottom: 80px;
}

#home .win-section table span {
  color: var(--text-lightgreen-color);
  font-weight: 500;
}

#home .win-section .first-td {
  padding-left: 40px;
}

@media (max-width: 767px) {
  #home .win-section .first-td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

#home .win-section .provider-img {
  max-width: 30px;
  margin-left: auto;
  margin-right: 40px;
}

@media (max-width: 767px) {
  #home .win-section .provider-img {
    margin-right: 0px;
    width: 30px;
  }
}

#home .win-section .provider-img img {
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

#home .match-container {
  text-align: center;
  position: relative;
  margin: inherit;
  padding-top: 15px;
}

#home .background-circle {
  width: 85px;
  height: 85px;
  background-color: rgba(83, 122, 122, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 18px;
  left: 3px;
}

#home .blur-circle {
  width: 70px;
  height: 70px;
  background-color: rgba(83, 122, 122, 0.4);
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  margin: 10px 10px;
}

#home .blur-circle img {
  width: 70%;
  height: auto;
  border-radius: 50%;
  margin: 13px -24px;
  position: absolute;
}

#home .btn-play {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-white-color);
  background: linear-gradient(to right, #00c08b, #00bdbf);
  border: unset;
  line-height: 18px;
  padding: 7px 12px;
  border-radius: 8px;
  margin-top: 18px;
}

#home .btn-vs {
  font-size: 11px;
  height: 25px;
  font-weight: 400;
  color: var(--text-white-color);
  background: #0a282d;
  border: unset;
  line-height: 18px;
  border-radius: 20px;
  width: 135px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 19%;
}

#home .square-box {
  margin: 20px 10px;
  width: 95%;
  height: 135px;
  color: var(--text-white-color);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/home/biggest-background.png");
  background-repeat: no-repeat;
}

#home .square-box img {
  max-width: 200px;
  height: auto;
  margin-left: -20px;
}

#home .square-box .content {
  margin-right: 30px;
}

#home .square-box .content p:nth-child(1) {
  color: #ffc32e;
  font-size: 12px;
  margin-bottom: 5px;
}

#home .square-box .content p:nth-child(2) {
  color: var(--text-white-color);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
}

#home .btn-auth-group .btn-info {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-white-color);
  background: linear-gradient(to right, #00c08b, #00bdbf);
  border: unset;
  line-height: 18px;
  padding: 8px 18px;
  border-radius: 8px;
}

#home .download-app {
  position: relative;
  display: inline-block;
}

#home .download-app img {
  width: 100%;
}

#home .text-overlay {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #25b5a1;
  font-size: 19px;
  font-weight: 500;
}

#home .text-overlay .extra-bonus {
  color: var(--text-white-color);
}

#home .text-overlay .amount {
  background: linear-gradient(to bottom, #ffc32e, #ff9100);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* Set text color to transparent */
  display: inline-block;
}

#home .text-overlay .small-title {
  color: var(--text-white-color);
  font-size: 11px;
  font-weight: 200;
}

#home .text-overlay .download-mobile {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}

#home .text-overlay .download-mobile .box {
  width: 100%;
  height: 35px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-white-color);
  font-size: 14px;
  font-weight: 200;
  margin-left: 10px;
  padding: 10px 17px;
}

#home .text-overlay .download-mobile .box img {
  width: 35px;
  padding-right: 10px;
  padding-left: 5px;
}

#home .guide-line {
  top: 80%;
  width: 95%;
  height: 117px;
  background-color: rgba(19, 123, 127, 0.2);
  border: 1ox solid var(--border-theme-1-color);
  border-radius: 5px;
  margin: 10px 10px;
  padding: 10px 10px;
  position: absolute;
}

#home .guide-line .guide-text {
  color: #1fb3ba;
  font-size: 15px;
  text-align: left;
  font-weight: 500;
}

#home .guide-line .step {
  top: 10px;
  color: var(--text-white-color);
  font-size: 12px;
  font-weight: 200;
  padding-top: 4px;
}

#home .btn-providers {
  font-size: 11px;
  height: 34px;
  font-weight: 400;
  color: var(--text-white-color);
  background-color: transparent;
  border: unset;
  line-height: 18px;
  border-radius: 20px;
  width: 105px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#home .btn-providers img {
  width: 20px;
  padding-right: 5px;
}

#home .btn-providers.active {
  background: linear-gradient(to right, #00c08b, #00bdbf);
}

#home .banner-providers {
  font-size: 11px;
  height: 50px;
  font-weight: 400;
  color: var(--text-white-color);
  background-color: rgba(50, 85, 101, 0.2);
  border: unset;
  line-height: 18px;
  border-radius: 5px;
  width: 103px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#home .banner-providers img {
  width: 100%;
  padding-right: 5px;
}

#profile {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 767px) {
  #profile {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#profile .input-group .input-group-text {
  background: #2f6265;
  border: unset;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

#profile .input-group .input-group-text .icon-img-wrapper {
  max-width: 20px;
}

#profile .input-group .form-control {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-left: 0px;
}

#profile .input-password {
  position: relative;
  width: 100%;
}

#profile .input-password .btn-password {
  position: absolute;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px;
  right: 20px;
  border: 0px;
  max-width: 25px;
}

#homeprofile {
  background-image: url("../img/profile/profile-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  min-height: 120vh;
}

#homeprofile h1 {
  font-size: 20px;
  margin-bottom: 0;
}

#homeprofile p {
  font-size: 13px;
  font-weight: 300;
  color: #b6d6ca;
  margin-bottom: 10px;
}

#homeprofile span {
  color: var(--text-white-color);
  text-align: end;
  display: block;
}

#homeprofile hr {
  margin: 10px 0;
}

#homeprofile .profile-wrapper {
  padding: 10px;
  color: var(--text-white-color);
}

#homeprofile .profile-wrapper .top-name img {
  width: 15px;
  margin-left: 10px;
}

#homeprofile .profile-wrapper .top-reload {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#homeprofile .profile-wrapper .top-reload span {
  color: var(--text-secondary-color);
  font-size: 12px;
  font-weight: 200;
}

#homeprofile .profile-wrapper .top-reload .btn-pending {
  font-size: 11px;
  color: var(--text-white-color);
  background: #59834c;
  border: 1px solid var(--text-secondary-color);
  padding: 2px;
  border-radius: 7px;
  justify-content: center;
  display: block;
}

#homeprofile .profile-wrapper .top-reload .btn-pending img {
  width: 18%;
  margin: 3px;
  text-align: center;
}

#homeprofile .progress-container {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

#homeprofile progress {
  width: 100%;
  height: 4px;
  border-radius: 10px;
}

#homeprofile progress::-webkit-progress-bar {
  background-color: rgba(83, 122, 122, 0.5);
  border-radius: 10px;
}

#homeprofile progress::-webkit-progress-value {
  background-color: orange;
  border-radius: 8px;
}

#homeprofile progress::-moz-progress-bar {
  background-color: orange;
  border-radius: 8px;
}

#homeprofile .profile_container {
  background-color: rgba(18, 105, 100, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  margin: 13px 0;
  display: flex;
  align-items: center;
  position: relative;
  padding: 20px;
}

#homeprofile .profile_container a {
  text-decoration: none;
  color: var(--text-white-color);
  font-size: 13px;
  font-weight: 300;
}

#homeprofile .btn-refresh {
  font-size: 11px;
  color: var(--text-white-color);
  background: #59834c;
  border: none;
  padding: 2px;
  border-radius: 7px;
  justify-content: center;
  display: block;
  margin: 3px;
}

#homeprofile .btn-refresh img {
  width: 26px;
  padding: 4px;
}

#homeprofile .btn-deposit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-white-color);
  background: linear-gradient(to right, #00c08b, #00bdbf);
  border: unset;
  line-height: 30px;
  padding: 9px 15px;
  border-radius: 8px;
  width: 95%;
  margin: 10px 0;
  display: flex;
  justify-content: center;
}

#homeprofile .btn-deposit img {
  width: 25px;
  margin-right: 20px;
}

#homeprofile .btn-withdrawal {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-white-color);
  background: linear-gradient(to right, #ffc32e, #ff9100);
  border: unset;
  line-height: 30px;
  padding: 9px 7px;
  border-radius: 8px;
  width: 95%;
  margin: 10px 0;
}

#homeprofile .btn-withdrawal img {
  width: 25px;
  margin-right: 10px;
}

#homeprofile .profile-icon {
  width: 7%;
}

#homeprofile .btn-verify1 {
  background-color: #d1a02a;
  border: unset;
  padding: 9px 7px;
  border-radius: 8px;
  padding: 10px;
}

#homeprofile .btn-verify1 img {
  width: 25px;
}

#homeprofile .btn-verify2 {
  background-color: #147271;
  border: unset;
  padding: 9px 7px;
  border-radius: 8px;
  padding: 10px;
}

#homeprofile .btn-verify2 img {
  width: 25px;
}

#homeprofile .container-btn {
  width: 100%;
  padding: 10px;
}

#homeprofile .container-btn .btn-profile {
  background-color: #18393c;
  border: unset;
  padding: 9px 7px;
  border-radius: 8px;
  padding: 26px 13px;
  width: 100%;
}

#homeprofile .container-btn .btn-profile img {
  width: 40px;
}

#homeprofile .container-btn .btn-profile p {
  color: var(--text-white-color);
  font-size: 11px;
}

#homeprofile .rotatingImage.rotate-360 {
  transform: rotate(360deg);
  transition: transform 0.5s ease-in-out;
}

#bank {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 1199px) {
  #bank {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#deposit {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 1199px) {
  #deposit {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#notification .btn-read {
  font-size: 12px;
  color: var(--text-white-color);
  background: unset;
  border: 1px solid var(--border-white-1-color);
  padding: 7px 17px;
  border-radius: 10px;
  align-self: flex-end;
}

#notification .notification-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 200;
  background: #104a4e;
  border-radius: 1rem;
  gap: 20px;
  margin-top: 20px;
}

#notification .notification-wrapper .profile_container {
  background-color: #0e3437;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

#notification .notification-wrapper .profile_container h1 {
  font-size: 1rem;
  margin: 0.5rem 0;
  color: var(--text-white-color);
}

#notification .notification-wrapper .profile_container .time {
  display: inline-block;
  color: #c4c4c4;
  padding: 0.5rem;
}

#notification .notification-wrapper .profile_container .time .datetime {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#notification .notification-wrapper .profile_container .time .datetime img {
  width: 16px;
  height: auto;
}

#notification .notification-wrapper .profile_container .time .datetime span {
  font-size: 0.875rem;
}

#notification .notification-wrapper .profile_container .time p {
  margin: 0;
  font-size: 0.875rem;
}

#notification .notification-wrapper .profile_container.active {
  background-color: #106560;
}

#notification .notification-wrapper .profile_container.active h1 {
  display: inline-block;
  position: relative;
  color: #31e0e2;
  font-size: 1rem;
}

#notification .notification-wrapper .profile_container.active h1:before {
  content: "•";
  color: var(--text-secondary-color);
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-150%, -50%);
  margin-right: 5px;
  /* Adjust as needed */
}

#history {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 1199px) {
  #history {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#history #rakeback-table {
  width: 2100px !important;
}

#history .tabs-history {
  display: flex;
  flex-direction: row;
  width: 100%;
  background: #2f6265;
  border-radius: 10px;
  margin-top: 30px;
}

#history .tabs-history .btn-tab {
  flex: 1;
}

#history .tabs-content .tab-content {
  display: none;
}

#history .tabs-content .tab-content.show {
  display: block;
}

#history .mt-40 {
  margin-top: 50px;
}

#history label {
  width: 200px;
}

#history .form-filter {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 30px;
}

#history .days-selection-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 9;
}

#history .days-selection-wrapper .days-button {
  padding: 12px;
  max-width: 120px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #2f6265;
  background: #2f6265;
  color: var(--text-white-color);
  font-size: 14px;
}

#history .days-selection-wrapper .days-button.active {
  background: #00beb8;
}

#history .date-range-input {
  flex: 9;
}

#withdrawal {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 1199px) {
  #withdrawal {
    padding-top: calc(var(--header-height) + 20px);
  }
}

@media (max-width: 767px) {
  #withdrawal {
    padding-bottom: 50px;
  }
}

#referral {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 1199px) {
  #referral {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#referral input {
  text-align: center;
}

#referral .referral-commission-rewards {
  background: url("../img/referral/available-commission-rewards/banner.png") no-repeat center center;
  padding: 30px 40px;
  border-radius: var(--border-radius-standard);
  max-height: 400px;
  position: relative;
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards {
    padding: 20px;
    max-height: 300px;
    background-position: center 20%;
    overflow: hidden;
  }
}

#referral .referral-commission-rewards .referral-commission-rewards-pattern {
  position: absolute;
  bottom: 0%;
  right: 8%;
  max-width: 460px;
  width: 100%;
  z-index: 1;
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards .referral-commission-rewards-pattern {
    right: -7%;
    max-width: 300px;
    z-index: 0;
  }
}

#referral .referral-commission-rewards .available-rewards {
  display: flex;
  flex-flow: column nowrap;
  gap: 60px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards .available-rewards {
    gap: 30px;
  }
}

#referral .referral-commission-rewards .available-rewards .available-rewards-header {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  align-items: flex-start;
}

#referral .referral-commission-rewards .available-rewards .available-rewards-header h6 {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-white-color);
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards .available-rewards .available-rewards-header h6 {
    font-size: 14px;
  }
}

#referral .referral-commission-rewards .available-rewards .available-rewards-header h5 {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-white-color);
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards .available-rewards .available-rewards-header h5 {
    font-size: 20px;
  }
}

#referral .table-mb-100 {
  margin-bottom: 100px !important;
}

#referral .shares-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
}

#referral .hr {
  color: var(--text-white-color);
}

#referral .share-with-friends {
  background: linear-gradient(to bottom, #025e4f, #02362d);
  border-radius: var(--card-border-radius);
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

@media (max-width: 767px) {
  #referral .share-with-friends {
    padding: 20px 10px;
  }
}

#referral .share-with-friends p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-white-color);
  text-align: center;
}

#referral .referral-list-wrapper {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  gap: 50px;
}

@media (max-width: 767px) {
  #referral .referral-list-wrapper {
    gap: 20px;
  }
}

#referral .referral-list .referral-list-header {
  margin-bottom: 10px;
}

#referral .referral-list .referral-list-header h6 {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-white-color);
}

@media (max-width: 767px) {
  #referral .referral-list .referral-list-header h6 {
    font-size: 14px;
  }
}

#referral .referral-list.pattern-1 .list-group {
  border-radius: unset;
  gap: 20px;
}

#referral .referral-list.pattern-1 .list-group .list-group-item {
  background: var(--background-white-color);
  border-radius: var(--border-radius-small);
  font-size: 15px;
  color: #022620;
  padding: 13px 20px;
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-1 .list-group .list-group-item {
    padding: 10px 15px;
    font-size: 13px;
  }
}

#referral .referral-list.pattern-1 .list-group .list-group-item span {
  font-weight: 500 !important;
}

#referral .referral-list.pattern-2 .list-group {
  border-radius: unset;
  gap: 20px;
}

#referral .referral-list.pattern-2 .list-group .list-group-item {
  background: #c5f6de;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px;
  padding-right: 30px;
  border-radius: 50px;
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item {
    padding: 10px 15px;
  }
}

#referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 15px;
  --member-avatar-size: 70px;
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper {
    --member-avatar-size: 40px;
  }
}

#referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper .member-avatar {
  max-width: var(--member-avatar-size);
  width: 100%;
  height: var(--member-avatar-size);
  overflow: hidden;
  border-radius: 50%;
}

#referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper .member-info h6 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-darkgreen-color);
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper .member-info h6 {
    font-size: 14px;
  }
}

#referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper .member-info p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-darkgreen-color);
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper .member-info p {
    font-size: 12px;
  }
}

#referral .referral-list.pattern-2 .list-group .list-group-item .member-prize h6 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lightgreen-color);
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item .member-prize h6 {
    font-size: 13px;
  }
}

#referral .share-with-friends h1 {
  background: linear-gradient(to bottom, #E1F7BD, #7EC519);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 767px) {
  #referral .share-with-friends h1 {
    font-size: 24px;
  }
}

#referral .share-with-friends .btn-referral-group {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
  margin-top: 5px;
}

@media (max-width: 767px) {
  #referral .share-with-friends .btn-referral-group {
    max-width: 100%;
  }
}

#referral .share-with-friends button {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

#referral .share-with-friends .img-icon {
  max-width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 767px) {
  #referral .share-with-friends .img-icon {
    max-width: 15px;
    height: 15px;
  }
}

#referral .social-media-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  text-align: center;
  margin-top: 40px;
}

#referral .social-media-wrapper .social-media h6 {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-white-color);
  text-align: center;
}

#referral .social-media-wrapper .social-media-shares {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#referral .social-media-wrapper .social-media-shares .btn-share {
  background: unset;
  border: unset;
  outline: unset;
  box-shadow: unset;
  flex: 1;
}

@media (max-width: 767px) {
  #referral .social-media-wrapper .social-media-shares .btn-share {
    width: 43px;
    height: 43px;
    flex: unset;
  }
}

.popup-checkin #calendar {
  color: var(--text-white-color);
  position: relative;
}

.popup-checkin #calendar .fc-widget-content .fc-row {
  min-height: 5em;
}

.popup-checkin #calendar .fc-today .date-content-bottom,
.popup-checkin #calendar .fc-future .date-content-bottom {
  padding: 12px;
}

.popup-checkin #calendar .fc-day-top {
  display: none;
}

.popup-checkin #calendar .fc-content-skeleton {
  display: none;
}

.popup-checkin #calendar .fc-day-number2 {
  text-align: center;
  padding: 5px;
  font-size: 13px;
  font-weight: 500;
}

.popup-checkin #calendar .date-content-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #17393B;
  padding: 10px;
  border-radius: 10px;
}

.popup-checkin #calendar .date-content-bottom img {
  width: 30px;
}

.popup-checkin #calendar .fc-today {
  background: transparent;
}

.popup-checkin .modal-footer {
  border-top: none;
}

.popup-checkin .fc-unthemed .fc-disabled-day {
  background: transparent !important;
}

.popup-checkin .fc-unthemed th {
  border-color: transparent !important;
}

.popup-checkin .fc-unthemed td {
  border-color: transparent !important;
  padding: 3px;
  font-size: 15px;
}

.popup-checkin .fc-toolbar.fc-header-toolbar {
  display: none !important;
}

.popup-checkin .modal-header {
  background: linear-gradient(to bottom, #33C08D, #00bdbf);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.popup-checkin .modal-body {
  padding-top: 0 !important;
}

.popup-checkin .modal-upper {
  border: 2px solid #08e0e2 !important;
  box-shadow: 0 0 10px #08e0e2 !important;
  background-color: #052225;
  border-radius: 15px;
}

.popup-checkin .modal-content {
  padding: 15px;
  position: relative;
}

.popup-checkin .modal-content #present-icon {
  position: absolute;
  top: -25px;
  left: -30px !important;
  left: 0;
  width: 150px;
}

.popup-checkin .fc-day-header {
  color: #888;
  text-transform: uppercase;
  font-weight: 500;
}

.popup-checkin .fc-day-header span {
  color: #888;
  text-transform: uppercase;
  font-weight: 500;
}

.popup-checkin #calendar-description {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  color: var(--text-white-color);
  width: 100%;
}

.popup-checkin #calendar-description .view-title {
  font-weight: 700;
  font-size: 23px;
}

.popup-checkin #calendar-description .view-checkins {
  font-size: 13px;
}

.popup-checkin .modal-footer {
  align-items: center;
  justify-content: center;
}

.popup-checkin .modal-inner-bottom .top {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  background: linear-gradient(to bottom, #33C08D, #00bdbf);
  border-radius: 15px;
}

.popup-checkin .modal-inner-bottom .top button {
  color: var(--text-white-color);
  padding: 10px 65px;
  font-weight: 500;
}

.popup-checkin .modal-inner-bottom .top button:focus {
  box-shadow: unset !important;
}

.popup-checkin .modal-inner-bottom .bottom {
  display: flex;
  justify-content: center;
}

.popup-checkin .modal-inner-bottom .bottom button {
  color: var(--text-white-color);
}

.popup-checkin .modal-inner-bottom .bottom button:focus {
  box-shadow: unset !important;
}

.popup-checkin .bottom-calendar {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 20px;
}

.popup-checkin .bottom-calendar span {
  color: var(--text-white-color);
  display: flex;
  align-items: center;
}

.popup-checkin .bottom-calendar span img {
  margin-right: 10px;
}

.popup-checkin .bottom-calendar .bottom-first {
  font-size: 13px;
}

.popup-checkin .bottom-calendar .bottom-first img {
  width: 25px;
}

.popup-checkin .bottom-calendar .bottom-sec {
  font-size: 13px;
  margin-left: 10px;
}

#vip {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
  --swiper-vip-item-width: 500px;
}

@media (max-width: 1199px) {
  #vip {
    --swiper-vip-item-width: 300px;
  }
}

@media (max-width: 767px) {
  #vip {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#vip .vip-personal-info {
  background: var(--background-darkgreen-color);
  border-radius: var(--border-radius-standard);
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  --progress-bg-color: #26675c;
  --progress-height: 15px;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info {
    gap: 20px;
    flex-flow: column nowrap;
    padding: 10px;
  }
}

#vip .vip-personal-info .btn-small {
  padding: 6px 20px !important;
}

#vip .vip-personal-info .progress {
  border-radius: var(--border-radius-standard);
}

#vip .vip-personal-info .progress .progress-bar {
  border-radius: var(--border-radius-standard);
}

#vip .vip-personal-info .vip-image {
  flex: 3;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-image {
    margin-top: -20px;
  }
}

#vip .vip-personal-info .vip-image img {
  margin-left: 50px;
  transform: scale(1.2);
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-image img {
    margin-left: 0px;
    transform: scale(1);
  }
}

#vip .vip-personal-info .vip-info-wrapper {
  flex: 9;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-info-wrapper {
    margin-top: -20px;
  }
}

#vip .vip-personal-info .vip-info-wrapper .vip-info {
  height: 180px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
}

#vip .vip-personal-info .vip-info-wrapper .vip-top {
  display: flex;
  flex-flow: row nowrap;
  gap: 50px;
  align-items: flex-start;
}

#vip .vip-personal-info .vip-info-wrapper .vip-top .vip-top-left {
  display: flex;
  flex-flow: column nowrap;
  gap: 2px;
  margin-top: -10px;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-info-wrapper .vip-top .vip-top-left {
    margin-top: 0px;
  }
}

#vip .vip-personal-info .vip-info-wrapper .vip-top .vip-top-left .info-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lightgreen-color);
  margin-bottom: 0px;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-info-wrapper .vip-top .vip-top-left .info-name {
    font-size: 14px;
  }
}

#vip .vip-personal-info .vip-info-wrapper .vip-top .vip-top-left .info-username {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-white-color);
  margin-bottom: 0px;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-info-wrapper .vip-top .vip-top-left .info-username {
    font-size: 20px;
  }
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-info-wrapper .vip-top .vip-top-right {
    margin-left: auto;
  }
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info {
    flex-flow: column nowrap;
    align-items: flex-start;
  }
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info .info-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-white-color);
  margin-bottom: 0px;
}

@media (max-width: 1199px) {
  #vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info .info-desc {
    font-size: 12px;
  }
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info .info-desc span {
  color: var(--text-secondary-color);
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info .info-amount {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-white-color);
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info .info-amount .info-current-amount {
  color: var(--text-lightgreen-color);
  margin-bottom: 0px;
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info .info-amount .info-minimum-deposit {
  margin-bottom: 0px;
}

#vip .vip-personal-info .vip-info-wrapper .vip-bottom .vip-bottom-amount-info .by-invited p {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-white-color);
}

#vip .swiper-vip-section {
  overflow: hidden;
  margin: 40px 0px;
}

@media (max-width: 1199px) {
  #vip .swiper-vip-section {
    margin: 20px 0px;
  }
}

#vip .section-title {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
  margin-top: -30px;
  top: 30px;
  position: relative;
}

@media (max-width: 1199px) {
  #vip .section-title {
    margin-top: -20px;
    top: 20px;
    margin-bottom: 10px;
  }
}

#vip .section-title img {
  max-width: 30px;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 1199px) {
  #vip .section-title img {
    max-width: 20px;
    height: 20px;
  }
}

#vip .section-title h2 {
  font-weight: 700;
  font-size: 20px;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  #vip .section-title h2 {
    font-size: 16px;
  }
}

#vip .swiper {
  overflow: unset;
  clip-path: rect(0 200% 100% 0);
}

#vip .swiper-slide {
  max-width: var(--swiper-vip-item-width);
  width: unset !important;
}

#vip .swiper-slide .swiper-slide-vip-item {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: var(--border-radius-standard);
  width: var(--swiper-vip-item-width);
  aspect-ratio: auto 19/9;
  cursor: pointer;
  display: block;
  position: relative;
  padding-top: 80px;
  padding-left: 40px;
  padding-right: 40px;
  --progress-bar-bg-color: #ffffff;
  --progress-height: 5px;
  filter: grayscale(1);
}

@media (max-width: 1199px) {
  #vip .swiper-slide .swiper-slide-vip-item {
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

#vip .swiper-slide .swiper-slide-vip-item.active {
  filter: grayscale(0);
}

#vip .swiper-slide .swiper-slide-vip-item.active .swiper-vip-item .swiper-vip-item-info h3::after {
  display: none;
}

#vip .swiper-slide .swiper-slide-vip-item.bronze {
  --progress-bg-color: #6a3e1d;
}

#vip .swiper-slide .swiper-slide-vip-item.silver {
  --progress-bg-color: #436b87;
}

#vip .swiper-slide .swiper-slide-vip-item.gold {
  --progress-bg-color: #8f6c30;
}

#vip .swiper-slide .swiper-slide-vip-item.platinum {
  --progress-bg-color: #5e3d8d;
}

#vip .swiper-slide .swiper-slide-vip-item.diamond {
  --progress-bg-color: #7d5a37;
}

#vip .swiper-slide .swiper-slide-vip-item.diamond-king {
  --progress-bg-color: #8f4239;
}

#vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
  justify-content: space-around;
}

@media (max-width: 1199px) {
  #vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item {
    gap: 20px;
  }
}

#vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info {
  display: flex;
  align-items: flex-start;
  flex-flow: column nowrap;
  gap: 5px;
}

@media (max-width: 1199px) {
  #vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info {
    gap: 0px;
  }
}

#vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info h3 {
  font-size: 25px;
  font-weight: 500;
  color: var(--text-white-color);
  position: relative;
}

@media (max-width: 1199px) {
  #vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info h3 {
    font-size: 18px;
  }
}

#vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info h3::after {
  content: "";
  height: 20px;
  width: 20px;
  background: url("../img/vip/unlock.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 105%;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 1199px) {
  #vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info h3::after {
    height: 15px;
    width: 15px;
  }
}

#vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info p {
  font-size: 14px;
  color: var(--progress-bg-color);
  font-weight: 500;
}

@media (max-width: 1199px) {
  #vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-item-info p {
    font-size: 12px;
  }
}

#vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-progress {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
}

#vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-progress p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  #vip .swiper-slide .swiper-slide-vip-item .swiper-vip-item .swiper-vip-progress p {
    font-size: 12px;
  }
}

#vip .card-groups.bronze {
  --card-background-color: linear-gradient(to bottom, #d58d4c, #a06531);
  --card-border-color: #6a3e1d;
  --card-header-color: #4d2b11;
}

#vip .card-groups.silver {
  --card-background-color: linear-gradient(to bottom, #c5d6ec, #8197b2);
  --card-border-color: #436b87;
  --card-header-color: #294a61;
}

#vip .card-groups.gold {
  --card-background-color: linear-gradient(to bottom, #efe499, #efb839);
  --card-border-color: #8f6c30;
  --card-header-color: #6d501e;
}

#vip .card-groups.platinum {
  --card-background-color: linear-gradient(to bottom, #bbcdf8, #8b56e2);
  --card-border-color: #5e3d8d;
  --card-header-color: #42266a;
}

#vip .card-groups.diamond {
  --card-background-color: linear-gradient(to bottom, #ece0c5, #fe9b38);
  --card-border-color: #7d5a37;
  --card-header-color: #5e3d1b;
}

#vip .card-groups.diamond-king {
  --card-background-color: linear-gradient(to bottom, #fcc2b9, #ef7739);
  --card-border-color: #8f4239;
  --card-header-color: #742d25;
}

#vip .card-groups .card {
  border: 1px solid var(--card-border-color);
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

#vip .card-groups .card-header {
  background: var(--card-background-color);
  padding: 0.5rem 1rem;
  border-bottom: unset;
}

#vip .card-groups .card-header h6 {
  color: var(--card-header-color);
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  #vip .card-groups .card-header h6 {
    font-size: 13px;
  }
}

#vip .card-groups .card-body {
  background: var(--background-darkgreen-color);
}

#vip .card-groups .card-body .gift-item {
  display: inline-flex;
  flex-flow: column nowrap;
  max-width: 200px;
}

#vip .card-groups .card-body .gift-item img {
  max-width: 130px;
  height: auto;
}

@media (max-width: 1199px) {
  #vip .card-groups .card-body .gift-item img {
    max-width: 100px;
  }
}

#vip .card-groups .card-body .gift-item p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  #vip .card-groups .card-body .gift-item p {
    font-size: 13px;
  }
}

#vip .card-groups .card-body .label-p p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-white-color);
  margin-bottom: 0px;
}

@media (max-width: 1199px) {
  #vip .card-groups .card-body .label-p p {
    font-size: 13px;
  }
}

#vip .card-groups .card-body .value-p p {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-white-color);
  margin-bottom: 0px;
}

@media (max-width: 1199px) {
  #vip .card-groups .card-body .value-p p {
    font-size: 13px;
  }
}

#tnc {
  padding-top: calc(var(--header-height) + 10px);
}

#tnc h1 {
  color: aqua;
  font-size: 20px;
  margin-bottom: 1.5rem;
}

#tnc h2 {
  color: var(--text-white-color);
  font-size: 16px;
  margin: 1rem 0;
}

#tnc p {
  color: #c4c4c4;
  font-size: 14px;
  font-weight: 300;
}

#tnc ul,
#tnc li {
  color: #c4c4c4;
  font-size: 14px;
  font-weight: 300;
}

#tnc ul {
  padding-left: 1rem;
}

#tnc .section-break {
  margin-top: 2rem;
}

#promotion {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 767px) {
  #promotion {
    padding-top: calc(var(--header-height) + 10px);
    padding-bottom: 50px;
  }
}

#promotion .swiper-promotion-tabs .swiper-slide {
  max-width: var(--swiper-category-item-width);
  width: unset !important;
  display: flex;
}

#promotion .swiper-promotion-tabs .swiper-slide .btn-tab {
  background: #0d5140;
  border-radius: 8px;
  text-decoration: none;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 11px 23px;
  gap: 13px;
  color: #9db8b2;
  transition: all ease 0.3s;
  max-width: var(--swiper-category-item-width);
  font-weight: 600;
  font-size: 16px;
  border: unset;
  outline: unset;
}

@media (max-width: 991px) {
  #promotion .swiper-promotion-tabs .swiper-slide .btn-tab {
    padding: 11px 15px;
    font-size: 14px;
  }
}

#promotion .swiper-promotion-tabs .swiper-slide .btn-tab.active,
#promotion .swiper-promotion-tabs .swiper-slide .btn-tab:hover {
  color: var(--text-white-color);
  background: #2a745b;
}

#promotion .promotion-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5rem 1rem;
}

@media (max-width: 1199px) {
  #promotion .promotion-content {
    grid-template-columns: repeat(1, 1fr);
  }
}

#promotion .promotion-content .promotion-item {
  background: var(--background-darkgreen-color);
  border-radius: var(--border-radius-standard);
  text-decoration: none;
  overflow: hidden;
}

#promotion .promotion-content .promotion-item .promotion-detail {
  display: flex;
  flex-flow: column nowrap;
  padding: 2rem;
  gap: 20px;
}

@media (max-width: 1199px) {
  #promotion .promotion-content .promotion-item .promotion-detail {
    padding: 1.5rem;
    gap: 10px;
  }
}

#promotion .promotion-content .promotion-item .promotion-detail h6 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  #promotion .promotion-content .promotion-item .promotion-detail h6 {
    font-size: 16px;
  }
}

#promotion .promotion-content .promotion-item .promotion-detail p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-lightgrey-color);
}

@media (max-width: 1199px) {
  #promotion .promotion-content .promotion-item .promotion-detail p {
    font-size: 12px;
  }
}

/* #promotion .promotion-content .promotion-item .promotion-banner {
  height: 213px;
} */

#promotion .promotion-content .promotion-item .promotion-banner img {
  width: 100%;
  height: 100%;
}

#promotion .tabs-content .tab-content.show {
  display: block;
}

#contact .contact-items {
  background: #2d6468;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

#contact .contact-items .contact-img {
  max-width: 110px;
}

#contact .contact-items .contact-center {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 4;
}

#contact .contact-items .contact-center h6 {
  font-size: 20px;
  color: #08e0e2;
}

#contact .contact-items .contact-center p {
  font-size: 14px;
  color: var(--text-white-color);
}

#mission-daily {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 1199px) {
  #mission-daily {
    padding-top: calc(var(--header-height) + 20px);
  }
}

@media (max-width: 767px) {
  #mission-daily {
    padding-bottom: 50px;
  }
}

#mission-daily .mission-title h6 {
  color: var(--text-lightgreen-color);
  font-size: 20px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  #mission-daily .mission-title h6 {
    font-size: 18px;
  }
}

#mission-daily .card-daily-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper {
    gap: 10px;
  }
}

#mission-daily .card-daily-wrapper .mission-item {
  background: var(--background-darkgreen-color);
  border-radius: var(--border-radius-standard);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 200px;
  padding: 20px;
  position: relative;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item {
    gap: 40px;
    padding: 10px 15px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left {
  flex: 4;
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-left {
    gap: 10px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-title {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-title {
    gap: 3px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-title h6 {
  font-size: 18px;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-title h6 {
    font-size: 14px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-title p {
  font-size: 14px;
  color: var(--text-lightgrey-color);
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-title p {
    font-size: 11px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress {
  display: flex;
  flex-flow: column nowrap;
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-horizontal-wrap {
  display: flex;
  gap: 10px;
  flex-flow: row nowrap;
  align-items: center;
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-horizontal-wrap .progress {
  --progress-bg-color: #006857;
  --progress-bar-bg-color: #afde6a;
  flex: 0 0 80%;
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-horizontal-wrap .progress-status {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  flex: 1;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-horizontal-wrap .progress-status {
    gap: 5px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-horizontal-wrap .progress-status span {
  font-size: 14px;
  color: var(--text-lightgrey-color);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-horizontal-wrap .progress-status span {
    font-size: 12px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-point-redemption span {
  font-size: 14px;
  color: var(--text-lightgreen-color);
  font-weight: 500;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-left .mission-item-progress .progress-point-redemption span {
    font-size: 12px;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-right {
  flex: 1;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-right {
    flex: 2;
  }
}

#mission-daily .card-daily-wrapper .mission-item .mission-item-right .claimed-img {
  position: absolute;
  right: 0px;
  bottom: 0px;
  max-width: 155px;
}

@media (max-width: 1199px) {
  #mission-daily .card-daily-wrapper .mission-item .mission-item-right .claimed-img {
    max-width: 120px;
  }
}

#mission-daily .progress-wrapper {
  display: inline-flex;
  flex-flow: column nowrap;
  gap: 20px;
  margin: 30px 0px;
  max-width: 300px;
  width: 100%;
}

#mission-daily .progress-wrapper .progress-bar-wrapper {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
}

#mission-daily .progress-wrapper .progress-bar-wrapper .progress-percent p,
#mission-daily .progress-wrapper .progress-bar-wrapper .progress-text p {
  margin: 0;
  color: var(--text-white-color);
  font-size: 15px;
  font-weight: 300;
}

#mission-daily .progress-wrapper .progress {
  max-width: 200px;
  width: 100%;
}

#mission-daily .progress-wrapper .progress-actions {
  max-width: 150px;
  width: 100%;
  margin: 0px auto;
}

#promotion_detail {
  padding-top: calc(var(--header-height) + 50px);
  position: relative;
  background: url(../img/global/bg.png);
}

#promotion_detail .mobile-sticky {
  position: sticky;
  bottom: var(--tabbar-height);
}

@media (max-width: 767px) {
  #promotion_detail {
    padding-top: calc(var(--header-height) + 20px);
  }
}

#promotion_detail .promotion-button-actions {
  background: var(--background-darkgreen-color);
  padding: 20px 0px;
}

#promotion_detail .promotion-content {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
  margin-bottom: 100px;
}

@media (max-width: 1199px) {
  #promotion_detail .promotion-content {
    gap: 20px;
  }
}

#promotion_detail .promotion-content .promotion-banner-rounded {
  border-radius: 20px;
  overflow: hidden;
  /* height: 431px; */
}

#promotion_detail .promotion-content .promotion-banner-rounded img {
  width: 100%;
  height: 100%;
}

.promotion_detail:not(.active),
.btn-promo-mobile:not(.active) {
  display: none;
}

@media (max-width: 1199px) {
  #promotion_detail .promotion-content .promotion-banner-rounded {
    border-radius: 10px;
  }
}

#promotion_detail .promotion-content h3 {
  color: var(--text-white-color);
  font-size: 24px;
}

@media (max-width: 1199px) {
  #promotion_detail .promotion-content h3 {
    font-size: 20px;
  }
}

#promotion_detail .promotion-content ol {
  padding-left: 20px;
  margin: 0px;
}

#promotion_detail .promotion-content ol li>ol li {
  padding-left: 0px;
}

#promotion_detail .promotion-content ol>li {
  padding-left: 30px;
}

#promotion_detail .promotion-content li {
  color: var(--text-white-color);
  font-weight: 300;
  font-size: 16px;
}

@media (max-width: 1199px) {
  #promotion_detail .promotion-content li {
    font-size: 14px;
  }
}

#promotion_detail .promotion-content li::marker {
  color: var(--text-white-color);
  font-size: 16px;
  padding-right: 10px;
}

#promotion_detail .promotion-content ol li:has(ol) ol {
  margin-bottom: 10px;
}

#games-menu {
  padding-top: 60px;
  padding-bottom: 30px;
}

@media (max-width: 768px) {
  #games-menu {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

#lobby_slots {
  padding-top: 60px;
  padding-bottom: 30px;
}

@media (max-width: 768px) {
  #lobby_slots {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.slots_menu_wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#games {
  /* padding-top: calc(var(--header-height) + 50px); */
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 767px) {
  #games {
    /* padding-top: calc(var(--header-height) + 20px); */
    padding-top: calc(var(--header-height) + 48px);
    padding-bottom: 50px;
  }
}

#games-menu .games-wrapper,
#lobby_slots .games-wrapper,
#games .games-wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 12px;
  grid-gap: 50px 14px;
}

#games .games-wrapper.casino-lobby {
  grid-gap: 12px;
}

@media (max-width: 1600px) {

  #games-menu .games-wrapper,
  #lobby_slots .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1199px) {

  #games-menu .games-wrapper,
  #lobby_slots .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 992px) {

  #games-menu .games-wrapper,
  #lobby_slots .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {

  #games-menu .games-wrapper,
  #lobby_slots .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

#games .games-banner-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
}

@media (max-width: 992px) {
  #games .games-banner-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

#games .img-game {
  position: relative;
  cursor: pointer;
  background: unset;
  border: unset;
  outline: unset;
  padding: 0px;
  /* height: 305px; */
}

/* #games .casino-lobby .img-game {
  height: 200px;
} */

#games .casino-lobby .game_name {
  position: absolute;
  bottom: -4px;
  font-size: 15px;
  font-weight: 700;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100px;
  color: #fff;
}

#games-menu #all_slots .img-game,
#lobby_slots #all_slots .img-game {
  position: relative;
  cursor: pointer;
  background: unset;
  border: unset;
  outline: unset;
  padding: 0px;
  /* height: 160px;
  height: 215px */
  min-height: 125px;
}

#games .img-game .img-game-actions {
  position: absolute;
  left: 40px;
  bottom: 50px;
  max-width: 150px;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  z-index: 5;
}

@media (max-width: 1199px) {
  #games .img-game .img-game-actions {
    left: 20px;
    bottom: 20px;
    gap: 10px;
  }
}

#games .img-game .img-game-desc-wrapper {
  position: absolute;
  width: 40%;
  left: 48px;
  top: 81px;
  display: flex;
  gap: 50px;
  flex-flow: column nowrap;
}

@media (max-width: 1199px) {
  #games .img-game .img-game-desc-wrapper {
    left: 20px;
    top: 45px;
    gap: 20px;
  }
}

#games .img-game .img-game-desc-wrapper .img-game-actions {
  position: unset;
}

#games .img-game .img-game-desc-wrapper .img-game-desc p {
  font-size: 12px;
  color: #9bb3ae;
}

@media (max-width: 1199px) {
  #games .img-game .img-game-desc-wrapper .img-game-desc p {
    font-size: 10px;
  }
}

#games .img-game img {
  margin: 0;
  max-height: unset;
  width: 100%;
  height: auto;
  height: 100%;
  z-index: 0;
}

#games .img-game .vpn_icon {
  position: absolute;
  width: 59px;
  height: 30px;
  right: 5px;
  top: 5px;
  display: none;
}

#games-menu #all_slots .img-game img,
#lobby_slots #all_slots .img-game img {
  /* height: 175px !important; */
  border-radius: 10px 10px 0 0;
}

.slots_name {
  height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  position: absolute;
  width: 100%;
  text-align: center;
  background: linear-gradient(to right, #266e56, #38845d);
  border-radius: 0 0 10px 10px;
}

.slots_name span {
  color: #fff;
  font-size: 15px;
  text-align: center;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .slots_name span {
    font-size: 14px;
  }
}

#games-menu .img-game img,
#lobby_slots .img-game img {
  margin: 0;
  max-height: unset;
  width: 100%;
  height: auto;
  height: 100%;
  z-index: 0;

}

#games .img-game::after {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  z-index: 1;
  height: 100%;
  width: 100%;
}

#games-menu .progress-wrapper,
#lobby_slots .progress-wrapper {
  display: inline-flex;
  flex-flow: column nowrap;
  gap: 20px;
  margin: 30px 0px;
  max-width: 300px;
  width: 100%;
}

#games-menu .progress-wrapper .progress-bar-wrapper,
#lobby_slots .progress-wrapper .progress-bar-wrapper {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

#games-menu .progress-wrapper .progress-bar-wrapper .progress-percent p,
#games-menu .progress-wrapper .progress-bar-wrapper .progress-text p,
#lobby_slots .progress-wrapper .progress-bar-wrapper .progress-percent p,
#lobby_slots .progress-wrapper .progress-bar-wrapper .progress-text p  {
  margin: 0;
  color: var(--text-white-color);
  font-size: 15px;
  font-weight: 300;
}

#games-menu .progress-wrapper .progress,
#lobby_slots .progress-wrapper .progress {
  max-width: 200px;
  width: 100%;
}

#games-menu .progress-wrapper .progress-actions,
#lobby_slots .progress-wrapper .progress-actions {
  max-width: 150px;
  width: 100%;
  margin: 0px auto;
}

#member-center {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
  --member-card-item-gap: 15px;
}

@media (max-width: 1199px) {
  #member-center {
    --member-card-item-gap: 8px;
    padding-top: calc(var(--header-height) + 20px);
  }
}

@media (max-width: 767px) {
  #member-center {
    padding-bottom: 50px;
  }
}

#member-center .member-card {
  background: url("../img/member-center/background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 30px 90px;
  border-radius: var(--border-radius-standard);
}

#member-center .member-card .member-card-wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 50px;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-wrapper {
    gap: 10px;
  }
}

#member-center .member-card .member-card-footer-1 {
  display: grid !important;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-footer-1 {
    display: none !important;
  }
}

#member-center .member-card .member-card-footer-2 {
  display: none !important;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-footer-2 {
    display: grid !important;
  }
}

@media (max-width: 1199px) {
  #member-center .member-card {
    padding: 10px;
  }
}

#member-center .member-card .hr {
  color: var(--text-white-color);
}

#member-center .member-card .vr {
  color: var(--text-white-color);
}

#member-center .member-card .member-card-item {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-item {
    gap: 2px;
  }
}

#member-center .member-card .member-card-item h1 {
  color: var(--text-white-color);
  font-size: 24px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-item h1 {
    font-size: 12px;
  }
}

#member-center .member-card .member-card-item h6 {
  color: var(--text-lightgreen-color);
  font-size: 12px;
  font-weight: 300;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-item h6 {
    font-size: 9px;
  }
}

#member-center .member-card .member-card-item .user-profit-action {
  display: flex;
  flex-flow: row nowrap;
  gap: 15px;
  align-items: center;
}

#member-center .member-card .member-card-item .btn-refresh {
  background: unset;
  border: unset;
  padding: 0px;
  cursor: pointer;
  outline: unset;
}

#member-center .member-card .member-card-item .btn-refresh img {
  max-width: 25px;
  height: 25px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  margin-top: -2px;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-item .btn-refresh img {
    max-width: 15px;
    height: 15px;
  }
}

#member-center .member-card .member-card-avatar {
  flex: 1;
}

#member-center .member-card .member-card-avatar img {
  max-width: 150px;
  height: 150px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 50%;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-avatar img {
    max-width: 50px;
    height: 50px;
  }
}

#member-center .member-card .member-card-info {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--member-card-item-gap);
  width: 100%;
  flex: 6;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-info .member-card-info-top .member-card-item {
    gap: 5px;
  }
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-info .member-card-info-top .member-card-item h1 {
    font-size: 15px;
  }
}

#member-center .member-card .member-card-info .member-card-info-middle {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--member-card-item-gap);
}

#member-center .member-card .member-card-info .member-card-info-middle .total-balance-wrapper {
  flex: 3;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-info .member-card-info-middle .total-balance-wrapper {
    flex: 4;
  }
}

#member-center .member-card .member-card-info .member-card-info-middle .bonus-wallet-wrapper {
  flex: 5;
}

#member-center .member-card .member-card-info .member-card-info-middle .member-card-item {
  padding: 5px 0px;
}

@media (max-width: 1199px) {
  #member-center .member-card .member-card-info .member-card-info-middle .member-card-item {
    padding: 2px 0px;
  }
}

#member-center .member-card .member-card-info-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  -moz-column-gap: 10px;
  column-gap: 10px;
  margin-top: 10px;
}

#member-center .main-list {
  padding: 60px 0px;
}

@media (max-width: 1199px) {
  #member-center .main-list {
    padding: 20px 0px;
  }
}

#member-center .member-center-main-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-standard);
  text-decoration: none;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 20px 50px;
  gap: 20px;
}

@media (max-width: 1199px) {
  #member-center .member-center-main-item {
    padding: 10px;
    gap: 10px;
  }
}

#member-center .member-center-main-item .member-center-main-item-icon img {
  max-width: 70px;
  height: 70px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 1199px) {
  #member-center .member-center-main-item .member-center-main-item-icon img {
    max-width: 40px;
    height: 40px;
  }
}

#member-center .member-center-main-item .member-center-main-item-title h6 {
  color: var(--text-white-color);
  font-size: 16px;
  font-weight: 300;
  text-align: center;
}

@media (max-width: 1199px) {
  #member-center .member-center-main-item .member-center-main-item-title h6 {
    font-size: 15px;
    max-width: 80px;
    text-align: left;
  }
}

#member-center .member-center-item {
  background: var(--background-darkgreen-color);
  border-radius: var(--border-radius-standard);
  text-decoration: none;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  gap: 20px;
}

@media (max-width: 1199px) {
  #member-center .member-center-item {
    padding: 20px;
    gap: 10px;
  }
}

#member-center .member-center-item .member-center-item-icon img {
  max-width: 50px;
  height: 50px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 1199px) {
  #member-center .member-center-item .member-center-item-icon img {
    max-width: 40px;
    height: 40px;
  }
}

#member-center .member-center-item .member-center-item-title h6 {
  color: var(--text-white-color);
  font-size: 16px;
  font-weight: 300;
  text-align: center;
}

@media (max-width: 1199px) {
  #member-center .member-center-item .member-center-item-title h6 {
    font-size: 14px;
  }
}

#inbox {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 767px) {
  #inbox {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#inbox .nav-item {
  gap: 10px;
}

#inbox .nav-item .nav-link {
  justify-content: center;
  width: 100%;
}

#inbox .nav-item .nav-link.active {
  background: #378560;
  color: var(--text-white-color);
}

#inbox .message-item-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 30px;
  margin-top: 30px;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper {
    gap: 20px;
    margin-top: 20px;
  }
}

#inbox .message-item-wrapper .modal-dialog {
  max-width: 900px;
}

#inbox .message-item-wrapper .modal-content {
  background: #004136 !important;
  border-radius: 15px;
  padding: 30px 40px;
}

.message-modal-title h6 {
  color: #fff;
}

#inbox .message-item-wrapper .message-modal-date {
  margin-top: 10px;
  margin-bottom: 20px;
}

#inbox .message-item-wrapper .message-modal-date p {
  color: #b3b3b3;
  font-size: 15px;
}

#inbox .message-item-wrapper .message-modal-desc {
  padding: 20px 0;
}

#inbox .message-item-wrapper .message-modal-desc p {
  color: #fff;
}

#inbox .message-item-wrapper .message-item {
  background: var(--background-darkgreen-color);
  border-radius: var(--border-radius-standard);
  padding: 25px 30px;
  padding-bottom: 30px;
  display: flex;
  flex-flow: row nowrap;
  gap: 80px;
  position: relative;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item {
    gap: 40px;
    padding: 20px 25px;
    flex-flow: column nowrap;
  }
}

@media (max-width: 767px) {
  #inbox .message-item-wrapper .message-item {
    gap: 20px;
  }
}

#inbox .message-item-wrapper .message-item .message-item-left {
  flex: 9;
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-left {
    gap: 10px;
  }
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-date p {
  font-size: 14px;
  color: var(--text-lightgrey-color);
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-date p {
    font-size: 12px;
  }
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-title-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-title.read h6 {
  color: var(--text-white-color);
  margin-left: 0;
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-title.read h6::before {
  display: none;
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-title h6 {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-lightgreen-color);
  margin-left: 20px;
  position: relative;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-title h6 {
    font-size: 16px;
    max-width: 800px;
  }
}

@media (max-width: 767px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-title h6 {
    max-width: 90%;
  }
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-title h6::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--background-lightgreen-color);
  border-radius: 50%;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-title h6::before {
    width: 8px;
    height: 8px;
    left: -15px;
  }
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-banner .message-banner {
  max-width: 700px;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-banner .message-banner {
    max-width: 500px;
  }
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-desc p {
  font-size: 14px;
  color: var(--text-lightgrey-color);
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-desc p {
    font-size: 12px;
  }
}

#inbox .message-item-wrapper .message-item .message-item-left .message-item-view-more {
  max-width: 400px;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-view-more {
    max-width: 300px;
  }
}

@media (max-width: 767px) {
  #inbox .message-item-wrapper .message-item .message-item-left .message-item-view-more {
    max-width: 100%;
  }
}

#inbox .message-item-wrapper .message-item .message-item-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-right {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

#inbox .message-item-wrapper .message-item .message-item-right .btn-inbox-delete {
  padding: 0px;
  background: unset;
  border: unset;
  max-width: 50px;
}

@media (max-width: 1199px) {
  #inbox .message-item-wrapper .message-item .message-item-right .btn-inbox-delete {
    max-width: 40px;
  }
}

#inbox .message-item-not-found {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 100px 0px;
}

@media (max-width: 1199px) {
  #inbox .message-item-not-found {
    padding: 50px 0px;
  }
}

#inbox .message-item-not-found .message-item-not-found-img {
  width: 80px;
}

@media (max-width: 1199px) {
  #inbox .message-item-not-found .message-item-not-found-img {
    width: 60px;
  }
}

#inbox .message-item-not-found h6 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-white-color);
}

@media (max-width: 1199px) {
  #inbox .message-item-not-found h6 {
    font-size: 14px;
  }
}

#daily-check-in {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  /* padding-top: 0;
  padding-bottom: 0; */
  position: relative;
}

@media (max-width: 1199px) {
  #daily-check-in {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
    /* padding-top: 0;
    padding-bottom: 0; */
  }
}

#modal-daily-checkin #daily-check-in {
  padding: 0;
}

#daily-check-in .calendar-check-in {
  --calendar-border-radius: 20px;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header {
  background-image: url("../img/daily-check-in/calendar-header-shape.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  padding: 30px;
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
  position: relative;
  width: 100%;
  filter: drop-shadow(2px 1px 10px #fff);
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header {
    padding: 20px;
  }
}

@media (max-width: 767px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header {
    background-size: cover;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header h4 {
  color: var(--text-darkgreen-color);
  font-size: 24px;
  font-weight: 700;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header h4 {
    font-size: 20px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header p {
  color: var(--text-darkgreen-color);
  font-size: 18px;
  font-weight: 300;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header p {
    font-size: 16px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header p b {
  font-weight: 700;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header p .total-check-in {
  font-size: 18px;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header p .total-check-in {
    font-size: 16px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0px;
  max-width: 180px;
  width: 100%;
  height: 110px;
  background: url("../img/daily-check-in/book-check.png") no-repeat;
  background-size: contain;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header::after {
    max-width: 150px;
    height: 80px;
  }
}

@media (max-width: 767px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header::after {
    max-width: 100px;
    height: 100px;
    top: 20px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body {
  padding: 30px;
  background: var(--background-darkgreen-color);
  border: 1px solid var(--border-lightgreen-color);
  border-bottom-left-radius: var(--calendar-border-radius);
  border-bottom-right-radius: var(--calendar-border-radius);
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
  filter: drop-shadow(2px 4px 10px #fff)
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body {
    padding: 20px;
    gap: 20px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-title-wrapper {
  background: linear-gradient(to bottom, #ffe795 0%, #f1b81e 100%);
  border-radius: var(--border-radius-medium);
  padding: 6px 20px;
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  text-align: center;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-title-wrapper {
    padding: 6px 10px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-title-wrapper .calendar-icon {
  max-width: 40px;
  width: 100%;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-title-wrapper .calendar-icon {
    max-width: 30px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-title-wrapper .calendar-title {
  flex: 1;
  color: var(--text-darkgreen-color);
  font-size: 18px;
  font-weight: 500;
  margin-left: -60px;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-title-wrapper .calendar-title {
    font-size: 16px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 20px;
}

@media (max-width: 767px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid {
    grid-gap: 10px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item {
  text-align: center;
  position: relative;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.checked .day-text {
  color: var(--text-lightgreen-color);
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.checked .box-day {
  background-image: url("../img/daily-check-in/date-active.png");
  background-color: #34772b;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.checked .box-day .day-number {
  color: var(--text-white-color);
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.checked.prize:not(.opened) .box-day {
  cursor: pointer;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.prize:not(.checked) .box-day {
  background-image: url("../img/daily-check-in/prize-inactive.png");
  background-color: #093029;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.prize .box-day {
  background-image: url("../img/daily-check-in/prize-close.png"), linear-gradient(to bottom, #ffe795, #f1b81e);
  background-color: #34772b;
  background-size: 60% 60%, 100% 100%;
  position: relative;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.prize .box-day .day-number {
  color: var(--text-white-color);
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.prize.opened .box-day {
  background-image: url("../img/daily-check-in/prize-open.png"), linear-gradient(to bottom, #ffe795, #f1b81e);
  cursor: initial;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item.prize.opened.today .box-day {
  background-image: url("../img/daily-check-in/prize-open.png"), url("../img/daily-check-in/backlight.png"), linear-gradient(to bottom, #ffe795, #f1b81e);
  cursor: initial;
  background-size: 60% 60%, 200% 200%, 100% 100%;
  background-position: center, center, center;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item .day-text {
  color: #4d7a73;
  font-size: 14px;
  font-weight: 300;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item .day-text {
    font-size: 12px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item .box-day {
  background-image: url("../img/daily-check-in/date-inactive.png");
  background-color: #093029;
  background-size: 75% 75%;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 1/1;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item .box-day.prize {
  background-image: url("../img/daily-check-in/prize-inactive.png");
  background-size: 60% 60%;
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item .box-day .day-number {
  color: #4d7a73;
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 1199px) {
  #daily-check-in .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-body .calendar-grid .day-item .box-day .day-number {
    font-size: 14px;
  }
}

#daily-check-in .calendar-check-in .calendar-check-in-wrapper .calender-check-in-footer {
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

#daily-check-in .section-title {
  margin-left: 20px;
  margin-top: 80px;
  margin-bottom: 20px;
}

@media (max-width: 1199px) {
  #daily-check-in .section-title {
    margin-top: 40px;
    margin-left: 10px;
  }
}

@media (max-width: 767px) {
  #daily-check-in .section-title {
    margin-top: 20px;
  }
}

#daily-check-in .section-title h6 {
  color: var(--text-lightgreen-color);
  font-size: 22px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  #daily-check-in .section-title h6 {
    font-size: 18px;
  }
}

#daily-check-in .check-in-list {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

#daily-check-in .check-in-list .check-in-item {
  background: var(--background-darkgreen-color);
  border-radius: var(--border-radius-standard);
  padding: 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 20px;
}

@media (max-width: 1199px) {
  #daily-check-in .check-in-list .check-in-item {
    padding: 10px;
    gap: 10px;
  }
}

#daily-check-in .check-in-list .check-in-item .check-in-content {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
  flex: 3;
}

#daily-check-in .check-in-list .check-in-item .check-in-content h6 {
  color: var(--text-white-color);
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  #daily-check-in .check-in-list .check-in-item .check-in-content h6 {
    font-size: 14px;
  }
}

#daily-check-in .check-in-list .check-in-item .check-in-content h6 span {
  color: var(--text-lightgreen-color);
}

#daily-check-in .check-in-list .check-in-item .check-in-content p {
  color: var(--text-white-color);
  font-size: 13px;
  font-weight: 300;
}

@media (max-width: 1199px) {
  #daily-check-in .check-in-list .check-in-item .check-in-content p {
    font-size: 12px;
  }
}

#daily-check-in .check-in-list .check-in-item .check-in-item-action {
  flex: 1;
}

#daily-check-in .accordion .accordion-body {
  max-width: 1200px;
}

#daily-check-in .accordion .accordion-body h6 {
  color: var(--text-lightgrey-color);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  #daily-check-in .accordion .accordion-body h6 {
    font-size: 14px;
  }
}

#daily-check-in .accordion .accordion-body ol {
  padding-left: 20px;
}

@media (max-width: 767px) {
  #daily-check-in .accordion .accordion-body ol {
    padding-left: 10px;
  }
}

#daily-check-in .accordion .accordion-body li {
  padding-left: 20px;
}

@media (max-width: 767px) {
  #daily-check-in .accordion .accordion-body li {
    padding-left: 10px;
  }
}

#daily-check-in .accordion .accordion-body p,
#daily-check-in .accordion .accordion-body li {
  color: var(--text-lightgrey-color);
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 20px;
}

@media (max-width: 767px) {

  #daily-check-in .accordion .accordion-body p,
  #daily-check-in .accordion .accordion-body li {
    font-size: 13px;
    margin-bottom: 10px;
  }
}

#about {
  padding-top: calc(var(--header-height) + 50px);
  padding-bottom: 100px;
  position: relative;
  --accordion-bg-color: transparent;
  --accordion-text-color: var(--text-lightgreen-color);
  --accordion-hover-text-color: #C5F6DE;
  --accordion-button-bg-color: #006857;
  --accordion-button-hover-bg-color: var(--background-darkgreen-color);
}

@media (max-width: 767px) {
  #about {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 50px;
  }
}

#about .col-side-menu {
  max-width: 325px;
  flex: 0 0 325px;
}

@media (max-width: 767px) {
  #about .col-side-menu {
    display: none;
  }
}

#about .about-content-wrapper {
  min-height: 80vh;
}

#about .about-content {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

#about .about-content p {
  font-size: 15px;
  color: #f2f1f1;
  font-weight: 300;
}

#about .about-content p a {
  color: var(--text-lightgreen-color);
  text-decoration: none;
}

#about .faq-content button,
#about .faq-content p {
  font-size: 15px;
  color: #f2f1f1;
  font-weight: 300;
}

#about .faq-content button span,
#about .faq-content p span {
  color: var(--text-lightgreen-color);
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background: #135956;
}

::-webkit-scrollbar-thumb {
  background-color: #0e2e26;
}

html,
body {
  background-image: url("../img/global/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.btn-live-chat {
  padding: 0px;
  position: fixed;
  bottom: calc(var(--tabbar-height) + 20px);
  right: 20px;
  z-index: 9;
  background: unset;
  border: unset;
  outline: unset;
  box-shadow: unset;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .btn-live-chat {
    width: 70px;
    height: 70px;
  }
}

.btn-live-chat img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.btn-live-chat .icon-livechat {
  width: 60px;
  height: 60px;
  background: url(../img/global/live-chat.png) no-repeat center;
  background-size: 100%;
}


table,
table * {
  border: none;
}

@media (min-width: 767px) {

  .container,
  .container-md,
  .container-sm {
    max-width: 720px;
  }
}

@media (min-width: 992px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 960px;
  }
}

@media (min-width: 1199px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1000px;
  }
}

@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1170px;
  }
}

@media (min-width: 1600px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}

.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

.g-5 {
  --bs-gutter-size: 35px;
  --bs-gutter-x: var(--bs-gutter-size);
  --bs-gutter-y: var(--bs-gutter-size);
}

.mt-20 {
  margin-top: 20px;
}

.mt-40 {
  margin-top: 40px;
}

.fw-300 {
  font-weight: 300 !important;
}

.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentColor;
  opacity: 0.5;
}

.hr {
  display: inline-block;
  align-self: stretch;
  min-width: 1em;
  height: 1px;
  background-color: currentColor;
  opacity: 0.5;
}

body {
  font-family: "Poppins", sans-serif;
  min-height: var(--app-height);
  position: relative;
  transition: var(--sidebar-transition);
}

body[data-sidebar=false] {
  padding-left: 0px;
}

body[data-sidebar=false] #header {
  padding-left: 0px;
}

body[data-sidebar=false] #sidebar hr {
  max-width: 50px;
  margin: 10px auto !important;
}

body[data-sidebar=false] #sidebar {
  transform: translateX(calc(-100% + var(--sidebar-close-width)));
}

@media (max-width: 1024px) {
  body[data-sidebar=false] #sidebar {
    transform: translateX(-100%);
  }
}

body[data-sidebar=true] {
  padding-left: var(--sidebar-open-width);
}

@media (max-width: 1024px) {
  body[data-sidebar=true] {
    padding-left: 0px;
  }
}

body[data-sidebar=true] #header {
  padding-left: var(--sidebar-open-width);
}

@media (max-width: 1024px) {
  body[data-sidebar=true] #header {
    padding-left: 0px;
  }
}

body[data-sidebar=true] #sidebar {
  transform: translateX(0%);
}

body:has(#sports, #promo, #tnc, #leaderboard, #privilege) {
  --background-footer-color: #051e21;
}

body #live-chat-floating {
  position: fixed;
  bottom: calc(var(--bottom-bar-height) + 20px);
  right: 10px;
  max-width: 80px;
  z-index: 99;
}

body #live-chat-floating .live-chat {
  border: unset;
  background: unset;
  outline: unset;
  box-shadow: unset;
  width: 100%;
}

body .ui-datepicker {
  z-index: 100 !important;
}

body .primary-btn {
  padding: 4%;
  color: var(--text-white-color);
  background: linear-gradient(to right, #00c08b, #00bdbf);
  border: unset;
  border-radius: 10px;
  width: 100%;
  margin-top: 30px;
}

body img.on-fire {
  position: relative;
}

body img.on-fire::after {
  content: "";
  position: absolute;
  top: 0;
  transform: translate(-50%, 50%);
  right: 1rem;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: 1;
}

body .rotate {
  transform: rotate(360deg);
  transition: transform 0.3s ease;
  /* Add a transition for smooth rotation */
}

.home-banner .swiper-wrapper .swiper-slide .rounded-standard {
  height: 360px;
  display: block;
}

@media (max-width: 767px) {
  .home-banner .swiper-wrapper .swiper-slide .rounded-standard {
    height: 190px;
  }
}

body .rounded-standard {
  border-radius: var(--border-radius-standard);
  overflow: hidden;
  height: 100%;
}

body .border-rounded-b-0 {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

body .rounded-small {
  border-radius: var(--border-radius-small);
  overflow: hidden;
  display: block;
}

body .noted-p p {
  color: var(--text-secondary-color);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 767px) {
  body .noted-p p {
    font-size: 12px;
  }
}

body .section-transaction-title {
  margin-bottom: 26px;
}

body .section-transaction-title h3 {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-white-color);
  margin-bottom: 20px;
}

body .section-history {
  padding: 40px 0px;
}

@media (max-width: 1199px) {
  body .section-history {
    padding: 20px 0px;
  }
}

body .py-button-submit {
  padding: 50px 0px;
}

@media (max-width: 1199px) {
  body .py-button-submit {
    padding: 20px 0px;
  }
}

body sup {
  color: var(--text-warning-color);
}

.promo-title {
  height: 30px;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-des {
  box-orient: vertical;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
}

/* slide-responsive */
/* @media (min-width: 1200px) {
  .home-banner .swiper-slide {
    height: 414px !important;
    height: 317px !important;
  }

  .home-banner .swiper-slide img {
    height: 100% !important;
  }
}

@media (max-width: 1199px) {
  .home-banner .swiper-slide {
    height: 400px !important;
    height: 317px !important;
  }

  .home-banner .swiper-slide img {
    height: 100% !important;
  }
}

@media (max-width: 1030px) {
  .home-banner .swiper-slide {
    height: 310px !important;
    height: 228px !important;
  }

  .home-banner .swiper-slide img {
    height: 100% !important;
  }
}

@media (max-width: 700px) {
  .home-banner .swiper-slide {
    height: 252px !important;
  }

  .home-banner .swiper-slide img {
    height: 100% !important;
  }
} */

.home-banner .swiper-slide img {
  width: 100%;
  height: 100%;
}


/* alert */
alert,
alert-main,
alert-cont,
alert-solve {
  display: block;
}

.anime-fade-in,
.anime-fade-in-down {
  animation-duration: .6s;
  animation-fill-mode: both;
}

.anime-fade-in {
  animation-name: anime-fade-in;
}

.anime-fade-in-down {
  animation-name: anime-fade-in-down;
}

@keyframes anime-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes anime-fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

alert {
  position: fixed;
  width: 100%;
  height: 100%;
  top: -15px;
  left: 0;
  z-index: 1056;
  background-color: var(--000-2);
}

alert-main {
  max-width: 500px;
  width: 90%;
  background-color: white;
  border-radius: 10px;
  margin: 100px auto;
  padding: 10px;
}

alert-cont {
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

alert-solve {
  display: flex;
  align-items: center;
  justify-content: center;
}

alert-solve .btn {
  margin: 10px;
  min-width: 100px;
}

@media(max-width:640px) {
  alert-main {
    border-radius: .1rem;
    margin: 1rem auto;
    padding: .1rem;
  }

  alert-cont {
    padding: .2rem;
  }

  alert-solve .btn {
    margin: .1rem;
    min-width: 1rem;
  }
}

alert-solve .btn {
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: relative;
  background-image: linear-gradient(#c79a45 0%, #d1af50 31%, #cf9e4e 62%, #fbda44 100%);
  color: #000;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  user-select: none;
  border-radius: 10px 0 10px 0;
  border-color: #c79a45;
}

alert-solve .btn:hover {
  color: #000;
  background-image: linear-gradient(#f8cc74 0%, #ffe8a9 31%, #f8cc74 62%, #fbda44 100%);
  border-color: #c79a45;
}

alert-solve .btn:active {
  border-color: #c79a45 !important;
  color: #000 !important;

}

#modal-register .err_msg {
  font-size: 12px;
  color: var(--text-warning-color);
  text-decoration: none;
}

#header .header-logo {
  left: 30px;
  position: relative;
}

.modal-dialog-promo {
  max-width: 1200px !important;
}

#blocks {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  position: absolute;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, .0.1);
  height: 100%;
  z-index: 99;
}

.spinnerLoad {
  width: 70px;
  text-align: center;
  top: 0;
  position: relative;
  margin-top: -350px;
}

.spinnerLoad .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinnerLoad .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.spinnerLoad .bounce3 {
  -webkit-animation-delay: -0.42s;
  animation-delay: -0.42s;
}

.spinnerLoad>div {
  width: 14px;
  height: 14px;
  background-color: #fff;
  opacity: 1;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.1s infinite ease-in-out both;
  animation: sk-bouncedelay 1.1s infinite ease-in-out both;
}

@-webkit-keyframes sk-bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }

  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@media (max-width: 767px) {
  #games #all_slots .img-game img {
    height: 100% !important;
    min-height: 120px;
    max-height: 120px;
  }

  #games #all_slots .img-game {
    height: 160px;
  }

  #header .header-logo {
    left: 0;
  }
}

.loading_content {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #ed0e19;
  color: #ed0e19;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}

.loading_content::before,
.loading_content::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}

.loading_content::before {
  left: -30px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dot-flashing 2s infinite alternate;
  animation-delay: 0s;
}

.loading_content::after {
  left: 30px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 112, 55, 1);
  color: #9880ff;
  animation: dot-flashing 2s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: rgba(229, 7, 7, 1);
  }

  30% {
    background-color: rgba(255, 112, 55, 1);
  }

  50% {
    background-color: rgba(157, 214, 42, 0.673);
  }

  80% {
    background-color: rgba(85, 26, 202, 1);
  }

  100% {
    background-color: rgba(152, 128, 255, 0.2);
  }
}

.promotion-des {
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
}

/*body[data-sidebar=false] #content_data{
  left: 80px;
}body[data-sidebar=false] #header .header-logo{
  left: 50px;
  position: relative;
}*/
body[data-sidebar=false] .main_games {
  left: 80px;
}

body[data-pages='saba_sports'] .game-frame {
  width: 100% !important;
}

.turnover-checking-form-filter .label_turnover,
.turnover-checking-form-filter legend {
  color: #fff;
}

/* lucky_spin */
#lucky_spin {
  padding-top: 120px;
  padding-bottom: 50px;
  overflow: hidden;
}

@media (max-width: 992px) {
  #lucky_spin {
    padding-top: 70px;
  }
}

@media (max-width: 375px) {
  #lucky_spin {
    padding-top: 40px;
  }
}

#lucky_spin .spin_content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
}

@media (max-width: 992px) {
  #lucky_spin .spin_content {
    grid-template-columns: repeat(1, 1fr);
  }
}

.spin_wheel_bg {
  width: 100%;
  height: 100%;
  background: url(../img/lucky-spin/backlight.png) no-repeat center;
  background-size: 135% 100%;
  position: relative;
}

.three-box-top {
  display: flex;
  justify-content: center;
}

.labal-absolute {
  position: absolute;
  top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 548px;
  height: 400px;
}

@media (max-width: 767px){
  .labal-absolute { 
    width: 400px;
  }
}

.major-labal {
  background: url(../img/lucky-spin/winner/major.png) center no-repeat;
  background-size: 100%;
  height: 170px;
  width: 185px;
  position: absolute;
  left: 0;
  top: 68px;
}

@media (max-width: 1500px) {
  .major-labal {
    left: 10px;
    width: 170px;
  }
}

@media (max-width: 992px) {
  .major-labal {
    left: 20px;
    width: 160px;
  }
}

@media (max-width: 767px) {
  .major-labal {
    width: 133px;
    left: -10px;
  }
}

@media (max-width: 390px) {
  .major-labal {
      width: 120px;
      left: 5px;
  }
}

@media (max-width: 375px) {
  .major-labal {
      width: 118px;
      left: 13px;
  }
}

.minor-labal {
  background: url(../img/lucky-spin/winner/minor.png) center no-repeat;
  background-size: 100%;
  height: 170px;
  width: 185px;
  position: absolute;
  right: 0;
  top: 68px;
}

@media (max-width: 1500px) {
  .minor-labal {
    right: 10px;
    width: 170px;
  }
}

@media (max-width: 992px) {
  .minor-labal {
    right: 20px;
    width: 160px;
  }
}

@media (max-width: 767px) {
  .minor-labal {
    width: 133px;
    right: -10px;
  }
}

@media (max-width: 390px) {
  .minor-labal {
      width: 120px;
      right: 5px;
  }
}

@media (max-width: 375px) {
  .minor-labal {
      width: 118px;
      right: 13px;
  }
}

.mega-labal {
  background: url(../img/lucky-spin/winner/mega.png) center no-repeat;
  background-size: 100%;
  height: 200px;
  width: 222px;
  position: absolute;
  top: 12px;
}

@media (max-width: 767px) {
  .mega-labal {
    width: 188px;
  }
}

@media (max-width: 390px) {
  .mega-labal {
    width: 180px;
  }
}

@media (max-width: 375px) {
  .mega-labal {
      width: 165px;
  }
}

.wheel_container {
  position: relative;
}

.turnplate {
  margin: auto;
  width: 407px;
  height: 394px;
  margin-top: 162px;
  position: relative;
  background-size: 97% !important;
}

@media (max-width: 767px){
  .turnplate {
    width: 335px;
  }
}

@media (max-width: 375px){
  .turnplate {
    width: 300px;
    margin-top: 157px;
    height: 260px;
  }
}

.wheel_round {
  position: absolute;
  width: 468px;
  height: 462px;
  background: url(../img/lucky-spin/spin_wheel.png) no-repeat center;
  background-size: contain;
  top: -24px;
  right: -31px;
  pointer-events: none;
}

@media(max-width: 767px){
  .wheel_round {
    width: 378px;
    top: -61px;
    right: -24px;
  }
}

@media(max-width: 375px){
  .wheel_round {
    width: 335px;
    top: -80px;
    right: -20px;
  }
}

.float_1 {
  position: absolute;
  left: -54px;
  top: 136px;
  width: 50px;
}

.float_2 {
  position: absolute;
  right: -70px;
  top: 100px;
  width: 80px;
}

.float_3 {
  position: absolute;
  left: -33px;
  bottom: 10px;
  width: 80px;
}

.float_4 {
  position: absolute;
  right: -20px;
  bottom: 50px;
  width: 50px;
}

@media (max-width: 430px){
  .float_1 {
    left: -48px;
    top: 108px;
  }

  .float_3 { 
    left: -37px;
    bottom: 57px;
  }

  .float_4 {
    right: -25px;
    bottom: 110px;
  }
}

@media (max-width: 375px){
  .float_1 {
    left: -48px;
    top: 100px;
  }
  
  .float_3 { 
    left: -37px;
    bottom: -48px;
  }

  .float_4 {
    right: -26px;
    bottom: 5px;
  }
}

.spin_wheel_bg .turnplate canvas.item {
  width: 100%;
  transform: rotate(-104.25deg);
  transform: rotate(-108.25deg);
}

.spin_wheel_bg .pointer {
  position: absolute;
  width: 82px;
  top: 122px;
  left: 163px;
  cursor: pointer;
  filter: drop-shadow(2px 10px 6px rgba(0, 0, 0, 0.801));
}

@media (max-width: 767px){ 
  .spin_wheel_bg .pointer {
    width: 60px;
    top: 115px;
    left: 138px;

    /* width: 90px;
    top: 17px;
    left: 122px; */
  }
}

@media (max-width: 375px) {
  .spin_wheel_bg .pointer {
      width: 57px;
      top: 100px;
      left: 123px;
  }
}

.spin-button {
  margin-top: 65px;
}

.spin-icon {
  width: 220px;
  height: 60px;
  background: linear-gradient(to bottom, #e1f7bd, #7ec519);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--btn-color);
  --btn-color: var(--text-darkgreen-color);
  font-size: 17px;
  text-transform: uppercase;
  margin: auto;
  border: none;
  outline: none;
}

.notify-text {
  text-align: center;
  color: #fff;
  margin-top: 10px;
}

.spin-win-bg {
  width: 520px;
  height: 100%;
  border-radius: 20px;
  margin: auto;
  background: #004136 url(../img/lucky-spin/prize-background.png) no-repeat center;
}

@media (max-width: 1500px) {
  .spin-win-bg {
    width: 400px;
  }
}

@media (max-width: 992px) {
  .spin-win-bg {
    width: 400px;
  }
}

@media (max-width: 390px) {
  .spin-win-bg {
    width: 368px;
  }
}

@media (max-width: 376px) {
  .spin-win-bg {
    width: 360px;
  }
}

.spin-detail {
  height: 600px;
  padding: 26px;
}

#winnerMainContent {
  margin-top: 20px;
}

#winnerMain {
  display: flex;
  justify-content: space-between;
  border-bottom: none;
}

#winnerMain .nav-item {
  width: 49%;
}

#winnerMain .nav-item .nav-link {
  width: 100%;
  background: #08483d;
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  padding: 11px 0;
  border-radius: 5px;
  border: none;
}


#winnerMain .nav-item .nav-link.active,
#winnerMain .nav-item .nav-link:hover {
  background: #1c5d52 !important;
  border: none !important;
}

#winnerMain .nav-item .nav-link:focus,
#winnerMain .nav-item .nav-link:focus-visible,
#winnerMain .nav-item .nav-link:focus-within {
  border: none !important;
}


.list-group-spin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 5px;
}

.member-spin-info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  line-height: 27px;
}

.member-spin-info h6 {
  color: #fff;
  font-size: 15px;
}

.member-spin-info p {
  color: #ffffffd5;
  font-size: 12px;
}

.member-spin-prize h6 {
  font-size: 15px;
  color: #82c71d;
}

/* aboutus */
.breadcrumb-wrapper .aboutus-dropdown {
  position: relative;
}

.aboutus-dropdown .icon-btn {
  background: none;
  border: none;
  color: #fff;
}

.breadcrumb-wrapper .aboutus-dropdown .dropdown-body {
  position: absolute;
  background: rgba(28, 126, 106, 0.35);
  width: 222px;
  list-style: none;
  display: none;
  -webkit-backdrop-filter: blur(22px) brightness(1.15);
  backdrop-filter: blur(22px) brightness(1.15);
  padding: 0;
  top: 27px;
  right: -25px;
  margin-top: 11px;
  border-radius: var(--border-radius-small);
  z-index: 7;
}

.breakcrum_games .breadcrumb-wrapper .aboutus-dropdown .dropdown-body {
  right: unset;
  border-radius: 7px;
}

.breadcrumb-wrapper .img-rotate.rotate_90 {
  transform: rotate(90deg);
}

.breadcrumb-wrapper .aboutus-dropdown .dropdown-body ul {
  padding: 10px 0px;
  list-style: none;
}

.breadcrumb-wrapper .aboutus-dropdown .dropdown-body ul li {
  padding: 0px 10px;
}

.breadcrumb-wrapper .aboutus-dropdown .dropdown-body ul li a {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  font-size: 12px;
  color: var(--text-white-color);
  font-weight: 300;
  position: relative;
  border-radius: var(--border-radius-small);
  padding: 10px 20px;
}

.breadcrumb-wrapper .aboutus-dropdown .dropdown-body ul li a:hover,
.breadcrumb-wrapper .aboutus-dropdown .dropdown-body ul li a.active {
  background: rgba(58, 163, 153, 0.35);
  -webkit-backdrop-filter: blur(22px) brightness(1.15);
  backdrop-filter: blur(22px) brightness(1.15);
}

.modal {
  backdrop-filter: blur(10px);
}

#modal-daily-checkin .calendar-check-in-body {
  position: relative;
  filter: drop-shadow(2px 4px 10px #fff);
}

#modal-daily-checkin .calendar-check-in .calendar-check-in-wrapper .calendar-check-in-header {
  filter: drop-shadow(2px 1px 10px #fff);
}

#modal-daily-checkin .calendar-grid {
  margin-bottom: 45px;
}

#modal-daily-checkin .calender-check-in-footer {
  width: 265px !important;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

/* popup-game-transfer */
/* #modal-transfer {
  display: block;
  opacity: 1;
} */
#modal-transfer .modal-logo {
  max-width: 250px;
}

.balance-text .balance-item {
  padding-top: 10px;
}

.balance-text .balance-item label {
  color: #c9c0c0;
  display: inline-block;
  width: 160px;
}

.balance-text .balance-item span {
  color: #fff;
  display: inline-block;
}

.user-detail {
  background: #327f63;
  border-radius: 8px;
  padding: 18px;
}

.user-detail .left-detail {
  display: flex;
  gap: 5px;
  padding: 7px;
}

.user-detail .left-detail label {
  color: #fff;
  width: 98px;
}

.user-detail .left-detail input {
  background: none;
  color: #80b1f9;
  border: none;
  outline: none;
}

.js-tran-copy {
  width: 35px;
  height: 100%;
  border: none;
  background: none;
}

.js-tran-copy img {
  width: 100%;
}

.input-group-tran {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 12px;
  width: 100%;
  gap: 10px;
}

.input-group-tran .form-input {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  background: #ffffff;
  color: #022620;
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
}

.input-group-tran .btn-buy {
  width: 28%;
  background: linear-gradient(to bottom, #e1f7bd, #7ec519);
  color: #fff;
  border-radius: 8px;
  border: none;
  outline: none;
}

.input-group-tran .btn-buyout {
  background: linear-gradient(to bottom, #a643ec, #700fd2);
}

/* #model-congratulations {
  display: block;
  opacity: 1;
} */

#model-congratulations .modal-dialog {
  max-width: 450px !important;
}

#model-congratulations .modal-content {
  background: url(../img/lucky-spin/prize-background.png) no-repeat center;
  background-size: 120%;
}

#model-congratulations .modal-title h3 {
  color: var(--text-white-color);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}

#model-congratulations .modal-title p {
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  width: 245px;
  margin: auto;
}

.price-spin {
  font-size: 60px;
  font-weight: 400;
  color: #9814f7;
  text-align: center;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-backlight {
  width: 1300px;
  position: absolute;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-float {
  position: absolute;
}

.float-left {
  width: 85px;
  height: auto;
  bottom: 20%;
  left: -40px;
}

.float-right {
  width: 85px;
  height: auto;
  top: 20%;
  right: -40px;
}

.flex-btn-upload {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 10px;
}

.label_receipt {
  width: 100%;
  height: 100%;
  margin: 0;
}

.btn-upload-receipt {
  background: linear-gradient(to bottom, #e1f7bd, #7ec519);
  color: var(--btn-color);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 50%;
  padding: 13px 0;
  cursor: pointer;
}

@media (max-width: 767px) {
  .btn-upload-receipt {
    padding: 12px 0;
    width: 70%;
  }
}

.form-control-file {
  display: none;
}

@media (max-width: 768px){
  .order_pos1 {
    order: 1;
  }
  
  .order_pos2 {
    order: 2;
  }
  
  .order_pos3 {
    order: 3;
  }
}

/* Wallet Dropdown Hover Styles */
.header-wallet.wallet-dropdown {
  position: relative;
  cursor: pointer;
}

.header-wallet.wallet-dropdown .wallet-dropdown-body {
  position: absolute;
  background: rgba(28, 126, 106, 0.35);
  width: 15rem;
  list-style: none;
  display: none;
  -webkit-backdrop-filter: blur(22px) brightness(1.15);
  backdrop-filter: blur(22px) brightness(1.15);
  padding: 0;
  top: 100%;
  left: 0;
  margin-top: 5px;
  border-radius: var(--border-radius-small);
  z-index: 1000;
}

.header-wallet.wallet-dropdown:hover .wallet-dropdown-body {
  display: block;
}

.header-wallet.wallet-dropdown .wallet-dropdown-body ul {
  padding: 10px 0px;
  list-style: none;
  margin: 0;
}

.header-wallet.wallet-dropdown .wallet-dropdown-body ul li {
  padding: 0px 10px;
}

.header-wallet.wallet-dropdown .wallet-dropdown-body .wallet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  color: var(--text-white-color);
  font-size: 14px;
  font-weight: 300;
  border-radius: var(--border-radius-small);
  margin: 2px 0;
}

.header-wallet.wallet-dropdown .wallet-dropdown-body .wallet-item:hover {
  background: rgba(58, 163, 153, 0.35);
  -webkit-backdrop-filter: blur(22px) brightness(1.15);
  backdrop-filter: blur(22px) brightness(1.15);
}

.header-wallet.wallet-dropdown .wallet-dropdown-body .wallet-label {
  font-weight: 400;
}

.header-wallet.wallet-dropdown .wallet-dropdown-body .wallet-amount {
  font-weight: 500;
  color: #82c71d;
}

.form-selector-content {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.form-selector-content .select-from {
  width: 50%;
}

.form-selector-content .select-from .dropdown-input {
  padding: 8px 20px;
}

.form-selector-content .select-from .dropdown-menu::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.transfer-icon {
  display: flex;
  align-items: end;
  justify-content: end;
}

.transfer-icon img {
  width: 38px;
}

@media (max-width: 1025px) {
  .form-selector-content {
    flex-direction: column;
  }

  .form-selector-content .select-from {
    width: 100%;
  }

  .transfer-icon { 
    display: none;
  }
}

.wallet-balance {
  text-align: end;
}

.label_balance {
  width: 30%;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1400px) {
  .label_balance {
    width: 40%;
  }
}


@media (max-width: 990px) {
  .label_balance {
    width: 55%;
  }
}

@media (max-width: 767px) {
  .label_balance {
    width: 100%;
  }
}