body {
  font-family: Kanit, sans-serif;
  margin: 0;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #a5904e;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d7bf71;
}
footer {
  background-color: #a5904e;
  color: #fff;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 0;
}
.boxcolor {
  background: #111111bf;
  box-shadow: 0 0 20px 0 #51411970;
}
@media (max-width: 768px) {
  .boxcolor {
    background: #00000096;
  }
}
.mcolor {
  background: radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #fff 0,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  text-shadow: 0 0 1px #fff, 0 0 15px #fff, 0 0 25px #fff;
  font-weight: 700;
}
.bkcolor {
  background: #323232;
}
.cutcolor {
  color: #ffda6a;
}
.bkcolor:hover {
  background: #3b3b3b;
}
.tmcolor {
  color: #ff5858;
}
.containinlogin {
  padding: 0 30px;
  margin: 0 auto;
  color: #ddd;
}
.loginform01 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #3a3a3a;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding-left: 35px;
}
.loginform01:read-only {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #0e1220;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding-left: 35px;
}
.iconlogin {
  color: #fff;
  position: absolute;
  margin-top: 7px;
  margin-left: 7px;
}
.loginform01::placeholder {
  color: #888;
  opacity: 1;
}
.loginform01:focus {
  background: #2d2e31;
  border: none;
  color: #fff;
  outline: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff;
  -webkit-background: #1e1c38b8;
  -webkit-box-shadow: 0 0 0 1000px #695c40 inset;
  transition: background-color 5000s ease-in-out 0s;
}
.colorbtn01 {
  width: 50%;
  max-width: 300px;
  min-width: 250px;
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0 auto;
}
.logologin {
  text-align: center;
  padding: 10px;
}
.containlogin {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 30px;
  padding-bottom: 30px;
  position: relative;
}
.containall {
  padding-bottom: 10px;
}
.contentmain {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 20px;
  padding-bottom: 30px;
  position: relative;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .contentmain {
    margin-top: 0;
    border-radius: 0;
    box-shadow: 0 0 0 0 #000;
  }
}
@media (max-width: 600px) {
  .containall {
    padding-bottom: 30px;
  }
}
.containregister {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 40px;
  padding-bottom: 40px;
  position: relative;
}
.needregister {
  width: 50%;
  max-width: 300px;
  min-width: 250px;
  text-align: center;
  border-radius: 10px;
  padding: 11px 0;
  margin: 0 auto;
  margin-top: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.bankselectpopup {
  display: none;
  position: fixed;
  height: 500px;
  max-width: 400px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto auto;
}
.inbankselectpopup {
  height: 500px;
  width: 100%;
  overflow: auto;
  background: #131724;
  box-shadow: 0 0 0 1px #a99871;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  overflow: auto;
  animation: showbank 0.5s ease 0s normal none;
}
.closeanimationselectbank {
  animation: showbankclose 0.5s ease 0s normal none;
}
.btnclosebankselect {
  position: absolute;
  right: 30px;
  top: 3px;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  padding: 0 7px;
  background: #ed2638;
  color: #fff;
  transition: 0.3s;
}
.bankselectpopup img {
  width: 70px;
}
.bankselectpopup table {
  width: 100%;
  text-align: center;
}
.bankselectpopup td {
  padding: 10px;
  width: 50%;
}
.selectbank {
  cursor: pointer;
}
@keyframes showbank {
  0.0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
  50.3% {
    transform: translate(0, -100px);
  }
  74.9% {
    transform: scale(1) translate(0, 0);
  }
}
@keyframes showbankclose {
  0.0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(0.1) translate(-900px, 0);
  }
}
.textlogin {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff;
  font-weight: 700;
}
.linebtn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
}
.tdstepregister {
  width: 25%;
  background: #504734b8;
  padding: 10px 0;
}
.tdstepregister b {
  background: #000;
  padding: 0 9px;
  border-radius: 20px;
}
.tdstepregister.active b {
  color: #000;
  font-weight: 700;
  background: #dfcb7a;
}
.tdstepregister span {
  font-size: 14px;
}
.btnofregister {
  margin-top: 40px;
  white-space: nowrap;
}
.tdbtnregister {
  width: 50%;
  padding: 0 10px;
}
.btnbackregister {
  width: 100%;
  border: none;
  padding: 10px 0;
  border-radius: 5px;
  color: #fff;
}
.btnnextregister {
  width: 100%;
  border: none;
  padding: 10px 0;
  border-radius: 5px;
  color: #fff;
}
.slideto {
  animation: slidenextregister 0.2s ease 0s normal none;
}
.showanimate {
  animation: slidenextcontent 0.2s ease 0s normal none;
}
@media (max-width: 768px) {
  .slideto {
    animation: slidenextregistermobile 0.2s ease 0s normal none;
  }
  .showanimate {
    animation: slidenextcontentmobile 0.2s ease 0s normal none;
  }
}
@keyframes slidenextregister {
  0.0% {
    transform: translate(100px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slidenextregistermobile {
  0.0% {
    transform: translate(10px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slidenextcontent {
  0.0% {
    transform: translate(0, -50px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slidenextcontentmobile {
  0.0% {
    transform: translate(0, -50px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.tabcontent {
  display: none;
  -webkit-animation: fadeEffect 0.3s;
  animation: fadeEffect 0.3s;
}
@-webkit-keyframes fadeEffect {
  0.0% {
    transform: translate(0, -50px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeEffect {
  0.0% {
    transform: translate(0, -50px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.checkfinish {
  font-size: 50px;
  text-shadow: 0 0 5px #fff, 0 0 10px #f5dab6, 0 0 20px #f5dab6, 0 0 30px #fff;
}
.finishregister {
  text-align: center;
  font-size: 20px;
}
.finishregister span {
  font-size: 30px;
  color: #f5dab6;
}
.imganimationlogin {
  max-width: 250px;
  height: auto;
  -webkit-filter: drop-shadow(0 0 5px #777);
  filter: drop-shadow(0 0 5px #777);
}
.headmain {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
  font-size: 20px;
  line-height: 25px;
}
.headmain span {
  font-size: 13px;
  color: #888;
}
.logoutbtn {
  border-radius: 20px;
  border: none;
  padding: 3px 6px;
  white-space: nowrap;
  font-size: 20px;
  background: #313131;
  color: #e2b94c;
  font-weight: 700;
  transition: 0.3s;
}
.logoutbtn:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px red, 0 0 20px red, 0 0 30px red;
}
.containmoney {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  padding: 10px;
  padding-bottom: 14px;
  background: linear-gradient(158deg, rgb(60 60 60) 0, #101113 100%);
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  white-space: nowrap;
}
.hrmoney {
  margin: 5px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 5px #f4d166;
  animation: animatelight 5s ease 0s infinite normal none;
}
@keyframes animatelight {
  0.0% {
    box-shadow: 0 0 5px #f4d166;
  }
  20.1% {
    box-shadow: 0 0 5px #f4d166, 0 0 15px #f4d166, 0 0 15px #f4d166,
      0 0 25px #f4d166, 0 0 35px #f4d166;
  }
  54.1% {
    background: #fff;
    box-shadow: 0 0 5px #f4d166, 0 0 15px #f4d166, 0 0 15px #f4d166,
      0 0 25px #f4d166, 0 0 35px #f4d166;
  }
  55.1% {
    background: #6f5505;
    box-shadow: 0 0 5px #000;
  }
  56.1% {
    background: #fff;
    box-shadow: 0 0 5px #f4d166, 0 0 15px #f4d166, 0 0 15px #f4d166,
      0 0 25px #f4d166, 0 0 35px #f4d166;
  }
  57.1% {
    background: #fff;
    box-shadow: 0 0 5px #f4d166, 0 0 15px #f4d166, 0 0 15px #f4d166,
      0 0 25px #f4d166, 0 0 35px #f4d166;
  }
  58.1% {
    background: #5d4910;
    box-shadow: 0 0 5px #000;
  }
  59.1% {
    background: #fff;
    box-shadow: 0 0 5px #f4d166, 0 0 15px #f4d166, 0 0 15px #f4d166,
      0 0 25px #f4d166, 0 0 35px #f4d166;
  }
  100% {
    box-shadow: 0 0 5px #f4d166;
  }
}
.fas.fa-wallet {
  font-size: 45px;
  color: #fff;
  border-radius: 50px;
  padding: 11px 12px;
  box-shadow: 0 0 0 1px #8c8b8b;
  text-shadow: 0 0 1px #fff, 0 0 20px #fff;
}
.btncommis,
.btnfriend {
  width: 90%;
  border: none;
  border-radius: 5px;
  padding: 5px 0;
  color: #fff;
}
.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgb(0 0 0 / 0%);
  border-top: 1px solid rgb(0 0 0 / 0%);
}
.menucontain {
  text-align: center;
}
.tdgridicon {
  padding-top: 20px;
  width: 25%;
  text-align: center;
  color: #f7f7f7;
  font-size: 14px;
}
.tdgridicon a {
  color: #c3c3c3;
  text-decoration: none;
}
.tdgridicon:hover a {
  color: #c3c3c3;
  text-decoration: none;
}
.tdgridicon span {
  cursor: pointer;
}
.tdgridicon img {
  font-size: 40px;
  margin-bottom: 5px;
  background: #212121;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  padding: 5px;
  cursor: pointer;
  box-shadow: 0 0 0 1px #c7b78a;
}
.tdgridicon img:hover {
  background: #45444a;
  text-shadow: 0 0 5px #fff, 0 0 15px #b2bcff;
  color: #fff !important;
}
.copybtn {
  border: none;
  margin-top: 5px;
  border-radius: 3px;
  height: 25px;
  color: #fff;
  white-space: nowrap;
  text-shadow: none !important;
  font-weight: 100;
}
.friendlink {
  width: 100%;
  color: #ebc468;
  font-size: 20px;
  border-radius: 5px;
  border: none;
  background: #1c2233;
}
.pcfriendback {
  margin-top: 20px;
  font-size: 17px;
}
.containfriend {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 10px;
}
.wrapgrid001 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: center;
  padding: 0 10px;
}
.inwrapgrid001 {
  padding: 0 5px;
  margin-top: 5px;
}
.ininwrapgrid001.active {
  background: #263050;
  box-shadow: 0 0 0 1.5px #ffc107;
}
.ininwrapgrid001 {
  background: #101525;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  line-height: 20px;
  width: 100%;
  max-width: 90px;
  margin: 0 auto;
  padding: 5px 0;
  box-shadow: 0 0 0 1.5px #3d4663;
}
.moneycontainaf {
  width: 100%;
  background: linear-gradient(158deg, rgb(59 59 59) 0, rgb(19 20 22) 100%);
  border-radius: 20px;
  margin-top: 8px;
  text-align: left;
  color: #fff;
  font-size: 14px;
  padding: 10px 40px;
  box-shadow: 0 0 5px 0 #947a2d;
}
.fas.fa-users-crown {
  font-size: 45px;
  color: #fff;
  border-radius: 50px;
  padding: 10px 5px;
  box-shadow: 0 0 0 1px #8c8b8b;
}
.countearnmoney {
  padding: 0 5px;
  font-size: 11px;
  background: #101525;
  border-radius: 20px;
  color: #fff;
}
.containlinkcopy {
  margin-top: 5px;
}
.friendlink {
  width: 100%;
  color: #fff;
  font-size: 13px;
  border-radius: 3px;
  border: none;
  background: #141416;
}
.btnfriendback02 {
  background: #bb9b3a;
  font-size: 13px;
  border: none;
  color: #fff;
  border-radius: 3px;
  font-weight: 700;
  padding: 0 0;
  width: 70px;
  cursor: pointer;
}
.detailaf {
  padding: 5px 10px;
  font-size: 15px;
  background: #4c4c56;
  border-radius: 4px;
  color: #fff;
}
.indetail {
  font-size: 16px;
  color: #d4d4d4;
  margin-top: 0;
  background: #232324;
  padding: 15px 5px;
  border-radius: 8px;
  padding-left: 10px;
  padding-top: 15px;
  margin-top: -15px;
}
.alert01 {
  margin: 0;
  padding: 6px 16px;
  border: 0;
  font-size: 14px !important;
  border-radius: 6px;
}
.friendcontent {
  display: none;
  -webkit-animation: fadeEffect 0.3s;
  animation: fadeEffect 0.3s;
}
#withdrawfriend {
  height: 10px;
  position: relative;
}
.btn-grad {
  background: linear-gradient(170deg, #18191b 0, #16181b 100%);
  border-radius: 10px;
  box-shadow: 3px 3px 10px #000;
  text-shadow: 0 0 5px #fff, 0 0 5px #fff;
  border: none;
  color: #fff;
  margin-top: 5px;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
}
.btn-grad:hover {
  text-shadow: 0 0 5px #c5932c, 0 0 5px #fdc133, 0 0 10px #fdca34;
}
.divoffriends {
  text-align: center;
  background: #101525;
  border-radius: 20px;
  margin-top: -5px;
  height: 330px;
  overflow: auto;
  padding: 0 10px;
  padding-top: 10px;
}
.wranningwd {
  margin: 10px 0;
  position: relative;
  text-align: left;
  color: #fff;
  font-size: 12px;
}
.btnfriendback02 {
  white-space: nowrap;
}
.moneyfriend {
  padding: 20px 20px;
  margin-top: 15px;
  background: linear-gradient(158deg, rgb(60 60 60) 0, #101113 100%);
  border-radius: 15px;
  -moz-box-shadow: 0 0 0 1px #a99871;
  -webkit-box-shadow: 0 0 0 1px #333435;
  box-shadow: 0 0 0 1px #333435;
}
.wraper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  padding: 10px 0;
}
.ingrid {
  font-size: 13px;
}
.headerprocess {
  /* margin-top: 15px; */
  text-align: center;
  font-size: 30px;
  text-shadow: 3px 3px 10px #000, 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff;
}
.headerprocess i {
  text-shadow: 0 0 0 #000;
  color: #bca057;
  font-size: 23px;
}
.carousel {
  margin-top: 30px;
}
.carousel-cell {
  width: 100%;
  margin-right: 10px;
  border-radius: 5px;
  text-align: center;
}
.carousel-cell img {
  width: 87%;
  border-radius: 10px;
}
.carousel-cell.is-selected {
  opacity: 1;
}
.carousel-cell.is-selected button {
  display: inline;
}
.flickity-button {
  position: absolute;
  background: hsl(0deg 0% 21% / 0%);
  border: none;
  color: #fff;
  outline: 0;
  width: 50px;
}
.flickity-prev-next-button.next {
  right: 0;
}
.flickity-prev-next-button.previous {
  left: 0;
}
.flickity-button:hover {
  background: hsl(0deg 0% 21% / 0%);
}
.carousel2 {
  margin-top: 30px;
}
.flickity-page-dots .dot {
  background: #fff;
  box-shadow: 0 0 5px #fff, 0 0 10px #2196f3, 0 0 15px #2196f3, 0 0 25px #2196f3,
    0 0 35px #2196f3;
}
@media (max-width: 590px) {
  .carousel-cell img {
    width: 85%;
    border-radius: 10px;
  }
}
@media (max-width: 510px) {
  .carousel-cell img {
    width: 80%;
    border-radius: 10px;
  }
}
.backtohome {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 15px;
  font-size: 15px;
  color: #fff;
  background: #2b2c2f;
  padding: 5px 0;
  padding-left: 20px;
  border-radius: 10px;
}
.homebtn {
  font-size: 25px;
}
.textfriend {
  font-size: 20px;
}
@media (max-width: 768px) {
  .textfriend {
    font-size: 15px;
  }
}
.wrapermenucon {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.wrapper-menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  outline: 0;
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 1000;
  transition: all 0.5s;
}
.wrapper-menu2 {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  outline: 0;
}
.wrapper-menu.hamopen {
  position: fixed;
  left: 200px;
  top: 8px;
}
.line {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 3;
  animation: lineone 2s ease 0s infinite normal none;
}
@keyframes lineone {
  50.1% {
    transform: scale3d(1.2, 1, 1) translate(-10px);
  }
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 3;
  animation: linetwo 2s ease 0s infinite normal none;
}
@keyframes linetwo {
  50.1% {
    transform: scale3d(0.8, 1, 1) translate(10px);
  }
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 3;
  animation: linetree 2s ease 0s infinite normal none;
}
@keyframes linetree {
  50.1% {
    transform: scale3d(1.2, 1, 1) translate(-10px);
  }
}
.open .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 3;
  animation: yourAnimation 3s ease 0s infinite normal none;
}
.open .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 3;
  animation: yourAnimation 3s ease 0s infinite normal none;
}
.open .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 3;
  animation: yourAnimation 3s ease 0s infinite normal none;
}
.myAlert-top {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  width: 150px;
  text-align: center;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 10px;
  color: #fff;
}
.alert {
  display: none;
}
.tablewd01 {
  width: 100%;
  max-width: 500px;
}
.wdsec02 {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  font-size: 20px;
  padding: 20px;
  border-radius: 15px;
  background: linear-gradient(158deg, rgb(60 60 60) 0, #101113 100%);
  -moz-box-shadow: 0 0 0 1px #a99871;
  -webkit-box-shadow: 0 0 3px 2px #fbf8a5;
  box-shadow: 0 0 3px 2px #d5bb6c;
}
@media (max-width: 430px) {
  .wdsec02 {
    font-size: 4vw;
  }
}
.headdeposit {
  background: #1a1e2b;
  padding: 10px 0;
}
.headwithdraw {
  background: #141723;
  padding: 10px 0;
}
.headdeposit button {
  background: #2c392c;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  padding: 10px 10px;
  transition: 0.3s;
}
.headwithdraw button {
  background: #4d1e1e;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  padding: 10px 10px;
  transition: 0.3s;
}
.headdeposit.active button {
  box-shadow: 0 0 0 2px #aeffae;
}
.headwithdraw.active button {
  box-shadow: 0 0 0 2px #d05858;
}
#deposithis,
#withdrawwhis {
  text-align: center;
  margin-top: 10px;
  padding: 0 10px;
}
#deposithis {
  animation: historyplusanimate 0.2s ease 0s normal none;
}
#withdrawwhis {
  animation: historyminusanimate 0.2s ease 0s normal none;
}
@keyframes historyplusanimate {
  0.0% {
    transform: translate(-20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes historyminusanimate {
  0.0% {
    transform: translate(20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.containloophisdps {
  height: 500px;
  overflow: auto;
  padding: 0 10px;
  padding-bottom: 15px;
  box-shadow: inset 0 0 10px #000;
  border-radius: 10px;
  background: #0000005c;
}
.containloophisdps::-webkit-scrollbar {
  width: 3px;
}
.containloophisdps::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
.containloophisdps::-webkit-scrollbar-thumb {
  background: #75a975;
  border-radius: 10px;
}
.containloophisdps::-webkit-scrollbar-thumb:hover {
  background: #75a975;
}
.containloophiswd {
  height: 500px;
  overflow: auto;
  padding: 0 10px;
  padding-bottom: 15px;
  box-shadow: inset 0 0 10px #000;
  border-radius: 10px;
  background: #0000005c;
}
.containloophiswd::-webkit-scrollbar {
  width: 3px;
}
.containloophiswd::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
.containloophiswd::-webkit-scrollbar-thumb {
  background: #d05858;
  border-radius: 10px;
}
.containloophiswd::-webkit-scrollbar-thumb:hover {
  background: #d05858;
}
.historyofdps {
  background: #272b27;
  border-radius: 10px;
  padding: 10px;
  margin-top: 13px;
  box-shadow: 0 0 0 2px #404f40;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}
.historyofwd {
  background: #4d1e1e;
  border-radius: 10px;
  padding: 10px;
  margin-top: 13px;
  box-shadow: 0 0 0 2px #894444;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}
.statushistory {
  margin-top: -10px;
}
.statushistory span {
  color: #fff;
  font-size: 13px;
  background: #619d61;
  padding: 0 5px;
  border-radius: 3px;
  border-top-left-radius: 10px;
}
.spanofbankhis {
  font-size: 15px;
}
.prohistory {
  font-size: 12px;
}
.aftercradithis {
  font-size: 11px;
  white-space: normal;
}
.backlogohis {
  width: 40px;
}
.moneyhisdps {
  font-size: 20px;
}
.plushis {
  color: #81e681;
  font-size: 20px;
}
.minushis {
  color: #ed7f7f;
  font-size: 20px;
}
@media (max-width: 600px) {
  .spanofbankhis {
    font-size: 3.5vw;
  }
  .prohistory {
    font-size: 2.5vw;
  }
  .aftercradithis {
    font-size: 2.5vw;
  }
  .backlogohis {
    width: 40px;
  }
  .moneyhisdps {
    font-size: 4vw;
  }
  .minushis {
    font-size: 3vw;
  }
  .plushis {
    font-size: 3vw;
  }
}
.gameingtd {
  width: 25%;
  text-align: center;
  padding: 5px;
}
.gameingtd div {
  padding: 10px 0;
  border-radius: 10px;
  cursor: pointer;
}
.tablinkgame.active {
  background: linear-gradient(160deg, #d1b667 0, #77613d 100%);
  text-shadow: 0 0 5px #fff, 0 0 10px #fff;
  font-weight: 700;
}
.tabgame {
  display: none;
  padding: 6px 5px;
  padding-top: 0;
  -webkit-animation: fadegame 0.3s;
  animation: fadegame 0.3s;
}
@-webkit-keyframes fadegame {
  0.0% {
    transform: translate(0, -10px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadegame {
  0.0% {
    transform: translate(0, -10px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.gridofgame {
  margin-top: 7px;
  padding-bottom: 10px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.ingridgame {
  text-align: center;
  padding: 5px;
}
.ingridgame a {
  text-decoration: none;
  color: #fff;
}
.ingridgame a:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 20px #fff;
}
.ingridgame img {
  width: 50%;
}
.iningridgame {
  border-radius: 10px;
  padding: 0 4px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s;
  background: #242526;
  padding-bottom: 10px;
  height: 100%;
}
.iningridgame:hover {
  transform: scale(1.07);
  opacity: 1;
}
@media (max-width: 600px) {
  .gridofgame {
    grid-template-columns: 1fr 1fr;
  }
  .iningridgame {
    opacity: 1;
  }
}
.cashbmoney {
  width: 50%;
  color: #f7d467;
  font-size: 30px;
}
.btncashback02 {
  font-size: 15px;
  border: none;
  color: #fff;
  border-radius: 15px;
  font-weight: 700;
  padding: 10px 0;
  width: 120px;
}
.pccashback {
  margin-top: 20px;
  font-size: 17px;
}
.slipimage {
  text-align: center;
  margin-top: 15px;
  background: linear-gradient(107deg, rgb(42 44 56) 0, rgb(46 55 87) 100%);
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  padding: 10px 10px;
  padding-bottom: 10px;
  white-space: nowrap;
  box-shadow: 0 0 0 1px #a99871;
  border-radius: 15px;
  margin-top: 20px;
}
.infoslip {
  background: #fff;
  padding: 20px 10px;
  border-radius: 5px;
}
.pdingaccord {
  padding: 10px 20px;
}
.accordion {
  background: linear-gradient(158deg, rgb(69 69 69) 0, rgb(24 24 24) 100%);
  color: #fff;
  cursor: pointer;
  margin-bottom: 5px;
  height: 80px;
  width: 100%;
  max-width: 500px;
  padding: 0 20px;
  border: none;
  text-align: left;
  outline: 0;
  font-size: 20px;
  transition: 0.4s;
  border-radius: 10px;
  box-shadow: 0 0 3px 0 #888;
  outline: 0;
}
.accordion.active {
  background: linear-gradient(158deg, rgb(99 99 99) 0, rgb(33 33 33) 100%);
  color: #fff;
  box-shadow: 0 0 3px 2px #8c7737;
}
.accordion:focus {
  outline: 0;
}
.accordion:after {
  content: "\002B";
  color: #777;
  font-weight: 700;
  float: right;
  margin-left: 5px;
}
.accordion.active:after {
  content: "\2212";
}
.panel {
  color: #fff;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-div {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
}
.copybutton {
  background: #1b1f22;
  font-size: 13px;
  border-radius: 10px;
  margin: 2px 10px;
  border: none;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  outline: 0;
  box-shadow: 0 0 0 1px #5d9aa4, 0 0 5px 1px #000;
}
.rulewd {
  width: 100%;
  background: #bf1a1a;
  background: linear-gradient(277deg, #bf1a1a 0, #4e1b1b 100%);
  box-shadow: 0 0 10px #000;
  border-radius: 20px;
  margin-top: 10px;
  padding: 20px;
  text-align: center;
}
.rulebox {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
  color: #fff;
  font-size: 20px;
  background: #000;
  background: linear-gradient(
    332deg,
    rgba(0, 0, 0, 0.3) 0,
    rgba(0, 0, 0, 0.3) 100%
  );
  border-radius: 20px;
  padding: 10px;
}
.tdbank {
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
}
.tdbank:hover {
  background-color: #ccc;
}
.tabletruewallet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.righttopmain {
  padding-right: 10px;
}
.bglangbtn {
  padding: 5px;
  border-radius: 20px;
}
.languagebtn {
  width: 25px;
  margin-top: -10px;
  cursor: pointer;
}
.paddinglefttop {
  padding-left: 0;
}
@media (max-width: 550px) {
  .paddinglefttop {
    padding-right: 10px;
  }
}
.containpromotion {
  position: relative;
}
/* .swiper-container {
  width: 90%;
  max-width: 1000px;
  height: 650px;
  padding-top: 10px;
  padding-bottom: 50px;
  white-space: nowrap;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  border-radius: 15px;
  box-shadow: 0 0 0 5px rgb(251 214 110), 0 0 0 10px rgb(27 40 88);
}
.swiper-slide.swiper-slide-active {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  border-radius: 15px;
  box-shadow: 0 0 0 5px rgb(251 214 110), 0 0 0 10px rgb(27 40 88);
  margin-top: 20px;
} */
.detailpro {
  display: none;
}
/* .swiper-slide.swiper-slide-active .detailpro {
  position: absolute;
  width: 450px;
  left: -70px;
  margin: 0 auto;
  bottom: -90px;
  line-height: 30px;
  font-size: 20px;
  display: block;
} */
.btnbonus {
  font-size: 20px;
  border-radius: 10px;
  padding: 15px;
  border: none;
  color: #fff;
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 0 0 0 2px #2d2612, 0 0 5px 1px #000;
  font-weight: 700;
  outline: 0;
  transition: 0.4s;
}
.btnbonus:hover {
  font-size: 23px;
  color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px #e8c675, 0 0 20px #e8c675,
    0 0 30px #e8c675;
}
.btnnext {
  padding: 50px 10px;
  margin-top: -190px;
  box-shadow: 0 0 0 2px #a28d51, 0 0 0 6px #1c1f22;
  border-radius: 7px;
  position: absolute;
  top: 50%;
  right: 8px;
  font-size: 25px;
  color: #fff;
  z-index: 999;
  border: none;
}
.btnnext:hover {
  font-size: 25px;
  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px gold, 0 0 20px gold,
    0 0 30px gold;
}
.btnnext.swiper-button-disabled {
  opacity: 0.5;
}
.btnnext.swiper-button-disabled:hover {
  opacity: 0.5;
  text-shadow: 0 0 0 #fff;
}
.btnprev {
  padding: 50px 10px;
  margin-top: -190px;
  box-shadow: 0 0 0 2px #a28d51, 0 0 0 6px #1c1f22;
  border-radius: 7px;
  position: absolute;
  top: 50%;
  left: 8px;
  font-size: 25px;
  color: #fff;
  z-index: 999;
  border: none;
}
.btnprev:hover {
  background: #4a4a4a;
  font-size: 25px;
  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px gold, 0 0 20px gold,
    0 0 30px gold;
}
.btnprev.swiper-button-disabled {
  opacity: 0.5;
}
.btnprev.swiper-button-disabled:hover {
  opacity: 0.5;
  text-shadow: 0 0 0 #fff;
}
@media (max-width: 959px) {
  /* .swiper-slide {
    width: 300px;
    height: 300px;
  }
  .swiper-slide.swiper-slide-active {
    width: 300px;
    height: 300px;
    margin-top: 20px;
  } */
  .btnnext {
    margin-top: -170px;
  }
  .btnprev {
    margin-top: -170px;
  }
  /* .swiper-slide.swiper-slide-active .detailpro {
    position: absolute;
    width: 400px;
    left: -50px;
    margin: 0 auto;
    bottom: -90px;
    line-height: 30px;
    font-size: 18px;
    display: block;
  }
  .swiper-container {
    height: 600px;
  } */
}
@media (max-width: 765px) {
  /* .swiper-container {
    margin-top: -20px;
  }
  .swiper-slide {
    width: 300px;
    height: 300px;
  }
  .swiper-slide.swiper-slide-active {
    width: 300px;
    height: 300px;
    margin-top: 20px;
  } */
  .btnnext {
    margin-top: -150px;
  }
  .btnprev {
    margin-top: -150px;
  }
  /* .swiper-slide.swiper-slide-active .detailpro {
    position: absolute;
    width: 400px;
    left: -50px;
    margin: 0 auto;
    bottom: -90px;
    line-height: 30px;
    font-size: 18px;
    display: block;
  }
  .swiper-container {
    height: 560px;
  } */
}
@media (max-width: 643px) {
  /* .swiper-container {
    margin-top: -45px;
  }
  .swiper-slide {
    width: 250px;
    height: 250px;
    margin-top: 40px;
  }
  .swiper-slide.swiper-slide-active {
    width: 250px;
    height: 250px;
    margin-top: 40px;
  }
  .swiper-slide.swiper-slide-active .detailpro {
    position: absolute;
    width: 400px;
    left: -80px;
    margin: 0 auto;
    bottom: -90px;
    line-height: 30px;
    font-size: 18px;
    display: block;
  } */
  .btnnext {
    margin-top: -140px;
  }
  .btnprev {
    margin-top: -140px;
  }
  /* .swiper-container {
    height: 530px;
  } */
}
@media (max-width: 512px) {
  /* .swiper-container {
    margin-top: -35px;
  }
  .swiper-slide {
    width: 230px;
    height: 230px;
  }
  .swiper-slide.swiper-slide-active {
    width: 230px;
    height: 230px;
    margin-top: 40px;
  } */
  .btnnext {
    padding: 20px 10px;
    margin-top: -100px;
  }
  .btnprev {
    padding: 20px 10px;
    margin-top: -100px;
  }
  /* .swiper-slide.swiper-slide-active .detailpro {
    position: absolute;
    width: 360px;
    left: -70px;
    margin: 0 auto;
    bottom: -90px;
    line-height: 30px;
    font-size: 16px;
    display: block;
  }
  .swiper-container {
    height: 505px;
  } */
}
@media (max-width: 458px) {
  /* .swiper-container {
    margin-top: -35px;
  }
  .swiper-slide {
    width: 210px;
    height: 210px;
  }
  .swiper-slide.swiper-slide-active {
    width: 210px;
    height: 210px;
    margin-top: 40px;
  }
  .swiper-slide.swiper-slide-active .detailpro {
    position: absolute;
    width: 350px;
    left: -70px;
    margin: 0 auto;
    bottom: -90px;
    line-height: 30px;
    font-size: 15px;
    display: block;
  }
  .swiper-container {
    height: 480px;
  } */
}
@media (max-width: 401px) {
  /* .swiper-slide {
    width: 190px;
    height: 190px;
  }
  .swiper-slide.swiper-slide-active {
    width: 190px;
    height: 190px;
    margin-top: 40px;
  }
  .swiper-slide.swiper-slide-active .detailpro {
    position: absolute;
    width: 330px;
    left: -70px;
    margin: 0 auto;
    bottom: -90px;
    line-height: 30px;
    font-size: 14px;
    display: block;
    padding: 5px;
  } */
  .btnnext {
    padding: 20px 10px;
    margin-top: -100px;
  }
  .btnprev {
    padding: 20px 10px;
    margin-top: -100px;
  }
  /* .swiper-container {
    height: 460px;
  } */
}
.accountofuser {
  width: 310px;
}
.headeraccount {
  padding: 9px 0;
}
.headeraccount i {
  color: #e8c675;
}
.trofaccount {
  border-bottom: 1px solid #938568;
}
.heightmobile {
  height: 0;
}
@media (max-width: 885px) {
  .heightmobile {
    height: 95px;
  }
}
.closemodalalert {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  background: #9e3737;
  color: #fff;
  font-size: 20px;
  padding: 1px 10px;
  border-radius: 20px;
  padding-top: 2px;
}
.closemodalalert:hover {
  background: #f44040;
}
.bgalrtcontent {
  background: #212639;
  padding: 5px;
  box-shadow: 0 0 0 3px #f0c96f;
  border-radius: 10px;
}
.bgalrtcontent img {
  border-radius: 10px;
}
#swal2-content,
#swal2-title {
  color: #fff;
}
#btn-changepassword {
  background-color: #2a2d3f;
  color: #fff;
}
#btn-changepassword:hover {
  background-color: #565b7b;
  color: #fff;
  text-shadow: 0 0 5px #fff;
}
a {
  text-decoration: none;
  color: #fff;
}
.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgb(0 0 0 / 0%);
  border-top: 1px solid rgb(0 0 0 / 0%);
}
#loader {
  position: absolute;
  z-index: 1;
  width: 120px;
  height: 120px;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  border: 9px solid #212538;
  border-radius: 50%;
  border-top: 9px solid #a10f11;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
#loader img {
  animation: spin 2s infinite linear;
  animation-direction: reverse;
  position: absolute;
  filter: drop-shadow(0 0 5px #777);
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  width: 80%;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s;
}
@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
#myDiv {
  display: none;
  text-align: center;
}
/* .swiper-container-2 {
  width: 100%;
  max-width: 1000px;
  height: auto;
  position: relative;
  margin: 0 auto;
  padding: 0 10px;
  overflow: auto;
  overflow: hidden;
  margin-top: 30px;
  padding-bottom: 40px;
}
.swiper-container-2 .swiper-slide {
  width: 89%;
  height: auto !important;
  box-shadow: 0 0 0;
  background-size: 100%;
  margin-top: 0 !important;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  padding: 5px;
}
.swiper-container-2 .swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.swiper-button-prev,
.swiper-container-2 .swiper-button-next {
  transform: scale(0.6);
  margin-top: -40px;
  font-weight: 700;
}
.swiper-pagination-bullet {
  background-color: #fff;
  box-shadow: 0 0 5px #fff, 0 0 10px #aea07a, 0 0 15px #aea07a, 0 0 25px #aea07a,
    0 0 35px #aea07a;
  padding: 5px;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 6px;
}
.swiper-container-2 .swiper-button-next {
  right: 5px;
}
.swiper-container-2 .swiper-button-prev {
  left: 5px;
} */
@media (max-width: 500px) {
  /* .swiper-container-2 .swiper-slide {
    width: 85%;
    height: auto !important;
    box-shadow: 0 0 0;
    background-size: 100%;
    margin-top: 0 !important;
  } */
}
.swal2-popup {
  border-radius: 20px !important;
  background: linear-gradient(170deg, #22222fbf 0, #121421eb 100%) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.swal2-html-container {
  color: #fff !important;
  text-align: center;
}
.text-danger {
  color: #ff717f !important;
}
.inputcheck {
  color: #ff717f !important;
  font-size: 14px;
}