@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");

@font-face {
  font-family: montserratbold;
  src: url(../css/fonts/Montserrat-Bold.ttf) format("truetype");
}

@font-face {
  font-family: montserratmedium;
  src: url(../css/fonts/Montserrat-Medium.ttf) format("truetype");
}

@font-face {
  font-family: montserrat-bold;
  font-style: normal;
  src: url(../css/fonts/Montserrat-Bold.eot) format("embedded-opentype"), url(../css/fonts/Montserrat-Bold.woff) format("woff"), url(../css/fonts/Montserrat-Bold.svg) format("svg"), url(../css/) format("truetype");
}

@font-face {
  font-family: montserrat-light;
  font-style: normal;
  src: url(../css/fonts/Montserrat-Light.eot) format("embedded-opentype"), url(../css/fonts/Montserrat-Light.woff) format("woff"), url(../css/fonts/Montserrat-Light.svg) format("svg"), url(../css/fonts/Montserrat-Light.ttf) format("truetype");
}

@font-face {
  font-family: montserrat-medium;
  font-style: normal;
  src: url(../css/fonts/Montserrat-Medium.eot) format("embedded-opentype"), url(../css/fonts/Montserrat-Medium.woff) format("woff"), url(../css/fonts/Montserrat-Medium.svg) format("svg"), url(../css/fonts/Montserrat-Medium.ttf) format("truetype");
}

@font-face {
  font-family: montserrat-regular;
  font-style: normal;
  src: url(../css/fonts/Montserrat-Regular.eot) format("embedded-opentype"), url(../css/fonts/Montserrat-Regular.woff) format("woff"), url(../css/fonts/Montserrat-Regular.svg) format("svg"), url(../css/fonts/Montserrat-Regular.ttf) format("truetype");
}

:root {
  --app-height: 100vh;
  --header-height: 70px;
  --bottom-bar-height: 60px;
  --background-footer-color: transparent;
  --text-white-color: #f0f0f0c7;
  --text-theme-color: #F0F0F0;
  /* --text-theme-color: #0e2e26; */
  --text-secondary-color: #ffc32e;
  --text-lightgreen-color: #FFBF29;
  --text-darkgreen-color: #000000;
  --text-grey-color: #6f6f6f;
  --text-lightgrey-color: #8D8D8D;
  --text-success-color: #ffd524;
  --text-warning-color: #ffc32e;
  --text-danger-color: #ff3e3e;
  --background-theme-color: #0e2e26;
  --background-secondary-color: #0d0f0eb5;
  --background-warning-color: #ffc32e;
  --background-lightgreen-color: #ffd524;
  --background-darkgreen-color: #282828;
  --background-green-color: linear-gradient(to right, #fadd56, #feb80c);
  --background-black-color: #313230;
  --background-grey-color: #f5f5f5;
  --background-lightgrey-color: #f5f5f5;
  --background-theme-gradient: linear-gradient(to bottom, #fadd56, #feb80c);
  --border-white-1-color: #ffffff;
  --border-theme-1-color: #1fb3ba;
  --border-light-theme-1-color: #00bf96;
  --border-lightgreen-color: #ffd524;
  --border-darkgreen-color: #6e6e6e;
  --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: #ffd524 !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;
  --background-input: #2D2D2D;
  --backgroud-theme: #2D2D2D;
  --background-boby: #141C1C;
  --backgroud-theme-tab: #FFBF29;
  --color-input: #8D8D8D;
  --theme-color-gray: #aeaeae;
  --theme-color-text: #FFBF29;
  --theme-color-white: #F0F0F0;
  --theme-color-btn: #141C1C;
  --theme-color-btn-outline: #FFBF29;
  --background-btn-copy: linear-gradient(to bottom, #8ff098, #6fd6ff);
  --accordion-background: #72611a;
  --backgroud-dropdown: #282828;
  --backgroud-dropdown-hover: #393319;
  --border-botton: #feb80c;
  --border-botton-gray: #80808061;
  /* --background-btn-theme : linear-gradient(180deg, #F9DF6E 22%, #C68E3A 69%, #DEAC49 100%); */
  --background-btn-theme: linear-gradient(180deg, #E8B246 25%, #E7A646 60%, #D69024 100%);
}

@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: 35px;
    --swiper-pagination-bullet-height: 8px !important;
    --swiper-pagination-bullet-width: 8px !important;
  }
}

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

body {
  font-family: "Poppins", sans-serif !important;
  /* font-family: montserrat !important; */
  min-height: var(--app-height);
  position: relative;
  transition: var(--sidebar-transition);
}

.btn-theme {
  font-size: 15px;
  font-weight: 500;
  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: #000;
  /* background: linear-gradient(to right, #fadd56, #feb80c); */
  background: var(--background-green-color);
  border: 1px solid #ffc32e;
  white-space: nowrap;
  box-shadow: 0 0 5px 1px #feb80c;
}

.input-group-copy .js-copy,
.btn_refer .js-copy {
  position: absolute;
  right: 7px;
  width: 30px;
  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;
  }
}

.btn-theme:focus,
.btn-theme:hover {
  outline: unset;
  box-shadow: unset;
  /* box-shadow: 0 0 8px 1px #feb80c; */
  color: var(--text-theme-color);
}

.btn-theme.btn-disabled-theme:disabled {
  --btn-color: #ffd524;
  background: #72611a;
  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);
  background: var(--background-green-color);
  border: 1px solid #efbe22;
  box-shadow: 0 0 5px 1px #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);
}

#member-center .member-card-info-bottom .btn-warning {
  background: linear-gradient(to bottom, #8ff098, #6fd6ff);
  box-shadow: 0 0 5px 1px #6fd6ff;
  border: unset;
}

.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);
  color: var(--theme-color-btn-outline);
  background: transparent;
  border: 0.3px solid var(--theme-color-text);
}

@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);
  color: var(--theme-color-text);
}

.btn-outline-theme:focus,
.btn-outline-theme:hover {
  border: 1px solid var(--theme-color-text);
  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: 500;
  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(--theme-color-btn);
  background: transparent;
  background: linear-gradient(236deg, #8ff098, #6fd6ff);
  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);
  color: var(--theme-color-text);
  background: unset;
  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);
  color: #000000;
}

.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: #fff6ce;
  background: #72611a;
  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;
}

.register_btn,
.btn_login {
  padding: 13px 20px;
  font-size: 15px;
  box-shadow: none;
  text-transform: uppercase;
}

.btn_login {
  /* background: var(--background-btn-theme); */
  background: linear-gradient(180deg, #747272 0%, #494949 20%, #3B3B3B 100%);
  color: #F0F0F0;
}

.btn_login:hover {
  color: #F0F0F0;
}

.register_btn {
  /* background: linear-gradient(180deg, #8D8D8D 0%, #494949 50%, #3B3B3B 100%); */
  background: var(--background-btn-theme);
  background: linear-gradient(180deg, #E8B246 25%, #E7A646 60%, #D69024 100%);
  border: unset;
  color: #F0F0F0;
}

.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;
}

/* wrap-download */
.wrap-download {
  display: flex;
  flex-flow: row;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 7px 15px;
  height: 65px;
  background: #F0F0F0;
}

/* .wrap-download {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
} */

.wrap-content {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: start;
}

.download_img_close {
  width: 13px;
}

.download_img_close img {
  width: 100%;
  height: 100%;
}

.download-content {
  display: flex;
  gap: 12px;
  align-items: center;
}

.download-img {
  max-width: 45px;
}

.download-img img {
  width: 100%;
}

.download-text {
  display: flex;
  flex-flow: column;
  gap: 1px;
}

.download-text h5 {
  font-size: 12px;
  color: #141C1C;
  margin: 0;
  font-weight: bold;
}

.download-text span {
  font-size: 10px;
  color: #141C1C;
}

.btn-download {
  background: var(--theme-color-btn);
  border-radius: 7px;
  color: var(--theme-color-white);
  padding: 6px 25px;
  text-decoration: none;
  font-size: 12px;
}

/* end */

.header_wrap {
  position: relative;
  height: 50px !important;
  z-index: 998;
}

.header_container {
  max-width: 600px !important;
  margin: auto;
  padding: 0;
}

#header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  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 .header-rotate-icon {
  cursor: pointer;
}

.header_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 17px;
  height: 50px;
  background: var(--theme-color-btn);
}

#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 22px;
  outline: none;
}

#header .header-bar-toggle:focus {
  outline: none;  
  box-shadow: none;
  border: none;
  background: none;
}

#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: 113px;
}

@media (max-width: 1024px) {
  #header .header-logo {
    max-width: 130px;
  }
}

.header_info {
  display: flex;
  align-items: center;
}

.header_info img {
  width: 11px;
}

.title_top {
  color: var(--theme-color-text);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}


#header .icon-btn {
  background-color: #434343;
  backdrop-filter: blur(22px) brightness(1.15);
  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;
}

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

#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: #282828e0;
  background: #282828;
  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: #393319;
  -webkit-backdrop-filter: blur(22px) brightness(1.15);
  backdrop-filter: blur(22px) brightness(1.15);
  color: var(--theme-color-text);
}

#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%;
  gap: 25px;
}

@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-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%);
  background: #434343;
  /* border: 1px solid var(--border-lightgreen-color); */
  border-radius: 8px;
  padding: 0 10px;
  flex: 2;
  height: 90%;
}

@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: #232323ba;
  backdrop-filter: blur(22px) brightness(1.15);
  --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: var(--backgroud-dropdown);
  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: var(--backgroud-dropdown-hover);
  border-radius: var(--border-radius-small);
}

#sidebar .sidebar-language .btn-sidebar-language {
  background: #72611a;
  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: #434343;
  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: linear-gradient(360deg, #c0a11f, #72611a); */
  background: #393319;
}

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

#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(90deg, #4d3612, #332715);
}

#sidebar .menu-grid-list .menu-item .menu-link.pattern-2 {
  background: linear-gradient(90deg, #4b00ad, #160133);
  background: linear-gradient(90deg, #412565, #292037);
}

#sidebar .menu-grid-list .menu-item .menu-link.pattern-3 {
  background: linear-gradient(90deg, #85331d, #3f221a);
}

#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: 2px;
  background-color: #6e6e6e;
}

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

#side-menu ul li a.active,
#side-menu ul li:hover a {
  color: var(--theme-color-text);
}

#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-input);
  border: unset;
}

.input-group .input-group-text img {
  width: 21px;
  height: 21px;
  -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-input);
  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: 13px;
    margin-bottom: 5px;
  }
}

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

.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;
  background: var(--background-input);
  color: #aeaeae;
  color: var(--theme-color-text);
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 13px 20px;
  border-radius: 10px;
  border: unset !important;
}

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

.form-control:focus {
  background: var(--background-input) !important;
  outline: unset;
  box-shadow: unset;
  color: var(--theme-color-text);
}

.form-control#account_name:focus,
.form-control#bankaccber_number:focus {
  background: #2D2D2D !important;
}

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

.form-control:read-only {
  background: var(--background-input);
  color: var(--color-input);
  font-size: 14px;
  font-weight: 300;
}

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

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

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

.input-group-copy input {
  background: #2D2D2D !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: var(--background-input);
  color: #aeaeae;
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 8px 20px;
  border-radius: 8px;
  width: 100%;
  text-align: left;
  border: unset;
  display: flex;
  align-items: center;
  gap: 7px;
}

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

select.dropdown-input {
  padding: 13px 15px;
}

.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: #2d2d2d;
  width: 100%;
  max-height: 323px;
  overflow: scroll;
}

.dropdown-input+.dropdown-menu .dropdown-item {
  padding: 10px 20px;
  font-size: 13px;
  color: #ebebeb;
  display: flex;
  align-items: center;
  gap: 7px;
}

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

.dropdown-input+.dropdown-menu.slots-nav .dropdown-item img {
  filter: grayscale(100%);
}

.dropdown-input+.dropdown-menu.slots-nav .dropdown-item.active img {
  filter: grayscale(0);
}

.dropdown-input+.dropdown-menu .dropdown-item:hover {
  background: #3b3620;
}

.form-select {
  position: relative;
  background-color: #ffffff;
  color: var(--color-input);
  font-size: 14px;
  outline: unset !important;
  box-shadow: unset !important;
  padding: 12px 20px;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-image: url(../img/global/arrow-down.png);
  background-size: 13px 7px;
}

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

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

.form-select:-moz-read-only {
  background-color: #ffffff;
  color: var(--color-input);
  font-size: 14px;
  font-weight: 300;
  border: unset;
}

.form-select:read-only {
  background-color: var(--background-input);
  color: var(--color-input);
  color: #fff;
  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: 6px;
  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: 10px;
}

.breadcrumb-wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 20px;
  background: #2a2a29;
  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: #aeaeae;
  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);
  text-decoration: none;
}

@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;
}

/* @media (min-width: 1200px) {
  .swiper-game .swiper-slide {
    width: 186.692px !important;
    margin-right: 15px;
  }
  .swiper-game-2 .swiper-slide{
    width: 186.692px !important;
    margin-right: 15px;
  }
}

@media (max-width: 1024px) {
  .swiper-game .swiper-slide {
    width: 196.333px !important;
    margin-right: 15px;
  }
  .swiper-game-2 .swiper-slide{
    width: 196.333px !important;
    margin-right: 15px;
  }
}

@media (max-width: 768px) {
  .swiper-game .swiper-slide {
    width: 93.8571px !important;
    margin-right: 15px;
  }
  .swiper-game-2 .swiper-slide{
    width: 93.8571px !important;
    margin-right: 15px;
  }
  
}

@media (max-width: 480px) {
  .swiper-game .swiper-slide {
    width: 93.8571px !important;
    margin-right: 15px;
  }
  .swiper-game-2 .swiper-slide{
    width: 173.4px !important;
    margin-right: 15px;
  }
}

@media (max-width: 320px) {
  .swiper-game .swiper-slide {
    width: 93.8571px !important;
    margin-right: 15px;
  }
  .swiper-game-2 .swiper-slide{
    width: 173.4px !important;
    margin-right: 15px;
  }
} */

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

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

.btn-swiper-more {
  background: linear-gradient(to bottom, #434343, #434343);
  backdrop-filter: blur(22px) brightness(1.15);
  border: unset;
  border-radius: 4px;
  color: var(--text-white-color);
  padding: 5px 20px;
  font-size: 12px;
}

.swiper-btn-rounded {
  background: #434343b3;
  backdrop-filter: blur(22px) brightness(1.15);
  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);
  background: #434343;
  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:not(:disabled) {
  background: #72611a;
}

.swiper-btn.active {
  background: #72611a;
}

.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(--theme-color-text);
}

.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: #000000;
  background: #141d1c;
}

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

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

@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;
  gap: 7px;
}

#footer .footer-group p {
  color: #9d9b9bde;
  font-weight: 300;
  font-size: 10px;
  line-height: 17px;
  text-align: start;
}

#footer .responsible-gaming .footer-group p {
  text-align: center;
  font-size: 11px;
  color: #d6d6d678;
}

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

@media (max-width: 1024px) {
  #footer .respon-game {
    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: 21px;
  grid-template-areas:
    /* ". z z z z z z z z z z z z z z ."
    ". 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"
    "x x x x x x x x x x x x x x x x"
    ". e e e e . . f f . g . . h h h"
    ". e e e e . . f f . g . . h h h" */

    "z z z z z z"
    /* "x x x x x x" 
    "b b b b b b" 
    "c c c c c c" 
    "y y y y y y"  */
    "e e e a a a"
    "g g g h h h"
    "d d d f f f"
    "y y y y y y"
    "i i i i i i";
  grid-template-columns: repeat(6, 1fr);
  padding: 0 17px;
}

@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-areas:
      "z z z z z z"
      /* "x x x x x x" 
      "b b b b b b" 
      "c c c c c c" 
      "y y y y y y"  */
      "e e e a a a"
      "g g g h h h"
      "d d d f f f"
      "y y y y y y"
      "i i i i i i";
    grid-template-columns: repeat(6, 1fr);
    row-gap: 15px;
  }
}

#footer .footer-wrapper h2 {
  font-size: 12px;
  color: #f0f0f0bd;
  font-weight: 400 !important;
  text-align: start;
}

#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.social-network {
  grid-area: z;
  margin-bottom: 20px;
  display: block !important;
}

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

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

#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;
}

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

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

#footer .footer-wrapper .footer-content.follow-us,
#footer .footer-wrapper .footer-content.affliate {
  grid-area: f;
  display: none;
}

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

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

#footer .footer-wrapper .footer-content.responsible-gaming {
  grid-area: i;
  display: flex;
  justify-content: center;
  align-items: center;
}


@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;
}

@media (max-width: 767px) {

  #footer .footer-wrapper .footer-content.games,
  #footer .footer-wrapper .footer-content.info {
    display: none;
  }
}

@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; */
    height: 19px;
  }
}

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

#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: 24px;
  }
}

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

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

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

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

#footer .footer-wrapper .footer-about-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 22px;
  max-width: 300px;
  /* margin-bottom: 100px; */
}

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

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

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

@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: 7px 7px;
}

#footer .footer-wrapper ul.respon-game {
  gap: 7px 17px;
}

@media (max-width: 1024px) {
  #footer .footer-wrapper ul.payment-foot {
    gap: 15px 10px;
    gap: 20px 10px;
  }
}

#footer .footer-wrapper ul.social {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#footer .footer-wrapper ul.social li img {
  width: 100%;
}

#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);
  background: #161616;
  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;
  padding-top: 60px !important;
}

#modal-register-congratulations .modal-body,
.modal-auth .modal-body {
  padding-top: 40px !important;
}

@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;
}

@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);
  color: #ffffff;
  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);
  color: var(--theme-color-text);
  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(--theme-color-text);
  display: inline-block;
}

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

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

@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: 500;
}

@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;
  }
}

.done-img {
  position: relative;
}

.done-img img {
  position: relative;
  z-index: 2;
  filter: drop-shadow(1px 10px 30px #8ff098);
}

.done-img::after {
  width: 178px;
  height: 178px;
  border-radius: 100%;
  border: 20px #8adfdc75 solid;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  animation: anime-zoom-in 1s infinite alternate;
  z-index: 1;
}

.done-img::before {
  width: 218px;
  height: 218px;
  border-radius: 100%;
  border: 20px #b6dccc29 solid;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  animation: anime-zoom-in 1s infinite alternate;
  z-index: 1;
}

@media (max-width: 1199px) {
  .done-img::after {
    width: 141px;
    height: 141px;
  }

  .done-img::before {
    width: 181px;
    height: 181px;
  }
}

@keyframes anime-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
  }
}

#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;
  }
} */

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

  .done-img::after {
    width: 141px;
    height: 141px;
  }

  .done-img::before {
    width: 181px;
    height: 181px;
  }
}

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

.modal-transfer-credit .card.card-account-copy {
  padding: 20px;
  background: var(--background-input);
}

.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: #2D2D2D;
  color: #F0F0F0;
  font-size: 16px;
  /* font-weight: 500; */
  clip-path: rect(0px 100% 100% 0px round 15px 15px 0px 0px);
}

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

.table thead th {
  padding: 13px 15px;
  white-space: nowrap;
  font-weight: 400;
}

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

.section-history .table thead th {
  text-align: center;
}

.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);
  white-space: nowrap;
}

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

.table tbody tr {
  position: relative;
  font-size: 12px;
}

.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;
  background: #ffffff12;
}

.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: var(--background-input);
  background: none;
}

.table tfoot td,
.table tfoot th {
  padding: 15px 0px;
  font-size: 13px;
}

.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: space-between;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 0;
  right: 0;
  /* width: 100%; */
  margin: 0 17px;
  margin-top: 40px;
}

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

.dataTables_paginate span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fff;
}

.dataTables_paginate .paginate_button {
  background: none;
  color: var(--text-white-color);
  font-size: 11px;
  font-weight: 500;
  border-radius: 5px;
  text-decoration: none;
  padding: 4px 10px;
}

.dataTables_paginate .paginate_button.current {
  background: var(--background-green-color);
  color: #000;
}

.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: 11px;
  }
}

.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);
}

.bg_announment {
  background: #252621;
  padding: 10px 16px;
}

.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;
}

/* afer_login */
.auth-balance-wrapper {
  padding: 0 10px;
}

.info_section {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 9px;
}

.user_auth {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 7px;
}

.user_logo {
  position: relative;
}

.user_logo a {
  text-decoration: none;
  color: #fff;
}

.user_logo .total-notification {
  padding: 5px;
  background: red;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 10px;
  top: -4px;
  right: -6px;
}

.user_auth img {
  width: 30px;
  height: 30px;
}

.user_auth h3 {
  color: #e5e5e5;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

.user_header {
  display: flex;
  flex-flow: column;
  gap: 4px;
}

.user_header h3 {
  color: var(--text-theme-color);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  text-transform: capitalize;
}

.vip_status_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.vip_status_wrap img {
  width: 15px !important;
  height: 15px;
}

.vip_status_wrap span {
  font-size: 11px;
  color: #d6d6d673;
}

.vip_status {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  background: #353535;
  padding: 1px 10px;
  gap: 3px;
}

.vip_status img {
  width: 12px;
  height: 12px;
}

.vip_status span {
  font-size: 11px;
  color: #a3a3a3;
}

.auth-actions {
  display: flex;
  flex-flow: row;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 5px !important;
}

@media (max-width: 400px) {
  .auth-actions {
    gap: 5px;
  }
}

.auth-actions a {
  text-decoration: none;
  text-decoration: none;
  display: flex;
  flex-flow: column;
  gap: 3px;
}

.auth-actions a:last-of-type {
  display: none;
}

.auth-balance-item {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  gap: 7px;
  width: 42%;
}

.auth_link {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: end;
}

.auth-balance-item h6 {
  font-size: 12px;
  color: #777d7d;
}

.auth-balance-item h6 span {
  color: #FFBF29;
}

@media (max-width: 390px) {
  .auth-balance-item h6 {
    font-size: 11px;
  }
}

.user_balance {
  background: #141d1c;
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 13px;
}

.user_balance h4 {
  font-size: 14px;
  color: #c2c6c7;
}

.img_refresh {
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
}

.img_refresh img {
  width: 100%;
  height: 100%;
}

.auth-action span {
  font-size: 11px;
  color: #ffffffbf;
}

.transaction-icon {
  text-align: center;
}

.transaction-icon img {
  width: 25px;
}

@media (max-width: 360px) {
  .auth-action span {
    font-size: 10px;
  }

  .transaction-icon img {
    width: 22px;
  }
}

/* end */

.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(--theme-color-white);
}

.swiper-categories-2-wrapper .categories-item {
  background: #232323;
  border-radius: 8px;
  padding: 9px 23px;
  color: #8e8e8e;
  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: #393319;
  color: var(--text-white-color);
  color: var(--theme-color-text);
}

.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;
  padding: 2px;
}

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

.swiper-categories-1-wrapper .categories-item[data-bs-target="#number-tab"] {
  display: none;
}

.menu_home {
  background: #000;
  border-radius: 46px;
  margin: 0 12px;
  margin-top: 10px;
}

.menu_home .swiper-categories-1 .swiper-wrapper {
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center;
}

.swiper-categories-1-wrapper .categories-item {
  padding: 4px 4px;
  font-weight: 300;
}

.swiper-categories-1-wrapper .menu_tab .categories-item.active {
  background: #2D2D2D;
  /* background: linear-gradient(180deg,#f9d172 25%, #e9a13b 60%, #e9a13b 100%); */
  background: linear-gradient(180deg, #E8B246 25%, #E7A646 60%, #D69024 100%);
  background: #3d3f3e;
  border-radius: 25px;
  padding: 6px 15px;
  color: #fff;
  font-weight: 400;
}

.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: 12px;
  }
}

.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.active .icon-games {
  width: 30px;
  height: 26px;
}

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

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

.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.active .icon-casino {
  background: url(../img/categories/tabs/live-casino.png) center no-repeat;
  background-size: 100%;
}


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

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

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

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

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

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

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

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

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

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

/* slot_provider */
.swiper-categories-2-wrapper .provider-item {
  background: #232323;
  border-radius: 8px;
  color: #8e8e8e;
  transition: all ease 0.3s;
  width: 149px !important;
  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: #393319;
  color: var(--text-white-color);
  color: var(--theme-color-text);
}

.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 .swiper-slide:last-of-type {
  margin: 0 !important;
}

.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;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .game-filters .game-actions {
    gap: 10px;
  }
}

.game-filters .game-actions {
  padding-bottom: 10px;
  border-bottom: 2px solid #80808012;
}

.game-filters .game-actions .header-dropdown-wrapper {
  width: 57%;
}

.game-filters .game-actions .dropdown-input {
  padding: 4px 20px !important;
}

.game-filters .game-actions .dropdown-input .slot_provider {
  display: flex;
  align-items: center;
  gap: 15px;
}

.game-filters .game-actions .dropdown-input .slot_provider span {
  font-size: 13px !important;
  color: var(--text-white-color);
  font-weight: 400;
  text-transform: capitalize;
}

.game-filters .game-actions .dropdown-input+.dropdown-menu {
  max-height: 474px;
  min-width: 200px;
}

.game-filters .game-actions .dropdown-input+.dropdown-menu::-webkit-scrollbar {
  width: 1px;
  height: 0px;
}

.game-filters .game-actions .dropdown-input+.dropdown-menu .dropdown-item {
  padding: 7px 20px;
  font-size: 12px;
}

.game-filters .game-actions .dropdown-input+.dropdown-menu .dropdown-item.active {
  background: #ffbf2957;
}

.sort_slots {
  padding: 10px 0px;
}

.sort_slots .slot-nav-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.sort_slots .slot-nav-title.nav-sorts {
  gap: 52px;
}

.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: #2D2D2D;
  border-radius: 30px;
  color: #FFBF29;
  font-size: 11px;
  font-weight: 600;
}

.sort_slots .slot-nav-title a:hover {
  color: #FFBF29;
}

/*  */

.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;
  width: 40%;
  background: #2D2D2D;
  border-radius: 8px;
}

.game-filters .search-input-wrapper input[type=text] {
  background: #2D2D2D;
  border-radius: 8px;
  border: unset;
  outline: unset;
  padding: 0 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-right: 11px;
}

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

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

.cloes_explore {
  display: none;
}

.slot-foot {
  text-align: center;
  color: #F0F0F0;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #555;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.load_more_button img {
  width: 35px;
}

.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;
  border: none;
}

.game-filters .dropdown-wrapper .btn-game-filter.btn-filter {
  display: none;
}


/* @media (max-width: 767px) {
  .game-filters .dropdown-wrapper .btn-game-filter.btn-filter {
    display: block;
  }
} */

@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: 1px;
    width: 100%;
  }

  .explore_slots {
    width: 100%;
  }

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

  .cloes_explore {
    display: block;
  }
}

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

.game-filters .dropdown-wrapper .btn-game-filter img {
  max-width: 50px;
  height: 50px;
  -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: 45px;
    height: 45px;
  }
}

.game-filters .dropdown-wrapper .filter-selection {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  position: relative;
  /* 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: #393319;
  border-radius: var(--border-radius-small);
}

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

.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 #828282;
}

.card-group-wrapper .card .card-header h6 {
  color: var(--theme-color-text);
  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;
}

.card-group-wrapper .card .card-body {
  color: #fff;
}

ul.nav-pills {
  display: flex;
  flex-flow: row nowrap;
  flex-wrap: nowrap;
  justify-content: space-between;
  justify-content: start;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}



/* @media (max-width: 767px) {
  ul.nav-pills {
    gap: 5px;
  }
}

@media (max-width: 767px) {
  ul.nav-pills {
    gap: 5px;
  }
}

@media (max-width: 390px) {
  ul.nav-pills {
    gap: 16px;
  }
}

@media (max-width: 375px) {
  ul.nav-pills {
    gap: 9px;
  }
} */


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: #aeaeae;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
  white-space: nowrap;
  gap: 3px;
  width: 100%;
  justify-content: center;
}

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: 18px;
    height: 20px;
  }
}

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

@media (max-width: 400px) {
  ul.nav-pills .nav-item .nav-link {
    padding: 8px 9px;
    font-size: 10px;
    border-radius: 8px;
  }
}

ul.nav-pills .nav-item .nav-link.active {
  background: var(--background-btn-theme);
  color: var(--theme-color-btn);
  font-weight: 600;
}

.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;
  padding: 0 20px;
}

#profile .section-important-tips {
  padding: 0;
}

.section-important-tips .section-important-title h6 {
  color: var(--text-lightgrey-color);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 15px;
  padding: 7px 5px;
}

.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: 11px;
  }
}

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

.section-content {
  border: 1px solid gray;
  padding: 15px;
  border-radius: 7px;
}

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

.button-amount-group .btn-amount {
  padding: 7px 0;
  border: unset;
  outline: unset;
  box-shadow: unset;
  text-align: center;
  transition: all 0.3s;
  background: var(--background-input);
  background: transparent;
  color: var(--text-white-color);
  border-radius: 10px;
  border: 2px solid #494949;
  font-size: 13px;
}

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

.accordion:not(.footer-accordion) .accordion-item {
  /* background-color: var(--accordion-bg-color, var(--background-darkgreen-color)); */
  background: var(--background-darkgreen-color);
  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(--theme-color-text);
  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, #434343);
  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-header {
  margin-top: 10px;
}

.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: 60px;
  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: 22px;
  height: 22px;
  margin: 0 auto;
  display: block;
}

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

#tabbar .tabbar-item.active span {
  color: #ffc322;
}

#home {
  /* padding-top: calc(var(--header-height) + 30px); */
  max-width: 600px;
  margin: auto;
  /* transform: translateY(65px); */
}

#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-banner .swiper-pagination {
  display: none;
}

#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); */
  border-radius: 20px;
  /* margin: 5px 0px; */
  gap: 10px;
  text-decoration: none;
}

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

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

#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: 10px;
  font-weight: 400;
  line-height: 18px;
  display: inline-block;
  color: #d6d6d6d4;
  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); */
  position: relative;
}

#profile .input-group .input-group-text {
  background: var(--background-input);
  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,
#change_password .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: 18px;
}

#change_password {
  /* padding-top: calc(var(--header-height)); */
  position: relative;
}

#change_password .input-password .btn-password {
  position: absolute;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px;
  right: 20px;
  border: 0px;
  max-width: 18px;
}

#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));
  /* padding-bottom: 100px; */
  position: relative;
  max-width: 600px;
  margin: auto;
}

@media (max-width: 1199px) {
  #bank {
    padding-top: calc(var(--header-height));
    /* padding-bottom: 50px; */
  }
}

#deposit {
  padding-top: calc(var(--header-height));
  padding-top: 15px;
  padding-bottom: 100px;
  position: relative;
  max-width: 600px;
  margin: auto;
}

@media (max-width: 1199px) {
  #deposit {
    /* padding-top: calc(var(--header-height) + 20px); */
    padding-bottom: 140px;
  }
}

#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));
  padding-bottom: 100px;
  position: relative;
  max-width: 600px;
  margin: auto;
}

@media (max-width: 1199px) {
  #history {
    padding-top: calc(var(--header-height));
    padding-bottom: 120px;
  }
}

#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 .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;
}

#history .date_input_text {
  color: var(--text-lightgrey-color);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

#withdrawal,
#withdrawal_noties {
  padding-top: calc(var(--header-height) - 50px);
  padding-bottom: 100px;
  position: relative;
  max-width: 600px;
  margin: auto;
}

@media (max-width: 1199px) {

  #withdrawal,
  #withdrawal_noties {
    padding-top: calc(var(--header-height));
  }
}

@media (max-width: 767px) {
  #withdrawal {
    padding-bottom: 10px;
  }

  #withdrawal_noties {
    padding-bottom: 80px;
  }
}

#referral {
  padding-bottom: 100px;
  position: relative;
  max-width: 600px;
  margin: auto;
}

@media (max-width: 1199px) {
  #referral {
    padding-bottom: 130px
  }
}

#referral ul.nav-pills {
  background: #1e1e1c;
  border-bottom: 1px solid #80808029;
}

#referral ul.nav-pills .nav-item .nav-link {
  border-radius: 0;
  justify-content: center;
  font-weight: 300;
}

@media (max-width: 400px) {
  #referral ul.nav-pills .nav-item .nav-link {
    font-size: 12px;
  }
}

#referral ul.nav-pills .nav-item .nav-link.active {
  background: none;
  color: var(--theme-color-text);
  border-bottom: 1px solid var(--theme-color-text);
}

#referral input {
  text-align: center;
  background: var(--background-boby);
}

#referral .referral-commission {
  padding: 0px 7px;
  margin-top: 12px;
}

#referral .referral-commission .available-rewards-body .btn_theme {
  text-transform: capitalize;
  font-size: 14px;
  padding: 10px 15px !important;
}

#referral .referral-commission-rewards {
  background: url(../img/referral/referral_banner.png) no-repeat center;
  background-size: 100% 100%;
  border-radius: var(--border-radius-standard);
  position: relative;
  padding: 23px;
  padding-left: 30px;
}

#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: 15px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards .available-rewards {
    gap: 15px;
  }
}

#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: 13px;
  font-weight: 300;
  color: var(--text-white-color);
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards .available-rewards .available-rewards-header h6 {
    font-size: 12px;
  }
}

#referral .referral-commission-rewards .available-rewards .available-rewards-header h5 {
  font-size: 25px;
  font-weight: 400;
  color: var(--text-theme-color);
}

@media (max-width: 767px) {
  #referral .referral-commission-rewards .available-rewards .available-rewards-header h5 {
    font-size: 26px;
  }
}

#referral .table-mb-100 {
  margin-bottom: 100px !important;
}

#referral .hr {
  color: var(--text-white-color);
}



#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 {
  margin-top: 15px;
}

#referral .referral-list-wrapper .accordion-card-header {
  margin-bottom: 10px;
  background: #2D2D2D;
  padding: 10px 20px;
}

#referral .referral-list-wrapper .accordion-card-header h6 {
  font-size: 14px;
}

#referral .referral-list .referral-list-header {
  margin-bottom: 15px;
  background: #2D2D2D;
  padding: 10px 20px;
}

#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 .referral-list-body {
  padding: 5px 30px;
}

@media (max-width: 375px) {
  #referral .referral-list .referral-list-body {
    padding: 5px 20px;
  }
}

#referral .accordion-card-wrapper .accordion-card-body .accordion {
  gap: 0px
}

#referral .accordion-card-wrapper .accordion-card-body {
  padding: 0 20px;
}

#referral .accordion-card-wrapper .accordion-card-body .accordion .accordion-item {
  border-bottom: 1px solid #80808026;
  clip-path: none;
  padding: 17px 10px;
  background: transparent;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

}

#referral .accordion-card-wrapper .accordion-card-body .accordion .accordion-item .accordion-button {
  background: #141C1C;
  color: #d6d6d6ab;
  font-size: 13px;
  padding: 0px;
}

#referral .accordion-card-wrapper .accordion-card-body .accordion .accordion-item .accordion-button::after {
  background-image: url(../img/referral/drop_down_on.png);
}

#referral .referral-list .referral-list-body .list_referrl_item {
  padding: 0 15px;
}

#referral .accordion-card-wrapper .accordion-card-body .accordion .accordion-item .accordion-body {
  padding: 15px 0;
  color: #d6d6d6ab;
}

.accordion-item .accordion-collapse .accordion-body ul.accordion-referral {
  list-style-type: decimal;
}

#referral .accordion-collapse .accordion-body ul.accordion-referral {
  list-style-type: none;
  padding-left: 0;
}

#referral .accordion-collapse .accordion-body ul.accordion-referral li {
  padding: 7px 0;
  font-size: 11px;
}

/* end */

.icon-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #D6D6D6;
  font-size: 13px;
}

.icon-group img {
  width: 25px;
}

.list_referrl_item span {
  font-size: 14px;
}

@media (max-width: 400px) {
  .icon-group {
    font-size: 12px;
  }

  .list_referrl_item span {
    font-size: 12px;
  }
}

/* end */
#referral .referral-list .list-group {
  border-radius: unset;
  gap: 13px;
}

#referral .referral-list .list-group .hr {
  background-color: rgb(240 240 240 / 19%);
}

#referral .referral-list .list-group .list-group-item {
  background: var(--background-black-color);
  border-radius: var(--border-radius-small);
  font-size: 15px;
  color: var(--color-input);
  padding: 13px 20px;
}

@media (max-width: 767px) {
  #referral .referral-list .list-group .list-group-item {
    padding: 10px 15px;
    font-size: 13px;
  }
}

#referral .referral-list .list-group .list-group-item span {
  font-weight: 500 !important;
}

#referral .referral-list.pattern-2 .list-group {
  border-radius: unset;
  gap: 6px;
}

#referral .referral-list.pattern-2 .list-group .list-group-item {
  background: var(--background-black-color);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 7px 7px;
  padding-right: 20px;
  padding-right: 30px;
  border-radius: 50px;
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item {
    padding: 7px 7px;
    padding-right: 18px;
  }
}

#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: 50px;
  width: 100%;
  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-white-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: 12px;
  font-weight: 300;
  color: var(--text-lightgrey-color);
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item .member-info-wrapper .member-info p {
    font-size: 11px;
  }
}

#referral .referral-list.pattern-2 .list-group .list-group-item .member-prize h6 {
  font-size: 14px;
  font-weight: 400;
  color: var(--theme-color-text);
}

@media (max-width: 767px) {
  #referral .referral-list.pattern-2 .list-group .list-group-item .member-prize h6 {
    font-size: 14px;
  }
}

#referral .shares-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
}

#referral .share-with-friends {
  /* background: var(--background-darkgreen-color); */
  border-radius: var(--card-border-radius);
  padding: 0px 17px;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

@media (max-width: 767px) {
  #referral .share-with-friends {
    padding: 0px 17px;
  }
}

.share-box {
  background: var(--backgroud-theme);
  border-radius: 10px;
  padding: 20px 20px;
}

#referral .share-with-friends h1 {
  text-align: center;
  font-size: 14px;
  color: var(--theme-color-white);
  padding: 8px 0
}

@media (max-width: 767px) {
  #referral .share-with-friends h1 {
    font-size: 14px;
  }
}

#referral .share-with-friends p {
  font-size: 14px;
  /* font-weight: 300; */
  color: var(--text-lightgrey-color);
  text-align: center;
}

#referral .share-with-friends .btn-referral-group {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  /* max-width: 263px; */
  width: 100%;
  margin: 0 auto;
  margin-top: 5px;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  #referral .share-with-friends .btn-referral-group {
    max-width: 100%;
  }
}

#referral .share-with-friends .share-btn-wrap {
  width: 100%;
  gap: 10px;
}

#referral .share-with-friends button {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: 263px;
  padding: 13px 20px !important;
  border: 1px solid;
  border-color: unset;
  font-size: 15px;
}

#referral .share-with-friends button.js-copy {
  background: transparent;
  border: 1px solid #D6D6D6;
  color: #D6D6D6;
}

#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: 30px;
}

#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: 12px;
}

#referral .social-media-wrapper .social-media-shares .btn-share {
  background: transparent;
  border: 1px solid #746116;
  outline: unset;
  box-shadow: unset;
  padding: 0 !important;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#referral .social-media-wrapper .social-media-shares .btn-share {
  width: 34px;
  height: 34px;
}

#referral .social-media-wrapper .social-media-shares .btn-share img {
  width: 16px;
  height: 16px;
}

.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: 10px; */
  padding-bottom: 100px;
  position: relative;
  --swiper-vip-item-width: 500px;
  max-width: 600px;
  margin: auto;
}

@media (max-width: 1199px) {
  #vip {
    --swiper-vip-item-width: 300px;
  }
}

#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;
  padding-right: 45px;
}

#vip .vip-personal-info .vip-info-wrapper .vip-top {
  display: flex;
  flex-flow: row nowrap;
  gap: 50px;
  align-items: flex-start;
  justify-content: space-between;
}

#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: 22px;
  /* font-weight: 500; */
  color: var(--text-lightgreen-color);
  color: var(--theme-color-text);
  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;
  display: none;
}

#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-vips .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;
  display: none;
}

#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_wrapper {
  background: url(../img/vip/bg.png);
  background-position: top;
  background-size: 100%;
} */

.vip_user_info {
  padding: 10px 32px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vip_user_info img {
  width: 37px;
}

.vip_name_wrap h3 {
  font-size: 15px;
  color: #F0F0F0;
  text-transform: capitalize;
}

.vip_state {
  background: #2D2D2D;
  border-radius: 15px;
  padding: 0px 10px;
}

.vip_state img {
  width: 14px;
}

.vip_state span {
  font-size: 11px;
  color: #8D8D8D;
}


.vip_card_content {
  padding: 0 32px;
  padding-top: 10px;
}

#vip .vip-level-wrapper {
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  height: 1px;
  background: #8D8D8D;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper {
  display: flex;
  flex-flow: row nowrap;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  justify-content: space-between;
  align-items: center;
  height: 1px;
  width: 100%;
  padding: 0 40px;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres::before {
  content: "";
  position: absolute;
  left: 0%;
  right: 0%;
  height: 1px;
  z-index: -1;
  top: 0;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres.active::before {
  background: #FFBF29;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres.active.bronze::before {
  width: 10%;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres.active.silver::before {
  width: 28%;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres.active.gold::before {
  width: 40%;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres.active.platinum::before {
  width: 58%;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres.active.diamond::before {
  width: 70%;
}

#vip .vip-level-wrapper .vip-level-inner-wrapper .vip_progres.active.diamond-king::before {
  width: 100%;
}

#vip .vip-level-wrapper .vip_progres .vip-level {
  text-align: center;
  display: flex;
  align-items: center;
}

#vip .vip-level-wrapper .vip_progres .vip-level .vip-level-dot {
  background: #8D8D8D;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-block;
}

#vip .vip-level-wrapper .vip_progres .vip-level .vip-level-dot.checked {
  background: linear-gradient(to bottom, #E8C154, #C68E3A);
}

#vip .vip-level-wrapper .vip_progres.active .vip-level .vip-level-dot {
  background: linear-gradient(to bottom, #E8C154, #C68E3A);
  --outline-opacity: 0.35;
  outline: 5px solid rgba(252, 186, 3, var(--outline-opacity));
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    --outline-opacity: 0.35;
    outline-width: 5px;
  }

  50% {
    --outline-opacity: 0.15;
    outline-width: 4px;
  }

  100% {
    --outline-opacity: 0.35;
    outline-width: 5px;
  }
}

/* vip_tabs */
.vip_level_tab {
  margin-bottom: 25px;
}

.vip_level_list {
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: end;
  border-bottom: 2px solid #5454541f;
  padding: 0 17px;
}

.vip_level_item {
  width: 60px;
}

.vip_level_item.active {
  width: 82px;
}

.vip_level_item img {
  width: 100%;
}

#vip .vip-description {
  background: #2D2D2D;
  border-radius: 10px;
  margin: 0 17px;
}

#vip .card-groups .vip-header {
  color: var(--theme-color-text);
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
}

@media (max-width: 1199px) {
  #vip .card-groups .vip-header h6 {
    font-size: 18px;
  }
}

.vip-description .vip-level-detail:not(.active) {
  display: none;
}

#vip .card-groups .vip-content {
  border-bottom: 2px solid #8080801c;
  padding: 11px 10px;
  margin: 0;
}

#vip .card-groups .vip-content:last-of-type {
  border: none;
}

#vip .card-groups .vip-content .vip-benefits-list {
  padding: 0;
  padding-top: 7px;
  margin: 0;
}

#vip .card-groups .vip-content .vip-benefits-list li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

#vip .card-groups .card-body .vip-label {
  font-size: 12px;
  font-weight: 300;
  color: #f0f0f096;
  margin-bottom: 0px;
}

#vip .card-groups .card-body .vip-sub {
  font-size: 12px;
  font-weight: 300;
  color: var(--theme-color-text);
  margin-bottom: 0px;
}

#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 .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: 11px;
  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: 11px;
  }
}

#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));
  padding-bottom: 100px;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  #promotion {
    /* padding-top: calc(var(--header-height)); */
    padding-bottom: 150px;
    padding-top: 0px;
  }
}

#promotion .swiper-promotion-tabs {
  border-bottom: 1px solid #80808021;
  padding-bottom: 4px;
}

#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 {
  border-radius: 20px;
  text-decoration: none;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 7px 10px;
  gap: 13px;
  color: #aeaeae;
  transition: all ease 0.3s;
  max-width: var(--swiper-category-item-width);
  font-weight: 400;
  font-size: 16px;
  border: unset;
  outline: unset;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  #promotion .swiper-promotion-tabs .swiper-slide .btn-tab {
    padding: 5px 2px;
    font-size: 10px;
  }
}

#promotion .swiper-promotion-tabs .swiper-slide .btn-tab.active,
#promotion .swiper-promotion-tabs .swiper-slide .btn-tab:hover {
  color: #252522;
  background: #F0F0F0;
  border-radius: 20px;
  padding: 5px 15px;
}

#promotion .promotion-content {
  display: grid;
  grid-template-columns: repeat(1, 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;
  border-radius: 8px;
}

#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: 16px;
  font-weight: 500;
  color: var(--text-white-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#promotion .promotion-content .promotion-item .promotion-detail h5 {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-lightgrey-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  #promotion .promotion-content .promotion-item .promotion-detail h6 {
    font-size: 15px;
  }
}

#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 {
  padding: 0 5px;
}

@media (max-width: 767px) {
  #promotion .tabs-content.tabs-promotion {
    position: sticky;
    top: 50px;
    background: var(--theme-color-btn);
    z-index: 99;
  }
}

#promotion .tabs-content .tab-content {
  display: none;
}

#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);
  color: var(--theme-color-text);
}

@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: #72611a;
  --progress-bar-bg-color: var(--theme-color-text);
  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);
  color: var(--theme-color-text);
  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);
  background: #000000;
}

#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: 120px;
  padding-bottom: 30px;
}

@media (max-width: 768px) {
  #games-menu {
    padding-top: 70px;
    padding-bottom: 10px;
  }
}

.slots_menu_wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 100px;
}

#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-bottom: 50px; */
  }
}

#games-menu .games-wrapper,
#games .games-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  grid-gap: 50px 10px;
  margin-top: 10px;
}

#games .games-wrapper.casino-lobby {
  grid-gap: 12px;
}

@media (max-width: 1600px) {

  #games-menu .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1199px) {

  #games-menu .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 992px) {

  #games-menu .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {

  #games-menu .games-wrapper,
  #games .games-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

#games .games-banner-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 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 {
  position: relative;
  cursor: pointer;
  background: unset;
  border: unset;
  outline: unset;
  padding: 0px;
  /* height: 160px;
  height: 215px */
  min-height: 125px;
  min-height: 100px;
}

#games .img-game .img-game-actions {
  position: absolute;
  max-width: 150px;
  max-width: 90px;
  max-width: 83px;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  z-index: 5;
  right: 190px;
  top: 50%;
  transform: translate(10px, 10%);
}

@media (max-width: 1199px) {
  #games .img-game .img-game-actions {
    right: 105px;
    top: 50%;
    gap: 10px;
    transform: translate(10px, 10%);
  }
}

#games .img-game-actions.desktop-tab {
  transform: translate(10px, -50%) !important;
  right: 110px;
}

@media (max-width: 360px) {
  #games .img-game .img-game-actions {
    right: 92px;
  }

  #games .img-game .img-game-actions.desktop-tab {
    right: 100px !important;
  }
}

#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;
}

#games-menu #all_slots .img-game img {
  /* height: 175px !important; */
  border-radius: 10px 10px 0 0;
  border-radius: 8px;
}

.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);
  background: #363636; */
  border-radius: 0 0 10px 10px;
}

.slots_name span {
  color: var(--text-lightgrey-color);
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
}

@media (max-width: 767px) {
  .slots_name span {
    font-size: 10px;
  }
}

#games-menu .img-game img {
  margin: 0;
  max-height: unset;
  /* width: 100%; */
  height: auto;
  height: 100%;
  z-index: 0;
}

#games-menu .img-game img.slot_image {
  width: 100%;
}

#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 {
  display: inline-flex;
  flex-flow: column nowrap;
  gap: 20px;
  margin: 30px 0px;
  max-width: 300px;
  width: 100%;
}

#games-menu .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 {
  margin: 0;
  color: var(--text-white-color);
  font-size: 15px;
  font-weight: 300;
}

#games-menu .progress-wrapper .progress {
  max-width: 200px;
  width: 100%;
}

#games-menu .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-header {
  background: url("../img/member-center/background.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  padding: 30px 90px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

#member-center .member-header .member-card-wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 50px;
  gap: 13px;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-wrapper {
    gap: 10px;
  }
}

#member-center .member-header .member-card-footer-1 {
  display: grid !important;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-footer-1 {
    display: none !important;
  }
}

#member-center .member-header .member-card-footer-2 {
  display: none !important;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-footer-2 {
    display: grid !important;
  }
}

@media (max-width: 1199px) {
  #member-center .member-header {
    padding: 10px;
    padding: 69px 18px;
  }
}

#member-center .member-header .hr {
  color: var(--text-white-color);
}

#member-center .member-header .vr {
  color: var(--text-white-color);
}

#member-center .member-header .member-card-item {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-item {
    gap: 2px;
  }
}

#member-center .member-header .member-card-item h1 {
  color: var(--text-white-color);
  font-size: 24px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-item h1 {
    font-size: 12px;
  }
}

#member-center .member-header .member-card-item h6 {
  color: var(--text-lightgreen-color);
  color: var(--theme-color-text);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-item h6 {
    font-size: 15px;
  }
}

#member-center .member-header .member-card-item .user-profit-action {
  display: flex;
  flex-flow: row nowrap;
  gap: 15px;
  align-items: center;
}

#member-center .member-header .member-card-item .btn-refresh {
  background: unset;
  border: unset;
  padding: 0px;
  cursor: pointer;
  outline: unset;
}

#member-center .member-header .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-header .member-card-item .btn-refresh img {
    max-width: 15px;
    height: 15px;
  }
}

/* #member-center .member-header .member-card-avatar {
  flex: 1;
} */

#member-center .member-header .member-card-avatar img {
  max-width: 50px;
  height: 50px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 50%;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-avatar img {
    max-width: 50px;
    height: 50px;
  }
}

#member-center .member-header .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-header .member-card-info .member-card-info-top .member-card-item {
    gap: 5px;
  }
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-info .member-card-info-top .member-card-item h1 {
    font-size: 20px;
  }
}

#member-center .member-header .member-card-info .member-card-info-middle {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--member-card-item-gap);
}

#member-center .member-header .member-card-info .member-card-info-middle .total-balance-wrapper {
  flex: 3;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-info .member-card-info-middle .total-balance-wrapper {
    flex: 4;
  }
}

#member-center .member-header .member-card-info .member-card-info-middle .bonus-wallet-wrapper {
  flex: 5;
}

#member-center .member-header .member-card-info .member-card-info-middle .member-card-item {
  padding: 5px 0px;
}

@media (max-width: 1199px) {
  #member-center .member-header .member-card-info .member-card-info-middle .member-card-item {
    padding: 2px 0px;
  }
}

#member-center .member-header .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 #main-list .col {
  display: none;
}

/* #member-center #main-list .col-12 {
  width: 100%;
} */

#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;
}

#member-center .member-center-main-item.lucky_spin {
  background-image: linear-gradient(246deg, #955d09 0%, #332715 100%) !important;
  /* background: linear-gradient(90deg, #4d3612, #332715); */
}

#member-center .member-center-main-item.daily_check {
  background-image: linear-gradient(246deg, #412565 0%, #292037 100%) !important;
  /* background: linear-gradient(90deg, #412565, #292037); */
}

#member-center .member-center-main-item.mission_daily {
  background-image: linear-gradient(246deg, #85331d 0%, #3f221a 100%) !important;
  /* background: linear-gradient(90deg, #85331d, #3f221a); */
}

@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 ul.nav-pills{ 
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

#inbox .nav-item {
  gap: 10px;
}

/* #inbox .nav-item.notification_tab {
  display: none;
} */

#inbox .nav-item .nav-link {
  justify-content: center;
  width: 100%;
  border-radius: 0;
  text-transform: capitalize;
  font-size: 12px;
  padding: 8px;
}

#inbox .nav-item .nav-link.active {
  background: var(--backgroud-theme-tab);
  color: var(--theme-color-btn);
}

#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: #282828 !important;
  border-radius: 15px;
  padding: 30px 40px;
}

#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: #cacaca;
}

#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);
  color: var(--theme-color-text);
  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);
  color: var(--theme-color-text);
  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;
  }
}

#inbox .section-history .table-border-lightgreen {
  border: 1px solid #8d8d8d4f;
  border-radius: 8px;
}

#inbox .section-history .table-border-lightgreen .table thead {
  clip-path: rect(0px 100% 100% 0px round 0px 0px 0px 0px);
}

/* .modal.model_message .modal-dialog {
  margin: 0 17px auto;
} */

.model_message .modal-content {
  background: #2D2D2D;
  border-radius: 13px;
}

.model_message .modal-header {
  justify-content: center;
  padding: 8px 5px;
  background: var(--backgroud-theme-tab);
  border-radius: 13px 13px 0 0;
  border: none;
}

.model_message .modal-header .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme-color-btn);
}

.model_message .modal-header .btn-close {
  position: absolute;
  right: 8px;
  font-size: 13px;
}

.model_message .modal-content .modal-body {
  padding: 25px 20px;
}

/* promotion */
.modal.model_promotion .modal-dialog {
  margin: 17px;
}

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

.modal.model_promotion .modal-dialog-centered {
  min-height: calc(100% - 0rem) !important;
}

.model_promotion .modal-content {
  background: #2D2D2D;
  border-radius: 8px;
}

.model_promotion .modal-header {
  justify-content: center;
  padding: 8px 5px;
  background: var(--backgroud-theme-tab);
  border-radius: 8px 8px 0 0;
  border: none;
}

.model_promotion .modal-header .modal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-color-btn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 30px;
}

.model_promotion .modal-header .btn-close {
  position: absolute;
  right: 8px;
  font-size: 13px;
}

.model_promotion .modal-content .modal-body {
  padding: 25px 20px;
  padding: 0;
  max-height: 670px;
  overflow: scroll;
}

.modal-wrapper {
  padding: 25px 20px;
}

.model_promotion .modal-content .message-modal-title {
  padding-bottom: 15px;
  border-bottom: 1px solid #8D8D8D4F;
}

.model_promotion .mobile-sticky {
  border-top: 1px solid #8D8D8D4F;
  padding: 15px 0;
}

/* end */

.message-modal-title h6 {
  color: #FFBF29;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-modal-title p {
  color: #8D8D8D;
  font-size: 12px;
}

.message-modal-desc {
  color: #8D8D8D;
  font-size: 13px;
  margin-top: 17px;
}

.message-modal-desc table {
  width: 100%;
  border-collapse: collapse;
}

.inbox-th {
  width: 30%;
}

.inbox-date {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.details {
  /* position: absolute; */
  top: 8px;
  right: 13px;
  width: 16px;
  height: 16px;
  background: url(../img/inbox/details.png) no-repeat center center;
  background-size: 100%;
  z-index: 1;
}

/* .date_row {
  padding-right: 50px;
} */

/* ens */

#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 .modal-dialog {
  max-width: 100%;
}

#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(--theme-color-text);
}

#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: #786406;
}

#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: #383213;
}

#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: #383213;
  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: #ffc32e8a;
  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: #383213;
  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: #0000008a;
  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(--theme-color-text);
}

#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: 20px;
  padding-bottom: 100px;
  position: relative;
  --accordion-bg-color: transparent;
  --accordion-text-color: var(--text-lightgreen-color);
  --accordion-hover-text-color: #fff6ce;
  --accordion-button-bg-color: var(--accordion-background);
  --accordion-button-hover-bg-color: #434343;
  max-width: 600px;
  margin: auto;
}

@media (max-width: 767px) {
  #about {
    padding-top: 20px;
    padding-bottom: 100px;
  }
}

#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(--theme-color-text);
}

/* aboutus */
.about-content-wrapper .card-body {
  padding: 7px 7px;
}

.about-content-wrapper .contact_title {
  color: #F0F0F0;
  font-size: 27px;
  font-weight: 400;
}

.about-content-wrapper .card-body .contact_text p {
  color: #8D8D8D;
  font-size: 12px;
  border-bottom: 1px solid #82828221;
  padding-bottom: 10px;
}

.about-content-wrapper .contact_us {
  padding: 0;
  margin: 0;
}

.about-content-wrapper .contact_us li {
  list-style: none;
  padding: 5px 0;
}

.about-content-wrapper .contact_us li .contact_flex {
  display: flex;
  flex-flow: column;
}

.about-content-wrapper .contact_us li a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}

.about-content-wrapper .contact_us li a img {
  width: 50px;
}

.about-content-wrapper .contact_us li p {
  color: var(--theme-color-white);
  margin: 0 !important;
  font-size: 15px;
}

.about-content-wrapper .contact_us li .contact_flex span {
  color: #8D8D8D;
  font-size: 12px;
}

/* term */
#term-accordion {
  background: #2D2D2D;
  border-radius: 10px;
  padding: 10px;
}

#term-accordion.accordion {
  gap: 0;
}

#term-accordion.accordion .accordion-item {
  border-bottom: 1px solid #80808026;
  clip-path: none;
  background: transparent;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#term-accordion.accordion .accordion-item:last-child {
  border: unset;
}

#term-accordion.accordion .accordion-item .accordion-button {
  background: none;
  color: #d6d6d6ab;
  font-size: 13px;
}

#term-accordion.accordion .accordion-item .accordion-button.collapsed {
  background: none;
  color: #D6D6D6;
}

#term-accordion.accordion .accordion-item .accordion-button::after {
  background-image: url(../img/referral/drop_down_on.png);
}

#term-accordion.accordion .accordion-item .accordion-body {
  color: var(--text-lightgrey-color);
  font-size: 13px;
  /* padding: 10px 20px; */
}

::-webkit-scrollbar {
  width: 3px;
  height: 1px;
  background: #232323;
}

::-webkit-scrollbar-thumb {
  background: #232323;
}

.model_promotion .modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

html,
body {
  /* background-image: url("../img/global/bg.png"); */
  background: #000000;
  background: #141d1c;
  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[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: 265px; */
  display: block;
}

/* @media (max-width: 767px) {
  .home-banner .swiper-wrapper .swiper-slide .rounded-standard {
    height: 210px;
  }
}

@media (max-width: 375px) {
  .home-banner .swiper-wrapper .swiper-slide .rounded-standard {
    height: 210px;
  }
} */

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;
}

body .noted-p p {
  color: var(--text-secondary-color);
  color: #d6d6d699;
  font-size: 14px;
  font-weight: 500;
}

.noted-p {
  display: flex;
  align-items: center;
  gap: 5px;
}

.noted-p img {
  width: 13px;
}

@media (max-width: 767px) {
  body .noted-p p {
    font-size: 11px;
  }
}

body .section-transaction-title {
  margin-bottom: 10px;
}

body .section-transaction-title h3 {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-white-color);
  margin-bottom: 20px;
}

body .section-history {
  padding: 40px 17px;
}

@media (max-width: 1199px) {
  body .section-history {
    padding: 20px 17px;
  }
}

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);
}

.text-status {
  color: green;
}

.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;
}

.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;
  }
}

.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] .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;
}

.turnover-checking-form-filter .iturnover {
  display: none;
}

/* lucky_spin */
#lucky_spin {
  padding-top: 120px;
  padding-bottom: 50px;
  overflow: hidden;
  background: url(../img/lucky-spin/backlight.png) no-repeat center;
  background-size: 100% 100%;
}

@media (max-width: 992px) {
  #lucky_spin {
    padding-top: 70px;
  }
}

@media (max-width: 375px) {
  #lucky_spin {
    padding-top: 30px;
  }
}

#lucky_spin .spin_content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  background-size: 135% 100%;
  gap: 90px;
  align-items: center;
}

@media (max-width: 992px) {
  #lucky_spin .spin_content {
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;

  }
}

@media (max-width: 767px) {
  #lucky_spin .spin_content {
    gap: 20px;
  }
}

.three-box-top {
  display: flex;
  justify-content: center;
}

.labal-absolute {
  position: absolute;
  top: 10px;
  top: -66px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 548px;
  height: 400px;
}

@media (max-width: 767px) {
  .labal-absolute {
    width: 400px;
  }
}

@media (max-width: 375px) {
  .labal-absolute {
    top: -90px;
  }
}

.major-labal {
  background: url(../img/lucky-spin/winner/major.png) center no-repeat;
  background-size: 100%;
  height: 170px;
  width: 53%;
  position: absolute;
  left: -92px;
  top: 148px;
}

@media (max-width: 1500px) {
  .major-labal {
    left: 10px;
    width: 170px;
  }
}

@media (max-width: 992px) {
  .major-labal {
    left: -20px;
    width: 222px;
    top: 160px;
  }
}

@media (max-width: 767px) {
  .major-labal {
    width: 180px;
    left: -30px;
    top: 150px;
  }
}

@media (max-width: 390px) {
  .major-labal {
    width: 160px;
    left: -8px;
    top: 150px;
  }
}

@media (max-width: 375px) {
  .major-labal {
    width: 155px;
    left: 0px;
    width: 140px;
    left: 10px;
  }
}

.minor-labal {
  background: url(../img/lucky-spin/winner/minor.png) center no-repeat;
  background-size: 100%;
  height: 170px;
  width: 53%;
  position: absolute;
  /* right: -46px;
  top: 130px; */
  right: -92px;
  top: 148px;
}

@media (max-width: 1500px) {
  .minor-labal {
    right: 10px;
    width: 170px;
  }
}

@media (max-width: 992px) {
  .minor-labal {
    right: -20px;
    width: 222px;
    top: 160px;
  }
}

@media (max-width: 767px) {
  .minor-labal {
    width: 180px;
    right: -30px;
    top: 150px;
  }
}

@media (max-width: 390px) {
  .minor-labal {
    width: 160px;
    right: -8px;
    top: 150px;
  }
}

@media (max-width: 375px) {
  .minor-labal {
    width: 155px;
    right: 0;
    width: 140px;
    right: 10px;
  }
}

.mega-labal {
  background: url(../img/lucky-spin/winner/mega.png) center no-repeat;
  background-size: 100%;
  height: 200px;
  width: 70%;
  position: absolute;
  top: 30px;
}

@media (max-width: 767px) {
  .mega-labal {
    width: 256px;
    left: 76px;
    top: 58px;
  }
}

@media (max-width: 390px) {
  .mega-labal {
    width: 256px;
  }
}

@media (max-width: 375px) {
  .mega-labal {
    width: 225px;
    left: 90px;
    top: 63px;
  }
}

.wheel_container {
  position: relative;
  /* margin-bottom: 35px; */
}

.turnplate {
  margin: auto;
  height: 350px;
  position: relative;
  background-size: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* @media (max-width: 767px) { */
.turnplate {
  width: 335px;
}

/* } */

/* @media (max-width: 375px) {
  .turnplate {
    width: 300px;
    margin-top: 133px;
    height: 260px;
  }
} */

.wheel_round {
  position: absolute;
  width: 369px;
  height: 369px;
  background: url(../img/lucky-spin/home/wheel_frame.png) no-repeat center;
  background-size: cover;
  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: 10px;
  top: 318px;
  width: 38px;
  height: 100px;
  background: url(../img/lucky-spin/home/coin_back.png) no-repeat center;
  background-size: 100%;
}

.float_2 {
  position: absolute;
  left: 0px;
  top: 230px;
  width: 30px;
  height: 130px;
  background: url(../img/lucky-spin/home/coin_back2.png) no-repeat center;
  background-size: 100%;
}

.float_3 {
  position: absolute;
  left: 0px;
  bottom: 355px;
  width: 62px;
  height: 99px;
  background: url(../img/lucky-spin/home/coin_front.png) no-repeat center;
  background-size: 100%;
}

.float_4 {
  position: absolute;
  right: 0px;
  top: 333px;
  width: 74px;
  height: 90px;
  background: url(../img/lucky-spin/home/coin_front2.png) no-repeat center;
  background-size: 100%;
}

.float_5 {
  position: absolute;
  right: 0px;
  bottom: 350px;
  width: 40px;
  height: 90px;
  background: url(../img/lucky-spin/home/coin_front3.png) no-repeat center;
  background-size: 100%;
}

/* @media (max-width: 767px) {
  .float_1 {
    width: 66px;
    left: -19px;
    top: 184px;
  }

  .float_2 {
    width: 50px;
  }

  .float_3 {
    width: 60px;
  }

  .float_4 {
    position: absolute;
    right: -201px;
    bottom: -41px;
    width: 62%;
  }

  .float_5 {
    position: absolute;
    left: -25px;
    top: -13px;
    width: 50px;
  }

  .float_6 {
    width: 60px;
    left: -80px;
    top: 123px;
  }

  .float_7 {
    width: 60px;
    top: -8px;
  }

  .float_9 {
    position: absolute;
    left: 295px;
    bottom: -21px;
    width: 54px;
  }

} */

/* @media (max-width: 430px) {
  .float_1 {
    left: -48px;
    top: 108px;
  }

  .float_3 {
    left: -37px;
    bottom: 57px;
  }

  .float_4 {
    right: -65px;
    bottom: -37px;
    width: 44%;
  }
} */

@media (max-width: 375px) {
  .float_1 {
    left: 0px;
    top: 318px;
  }

  .float_2 {
    top: 230px;
  }

  .float_3 {
    bottom: 165px;
  }

  .float_4 {
    width: 54px;
  }

  .float_5 {
    right: 0px;
    bottom: 190px;
  }
}

.wheel_container .turnplate canvas.item {
  /* width: 100%;
  transform: rotate(-104.25deg);
  transform: rotate(-108.25deg); */
}

.wheel_container .pointer {
  position: absolute;
  cursor: pointer;
  filter: drop-shadow(2px 10px 6px rgba(0, 0, 0, 0.801));
  z-index: 1;
}

/* @media (max-width: 767px) { */
.wheel_container .pointer {
  width: 37%;
  top: -10px;
  left: 107px;
}

/* } */

/* @media (max-width: 375px) {
  .wheel_container .pointer {
    width: 104px;
    top: -35px;
    left: 100px;
  }
} */

/* .spin-button {
  margin-top: 60px;
}

@media (max-width:992px) {
  .spin-button {
    margin-top: 60px;
  }
}

@media (max-width:767px) {
  .spin-button {
    margin-top: 30px;
  }
}

@media (max-width:375px) {
  .spin-button {
    margin-top: 60px;
  }
} */

.spin-icon {
  width: 220px;
  height: 47px;
  background: linear-gradient(to bottom, #e1f7bd, #ffc32e);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--btn-color);
  --btn-color: #000;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  margin: auto;
  border: none;
  outline: none;
}

.notify-text {
  text-align: center;
  color: #fff;
  margin-top: 10px;
}

/* .spin-win-bg {
  position: relative;
  width: 520px;
  width: 480px;
  width: 450px;
  height: 100%;
  border-radius: 20px;
  margin: auto;
  background:  url(../img/lucky-spin/prize-background.png) no-repeat center;
  background-size: 100%;
} */

.winning_record {
  background: url(../img/lucky-spin/winning_record_wording.png) no-repeat center;
  background-size: 100%;
  /* width: 340px; */
  width: 90%;
  height: 51px;
  margin: auto;
}

@media (max-width: 767px) {
  .winning_record {
    width: 90%;
  }
}

.spin_winner {
  margin: auto;
}

@media (max-width: 1500px) {
  .spin-win-bg {
    width: 450px;
  }
}

@media (max-width: 992px) {
  .spin-win-bg {
    width: 410px;
  }
}

@media (max-width: 390px) {
  .spin-win-bg {
    width: 368px;
  }
}

@media (max-width: 376px) {
  .spin-win-bg {
    width: 360px;
  }
}

.spin-detail {
  position: relative;
  width: 520px;
  width: 480px;
  width: 450px;
  height: 611px;
  border-radius: 20px;
  margin: auto;
  background: url(../img/lucky-spin/spin-detail.png) no-repeat center;
  background-size: 100% 100%;
  padding: 30px;
}

@media (max-width: 767px) {
  .spin-detail {
    width: 100%;
  }
}

.spin-detail .list-group {
  overflow: scroll;
  height: 500px;

}

.spin-detail .list-group::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

#winnerMainContent {
  margin-top: 10px;
  /* padding: 0 15px; */
}

@media (max-width: 767px) {
  #winnerMainContent {
    margin: 0 auto;
  }

}

#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: #ffc32e;
}

/* 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: var(--backgroud-dropdown);
  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(--theme-color-gray);
  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: var(--backgroud-dropdown-hover);
  -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: var(--color-input);
  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: 100% 100%;
  background-position: center;
}

#model-congratulations .modal-title h3 {
  color: var(--text-white-color);
  font-size: 30px;
  font-weight: 500;
  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: var(--theme-color-text);
  text-align: center;
  height: 135px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#claim_rewards {
  padding: 9px 20px;
}

.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: -45px;
}

.float-right {
  width: 70px;
  height: auto;
  top: 20%;
  right: -31px;
}

.img-game>i {
  position: absolute;
  top: 45px;
  right: 205px;
  width: 50%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition-duration: .3s;
}

.nav_menu {
  padding: 0 17px;
}

/* btn-upload */
.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;
}

.receipt_required {
  font-size: 11px;
  color: var(--theme-color-text);
  padding-top: 5px;
}

.btn-upload-receipt {
  /* background: linear-gradient(to bottom, #e1f7bd, #ffc32e); */
  background: #F0F0F0;
  color: var(--theme-color-btn);
  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;
  border: 1px solid var(--theme-color-btn);
  border: none;
}

@media (max-width: 767px) {
  .btn-upload-receipt {
    padding: 11px 0;
    width: 70%;
  }
}

.form-control-file {
  display: none;
}

@media (max-width: 768px) {
  .order_pos1 {
    order: 1;
  }

  .order_pos2 {
    order: 2;
  }

  .order_pos3 {
    order: 3;
  }
}

/* new daily_checkin page */
@font-face {
  font-family: 'extraBoldItalic';
  src: url('fonts/StateWideSoft-ExtraBoldItalic.eot'),
    url('fonts/StateWideSoft-ExtraBoldItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal
}

.daily_content {
  margin-left: 115px;
}

.daily-login-bonus {
  background: url(../img/daily-check-new/background.png) no-repeat center;
  background-size: 100%;
  width: 100%;
  /* height: 697px; */
  height: 717px;
  position: relative;
}

/* .daily_login_wrapper {
  background: url(../img/daily-check-new/confetti.png) no-repeat center;
  background-size: 100%;
  background-position: center;
} */

.daily_login_wrapper .seven_day {
  position: absolute;
  top: -15px;
  left: 31%;
  width: 660px;
}

.daily_login_wrapper .seven_day img {
  width: 100%;
}

.daily_login_wrapper .seven_day h1 {
  color: #fdc525;
  font-size: 83px;
  font-family: extraBoldItalic;
  font-style: italic;
  padding: 0;
  margin: 0;
  line-height: 1.1;
}

.daily_login_wrapper .seven_day h3 {
  color: var(--text-white-color);
  font-size: 15px;
  margin-left: 10px;
}

.daily_login_day {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: absolute;
  top: 93px;
  left: -135px;
  left: -150px;
  /* background: rebeccapurple; */
}

.number7_icon {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 40%; */
}

.bg_number7 {
  background: url(../img/daily-check-new/number7.png) no-repeat center;
  background-size: 100%;
  width: 540px;
  height: 100%;
}

/* day_section **************************************/
.day_wrap_content {
  display: flex;
  gap: 5px;
  transform: skew(-10deg);
  margin-left: -45px;
  height: 530px;
  /* width: 60%; */
}

.day_grid_content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px 5px;
  height: 100%;
}

.day6_content {
  background: linear-gradient(to bottom, #434343, #6e6e6e);
  width: 195px;
  height: 258px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.day77_content {
  background: linear-gradient(to bottom, #434343, #6e6e6e);
  width: 30%;
  width: 220px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.day_count {
  width: 100%;
  height: 30px;
  background: #fff6ce;
  color: #282828;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  font-weight: bold;
}

.day_count span {
  transform: skew(10deg);
}

.day7_count {
  width: 100%;
  height: 30px;
  background: #fff6ce;
  color: #282828;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  font-weight: bold;
}

.day7_count span {
  transform: skew(10deg);
}

.day_coin_icon {
  width: 110px;
  transform: skew(10deg);
}

.day_coin_icon img {
  width: 100%;
}

.day7_coin_icon {
  width: 200px;
}

.day7_coin_icon img {
  width: 100%;
  transform: skew(10deg);
}

.day_control {
  width: 100%;
  color: #aeaeae;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.day_claim_btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #282828;
  color: #aeaeae;
  text-align: center;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.day7_control {
  width: 100%;
  color: #aeaeae;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.day7_claim_btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #282828;
  color: #aeaeae;
  text-align: center;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.day_claim_btn span {
  transform: skew(20deg);
}

.day7_claim_btn span {
  transform: skew(20deg);
}

.amount_day_price {
  width: 100%;
  text-align: center;
  color: #aeaeae;
  font-size: 16px;
  margin-bottom: 30px;
  transform: skew(10deg);
}

.amount_day7_price {
  width: 100%;
  text-align: center;
  color: #aeaeae;
  margin-bottom: 30px;
  transform: skew(10deg);
}

/* end section **************************************/

/* old_daily_checkin */
.day_content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px 5px;
  height: 493px;
  height: 528px;
  transform: skew(-10deg);
  margin-left: -54px;
}

.day_item_box {
  background: linear-gradient(to bottom, #434343, #6e6e6e);
  width: 195px;
  height: 258px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.day_text {
  width: 100%;
  height: 30px;
  background: #fff6ce;
  color: #282828;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  font-weight: bold;
}

.day_text span {
  transform: skew(10deg);
}

.day_coin {
  width: 110px;
  height: 227px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.day_coin img {
  width: 100%;
}

.day_action,
.day_claim {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #282828;
  color: #aeaeae;
  text-align: center;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.day_claim span {
  transform: skew(20deg);
}

.day7_content {
  background: linear-gradient(to bottom, #434343, #6e6e6e);
  width: 235px;
  height: 528px;
  transform: skew(-10deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.day7_test {
  width: 100%;
  height: 30px;
  background: #fff6ce;
  color: #282828;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  font-weight: bold;
}

.day7_text span {
  transform: skew(10deg);
}

.day7_coin {
  width: 200px;
}

.day7_coin img {
  width: 100%;
  transform: skew(10deg);
}

.day7_action {
  color: #aeaeae;
  font-size: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.day7_claim {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #282828;
  color: #aeaeae;
  text-align: center;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.amount_price {
  color: #aeaeae;
  font-size: 16px;
  transform: skew(10deg);
}

.amount_price_7 {
  color: #aeaeae;
  margin-bottom: 10px;
  transform: skew(10deg);
}

/* end */

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #ecf1f5;
}

/* Optional styling for the content while loading */
.ajax-loading {
  opacity: 0.5;
}

/* @media (max-width: 768px) {
  .daily-login-bonus {
    height: 300px;
  }
  .daily_content {
    margin-left: 0;
  }
  .daily_login_day {
    height: 300px;
    gap: 0;
    left: -180px;
    width: 100%;
  }

  .bg_number7 {
    width: 240px;
  }

  .day_wrap_content {
    height: 298px;
  }

  .day6_content {
    width: 96px;
    height: 143px;
  }

  .day_coin_icon {
    width: 60px;
  }
} */

.input-relative {
  position: relative;
}

/* .popup_banner a img{
  max-width: 440px !important;
} */

/* @media (max-width: 1199px) {
  .popup_banner a img {
    width: 280px;
  }
}

@media (max-width: 1024px) {
  .popup_banner a img {
    width: 280px;
  }
} */

/* iphone 14 pro max up */
@media (max-width: 767px) {
  .popup_banner a img {
    width: 405px !important;
  }
}

/* phone small screen */
@media (max-width: 400px) {
  .popup_banner a img {
    /* width: 348px !important; */
    width: 333px !important;

  }
}

@media (max-height: 1200px) {
  .popup_banner a img {
    max-width: 480px !important;
  }
}

/* @media (max-height: 1024px) {
  .popup_banner a img{
    max-width: 310px !important;
  }
}

@media (max-height: 800px) {
  .popup_banner a img{
    max-width: 260px !important;
  }
}

@media (max-height: 750) {
  .popup_banner a img{
    max-width: 180px !important;
  }
} */


.reffer_desk {
  display: none !important;
}

.swiper-categories-2-wrapper {
  overflow: hidden;
}

.swiper-categories-slots {
  overflow: visible;
}

.vpn_img {
  position: absolute;
  background: url(../img/categories/actions/vpn_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 60px;
  height: 30px;
  top: -17px;
  right: 7px;
  z-index: 1;
}

.vpn_img_input {
  position: absolute;
  background: url(../img/categories/actions/vpn_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 32px;
  height: 30px;
  top: -7px;
  right: 38px;
  z-index: 1;
}

@media (max-width: 390px) {
  .vpn_img_input {
    width: 32px;
    height: 30px;
    top: -7px;
    right: 17px;
  }
}

@media (max-width: 375px) {
  .vpn_img_input {
    width: 32px;
    height: 30px;
    top: -7px;
    right: 13px;
  }
}

.provider_vpn_icon {
  position: absolute;
  top: 5px;
  right: 5px;
  visibility: hidden;
}

img.icon-vpn {
  width: 70px !important;
}


/* PC_reffer */
@media (min-width: 768px) {
  .reffer_link {
    position: fixed;
    width: 165px;
    bottom: 152px;
    right: 0;
    padding: 0 10px;
    z-index: 1030;
  }

  .reffer_link.d-md-none {
    display: block !important;
  }
}

/* 3G_reffer link */
@media (max-width: 768px) {
  .reffer_link {
    position: fixed;
    bottom: 17%;
    right: 0;
    padding: 0 10px;
    z-index: 1030;
    width: 120px;
  }
}

/* iphone 12 pro max*/
@media (max-width: 428px) {
  .reffer_link {
    bottom: 17%;
  }
}

/* max 400px*/
@media (max-width: 400px) {
  .reffer_link {
    bottom: 18%;
  }
}

/* iphone 12 pro */
@media (max-width: 390px) {
  .reffer_link {
    bottom: 20%;
  }
}

/* small */
@media (max-width: 375px) {
  .reffer_link {
    bottom: 24%;
    width: 105px;
  }
}

@media (min-width: 768px) {
  .reffer_link .vpn_content img {
    height: 100%;
    width: 100%;
    animation: showSweetAlert 0.3s;
  }
}

@media (max-width: 768px) {
  .reffer_link .vpn_content img {
    display: block;
    height: 120px;
    width: 100%;
    animation: showSweetAlert 0.3s;
  }
}

/* end */
/* 3G-vpn*/
.popup_vpn_buttom {
  position: fixed;
  bottom: 8%;
  right: 0;
  left: 0;
  padding: 0 10px;
  z-index: 1030;
}

/* iphone 12 pro max*/
@media (max-width: 428px) {
  .popup_vpn_buttom {
    bottom: 8%;
  }
}

/* max 400px*/
@media (max-width: 400px) {
  .popup_vpn_buttom {
    bottom: 12%;
  }
}

/* iphone 12 pro */
@media (max-width: 390px) {
  .popup_vpn_buttom {
    bottom: 10%;
  }
}

/* small */
@media (max-width: 375px) {
  .popup_vpn_buttom {
    bottom: 11%;
  }

  .reffer_link .vpn_content img {
    height: 105px;
  }
}

.popup_vpn_buttom .vpn_content img {
  display: block;
  height: 70px;
  width: 100%;
  animation: showSweetAlert 0.3s;
}

.btn_close {
  position: absolute;
  right: 7px;
  top: -7px;
  width: 32px;
  background: none;
  outline: none;
  border: none;
}

.btn_close img {
  width: 100%;
  height: 100%;
}

/* end */

/* PC-popup-vpn */
@media (min-width: 768px) {
  .popup-wraper {
    display: block;
    position: fixed;
    width: 190px;
    width: 150px;
    right: 5px;
    bottom: 255px;
    bottom: 360px;
    z-index: 1030;
  }
}

@media (max-width: 768px) {
  .popup-wraper {
    display: none;
  }
}

.popup_vpn img {
  width: 100%;
}

.btn_close_pop {
  position: absolute;
  right: -5px;
  top: -15px;
  width: 35px;
  background: none;
  outline: none;
  border: none;
  opacity: 0.7;
}

/* end */
/* 3G-popup-vpn */
/* @media (max-width: 768px) {
  .popup-wraper {
    background: rgba(0, 0, 0, 0.7);
    display: block;
    position: fixed;
    z-index: 1030;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(3px);
  }
  
  .popup_vpn {
    position: absolute;
    width: 55%;
    left: 54%;
    top: 50%;
    top: 44%;
    z-index: 60;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .popup_vpn img {
    width: 100%;
  }

  .btn_close_pop {
    position: absolute;
    right: 2px;
    top: 15px;
    width: 40px;
    background: none;
    outline: none;
    border: none;
    opacity: 0.7;
  }

  @keyframes showSweetAlert {
    0% {
      transform: scale(0.7);
    }
    45% {
      transform: scale(1.05);
    }
    80% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }
  .showSweetAlert {
    animation: showSweetAlert 0.3s;
  }
} */

/* iphone 12-14-15-16 pro max*/
@media (max-width: 440px) {
  .popup_vpn {
    width: 68%;
  }
}

/* max 400px*/
@media (max-width: 400px) {
  .popup_vpn {
    width: 68%;
  }
}

/* iphone 12 pro */
@media (max-width: 390px) {
  .popup_vpn {
    width: 68%;
  }
}

/* small */
@media (max-width: 375px) {
  .popup_vpn {
    width: 55%;
  }
}

@media (max-width: 768px) {
  .content_vpn {
    padding: 0 20px;
  }
}

.content_vpn span {
  background-color: unset !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .content_vpn span {
    font-size: 15px;
  }
}

.content_vpn p {
  color: #fff;
}

.content_vpn span strong a {
  background-color: unset !important;
}

#modal-vpn {
  z-index: 99999999999 !important;
}

#modal-vpn .title_vpn {
  color: #ffc32e;
  font-size: 22px;
  font-weight: bold;
}

@media (max-width: 768px) {
  #modal-vpn .title_vpn {
    font-size: 17px;
  }
}

#modal-vpn .modal-header:after {
  height: 2px;
  background: #fff;
}

.header-actions {
  display: flex;
  flex-flow: row nowrap;
  /* max-width: 285px; */
  width: 100%;
  gap: 25px;
  padding: 10px 0;
}

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

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



/* lobby-games */

#lobby {
  max-width: 600px;
  margin: 0 auto;
}

#lobby .contents {
  padding: 10px;
  display: block;
  border: 1px solid #00aee1;
  border-radius: 10px;
  text-align: center;
}

#lobby .contents.cc {
  border: 0;
  padding: 13px 5px 1rem 5px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

#lobby .contents.cc a {
  flex: 0 33.33%;
  position: relative;
}

#lobby .contents.cc a {
  flex: 0 25%;
}

#lobby .contents.cc {
  padding: 5px 5px 0 5px;
}

.lobby_games #lobby .contents.cc a {
  padding: 3px;
  text-decoration: none;
}

#lobby img {
  width: 100%;
  height: auto;
  padding: 2px;
}

#lobby span {
  font-size: 12px;
  color: #f0f0f0b3;
}

.bet_now {
  padding: 7px 16px;
  background: var(--background-btn-theme);
  box-shadow: unset;
  border: unset;
}

.bet_now:focus,
.bet_now:hover {
  color: var(--btn-color) !important;
}

.desktop_tab {
  position: absolute;
  bottom: 14px;
  right: 80px;
}

.btn-desktop {
  font-size: 12px;
  border-radius: 8px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  text-decoration: none;
  display: block;
  color: #ffc32e;
  border: 1px solid #ffc32e;
  white-space: nowrap;
  padding: 5px 16px;
  position: absolute;
  top: 37px;
  right: -25px;
}

.btn-desktop:hover,
.btn-desktop:focus {
  color: #ffc32e;
}

.menu-content {
  margin-bottom: 40px;
  padding: 0 7px;
}

@media (max-width: 768px) {
  .menu-content {
    margin-bottom: 10px;
  }
}

/* brand-ambas */
.brand-ambasador {
  background: #1d2625;
  width: 100%;
  max-width: 600px;
}

.brand-wrapp {
  padding: 17px 20px;
  padding-bottom: 22px;
}

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

.logo_descripton {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.logo_brand {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center
}

.logo_brand img {
  width: 100%;
  height: 100%;
}

.logo_descripton span {
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  text-transform: capitalize;
}

.btn_more {
  width: 30%;
}

.btn_learn_more {
  background: #de9d37;
  box-shadow: unset;
  border: unset;
  padding: 8px 10px !important;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  text-decoration: none;
  display: block;
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.iframe_brand {
  border-radius: 25px;
  clip-path: rect(0 100% 100% 0 round 17px);
  margin-top: 10px !important;
}

/* lottery-page */
.lottery_games {
  margin-bottom: 60px;
  padding-top: 15px !important;
}

.lottery_games.img-game img {
  margin: 0;
  max-height: unset;
  width: 100%;
  height: auto;
  height: 100%;
}

.lottery_games .img-game-desc-wrapper-lott {
  position: absolute;
  gap: 13px;
  width: 87%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  bottom: -40px;
  left: 0;
  right: 0;
  transform: translateX(8%);
}

.lottery_games .img-game-desc-lott {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lottery_games .img-game-desc-lott p {
  color: #9bb3ae;
  font-size: 11px;
  margin: 0 !important;
}

.lottery_games .img-game-actions-lott {
  right: 40px;
  bottom: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  z-index: 5;
}

.lottery_games .btn-theme {
  background: linear-gradient(180deg, #FFFDD8 0%, #E8C154 50%, #DEAC49 100%);
  background: #de9d37;
  padding: 10px 20px;
  box-shadow: unset;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-outline {
  font-size: 15px;
  border-radius: 8px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  box-shadow: unset;
  text-decoration: none;
  display: block;
  color: #FFBF29;
  border: 1px solid #FFBF29;
  white-space: nowrap;
  padding: 10px 20px;
}

.footer_section {
  max-width: 600px;
  margin: auto;
}

/* .footer_bar {
  max-width: 600px;
  margin: auto;
} */

.main_content {
  max-width: 600px;
  margin: auto;
}

.card-body-content {
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--backgroud-theme);
}

.card-body-forget {
  padding: 0 20px;
}

.card-body-forget .forget_header {
  text-align: center;
  padding: 10px;
}

.card-body-forget .error_msg {
  color: var(--text-warning-color);
  font-size: 14px;
}

.card-body-forget .err_msg {
  padding: 9px 0;
  font-size: 12px;
  color: var(--text-warning-color);
}

.forget_noties {
  padding-top: 30px;
}

.forget_noties .section-important-tips .section-important-title h6 {
  padding: 7px 0;
}

.forget_noties .section-important-tips ol {
  list-style-type: none;
}

.forget_noties .section-content {
  border-radius: 8px;
  padding: 20px;
  padding-top: 5px;
}

.card-body-content .form-control:read-only {
  background: var(--background-boby) !important;
  color: #ffffffc2 !important;
  border: unset !important;
}

.card-body-content .form-control {
  background: var(--background-boby) !important;
  color: #ffffffc2 !important;
  border: unset !important;
}

.page-group-wrapper {
  padding: 0 20px;
}

.page_title_wrapper {
  text-align: center;
  padding: 40px 0;
}

.page_title_foreget {
  padding-top: 40px;
  padding-bottom: 20px;
  text-align: center;
}

.page_title_wrapper h6,
.page_title_foreget h6 {
  font-size: 20px;
  color: var(--theme-color-text);
  font-weight: 600;
  margin: 0;
  text-transform: capitalize;
}

.page_title_wrapper img,
.page_title_foreget img {
  width: 200px;
}


.full_center {
  width: 100%;
  height: 100%;
  /* position: fixed; */
  display: flex;
  justify-content: center;
}

.secttion_auth {
  max-width: 600px;
  width: 600px;
  margin-bottom: 125px;
}

.form_register .err_msg {
  font-size: 10px;
  color: var(--text-warning-color);
  text-decoration: none;
}

.form_register {
  margin: 5px 17px;
}

.register_form {
  padding: 0 17px;
}

.register-link {
  padding: 10px 0;
}

.register-link p {
  font-size: 10px;
  color: #8D8D8D;
  line-height: 13px;
}

.register-link p a {
  font-size: 12px;
  color: #FFBF29;
}

.register-link span {
  font-size: 10px;
  color: #8D8D8D;
  line-height: 13px;
}

.register-link span a {
  font-size: 12px;
  color: #FFBF29;
}

.login-link span a {
  text-decoration: none;
}

.condition-link span a {
  text-decoration: none;
}

/* auth_style */
.currency_select {
  display: none;
}

.sweet-alert p {
  font-size: 14px !important;
}

.btn_theme {
  background: var(--background-btn-theme);
  box-shadow: unset;
  border: unset;
  padding: 13px 20px !important;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  text-decoration: none;
  display: block;
  color: var(--theme-color-btn);
  white-space: nowrap;
  text-transform: uppercase;
}

.btn_no_outline {
  border: 1px solid gray;
  padding: 13px 20px !important;
  font-size: 15px;
  border-radius: 10px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  text-transform: uppercase;
}

.btn_add_bank {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
}

.btn_promotion {
  font-size: 14px;
  padding: 12px 20px !important;
  border-radius: 7px;
}

/* .btn-register {
  text-transform: uppercase;
}

.third-deposit {
  text-transform: uppercase;
} */

/* .form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
} */

.forgot-link a {
  font-size: 12px;
  text-decoration: none;
  color: #FFBF29;
}

.remember_box {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 7px;
  position: relative;
}

.remember_box input {
  background-color: unset;
  border: 1px solid#8D8D8D;
  width: 15px;
  height: 15px;
  position: relative;
  appearance: none;
}

.remember_box input[type=checkbox] {
  border-radius: 50%;
}

.remember_box input[type=checkbox]:checked {
  background-color: #FFBF29;
  border-color: #FFBF29;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
}

.remember_box label {
  font-size: 12px;
  color: #8D8D8D;
}

.form_login {
  margin-top: 70px;
}

#form-login .form-control {
  background: #2d2d2d !important;
  padding: 12px 0;
}

#form-login .btn-eye,
#form-login .input-group .input-group-text {
  background: #2d2d2d !important;
}

#form-login .form-group {
  display: flex;
  justify-content: space-between;
}

.logo_auth {
  width: 60%;
  margin: auto;
  display: block;
}

.logo_auth img {
  width: 100%;
  height: 100%;
}

.auth_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  padding: 35px 0;
}

.auth_button {
  width: 50%;
}

.auth_button a {
  border: 1px solid gray;
  padding: 14px 20px !important;
  font-size: 17px;
  font-weight: 600;
  border-radius: 25px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  text-decoration: none;
  display: block;
  white-space: nowrap;
}

.auth_button.active a {
  background: var(--background-btn-theme);
  border-color: unset;
}

.auth_button a {
  text-decoration: none;
  font-size: 14px;
  color: #D6D6D6;
}

.auth_button.active a {
  color: var(--theme-color-btn);
}

.full_name_noties p {
  color: #8D8D8D;
  font-size: 10px;
  margin: 0;
}

.optional_ref {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  color: #FFBF29;
  padding-bottom: 7px;

}

.optional_ref img {
  width: 9px;
}

#referral_div {
  display: none;
}

.top_register {
  /* background-color: #2d2d2d; */
  border-radius: 10px;
  min-height: 150px;
  position: relative;
  max-width: 495px;
  margin: auto;
}

.wrap_content {
  background: url(../img/auth/banner_bg.png) no-repeat;
  background-position: top;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  min-height: 110px;
  min-height: 95px;
}

.banner_characters {
  position: absolute;
  width: 180px;
  height: 130px;
  left: 20px;
  background: url(../img/auth/banner_characters.png) no-repeat;
  background-size: contain;
  background-position: center;
  left: 15px;
  bottom: 53px;
}

.register_text {
  position: absolute;
  right: 10px;
  bottom: 90px;
}

.register_text h5 {
  color: gold;
  font-size: 18px;
}

.register_text h4 {
  color: gold;
  font-size: 13px;
}

.register_text h3 {
  color: gold;
  font-size: 12px;
}

.info_top {
  height: 56px;
  width: 100%;
  padding: 0px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  background: #2d2d2d;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.info_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  height: 35px;
}

.icon_wrap {
  background-color: #8D8D8D;
  width: 53px;
  height: 100%;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon_ {
  width: 22px;
  height: 22px;
}

.icon_1 {
  background: url(../img/auth/welcome_bonus.png) no-repeat;
  background-size: 100%;
  background-position: center;
}

.icon_2 {
  background: url(../img/auth/cashe_ebate.png) no-repeat;
  background-size: 100%;
  background-position: center;
}

.icon_3 {
  background: url(../img/auth/rescue_bonus.png) no-repeat;
  background-size: 100%;
  background-position: center;
}

.info_ {
  width: 100%;
}

.info_ p {
  font-size: 10px;
  color: #fff;
  margin: 0;
  line-height: 11px;
}

.secttion_auth .input-group-text {
  padding: 10px 11px 10px 20px !important;
}

.form_group_phone {
  background: var(--background-input);
  border: unset;
  border-radius: 9px !important;
}

.code_labal {
  width: 65%;
}

.form_group_phone input {
  background: unset;
}

.form-group .phone_content {
  border: unset;
  text-decoration: none;
  color: black;
  font-size: 15px;
  font-weight: 600;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 2px solid gray;
  padding: 5px;
  padding-left: 20px;
}

.selete_code {
  display: flex;
  gap: 13px;
}

.form-group .phone_content img {
  width: 21px;
  height: 21px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.phone_content .form-select {
  width: 35px;
  padding: 2px 2px;
}

.getcode {
  background: #F0F0F0;
  padding: 10px;
  border-radius: 9px !important;
  text-decoration: none;
  color: black;
  font-size: 15px;
  font-weight: 600;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.getcode:hover {
  color: #000;
}

.getcode_labal {
  width: 80%;
}

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

.text_foot {
  font-size: 10px;
  color: #8D8D8D;
}

.border-section {
  padding: 0 17px;
}

.border_line {
  height: 1px;
  /* background: #80808030; */
  margin: 20px 0;
}

#history .border_line {
  padding: 0 17px;
}

.border_line.turnover_border {
  background: #80808021;
}

/* success_register */

/* #register-congratulations {
  animation: anime-zoom-in 1s;
} */

.register_success {}

.register_congrats {
  background: url(../img/auth/register_success.png) no-repeat;
  background-position: top;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

.register_congrats .pop_up {
  animation: anime-zoom-in 1s;
}

.congrats_content {
  margin: 20px 20px;
}

.auth_content {
  margin-top: 115px !important;
}

.congrats_text {
  text-align: center;
}

.congrats_text span {
  font-size: 24px;
  color: #e8a846;
  font-weight: 600;
}

.congrats_sub {
  font-size: 13px;
  color: #8D8D8D;
}

.congrats_btn_link {}


/* footer_style */
.btn_affiliate {
  background: linear-gradient(180deg, #FFD48B 0%, #EAA740 50%, #EAA740 100%);
  background: #de9d37;
  box-shadow: unset;
  border: unset;
  padding: 10px 13px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 9px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  text-decoration: none;
  display: block;
  color: #000 !important;
  white-space: nowrap;
}

/* #languagesMain */
#languagesMain {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#languagesModal .inner-nav {
  position: relative;
  background: #141d1c;
  height: 100%;
  overflow-y: auto;
}

.modal-language.fade .modal-dialog {
  transform: translateX(100%);
}

.modal-language.fade.show .modal-dialog {
  transform: none;
}

.navbar-lang-top {
  padding: 0px 17px;
  background: var(--background-boby);
  border-bottom: 1px solid var(--border-botton-gray);
}

.language-selector {
  padding: 25px 10px;
  max-width: 350px;
  margin: 0 auto;
}

.lang-block {
  margin-bottom: 18px;
}

.lang_label {
  color: #7e8683;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.lang_detail {
  background: var(--backgroud-theme);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 25px;
}

.lang_detail img {
  width: 32px;
  height: 22px;
  border-radius: 4px;
}

.lang_name {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  /* gap: 20px; */
}

.lang_name a {
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  padding: 0 18px;
  padding: 0 13px;
  border-right: 2px solid gray;
}

.lang_name a:last-of-type {
  border: none;
}

/* end_lang */

/*## menu ##*/
#main-nav.offcanvas-start {
  width: 290px;
}

@media (max-width: 390px) {
  #main-nav.offcanvas-start {
    width: 260px;
  }
}

@media (max-width: 375px) {
  #main-nav.offcanvas-start {
    width: 241px;
  }
}

#main-nav .offcanvas-body {
  padding: 0 !important;
}

#main-navv {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  overflow-y: scroll;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#main-nav .inner-nav {
  width: 100%;
  position: relative;
  background: #141d1c;
  height: 100%;
  overflow-y: auto;
}

#main-nav .inner-nav .navbar-nav-top {
  background: #2d2d2d;
  background-image: linear-gradient(90deg, #1f1d1d 20%, #3a2e0d 100%) !important;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 17px;
  padding-left: 30px;
}

#main-nav .inner-nav .navbar-nav-top .user-name {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 100%;
  text-transform: uppercase;
  margin-left: 0.9rem;
}

#main-nav .inner-nav .navbar-nav-top .user-level {
  margin-left: 0.9rem;
}

#main-nav .inner-nav .navbar-nav-top .user-level .level-text {
  font-size: 0.5rem;
  color: #fff;
  text-transform: uppercase;
}

#main-nav .inner-nav .navbar-nav-top .nav-logo {
  width: 120px;
}

#main-nav .inner-nav .navbar-nav-top img {
  width: 120px;
}

#main-nav .inner-nav .navbar-nav-top .navbar-back-icon img {
  width: 10px;
  display: inline-block;
}

#main-nav .inner-nav .navbar-nav .custom-nav-group {}

#main-nav .inner-nav .navbar-nav .custom-tab {
  border-radius: 8px;
  margin: 5px 15px;
}

.refer-tab {
  background-image: linear-gradient(105deg, #816828 0%, #242829 83%) !important;
}

.spin-tab {
  background-image: linear-gradient(105deg, #27608b 0%, #242829 83%) !important;
}

#main-nav .inner-nav .navbar-nav .nav-group {
  background: #242829;
  border-radius: 10px;
  margin: 7px 15px;
}

#main-nav .inner-nav .navbar-nav .nav-logout {
  background: #242829;
  margin: 7px 15px;
  border-radius: 10px;
  margin-bottom: 50px;
}

#main-nav .inner-nav #main-nav .inner-nav {
  min-height: 100%;
  height: unset;
}

#main-nav .inner-nav .navbar-nav .nav-item {
  padding: 0 10px;
}

#main-nav .inner-nav .navbar-nav .nav-item.number-nav {
  display: none;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link {
  padding: 0.75rem 1rem;
  padding: 10px 17px;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link span {
  color: #fff;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link span .icon-win {
  background-image: url("../img/header/icon/icon_win.png");
  width: 0.8rem;
  height: 0.7rem;
  display: inline-block;
  margin-left: 0.3rem;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link .icon-language,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-id,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-au,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-sg,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-th,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-cn,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-en,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-my,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i .icon-language-my,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i .icon-language-en {
  height: 21px;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i {
  width: 26px;
  height: 20px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-my,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i .icon-language-my,
#main-nav .inner-nav .navbar-nav .nav-item .nav-link i .icon-language-en {
  background-image: url("../img/sidebar/sidebar-icon/ma.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-en {
  background-image: url("../img/sidebar/sidebar-icon/ma.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-ma {
  background-image: url("../img/sidebar/sidebar-icon/ma.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-cn {
  background-image: url("../img/sidebar/sidebar-icon/ma.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-th {
  background-image: url("../img/sidebar/sidebar-icon/th.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-sg {
  background-image: url("../img/sidebar/sidebar-icon/sg.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-au {
  background-image: url("../img/sidebar/sidebar-icon/aud.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-language-id {
  background-image: url("../img/sidebar/sidebar-icon/id.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-home {
  background-image: url("../img/sidebar/sidebar-icon/home.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-vip {
  background-image: url("../img/sidebar/sidebar-icon/vip_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-user {
  background-image: url("../img/sidebar/sidebar-icon/acc_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-promo {
  background-image: url("../img/sidebar/sidebar-icon/promo_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-redeem {
  background-image: url("../img/sidebar/sidebar-icon/redeem.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-refer {
  background-image: url("../img/sidebar/sidebar-icon/referral_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-download {
  background-image: url("../img/sidebar/sidebar-icon/download.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-contact {
  background-image: url("../img/sidebar/sidebar-icon/contact us_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-sport {
  background-image: url("../img/sidebar/sidebar-icon/sportsbook_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-p2p {
  background-image: url("../img/sidebar/sidebar-icon/p2p_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-casino {
  background-image: url("../img/sidebar/sidebar-icon/livecaino.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-slot {
  background-image: url("../img/sidebar/sidebar-icon/slots_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-lotto {
  background-image: url("../img/sidebar/sidebar-icon/lottery_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-cock {
  background-image: url("../img/sidebar/sidebar-icon/cock_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-number {
  background-image: url("../img/sidebar/sidebar-icon/number_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-sponsor {
  background-image: url("../img/sidebar/sidebar-icon/sponsor_icon.png");
  background-size: 100%;
  width: 22px;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-tnc {
  background-image: url("../img/sidebar/sidebar-icon/t&c_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-logout {
  background-image: url("../img/sidebar/sidebar-icon/logout_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-desktop {
  background-image: url("../img/sidebar/sidebar-icon/desktop_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-affiliate {
  background-image: url("../img/sidebar/sidebar-icon/affiliate_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link i.icon-gift {
  background-image: url("../img/sidebar/sidebar-icon/spin_icon.png");
  background-size: 100%;
}

#main-nav .inner-nav .navbar-nav .nav-item .nav-link span {
  /* font-family: "montserrat"; */
  padding-left: 15px;
  text-transform: uppercase;
  font-size: 12px;
}

@media (max-width: 360px) {
  #main-nav .inner-nav .navbar-nav .nav-item .nav-link span {
    font-size: 11px;
  }
}

a.nav-link {
  /* border-bottom: 1px solid #373b3f6b; */
  padding-left: 0px !important;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  gap: 5px;
  align-items: center;
}

#main-nav .inner-nav .navbar-nav .nav-group .nav-item a.nav-link {
  border-bottom: 1px solid #373b3f6b;
  font-weight: 300;
}

a.nav-link .nav-link-item img {
  display: inline-block;
  width: 26px;
}

.last a.nav-link {
  border-bottom: none;
}

/* member_center */
#member-center .member-header {
  padding: 69px 18px;
}

.member_list_center {
  display: flex;
  flex-flow: column wrap;
  gap: 15px;
  justify-content: center;
  width: 100%;
}

.member_list_center a {
  text-decoration: none;
}

.member-list-bg {
  background: #2d2d2d;
  border-radius: 7px;
  width: 100%;
}

.member-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px;
}

.member-name {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.member-name h4 {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

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

.balance_wrap span {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
}

.balance_wrap span#member_creadit {
  font-size: 20px;
}

.balance_wrap h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.balance_wrap img {
  width: 18px;
}

.member-refresh {
  width: 40px;
  height: 40px;
  background: #252522;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .member-refresh {
    width: 35px;
    height: 35px;
  }
}

.member-refresh img {
  width: 16px;
  height: 16px;
}

/* end */

.member-info-link {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 23px;
}

.member-link-box {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  width: 100%;
  height: 110px;
  height: 144px;
}

@media (max-width: 767px) {
  .member-link-box {
    height: 95px;
  }
}

@media (max-width: 375px) {
  .member-link-box {
    height: 87px;
  }
}

.member-link-box span {
  color: #fff;
  font-size: 14px;
  font-size: 12px;
  font-weight: 300;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* overflow: hidden; */
  text-transform: capitalize;
}

.member-link-icon {
  width: 100%;
  height: 100%;
  background: #2d2d2d;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
}

.member-link-icon img {
  width: 40px;
}

@media (max-width: 767px) {
  .member-link-icon img {
    width: 26px;
  }
}

@media (max-width: 375px) {
  .member-link-icon img {
    width: 24px;
  }
}

.member-link-icon .msg_box {
  position: relative;
}

.icon_msg {
  position: absolute;
  width: 17px;
  height: 17px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -10px;
  right: -10px;
  border-radius: 25px;
}

.icon_msg span {
  font-size: 12px;
  color: #fff;
}


/* about */
.member-about-us ul.member-about-list {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: start;
  gap: 30px;
  padding: 23px 33px;
  margin: 0;
}

@media (max-width: 767px) {
  .member-about-us ul.member-about-list {
    gap: 20px;
    padding: 20px 25px;
  }
}

@media (max-width: 375px) {
  .member-about-us ul.member-about-list {
    gap: 16px;
    padding: 20px 22px;
  }
}

.member-about-us ul li {
  list-style: none;
}

.member-about-us ul li .member-about-item {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.member-about-name {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.member-about-name img {
  width: 25px;
}

@media (max-width: 767px) {
  .member-about-name img {
    width: 18px;
  }
}

.member-about-name h3 {
  font-size: 14px;
  color: #fff;
  margin: 0;
  font-weight: 300;
}

@media (max-width: 767px) {
  .member-about-name h3 {
    font-size: 12px;
  }
}

.icon_arrow_right img {
  width: 20px;
}

/* logout */

.member-logout {
  padding: 12px 33px;
  margin: 0;
}

@media (max-width: 767px) {
  .member-logout {
    padding: 10px 25px;
  }
}

@media (max-width: 375px) {
  .member-logout {
    padding: 10px 22px;
  }
}

.member-logout li {
  list-style: none;
}

.member-logout li .member-logut-item {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.member-logout-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.member-logout-icon img {
  width: 20px;
}

.member-logout-icon h3 {
  font-size: 13px;
  color: #fff;
  font-size: 300;
  margin: 0;
}

/* deposit_tablist */
.deposit_tablist {
  background: #2D2D2D;
  border-radius: 10px;
  padding: 8px;
}

.depolist .nav-pills {
  grid-template-columns: repeat(2, 1fr);
}

.depolist .nav-pills li {
  width: 100%;
}

.depolist .nav-pills li .nav-link {
  width: 100%;
  justify-content: center;
}


.method_wraper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
}

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


.method_box {
  width: 100%;
  height: 80px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.method_wraper_crypto .method_box {
  height: 85px;
  gap: 10px;
}

.method_box .method_icon {
  background: #2D2D2D;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.method_box .method_icon img {
  width: 35px;
}

#crypto-form .method_box .method_icon img {
  width: 40px;
}

.method_box.active .method_icon {
  border: 2px solid #FFBF29;
}

.method_box span {
  font-size: 11px;
  color: #8D8D8D;
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
}

.method_box.active span {
  color: #FFBF29;
}

.method_box .method_icon .icon-tick {
  display: none;
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 16px;
  height: 16px;
  background-color: #FFBF29;
  overflow: hidden;
  border-radius: 10px 0px 0 0;
}

.method_box .method_icon .icon-tick::before {
  content: "";
  background: url(../img/deposit/tick.png) no-repeat;
  background-size: 100%;
  background-position: center;
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  right: 2px;
  bottom: 1px;
}

.method_box.active .method_icon .icon-tick {
  display: block;
}

/* banks-box */

.bank_list_wrap {
  background: var(--backgroud-theme);
  border-radius: 10px;
  padding: 10px;
}

.bank-options {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.bank_wrapper {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.bank_group {
  display: flex;
  gap: 15px;
  align-items: center;
  position: relative;
  padding: 10px 0;
  padding-left: 15px;
  background: unset;
}

.bank_group input {
  background-color: unset;
  border: 1px solid #8D8D8D;
  width: 15px;
  height: 15px;
  position: relative;
  appearance: none;
}

.bank_group input[type=radio] {
  border-radius: 50%;
}

.bank_group input[type=radio]:checked {
  background-color: #FFBF29;
  border-color: #FFBF29;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
}

.bank_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #8d8d8d38;
  padding-bottom: 13px;
  width: 100%;
}

.bank_group .bank_box {
  padding-bottom: 0;
}

.bank_list_wrap .bank_box {
  padding-bottom: 0;
  border: none;
}

.bank_transfer_item {
  border: 0;
}

.bank_detail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bank_icon {
  background: #2D2D2D;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.bank_list_wrap .bank_icon {
  background: var(--background-boby);
}

.bank_group .bank_icon,
.bank_list_wrap .bank_icon {
  width: 40px;
  height: 40px;
}

.bank_box.active .bank_icon {
  border: 2px solid #FFBF29;
}

.bank_icon img {
  width: 30px;
}

.bank_group .bank_icon img {
  width: 25px;
}

.bank_list_wrap .bank_icon img {
  width: 24px;
}

.bank_name_stye {
  color: #F0F0F0;
  font-size: 13px;
  font-weight: 400;
}

.bank_box.active .bank_name_stye {
  color: var(--theme-color-text);
}

.no_records {
  text-align: center;
  color: #D6D6D6;
  font-size: 14px;
  padding: 3px 0;
}

.status_online {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status_online span {
  background: #2d4630cf;
  border-radius: 25px;
  color: #32b032;
  font-size: 13px;
  padding: 5px 18px;
}

.bank-option-wrapper .accordion-button::after {
  display: none;
}

.bank-option-wrapper .accordion-button:not(.collapsed) {
  background: unset;
}

#profile .profile-header {
  background: url(../img/member-center/profile_bg.png) no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  max-width: 600px;
  margin: auto;
  position: relative;
}

.card-group-profile {
  padding: 0 20px;
  padding-top: 227px;
  padding-bottom: 150px;
}

@media (max-width: 768px) {
  .card-group-profile {
    padding-top: 155px;
  }
}

@media (max-width: 428px) {
  .card-group-profile {
    padding-top: 142px;
  }
}

@media (max-width: 375px) {
  .card-group-profile {
    padding-top: 135px;
  }
}

.profile_user {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 50%;
  margin: auto;
}

.profile_img {
  position: absolute;
  top: 120px;
  right: 163px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile_img img {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  border: 4px solid #141C1C;
}

.profile_user span {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  padding: 10px;
}

.profile_noties {
  margin-top: 20px;
}

.profile_noties .section-content {
  border-radius: 8px;
}

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

.date_user {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  /* align-items: end; */
}

.date_user p {
  margin: 0;
  padding: 0;
  color: #8D8D8D;
  font-size: 9px;
  display: flex;
  justify-content: space-between;
  gap: 3px;
}

.date_user span {
  color: #FFBF29;
  width: 95px;
  display: flex;
  justify-content: space-evenly;
}

/* verify */
.input-group-item {
  position: relative;
}

.input-group-item .not_yet {
  color: red;
}

.input-group-item .verified {
  color: #66E072;
}

.input-group-item .edit_dob {
  color: #FFBF29;
}

.text_verify {
  position: absolute;
  right: 17px;
  top: 50%;
  bottom: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #F0F0F0;
  display: flex;
  align-items: center;
}

#date_of_birth .edit_dob {
  pointer-events: none;
}

.content_radio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background: var(--background-boby);
}

.content_radio input {
  display: none;
}

.gener-item {
  width: 50%;
}

.label_radio {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  background: var(--background-boby);
  border-radius: 10px;
  color: #D6D6D6;
  font-size: 12px;
  padding: 10px;
  gap: 5px;
}

.content_radio input[type="radio"]:checked+label {
  background: #8D8D8D;
  color: #F0F0F0;
  border-radius: 10px;
}

.label_radio img {
  width: 17px;
}

.label_radio.active {
  background: #8D8D8D;
  color: #F0F0F0;
  border-radius: 10px;
}

.modal_verify {
  overflow: unset !important;
}

.modal.modal_verify .modal-dialog {
  margin: 17px;
}

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

.modal.modal_verify .modal-dialog-centered {
  min-height: calc(100% - 0rem) !important;
}

.modal_verify .modal-content {
  background: #2D2D2D;
  border-radius: 8px;
}

.modal_verify .modal-header {
  justify-content: center;
  padding: 8px 5px;
  /* background: var(--backgroud-theme-tab); */
  border-radius: 8px 8px 0 0;
  border: none;
}

.modal_verify .modal-header .modal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 30px;
  padding-top: 10px;
}

.modal_verify .modal-header .btn-close {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 13px;
  background: url(../img/member-center/close.png) no-repeat;
  width: 7px;
  height: 7px;
  background-size: 100%;
  ;
}

.modal_verify .modal-content .modal-body {
  padding: 25px 20px;
  padding: 0;
  max-height: 670px;
  overflow: scroll;
}

.modal-wrapper {
  padding: 25px 20px;
}

.modal_verify .modal-content .message-modal-title {
  padding-bottom: 15px;
  border-bottom: 1px solid #8D8D8D4F;
}

.modal_verify .mobile-sticky {
  border-top: 1px solid #8D8D8D4F;
  padding: 15px 0;
}

.popup_verify {
  padding: 25px 17px;
  padding-bottom: 40px;
}

.modal_verify .form-label {
  position: relative;
}

.modal_verify input {
  background: var(--background-boby) !important;
  color: var(--theme-color-text);
}

#shipping-modal input {
  padding: 9px 20px;
}

.modal_verify input:focus {
  background: var(--background-boby) !important;
}

.verified-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url(../img/member-center/tick.png) no-repeat;
  background-size: contain;
  background-position: center;
}

.shipping-info-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url(../img/member-center/attention.png) no-repeat;
  background-size: contain;
  background-position: center;
}

.send_code {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-color-text);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  background: none;
  outline: none;
  border: none;
}

.send_code:focus {
  color: var(--theme-color-text);
}

/* end-verify */

.loading_page {
  background-color: rgb(0 0 0);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 9999999;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading_page img {
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 200px;
  animation: breathing 1.5s ease-in-out infinite;
}

@keyframes breathing {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

#recharge_card .recharge_headaer {
  background: url(../img/redeem/redeem_banner.png) no-repeat;
  background-size: 100%;
  background-position: top;
  max-width: 600px;
  margin: auto;
  position: relative;
  padding-top: 350px;
  padding-bottom: 120px;
}

#recharge_card .recharge_card {
  background: var(--backgroud-theme);
  margin: 0 20px;
  height: 100%;
  padding: 0 20px;
  border-radius: 10px;
}

.recharge_form input,
.recharge_form input:focus {
  background: var(--background-boby) !important;
}

.top_description {
  text-align: center;
  padding: 20px 0;
}

.top_description h3 {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  padding-bottom: 15px;
}

.top_description p {
  color: #8D8D8D;
  font-size: 12px;
  margin: 0;
}

.term_text {
  text-align: center;
  color: #8D8D8D;
  font-size: 12px;
  padding: 10px;
}

/* point_wheel */
#wheelcanvas {
  width: 315px;
  height: 315px;
}

#point_wheel {
  position: relative;
  max-width: 600px;
  margin: auto;
}

#point_wheel ul.nav-pills {
  background: #1e1e1c;
  border-bottom: 1px solid #80808029;
}

#point_wheel ul.nav-pills .nav-item .nav-link {
  border-radius: 0;
  justify-content: center;
}

@media (max-width: 400px) {
  #point_wheel ul.nav-pills .nav-item .nav-link {
    font-size: 12px;
  }
}

#point_wheel ul.nav-pills .nav-item .nav-link.active {
  background: none;
  color: var(--theme-color-text);
  border-bottom: 1px solid var(--theme-color-text);
}

.point-wheel-wrapper {
  background: url(../img/lucky-spin/home/bg-new.png) no-repeat;
  background-size: 100% 100%;
  background-position: top;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  height: 107vh;
}

.point-wheel {
  margin: 0 13px;
  padding-top: 15px;
  padding-bottom: 85px;
  display: flex;
  flex-flow: column;
  gap: 15px;
}

.spin-text {
  background: #d6d6d64a;
  backdrop-filter: blur(22px) brightness(0.15);
  border-radius: 15px;
  padding: 5px 10px;
  color: #F0F0F0;
  font-size: 10px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
}

.spin-text img {
  width: 15px;
}

.spin-bottom-text {
  text-align: center;
  color: #8D8D8D;
  font-size: 12px;
  padding: 10px 0;
}

.spin-bottom-text h3 {
  color: #8D8D8D;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
}

.spin-bottom-text p {
  color: #8D8D8D;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

.spin_now {
  width: 80%;
  margin: auto;
  outline: unset;
}

.spin_now:focus {
  outline: unset;
  box-shadow: unset;
}

#num-spin {
  color: #FFBF29;
}

.point_jackpot {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: center;
  max-width: 600px;
  height: 160px;
  margin: auto;
  margin-top: 20px;
  position: relative;
}

@media (max-width: 767px) {
  .point_jackpot {
    height: 100px;
  }
}

@media (max-width: 375px) {
  .point_jackpot {
    height: 100px;
  }
}

.mega_point {
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  width: 33.33%;
}

.major_point {
  position: absolute;
  left: 0px;
  bottom: 0;
  width: 33.33%;
}

.minor_point {
  position: absolute;
  right: 0px;
  bottom: 0;
  width: 33.33%;
}

.major_point img {
  width: 100%;
}

.mega_point img {
  width: 100%;
}

.minor_point img {
  width: 100%;
}

.price_point_img {
  position: relative;
}

.price_point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -7%);
  color: #F0F0F0;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
}

/* prizes */

.point-wheel-prizes {
  background: url(../img/lucky-spin/prizes/bg.png) no-repeat;
  background-size: 100%;
  background-position: top;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  height: 100vh;
}

.box_prizes_jakpot {
  background: url(../img/lucky-spin/prizes/progressive_jackpot_frame.png) no-repeat;
  background-size: 100% 100%;
  background-position: top;
  width: 100%;
  height: 390px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 15px;
}

.wheel-prizes-wrapper {
  width: 94%;
  margin: auto;
}

.jackpot_text {
  /* padding: 0 40px;
  padding-top: 60px;
  padding-bottom: 20px; */
}

.jackpot_text h3 {
  color: #F0F0F0;
  font-size: 27px;
  font-weight: 500;
  text-align: center;
}

.jackpot_text p {
  color: #8D8D8D;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

.jackpot_price_item {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 27px;
  padding: 4px 0;
}

.price_img {
  width: 104px;
  height: auto;
}

.price_img img {
  width: 100%;
  height: 100%;
}

.price_amount {
  display: flex;
  flex-flow: column;
  justify-content: start;
  align-items: start;
  gap: 3px;
}

.start_text {
  color: #8D8D8D;
  font-size: 13px;
  margin: 0;
}

.amount_value {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFBF29;
  font-size: 21px;
  font-weight: 500;
  line-height: 0;
}

.reset_text {
  color: #746116;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

.box_prize_reward {
  background: url(../img/lucky-spin/prizes/rewards_frame.png) no-repeat;
  background-size: 100%;
  background-position: top;
  width: 100%;
  /* height: 100%; */
  display: flex;
  flex-flow: column;
  gap: 15px;
  padding: 15px;
}

.rewaed_wrapper {
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.rewaed_wrapper p {
  color: #8D8D8D;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

.rewaed_wrapper h3 {
  color: #F0F0F0;
  font-size: 27px;
  font-weight: 500;
  text-align: center;
}

.reward_item_wrapper {
  padding: 10px 0;
  width: 80%;
}

.reward_item p {
  color: #8D8D8D;
  font-size: 12px;
  margin: 0;
}

.reward_item h3 {
  color: #F0F0F0;
  font-size: 23px;
  margin: 0;
}

.reward_item sub {
  top: -8px;
}

.reward_prize {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 57px;
}

.reward_prize em {
  width: 1px;
  height: 77px;
  border: 1px solid #8D8D8D;
}

.first_prize {
  border-bottom: 2px solid #8D8D8D;
  padding-bottom: 10px;
}

@media (max-width: 767px) {
  .jackpot_price_item {
    gap: 10px;
  }

  .jackpot_text h3 {
    font-size: 27px;
  }

  .jackpot_text p {
    font-size: 10px;
  }

  .start_text {
    font-size: 12px;
  }

  .amount_value {
    font-size: 15px;
  }

  .rewaed_wrapper {
    height: 270px;
  }

  .rewaed_wrapper h3 {
    font-size: 20px;
  }

  .rewaed_wrapper p {
    font-size: 10px;
  }

  .reward_item h3 {
    font-size: 15px;
  }

}


/* how to */
.cupon_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin: 0px 30px;
  gap: 13px;
}


/* .how-to-content {
  padding: 20px 0;
} */

.how_to_title {
  padding-top: 30px;
  padding-bottom: 5px;
}

.how_to_title h3 {
  text-align: center;
  color: #F0F0F0;
  font-size: 23px;
  font-weight: 400;
  margin: 0;
}

.ticket_frame {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 6px;
}

.gift_item img {
  width: 100%;
}

.gift_text {
  color: #8D8D8D;
  font-size: 12px;
  text-align: center;
  height: 60px;
}

.gift_text span {
  color: #F0F0F0;
  font-size: 12px;
  font-weight: 500;
}

.depo_img img {
  width: 100%;
}

.depo_text {
  color: #8D8D8D;
  font-size: 12px;
  text-align: center;
}

.depo_text span {
  color: #F0F0F0;
  font-size: 13px;
}

.depo_amount {
  color: #f1b81e;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

.btn_reward {
  width: 77%;
  margin: auto;
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-top: 30px;
}

.spin_big {
  background: var(--background-boby);
  box-shadow: unset;
  border: unset;
  padding: 15px 20px !important;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  outline: unset;
  text-decoration: none;
  display: block;
  color: #F0F0F0;
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid #FFBF29;
}

.btn_reward .btn_theme {
  font-size: 15px;
}

.btn_reward .btn_theme:hover {
  color: var(--theme-color-btn);
}

/* live-match */

.bg_matches {
  background: url(../img/home/live-matches/bg_Live_matches.png)no-repeat center;
  background-size: 100% 100%;
  height: 440px;
}

@media (max-width: 767px) {
  .bg_matches {
    height: 356px;
  }
}

.live_match_img {
  background: url(../img/home/live-matches/title_live_matches.png) no-repeat center;
  background-size: 100%;
  width: 90%;
  height: 100px;
  margin: auto;
  background-position: 0px 5px;
}

@media (max-width: 768px) {
  .live_match_img {
    background-position: 0px 33px;
  }
}

.live_slider {
  width: 100%;
  height: 100%;
  margin: auto;
}

.card_match {
  background: url(../img/home/live-matches/frame_live_matches.png) no-repeat center;
  height: 225px;
  background-size: 100% 100%;
  margin: auto;
}

@media (max-width: 767px) {
  .card_match {
    height: 180px;
  }
}

.match-boby {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: 30px;
  height: 100%;
}

@media (max-width: 767px) {
  .match-boby {
    gap: 15px;
  }
}

.title_match {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
}

.match-time {
  color: #000;
  font-size: 9px;
  display: flex;
  align-items: center;
}

.match-time p {
  margin: 0;
}

.match-time span {
  padding: 0 5px;
}

.detail_match {
  font-weight: 600;
}

.btn-see-more {
  color: #000;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  font-weight: 400;
}

.btn-see-more:hover {
  color: #000;
}

.btn-see-more img {
  width: 8px;
}

.team_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

@media (max-width: 767px) {
  .team_wrapper {
    gap: 10px;
  }
}

.vs-img {
  width: 50px;
}

.vs-img img {
  width: 100%;
}

.team_logo_wrap {
  display: flex;
  flex-flow: column;
  gap: 7px;
  justify-content: center;
  align-items: center;
}

.team_logo {
  width: 55px;
}

.team_logo img {
  width: 100%;
  height: 100%;
}

.team-name {
  font-size: 10px;
  color: #000;
  font-weight: 600;
  /* text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; */
  text-align: center;
  width: 80px;
}

.team-score-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  width: 90%;
  height: 40px;
  margin: auto;
  gap: 20px;
}

@media (max-width: 767px) {
  .team-score-wrap {
    height: 30px;
  }
}

.match-odd {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: url(../img/home/live-matches/button_live_matches.png) no-repeat center;
  background-position: center;
  background-size: 100% 100%;
  height: 100%;
}

.match-odd h3 {
  font-size: 10px;
  color: #ffffffb3;
  margin: 0;
}

.match-odd h3 p{
  margin: 0;
}

.match-odd .hdp1,
.match-odd .hdp5{
  display: none;
}

.match-odd-mit {
  display: none;
}

.learn_more_btn {
  border: 1px solid #fff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 33px;
  margin: auto;
  margin-top: 25px;
  text-decoration: none;
  text-transform: capitalize;
  gap: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.learn_more_btn:hover {
  color: #fff;
}

.learn_more_btn img {
  width: 10px;
}

.center-form.transfer .depositfr {
  padding: 0 20px;
}

#show_about_foot {
  width: 13px;
}

#show_about_foot img {
  width: 100%;
  height: 100%;
}

#about-footer p {
  margin: 0;
}

.rotate_180 {
  rotate: 180deg;
  transition: all .4s;
}

/* .popup-refer-share */
.popup-refer-share #popup-share .modal-content {
  position: relative;
  border: none;
  border-radius: 10px;
  background-color: #edf4fd;
}

.popup-refer-share #popup-share .modal-content .btn-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  background: none;
  cursor: pointer;
}

.popup-refer-share #popup-share .modal-content .btn-close img {
  max-width: 100%;
  height: 100%;
  vertical-align: baseline;
}

.popup-refer-share #popup-share .modal-content .modal-body {
  background: var(--backgroud-theme);
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  box-shadow: 0 4px 15px rgba(152, 181, 224, 0.2);
  border-radius: 10px;
  padding: 50px 30px;
}

.popup-refer-share #popup-share .modal-content .modal-body .share-section .social-media-wrapper {
  margin-top: 0;
}

@media (max-width: 768px) {

  .popup-refer-share #popup-share .modal-content .modal-body {
    padding: 30px 10px
  }
}

.slots_menu_content {
  position: sticky;
  top: 50px;
  z-index: 999;
  background: #141d1c;
}

.section-list {
  padding: 0 17px;
}

.invite-list-content {
  display: flex;
  justify-content: end;
}

.invite-list-content .input-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0px;
  border-radius: 6px;
  border: 1px solid #ffbf29d6;
  width: 30%;
  margin: 13px 0px;
  padding: 1px 6px;
}

.invite-list-content .input-date input{
  outline: none;
  width: 100%;
  color: #ffbf29d6;
  font-size: 11px;
  border: none;
  margin: 1px;
}

.invite-list-content .input-date input::placeholder {
  color: #ffbf29d6;
  font-size: 11px;
}

span.bar {
  display: block;
  width: 11px;
  height: 11px;
  background: url(../img/referral/calendar.png) no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.section-list .list-referral {
  border-radius: 7px;
  background: #262827;
}

.section-list .table thead {
  background: #FFBF29;
  clip-path: rect(0px 100% 100% 0px round 7px 7px 0px 0px);
}

.section-list .table thead th{
  font-size: 11px;
  font-weight: 500;
  color: #000;
}

.section-list .table tbody td{
  color: #e1e3e2;
}

.no-record-text{
  background: #262827 !important;
  color: #5d5f5e !important;
  font-size: 13px;
  padding: 13px;
  border-radius: 8px;
}

.lobby-menu-home {
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  overflow-x: scroll;
}

/* .lobby-menu-home::-webkit-scrollbar {
  height: 2px;
  background: none !important;
}

.lobby-menu-home::-webkit-scrollbar-thumb {
  background: #353638;
  height: 2px;
} */

.lobby-menu-home::-webkit-scrollbar-track {
  background: none !important;
  border-radius: 100px;
  margin: auto 20px;
}

/* flatpickr */
.flatpickr-calendar {
  width: 100% !important;
  bottom: 0px !important;
  top: unset !important;
  left: 0 !important;
  right: 0 !important;
  background: #2d2d2d !important;
  box-shadow: unset !important;
  display: flex;
  justify-content: center;
  /* max-width: 600px; */
  margin: auto;
}

.flatpickr-innerContainer {
  display: flex !important;
  justify-content: center !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #c0c0c0 !important;
}

.flatpickr-current-month {
  color: #c0c0c0 !important;
}

span.flatpickr-weekday {
  color: #c0c0c0 !important;
}

.flatpickr-day {
  color: #c0c0c0 !important;
}

.prevMonthDay {
  color: #c0c0c03d !important;
}

.flatpickr-day.selected {
  color: #000 !important;
}

.flatpickr-day.selected,.flatpickr-day.startRange {
  background: #FFBF29 !important;
  border-radius: 1px !important;
  box-shadow: unset !important;
  border: none !important;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
  display: none !important;
}

/* .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {

} */