:root {
  --sidebarWidth: 224px;
  --sidebarShrinkWidth: 72px;

  --maxWidth__desktop: unset;
  --navbarHeight: 96px;
  --sidebarLogoSize: 160px;
  --leftPanelWidth: 288px;
  --leftPanelHeight: 736px;
  --rightTopPanelHeight: 112px;
  --rightBottomPanelHeight: 567px;
  --containerMarginX: 32px;
  --gapSpace: 32px;
  --gapSpace2: 24px;
}
:root {
  --primaryColour: #ffc908;
  --primaryShadow: hsl(37, 100%, 40%);
  --greyDarkest: #000000;
  --greyDarker: #161616;
  --greyLighter: #888888;
  --greyLightest: #dadada;
  --dropdown-bgColor: #292929;
  --dropdown-textColor: #f5f5f5;
  --footer-bgColor: #000000;
  --header-bgColor: #ffc908;
  --header-textColor: #000;
  --section-bgColor: #faf9f9;
  --section-bgColor__alt: #f5f5f5;
  --header-shadow: #00000055;
  --sidebar-bgColor: #161616;
  --panel-bgColor: #222222;
  --hrLine-color: #474747;
  --body-textColor: #000;
  --alert-textColor: #000;
  --button-textColor: #000;
  --button-hollow-textColor: #000;
  --button-hollow-textColor__hover: #000;
  --modal-outlineColor: #f6f0b3;
  --modal-highlightColor: #fdad00;

  --alert-bgColor__confirm: #00c500;
  --alert-textColor__confirm: #000;
  --alert-borderColor__error: #f90b0b;
  --alert-textColor__error: #f90b0b;

  --input-group-bgColor: #e9e9e9;

  --link-textColor__hover: #ffd106;
}
/* * {
	outline: 1px solid red !important;
	outline-offset: -1px !important;
} */

html {
  width: 100%;
  background: #000;
  scroll-behavior: smooth !important;
}

@font-face {
  font-family: "myfont";
  src: url("fonts/Trade-Gothic-LT-Bold.woff2") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: "myfont2";
  src: url("fonts/rogfonts-regular_es.woff2") format("woff");
  font-weight: normal;
}

::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #001e7a 5%, #0428a3 100%) !important;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #2c2c2c !important;
}

body {
  font-family: sans-serif;
  color: #fff;
  min-height: 100%;
  font-size: 0.8rem;
  font-weight: 400;
  position: relative;
  z-index: 0;
  background: #e7e7e7;
}

footer{
	margin-top: 15px;
}

p {
  font-family: sans-serif;
}

/* input:focus-visible,
textarea:focus-visible {
	outline: var(--primaryColour) auto 1px;
} */

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease-out;
}

a:hover {
  color: inherit;
  cursor: pointer;
}

a.commonBtn:hover {
  color: var(--button-textColor);
}

a:active {
  color: #fff;
}

ul {
  list-style: none;
}

.noselect {
  user-drag: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.outer {
  display: flex;
  flex-direction: row;
  position: relative;
}

.outer__main {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 0;
  transition: all 0.2s ease-out;
}

.bodyWrap {
  display: flex;
  flex-direction: row;
}

.new-sidebar {
  position: relative;
  background: var(--sidebar-bgColor);
  min-width: var(--sidebarWidth);
  width: var(--sidebarWidth);
  height: 100vh;
  transition: all 0.2s ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  padding-top: 0;
  gap: 0.5rem;
  box-shadow: 3px 0 8px #00000055;
  z-index: 11;
}

.new-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.shrink .new-sidebar {
  min-width: var(--sidebarShrinkWidth);
  width: var(--sidebarShrinkWidth);
}

.overlay-spacing {
  position: absolute;
}

@media only screen and (max-width: 1000px) {
  .new-sidebar {
    position: absolute;
  }

  .overlay-spacing {
    position: absolute;
    width: 100vw;
    height: 100%;
    z-index: 10;
    background-color: #000;
    opacity: 0.8;
  }

  .icon-text {
    font-size: 0.875rem;
  }
}

.shrink .overlay-spacing {
  min-width: var(--sidebarShrinkWidth);
  width: var(--sidebarShrinkWidth);
}

.menu-spacer {
  height: 0;
  background-color: var(--sidebar-bgColor);
  position: sticky;
  top: 0;
  width: 56px;
  transition: all 0.2s linear;
}

.shrink .menu-spacer {
  min-height: var(--navbarHeight);
}

.menu-toggle {
  text-align: center;
  color: #fff;
  width: 48px;
  height: 32px;
  position: absolute;
  top: calc(var(--navbarHeight) * 0.5);
  transform: translate(-50%, -50%);
  left: calc(var(--sidebarWidth));
  padding: 6px 16px;
  background: #292929;
  border-radius: 200px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  z-index: 20;
}

.shrink .menu-toggle {
  left: calc(var(--sidebarShrinkWidth) * 0.5);
}

.hr-line {
  width: 100%;
  border-radius: 10px;
  background: var(--hrLine-color);
  margin: 1rem 0;
  border: 0.5px solid var(--hrLine-color);
}

.sidebar-logo {
  width: var(--sidebarLogoSize);
  margin: 0 auto 1rem;
  transition: all 0.2s linear;
  height: auto;
}

.sidebar-logo img {
  height: var(--sidebarLogoSize);
  padding-top: 24px;
  object-fit: contain;
  width: 100%;
}

.sidebar-label {
  color: #fff;
  font-weight: bold;
  font-size: 0.75rem;
  margin-bottom: 4px;
  margin-left: 4px;
}

.sidebar-icon {
  display: flex;
  height: 50px;
  min-width: 85px;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  white-space: pre;
  transition: all 0.2s ease-out;
  color: #000;
  padding: 20px 10px 60px;
  border-bottom: 4px solid transparent;
}

.sidebar-icon.active,
.sidebar-icon:hover {
  background-color: #ffe46c;
  border-bottom: 4px solid #ffa32b;
  transition: 0.2s;
}

.sidebar-icon:hover {
  color: #000;
}

.sidebar-icon i {
  font-size: 22px;
}

.icon-text {
  transition: all 0.2s ease-in;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  padding-top: 10px;
}

.icon-text.active,
.icon-text:hover {
  color: #000;
}

.body-container {
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
  background: #e7e7e7;
}

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

.outer-container {
  background-color: var(--section-bgColor);
  width: 100%;
}

.outer-container.alt {
  background-color: var(--section-bgColor__alt);
}

.bg-black {
  background: var(--greyDarkest);
}

.inner-container {
  max-width: var(--maxWidth__desktop);
  width: 100%;
  margin: 0 auto;
}

.inner-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.extra-padding-60 {
  padding: 60px 0;
}

.page-bg-canvas {
  position: relative;
}

.page-bg-canvas:after {
  content: "";
  background-image: linear-gradient(to top, var(--greyDarker), #171a2155),
    url("../static/background-filler-1.jpg");
  opacity: 0.5;
  background-size: 400px 400px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 0;
}

.page-title-container {
  padding-bottom: 1.5rem;
}

.page-title-container .title {
  position: relative;
  z-index: 1;
}

.card-container {
  display: flex;
  flex-direction: column;
  color: #000;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0/ 25%);
  margin: 80px auto 40px;
  padding: 20px 40px 40px;
}

.card-container .title {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 0 10px 10px;
}

.card-container .title span {
  color: black;
  font-size: 24px;
  font-weight: 400;
}

.card-form-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.card-form-label {
  margin-bottom: 4px;
  font-weight: 300;
  color: #131313;
  width: 100px;
  text-align: right;
  margin-right: 8px;
}

.card-form-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.external-link-container {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gapSpace2) / 2);
}

.external-link {
  border-radius: 4px;
  background: var(--primaryColour);
  width: 64px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(20%) brightness(0.8);
}

.external-link img {
  filter: contrast(60%);
}

.external-link:hover,
.external-link:hover img {
  filter: none;
}

.external .outer-container .checkinDiv {
  padding-left: var(--containerMarginX);
}

.lotteryBal {
  color: #fff;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  font-size: 14px;
  width: max-content;
}

.whatsapp {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

.my-float {
  margin-top: 16px;
}

.modal-body {
  /* min-width: 100%; */
  /* background-color: #fff; */
  width: 100%;
  display: block;
  overflow-x: auto;
}

@media (min-width: 576px) {
  .modal-dialog.modal-large {
    max-width: 1110px;
  }
}

.tooltip {
  font-size: 0.875rem;
}

.basic-input {
  width: 100%;
  height: 36px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #ffc908;
  padding: 0 8px;
  font-size: 14px;
}

.basic-input.disabled {
  filter: brightness(0.92);
  color: #bcbcbc;
  cursor: not-allowed;
}

.basic-input.long {
  max-width: 320px;
}

.nrc-form-item input.value {
  border: none;
}

.nrc-form-item input.value:focus-visible,
.nrc-form-item textarea.value:focus-visible {
  outline: none;
}

.inputAmount {
  max-width: 160px;
  width: 100%;
  height: 32px;
  border: none;
  font-size: 0.875rem;
  padding-left: 15px;
  border-radius: 12px;
  background: #fff;
  color: var(--greyDarkest);
}

.inputAmount.long {
  max-width: 320px;
}

.commonBtn {
  color: var(--button-textColor);
  background: var(--primaryColour);
  border: 1px solid var(--primaryColour);
}

.commonBtn.long {
  padding: 10px 80px;
}

.commonBtn.disabled {
  filter: brightness(0.5);
  cursor: not-allowed;
}

.btn-hollow {
  color: var(--button-hollow-textColor);
  background: transparent;
  border: 1px solid var(--hrLine-color);
}

.btn-hollow:hover {
  color: var(--button-hollow-textColor__hover);
  background: var(--primaryColour);
  border-color: var(--primaryColour);
}

.inputAmount.disabled {
  background: var(--greyLightest);
  color: var(--greyLighter);
  cursor: not-allowed;
}

.dropShadow {
  width: 100%;
  height: 1px;
  display: block;
}

.noVoucher {
  color: var(--primaryColour);
  /* top: 50%; */
  /* left: 50%; */
  width: max-content;
  /* position: absolute; */
  /* transform: translate(-50%, -50%); */
}

.voucher-container {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gapSpace2);
}

.img-voucher {
  width: calc((100% - var(--gapSpace2) * 4) / 5);
  max-width: 160px;
  cursor: pointer;
  transform: scale(0.95);
  transition: all 0.2s linear;
}

@media only screen and (max-width: 1200px) {
  .img-voucher {
    width: calc((100% - var(--gapSpace2) * 3) / 4);
  }
}

@media only screen and (max-width: 900px) {
  .img-voucher {
    width: calc((100% - var(--gapSpace2) * 3) / 4);
  }
}

.img-voucher:hover {
  transform: scale(1);
  -webkit-filter: drop-shadow(0 0 7px var(--primaryShadow));
  filter: drop-shadow(0 0 7px var(--primaryShadow));
}

.swal2-select {
  color: #000 !important;
  background: #fff !important;
}

/**** Modal ****/
.new-modal {
  min-width: 80%;
  width: 400px;
}

.new-modal-info {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.new-modal-detail-text {
  text-align: left;
  font-size: 0.875rem;
}

.commonModal {
  color: #000;
  font-size: 14px;
  border-radius: 5px;
  text-align: center;
  margin: 0 auto;
  border: 1px solid 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  width: 100%;
  max-width: 650px;
}

.modal-input {
  width: 100%;
  height: 36px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #ffc908;
  padding: 0 8px;
  font-size: 14px;
}

.modal-btn {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 0;
  border-radius: 22.5px;
  color: black;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  height: 45px;
  transition: 0.2s ease;
  padding: 0 30px;
  box-shadow: 0px 2px 10px #ba9ac9;
}

.modal-btn:hover {
  background-color: #ffa41c;
}

.basic-modal {
  max-height: 80vh;
  border: 1px solid black;
}

.modal-header {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eedb0e 99.39%
    ),
    #ffc908;
  height: 50px;
  color: black;
  font-weight: 700;
  padding: 0 20px;
  font-size: 28px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  align-items:center;
}

.modal-header .modal-title{
	flex-grow:1;
}

.commonField {
  width: 200px;
  height: 28px;
  border-radius: 5px;
  border: none;
  text-align: center;
  box-shadow: 0rem 0px 2rem 0px #fff;
}

.commonBtn {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 24px;
  border-radius: 100px;
  min-width: 96px;
  transition: all 0.2s linear;
  cursor: pointer;
}

.commonBtn.disabled {
  opacity: 0.3;
}

.commonModalClose {
  border: none;
  display: block;
  font-size: 18px;
  margin-left: auto;
  background: transparent;
  color: var(--primaryColour);
}

.commonModalHighlight {
  color: var(--primaryColour);
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000000000;
  background: linear-gradient(to top, #000000, #1e1e1e, #282828);
}

.preloaderDiv {
  margin: auto;
  width: 50%;
  height: 100%;
  display: flex;
  position: relative;
}

.preloaderDiv .wrap {
  margin: auto;
}

.preloaderDiv img {
  margin: auto;
  margin-bottom: 15px;
  display: block;
  width: 100%;
  max-width: 200px;
}

/**** Sweet Alert Background ****/
.swal2-container {

}

/**** Sweet Alert Success ****/
.swal2-title {
  color: var(--alert-textColor);
  font-size: 20px;
}

.swal2-content {
  color: var(--alert-textColor);
}

/**** Sweet Alert Confirm Button ****/
.swal2-popup {
  width: 30vw;
  max-width: 480px;
  font-size: 13px;
  border-radius: 15px;
  background: #fff;
  color: black;
}

/**** Sweet Alert Confirm Button ****/
.swal2-styled.swal2-confirm {
  color: #000;
  border: none;
  border-radius: 22.5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: 0.2s ease;
  background: var(--primaryColour) !important;
  box-shadow: 0px 2px 10px #525d6b94;
}

.swal2-icon.swal2-error {
  color: var(--alert-textColor__error);
  border-color: var(--alert-borderColor__error);
  background: transparent;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background: var(--alert-borderColor__error);
}

.referralPopoutBg {
  background-image: linear-gradient(to right, #000000, #1e1e1e, #282828);
}

#popup .modal-content {
  box-shadow: 0px 0px 7px 4px #ffce12;
}

#transferModal .modal-content,
#gameAccModal .modal-content {
  border-radius: 28px;
  box-shadow: 0px 0px 7px 4px #ffce12;
  max-width: 400px;
}

#transferModal .modal-body,
#gameAccModal .modal-body {
  border-radius: 28px;
}

/**** Header ****/

.headerContainer {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 38.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  z-index: 9;
  position: relative;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.headerContainer .inner-container {
  padding: 0;
}

.headerContainer .member-login {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.headerContainer .logo {
  height: calc(var(--navbarHeight) - 40px);
}

@media only screen and (max-width: 768px) {
  .headerContainer .logo {
    height: 75px;
  }
}

.header-action-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  position: relative;
  height: 100%;
}

.header-action-container.logged {
  gap: 40px;
}

.btn-deposit {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: 20px;
  border: 1px solid #c8e692;
  color: #fff;
  background: linear-gradient(to top, #84b839, #7daf35);
  box-shadow: 0 0 2px 3px #7fad41;
  padding: 6px 10px 6px;
  text-shadow: 0 0 2px white;
  text-transform: uppercase;
  transition: all 0.5s linear;
  animation: btn-deposit 1s linear alternate infinite;
}

.btn-deposit svg {
  height: 24px;
  filter: drop-shadow(0px 0px 2px #dff1ba);
  -webkit-filter: drop-shadow(0px 0px 2px #dff1ba);
}

.btn-deposit svg path {
  transition: all 0.5s linear;
  animation: btn-deposit-img 1s linear alternate infinite;
}

@keyframes btn-deposit {
  from {
    background: transparent;
    border-color: #7daf35;
    color: #7daf35;
    text-shadow: 0 0 2px #7fad41;
    box-shadow: 0 0 2px 3px #7fad41;
  }
  to {
    background: linear-gradient(to top, #84b839, #7daf35);
    border-color: #c8e692;
    color: #fff;
    text-shadow: 0 0 2px white;
    box-shadow: none;
  }
}

@keyframes btn-deposit-img {
  from {
    fill: #7daf35;
  }
  to {
    fill: #fff;
  }
}

.header-icon-angle-down {
  color: var(--button-textColor);
}

.password-container {
  position: relative;
  width: 160px;
}

.btn-forget-password {
  position: absolute;
  bottom: -18px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}

#forgetForm .nrc-form-item .nrc-form-input {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

/* Display different login button in smaller screen */
.larger-view {
  display: block;
}
.smaller-view {
  display: none;
}

@media only screen and (max-width: 1200px) {
  .larger-view {
    display: none;
  }
  .smaller-view {
    display: block;
  }
}

.text-remark {
  color: var(--body-textColor);
  font-weight: 400;
  font-size: 0.75rem;
}

.header-action-menu-container {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  color: var(--button-textColor);
  padding-right: 16px;
}

.header-action-menu-container span {
  cursor: pointer;
}

.header-profile-name {
  font-weight: 800;
}

/**** Footer ****/
.footer-container {
  background: var(--footer-bgColor);
  width: 100%;
  padding: 2.5rem 0 1.5rem;
}

footer ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 4px;
}

footer ul li,
footer ul li a,
footer ul .language-option {
  color: #bbb;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s linear;
}

footer ul .language-option:hover,
footer ul li a:hover {
  color: #fff;
  cursor: pointer;
}

footer ul li:first-child {
  color: #fff;
  margin-bottom: 4px;
  cursor: default;
  font-weight: 600;
}

.support-messenger-container {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  max-width: 400px;
  margin: 2rem auto;
  gap: 1rem;
}

.support-messenger-container a {
  flex: 1;
}

@media screen and (max-width: 1200) {
}

.language-option {
  display: flex;
  width: 88px;
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: var(--greyLighter);
  opacity: 0.3;
  margin: 2rem 0;
}

.footer-container__affiliate {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gapSpace) * 2);
  justify-content: center;
}

.text-footer {
  font-size: 0.75rem;
  font-weight: 400;
  color: #fff;
}

.text-copyright {
  font-size: 0.875rem;
  color: #fff;
  margin: 2rem auto 0;
}

.footer-label {
  color: #fff;
  margin: 1.5rem auto 0.25rem;
  font-size: 0.875rem;
  text-align: center;
}

.img-footer {
  width: 160px;
  margin: 0 auto 0.5rem;
}

.seo-content-container {
  font-size: 0.75rem;
  font-weight: 400;
  display: none;
  transition: all 0.2s ease-out;
}

.seo-content-container p:nth-child(2n - 1) {
  font-weight: 700;
  margin-bottom: 4px;
}

.read-more,
.show-less {
  cursor: pointer;
  text-decoration: underline;
}

.seo-content-inner-container {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gapSpace2);
}

.seo-content-inner-container div {
  width: calc((100% - var(--gapSpace2)) / 2);
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .seo-content-inner-container div {
    width: calc((100% - var(--gapSpace2) * 2) / 3);
  }
}

@media only screen and (min-width: 1200px) {
  .seo-content-inner-container div {
    width: calc((100% - var(--gapSpace2) * 3) / 4);
  }
}

.show {
  display: block;
}

/**** SideBar Menu ****/
.menu .logo {
  width: 80%;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.menu {
  top: 0;
  left: 0;
  width: 220px;
  min-height: 100%;
  height: 100%;
  z-index: 10002;
  position: fixed;
  font-weight: 500;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  transition: transform 0.35s;
  transform: translate3d(-240px, 0, 0);
}

/* hide inputs */
.menu-checkbox {
  display: none;
}

.menu ul {
  margin: 0;
  padding: 0;
  height: 65%;
  list-style: none;
  padding-top: 5px;
  overflow-y: auto;
  margin-bottom: -8%;
}

.menu ul li {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

.menu ul li:hover a {
  font-weight: bold;
}

.menu ul li .icon {
  width: 100%;
  display: block;
  position: relative;
}

.menu ul li .icon img {
  width: auto;
  max-width: 40px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

.menu ul li .icon span {
  display: inline-block;
  vertical-align: middle;
}

.menu ul li .icon .active {
  color: #ffc400;
}

.menuFooter {
  bottom: 0;
  width: 100%;
  height: 8%;
  display: flex;
  font-size: 13px;
  position: fixed;
  text-align: center;
  font-weight: 600;
}

.menuFooter img {
  width: 15px;
  margin: 0 auto;
  margin-right: 5px;
  vertical-align: middle;
}

.menuFooter .left {
  width: 50%;
  line-height: 55px;
  vertical-align: middle;
}

.menuFooter .right {
  width: 50%;
  line-height: 55px;
  vertical-align: middle;
}

.overlay {
  /* background: #00000080; */
  cursor: pointer;
  width: 100%;
  height: 1000px;
  z-index: 10001;
  display: none;
  position: fixed;
  -webkit-animation: fadein 0.1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.1s; /* Firefox < 16 */
  -ms-animation: fadein 0.1s; /* Internet Explorer */
  -o-animation: fadein 0.1s; /* Opera < 12.1 */
  animation: fadein 0.1s;
}

.button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem;
}
.checkinBtn {
  border: 2px solid #ffffff;
  border-radius: 100px;
  background: #35341a33;
  cursor: pointer;
}

.checkin-div {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gapSpace2);
  overflow: hidden;
  cursor: grab;
  position: relative;
  scrollbar-width: none;
  padding: 10px;
  z-index: 1;
}

.checkin-div::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.checkin-container {
  display: flex;
  flex-direction: row;
  gap: var(--gapSpace2);
}

.checkin-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.checkin-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(255 0 266 / 4%);
  background: rgba(225, 225, 255, 0.1);
  box-shadow: 3px 3px 8px #ba9ac9;
  backdrop-filter: blur(5px);
  padding: 30px 5px;
}

.checkin-inner:after {
  animation: shadowlight 2.5s infinite both;
  background-color: rgb(255 255 255 / 36%);
  content: "";
  height: 10%;
  position: absolute;
  top: 40%;
  left: -30%;
  transform: translate3d(80%, 0, 0) rotate(45deg);
  width: 250%;
}

@keyframes shadowlight {
  0% {
    transform: translate3d(-60%, 0, 0) rotate(-45deg);
  }

  to {
    transform: translate3d(60%, 0, 0) rotate(-45deg);
  }
}

.checkin-title {
  color: #3c3939;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2rem;
  width: 15ch;
  padding: 3px 3px 30px;
  position: relative;
}

.checkin-title.active {
  color: white;
}

.checkin-condition {
  background: var(--greyLightest);
  color: #000;
  border-radius: 2rem;
  font-size: 0.75rem;
  width: 16px;
  height: 16px;
  padding: 1.5px 5px;
  position: relative;
  left: 4px;
  top: -2px;
  cursor: pointer;
}

.checkin-icon {
  width: 40px;
}

.checkin-day {
  margin-top: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 0.875rem;
  font-weight: 400;
  color: rgb(0 0 0 / 73%);
}

.checkin-day.active {
  color: #fabb2e;
  font-weight: 600;
}

.checkin-btn {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 0;
  border-radius: 22.5px;
  color: black;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  height: 45px;
  transition: 0.2s ease;
  padding: 0 30px;
  box-shadow: 0px 2px 10px #ba9ac9;
  width: 17.5rem;
  margin: 0 auto;
}

.checkinCircle {
  top: 5%;
  left: 20%;
  width: 20%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.checkinWord {
  color: #fff;
  width: 24ch;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.checkinTick {
  top: 50%;
  right: 0;
  width: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.btn-checkin {
  text-align: center;
}

.game-category-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gapSpace2);
}

.game-category {
  cursor: pointer;
  /* height: 350px; */
  width: 100%;
  margin: 0 3px;
  position: relative;
  transition: all 0.2s linear;
}

.game-category:hover {
  transform: translateY(-8px);
  border-radius: 1rem;
  -webkit-filter: drop-shadow(0 0 7px var(--primaryShadow));
  filter: drop-shadow(0 0 7px var(--primaryShadow));
}

.game-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 12px;
}

.game-page-category {
  width: calc((100% - var(--gapSpace2) * 3) / 4);
  transition: all 0.2s linear;
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.game-page-category:hover {
  transform: translateY(-8px);
  border-radius: 1rem;
  -webkit-filter: drop-shadow(0 0 7px var(--primaryShadow));
  filter: drop-shadow(0 0 7px var(--primaryShadow));
}

.game-page-container {
  display: flex;
  gap: var(--gapSpace2);
  flex-wrap: wrap;
}

.game-page-item {
  width: calc((100% - var(--gapSpace2) * 4) / 5);
  transition: all 0.2s linear;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
}

.game-page-item img {
  transition: all 0.3s ease-out;
}

.game-page-item p {
  transition: all 0.2s linear;
  margin-bottom: -1rem;
}

.game-page-item:hover p {
  color: var(--primaryColour);
  font-weight: 700;
}

.game-item {
  /* width: calc((100% - var(--gapSpace2) * 4) / 5);
	transition: all 0.2s linear;
	padding: 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	text-align: center; */
  min-width: 120px;
  width: min-content;
  height: auto;
}

.game-item img {
  transition: all 0.3s ease-out;
}

.game-item p {
  transition: all 0.2s linear;
  margin-bottom: -1rem;
}

.game-item:hover p {
  color: var(--primaryColour);
  font-weight: 700;
}

.slick-slide {
  transition: background-color 2s linear;
  position: relative;
}

.slick-slide.slick-active:before {
  background-color: transparent;
}

.slick-slide:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #00000090;
  transition: all 0.8s linear;
  border-radius: 8px;
}

.slick-center {
  opacity: 1;
}

.slick-prev.slick-arrow {
  left: 10%;
  z-index: 1;
}

.slick-next.slick-arrow {
  right: 10%;
  z-index: 1;
}

.table-container {
  max-height: 480px;
  overflow-y: hidden;
  scrollbar-width: none;
  transition: all 0.2s linear;
}

.table-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.winner-table {
  font-size: 0.875rem;
  width: 100%;
  min-width: 240px;
  color: #212529;
}

@media screen and (max-width: 1200px) {
  .winner-table {
    font-size: 0.8rem;
  }
}

.winner-table-head {
  background: var(--primaryColour);
  color: #000;
  height: 48px;
}

.winner-title {
  color: var(--primaryColour);
  text-align: center;
  font-size: 2.5rem;
}

.winnersRow {
  height: 64px;
}

.winnersRow td {
  background: rgb(246 246 247);
}

.winner-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
}

.winner-icon__circle {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  opacity: 0.8;
}

.winner-table__col-1 {
  width: 10%;
}

.winner-table__col-2,
.winner-table__col-3,
.winner-table__col-4,
.winner-table__col-5 {
  width: 15%;
}

.winner-table__col-2 {
  text-align: left;
}

.winner-table__game-log,
.winner-table__slip-cuci {
  cursor: pointer;
  transition: all 0.2s linear;
}

.winner-table__game-log:hover,
.winner-table__slip-cuci:hover {
  transform: translateY(-4px);
}

.winner-table__badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

#winnersModal ul {
  bottom: 0;
  padding: 0;
  margin-bottom: 5px;
  text-align: left;
  position: absolute;
  list-style-type: none;
}

#winnersModal ul .naming {
  min-width: 80px;
  line-height: 4;
}

#winnersModal ul .content {
  margin: 10px;
  line-height: 2;
}

.bg-Color {
  background: #171a21;
}

/*** Number Game ***/
.nbBackground {
  width: 100%;
  height: 100%;
  position: absolute;
}

.nbPercentage {
  color: var(--primaryColour);
  font-size: 6vw;
  vertical-align: top;
}

.nbContentDiv {
  top: 50%;
  left: 50%;
  width: 80%;
  height: 65%;
  color: #fff;
  margin: 0 auto;
  overflow-y: auto;
  position: absolute;
  transform: translate(-50%, -50%);
}

.nbTitle {
  color: #ffc400;
  text-align: center;
  display: block;
  font-size: 7vw;
  font-weight: 100;
  font-family: "Ocean Rush";
}

.nbSubTitle {
  color: #fff;
  font-size: 4vw;
  font-weight: 400;
  margin-top: 10px;
  text-transform: uppercase;
}

.nbPool {
  color: #f5f1aa;
  font-size: 11vw;
  font-weight: bold;
}

.nbSubPool {
  font-size: 3vw;
}

.nbInfoTable,
tr {
  border: none !important;
}

.nbCount {
  top: 50%;
  left: 50%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.countdown {
  color: #fff;
  font-size: 3vw;
}

.ticker {
  color: #f5f1aa;
  font-size: 5.7vw;
  font-weight: bold;
  line-height: 1;
}

.ticketRemain {
  font-size: 4vw;
  text-align: center;
  text-transform: uppercase;
}

.ticketImg {
  width: 30%;
  bottom: -30%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.nbTableDiv {
  width: 95;
  margin: 0 auto;
  text-align: center;
}

.nbTable {
  width: 100%;
  table-layout: fixed;
}

.nbTable input {
  width: 100%;
  background: #000;
  border-radius: 5px;
  border: 1px solid #f5f1aa;
}

.nbSub2 {
  font-size: 3vw;
  font-weight: bold;
  margin-bottom: 10%;
}

.nbRounded {
  width: 50px;
  height: 50px;
  margin: 2% 5%;
  position: relative;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #f5f1aa;
}

.nbRounded span {
  top: 50%;
  left: 50%;
  font-size: 3vw;
  position: absolute;
  transform: translate(-50%, -50%);
}

.nbBtn {
  display: flex;
  margin: 3% auto;
  font-size: 11px;
}

/**** Dashboard ****/
.dashboard-panel {
  display: grid;
  grid-template-columns: var(--leftPanelWidth) minmax(500px, auto);
  grid-template-rows: var(--rightTopPanelHeight) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  grid-gap: 20px;
  margin-bottom: 20px;
}

@media screen and (max-with: 768px) {
  .dashboard-panel {
    grid-template-areas:
      "sidebar"
      "header"
      "main";
  }
}

.left-panel {
  background: var(--panel-bgColor);
  border-radius: 8px;
  grid-area: sidebar;
  padding: 24px;
}

.right-panel-top {
  background: var(--panel-bgColor);
  border-radius: 8px;
  grid-area: header;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #fff;
  padding: 24px;
}

.right-panel-top__child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
}

.right-panel-top__child:not(:last-child) {
  border-right: 1px solid var(--hrLine-color);
}

.icon-refresh {
  font-size: 14px;
  margin-left: 8px;
  cursor: pointer;
}

.right-panel-bottom {
  background: var(--panel-bgColor);
  border-radius: 8px;
  min-height: var(--rightBottomPanelHeight);
  grid-area: main;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 32px;
}

.right-panel-bottom__body {
  margin-top: 24px;
}

.user-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hrLine-color);
}

.user-avatar {
  background: #ccc;
  border-radius: 100px;
  min-width: 64px;
  height: 64px;
  border: 1px solid var(--primaryColour);
}

@media screen and (max-width: 1200px) {
  .user-avatar {
    min-width: 48px;
    width: 48px;
    height: 48px;
  }
}

.user-container__info {
  display: flex;
  flex-direction: column;
}

.user-vip {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-name,
.user-vip {
  color: #fff;
  font-size: 1rem;
}

.user-vip__level {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primaryColour);
}

.user-vip__label {
  padding-right: 4px;
}

@media screen and (max-width: 1200px) {
  .user-vip__level {
    font-size: 1.25rem;
  }
  .user-name,
  .user-vip {
    font-size: 0.875rem;
  }
}

.sub-sidebar {
  color: #d2d2d2;
  font-size: 14px;
}

.sub-sidebar__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sub-sidebar__label:not(:first-of-type) {
  margin-top: 32px;
}

.sub-sidebar__icon {
  color: #d2d2d2;
  display: flex;
  align-items: center;
}

.sub-sidebar__icon img {
  width: 20px;
  height: 20px;
  margin-right: 1rem;
}

.sub-sidebar__text {
  margin-bottom: 16px;
}

.sub-sidebar__text:last-child {
  margin-bottom: 80px;
}

.vip-level,
.turnover-winover,
.member-info {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

@media only screen and (max-width: 1200px) {
  .vip-level,
  .turnover-winover,
  .member-info {
    font-size: 1.25rem;
  }
}

.panel-title {
  font-weight: 700;
}

.form-label {
  margin-bottom: 4px;
  font-weight: normal;
  color: var(--body-textColor);
}

/* .nav-item {
	background: #414141;
	padding: 4px;
	font-size: 0.875rem;
} */

.nav-item.bank,
.nav-item.nav-hollow {
  background: none;
}

/* .nav-item:first-of-type {
	border-top-left-radius: 200px;
	border-bottom-left-radius: 200px;
	padding: 4px;
}

.nav-item:last-of-type {
	border-top-right-radius: 200px;
	border-bottom-right-radius: 200px;
	padding: 4px;
} */

.nav-link {
  color: #000;
  font-weight: 600;
}

.nav-hollow .nav-link:hover {
  color: var(--body-textColor);
}

.nav-hollow .nav-link:focus {
  color: #000;
}

.nav-link:focus,
.nav-link:hover {
  color: #000;
}

.pill-bank-name {
  display: none;
  transition: all 0.2s ease-in-out;
}

.bank .nav-link:focus,
.bank .nav-link:hover {
  color: #000;
}

.active > .pill-bank-name {
  display: block;
}

.btn-submit__container {
  margin-top: 24px;
}

.btn-text {
  color: var(--primaryColour);
  font-size: 0.75rem;
  font-weight: 400;
  cursor: pointer;
}

@media screen and (max-width: 1200px) {
  .btn-text {
    font-size: 0.75rem;
  }
}

.btn-text:hover {
  color: var(--primaryColour);
  text-decoration: underline;
}

.reminder-container {
  border-top: 1px solid var(--hrLine-color);
  padding-top: 32px;
  margin-top: 40px;
  font-weight: 0.875rem;
  color: #ffffffcc;
}

.reminder-title {
  font-weight: 700;
}

.reminder-list {
  font-weight: 400;
}

.qrpay-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}

/*** Contact Us ****/
.contact-container {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gapSpace);
}

.contact-inner-container {
  width: calc((100% - var(--gapSpace) * 2) / 3);
  background: var(--greyDarker);
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 3rem 0.5rem;
  height: 100%;
  background: var(--greyDarkest);
}

.contact-hover {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primaryColour);
  color: #000;
  width: 100%;
  border-radius: 16px;
  border: none;
  transition: top 0.2s linear;
  top: 180px;
  font-size: 1.125rem;
  cursor: pointer;
}

.contact-hover:hover {
  color: #000;
}

.contact-inner-container:hover .contact-hover {
  top: 0;
}

.registerSection .contactIcon img {
  width: 30px;
  margin-right: 5px;
  vertical-align: bottom;
}

.text-label {
  color: #fff;
  font-size: 1rem;
}

.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) {
  font-size: 14px;
  margin-top: 0px;
  border: none;
  background: var(--input-group-bgColor);
}

.btn-choose {
  height: 100%;
  font-weight: 500;
  border-radius: 0px;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  font-size: 12px;
  color: var(--button-textColor);
  background: var(--primaryColour);
}

.input-file {
  height: 35px;
  vertical-align: middle;
  width: 220px;
}

.btnUpload {
  font-weight: bold;
  font-size: 14px;
}

.copyButton {
  border: none;
  background-color: var(--primaryColour);
  color: white;
  border-radius: 6px;
  width: 28px;
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: center;
}

.bankDesc {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}

/* HIDE RADIO */
[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type="radio"] + img + span {
  cursor: pointer;
}

[type="radio"]:checked + .bankselectionlabel {
  color: #ffc400;
  background-color: #000;
}

.depositContainer .mainTitle {
  font-size: 18px;
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 5px;
  display: block;
}

.depositContainer .subtitle {
  font-size: 15px;
}

/**** Transfer ****/
.promoDropDown {
  height: 40px;
  border-radius: 5px;
  width: 320px;
  color: #fff;
  background: #000;
  border: 1px solid var(--primaryColour);
  text-align: center;
}

.promoDropDown:focus {
  outline: none;
}

.btnGameAcc {
  width: 110px;
  height: 40px;
  border-radius: 5px;
  color: #fff;
  background: #000;
  border: 2px solid var(--primaryColour);
  -moz-box-shadow: 0rem 0px 1rem 0px var(--primaryColour);
  -webkit-box-shadow: 0rem 0px 1rem 0px var(--primaryColour);
  box-shadow: 0rem 0px 1rem 0px var(--primaryColour);
}

.btnEnterGame {
  width: 110px;
  height: 40px;
  border: none;
  font-weight: 600;
  margin-left: auto;
  border-radius: 5px;
  text-transform: uppercase;
  color: var(--button-textColor);
  background: var(--primaryColour);
}

/**** History ****/
.registerSection .subTopic {
  font-size: 15px;
  font-weight: 500;
}

.arrowRight {
  margin-left: 5px;
  margin-right: 5px;
  vertical-align: middle;
}

.historyBtn {
  width: 70px;
  height: 35px;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  border-radius: 8px;
  line-height: 35px;
  margin-right: 10px;
  display: inline-block;
  color: #fff;
  background: #000;
  border: 1px solid var(--primaryColour);
}

.historySelection {
  width: 110px;
  height: 35px;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.historyTable {
  width: 90%;
  margin: 0 auto;
  border-spacing: 0;
  text-align: center;
  border-radius: 10px;
  border-collapse: separate;
}

.historyTable td,
.historyTable th {
  padding: 8px;
  border: 1px solid #ffc400;
}

/* top-left border-radius */
.historyTable tr:first-child th:first-child,
.historyTable.Info tr:first-child td:first-child {
  border-top-left-radius: 10px;
}

/* top-right border-radius */
.historyTable tr:first-child th:last-child,
.historyTable.Info tr:first-child td:last-child {
  border-top-right-radius: 10px;
}

/* bottom-left border-radius */
.historyTable tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

/* bottom-right border-radius */
.historyTable tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

.historyTable tr:nth-child(even) {
  background-color: #323232;
}

.historyTable tr:hover {
  font-weight: 500;
  background-color: #ffc400;
}

.historyTable thead {
  z-index: 100;
}

.historyTable th {
  padding-top: 12px;
  text-align: center;
  padding-bottom: 12px;
  position: sticky;
  top: 0;
}

.historyTable td {
  font-size: 12px;
  text-align: left;
  font-weight: 500;
}

.historyTable .padding {
  padding: 15px 20px;
}

.historyTable .details {
  font-size: 12px;
  font-weight: 400;
}

.historyTable .amount {
  font-size: 14px;
  font-weight: 500;
}

.historyTable .date {
  font-size: 9px;
  font-weight: 500;
}

/**** Game ****/
.gameImg {
  width: 80%;
  display: block;
}

.gameImg-1 {
  margin-left: auto;
}

.gameImg-0 {
  margin: 0 auto;
}

/**** Referral ****/
.agent-report-container {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gapSpace);
}

.report-detail {
  width: 100%;
  border-radius: 8px;
  padding: 24px 8px;
  font-size: 16px;
  text-align: center;
  background: linear-gradient(
      180deg,
      rgba(0 0 0/0%),
      rgb(225 179 25/23%) 48.43%,
      #eecc0e 99.39%
    ),
    #ffc908;
  display: flex;
  flex-direction: column;
  gap: 21px;
  color: white;
  box-shadow: 0 3px 9px 1px #ffe49c;
}

.report-detail span:nth-child(2) {
  font-weight: 700;
  font-size: 17px;
  word-wrap: break-word;
}

@media only screen and (max-width: 1200px) {
  .report-detail,
  .right-panel-top__child {
    font-size: 0.75rem;
  }
  .report-detail span:nth-child(2) {
    font-size: 1.25rem;
  }
}

.program-banner-container {
  width: 100%;
}

.homeReferralCopy {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.referralLogo {
  width: 80%;
  height: 55px;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.referralPlayer {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 15px;
}

.referralInfo {
  top: 55%;
  left: 50%;
  width: 88%;
  height: 90%;
  display: grid;
  position: absolute;
  transform: translate(-50%, -50%);
}

.referralTitle {
  font-size: 12px;
  font-weight: 400;
}

.referralText {
  font-size: 18px;
  font-weight: 500;
}

.referralText2 {
  display: block;
  font-weight: 500;
  font-size: 1.5rem;
}

.btnReferral {
  width: 80px;
  height: 40px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 12px;
  border-radius: 8px;
}

.btnDownline {
  font-size: 14px;
  font-weight: 600;
  padding: 5px 20px;
  border-radius: 5px;
}

.referralPopoutBg {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
  border-radius: 10px;
}

.referralPopoutBgImg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.referralPopoutBgImg2 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.referralTnc {
  font-size: 13px;
}

.referralOL {
  font-size: 12px;
}

.dateField {
  width: 45%;
  height: 30px;
  display: block;
  margin: 0 auto;
  font-weight: 500;
  text-align: center;
  font-size: 12px;
}

.dateField2 {
  width: 90%;
  height: 35px;
  margin: 0 auto;
  font-size: 14px;
  text-align: center;
  border-radius: 5px;
}

.selectField {
  width: 90%;
  height: 35px;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 5px;
  text-align: center;
  text-align: -webkit-center;
}

.referralHistoryTable {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

.emptyTable {
  margin-left: auto;
  border: none;
  margin-bottom: 20px;
  width: max-content;
}

.emptyTable th {
  font-weight: 500;
  border: none !important;
}

.tncModalClose {
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  z-index: 99;
  top: -10px;
  right: -10px;
  border: none;
  display: block;
  font-size: 18px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #f6f0b3;
}

#tncModal .header {
  color: var(--primaryColour);
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin: 10px 0;
}

/**** Voucher ****/
#voucherModal .header {
  color: var(--primaryColour);
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}

#popupModal .header {
  color: var(--primaryColour);
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}

#popupModal .modal-content {
  border-radius: 28px;
  box-shadow: 0px 0px 7px 4px #ffce12;
}

#popupModal .modal-body {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

/**** Game Lobby ****/
.gameLobbyDiv {
  display: inline-flex;
  overflow-y: auto;
  max-height: 500px;
}

.gameSpan {
  display: block;
  margin: 0 auto;
  font-size: 30px;
  font-weight: 700;
  width: max-content;
}

.gamelobbyImg {
  width: 90%;
  margin: 0 auto;
  display: block;
}

/**** Free Spin ****/
.spin-container {
  display: flex;
  flex-direction: row;
  min-width: 800px;
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
}

.spin-selector {
  color: #fff;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.spin-selector__option {
  background-image: url(../static/luckyspin/roulette-frame.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 64px;
  width: 275px;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 200px;
  transition: all 0.2s linear;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.spin-selector__option.selected {
  background-color: #fff00036;
  box-shadow: 0 0 5px 0px #fff000;
}

.spin-selector__option.selected .token-required,
.spin-selector__option:hover .token-required {
  /* padding-bottom: 24px; */
}

.spin-selector__option img {
  height: 60%;
  padding: 0 20px;
}

.spin-helper {
  cursor: pointer;
}

.spin-selector-token__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gapSpace2));
  width: 100%;
  justify-content: center;
}

.spin-selector-token__label {
  max-width: 12ch;
  font-size: 1.5rem;
  line-height: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0;
}

.spin-selector-token__amount {
  font-size: 6rem;
  line-height: 8rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.spin-credit-won {
  font-weight: 700;
  font-size: 1.25rem;
}

.spin-wheel {
  flex: 3;
  position: relative;
}

.spin-wheel-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
}

.spin-wheel__stage {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 20%);
  z-index: -3;
  width: 100%;
}

.spin-wheel__bg {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spin-wheel__ring {
  width: 88%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.spin-wheel__middle {
  width: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.spin-wheel__pointer {
  width: 10%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -418%);
  z-index: 3;
}

.spin-wheel-btn {
  width: 160px;
  cursor: pointer;
}

.spinContainer {
  top: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
}

.tokenDiv {
  display: flex;
  margin-top: 10px;
}

.tokenDiv img {
  width: 40px;
}

.tokenGif {
  left: 0;
  top: -15%;
  z-index: -2;
  width: 100%;
  position: relative;
  animation: 1.5s in-out forwards;
}

.scaling {
  animation: scaling 2s infinite alternate;
  -webkit-animation: scaling 2s infinite alternate;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0.8, 0.8);
  }
  50% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.8, 0.8);
  }
}

@keyframes in-out {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes scaling {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.token-required {
  font-size: 2rem;
  font-weight: 700;
  transition: all 0.2s ease-out;
}

.spinContainer .logo {
  width: 25%;
  margin-top: 15px;
}

.freespinFooter {
  bottom: 5%;
  width: 100%;
  text-align: center;
  position: absolute;
}

.freespinFooter img {
  width: 50%;
}

.howtoclaim {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 5px;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--button-textColor);
  background: var(--primaryColour);
}

.wonText {
  top: 55%;
  left: 50%;
  font-size: 23px;
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
}

.wonPrize {
  top: 69.5%;
  left: 50%;
  font-size: 33px;
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
}

.creditsText {
  top: 83%;
  left: 50%;
  font-size: 10px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
}

.details {
  font-size: 15px;
}

/**** Lottery ****/
.betnowAHref {
  margin: 0 auto;
  display: block;
  cursor: pointer;
  position: relative;
  width: max-content;
}

.betnowAHref img {
  width: 180px;
  transition: all 0.5s;
}

.betnowAHref:hover img {
  filter: brightness(1.5);
}

.betnowWording {
  top: 50%;
  left: 50%;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  position: absolute;
  text-transform: uppercase;
  white-space: break-spaces;
  transform: translate(-50%, -50%);
  color: var(--body-textColor);
}

.btnPayout {
  width: 180px;
  height: 45px;
  border: unset;
  margin: 0 auto;
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0rem 0px 1rem 0px #e9372b;
  background: linear-gradient(#f90b0b, #6d0000);
}

.payoutClose {
  border: none;
  font-size: 20px;
  background: transparent;
  color: var(--primaryColour);
}

.btnDrawResult {
  width: 90px;
  height: 30px;
  display: block;
  margin: 20px auto;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(#f90b0b, #6d0000);
}

.payoutTable {
  width: 100%;
  margin: 0 auto;
  font-size: 11px;
  white-space: pre;
  text-align: center;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}

.payoutTable tr {
  height: 25px;
  background: #fff;
}

.payoutTable td {
  color: #000;
  border: 1px solid #dbbd15;
}

.payoutTable tr:first-child {
  font-weight: bold;
  font-size: 12px;
  height: 35px;
  color: #dbbd15;
  background: #000;
}

.drawDate {
  font-size: 12px;
  border-radius: 5px;
  text-align: center;
}

.drawDateSpan {
  margin-right: 20px;
  font-size: 12px;
}

.drawResultDiv {
  width: 100%;
  padding: 20px;
  margin: 50px auto;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(#980000, #4c0000);
}

#drawresult {
  clear: both;
}
#drawresult ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#drawresult ul > li {
  display: -moz-inline-stack;
  display: inline-block;
  width: 230px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
#drawresult table {
  width: 100%;
}
#drawresult table caption {
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  text-align: left;
  caption-side: top;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#drawresult table caption div {
  font-size: 10px;
}

#drawresult table tr td {
  padding: 15px 5px;
}
#drawresult table tr:first-child td {
  border: 0px;
}
#drawresult ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-align: center;
}
#drawresult ol li {
  display: inline;
}
#drawresult ol.abc li {
  padding: 0px 10px;
  font-weight: bold;
  font-size: 13px;
}
#drawresult ol.p li {
  padding: 0px 3px;
  font-size: 13px;
  display: inline-block;
  width: 35px;
}
#drawresult ol.c li {
  padding: 0px 3px;
  font-size: 13px;
}

/***4d***/
.f4d-date-selector {
  background-color: #ffffff;
  border: solid 4px #ffffff;
}

.r4dLimitorWord {
  color: #fff;
}

.result4dFrame {
  background: linear-gradient(#ec1c24, #811117);
  -webkit-box-shadow: 0px 0px 5px 4px rgba(51, 41, 51, 1);
  -moz-box-shadow: 0px 0px 5px 4px rgba(51, 41, 51, 1);
  box-shadow: 0px 0px 5px 4px rgba(51, 41, 51, 1);
}

.draw-container {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gapSpace2);
  justify-content: center;
}

.draw-result {
  background: #efefef;
  border: 1px solid #b2b2b2;
  border-radius: 8px;
  max-width: 230px;
}

#drawresult ul > li {
  background: #efefef;
  border: 1px solid #b2b2b2;
}

#drawresult table caption {
  color: #333333;
}

#drawresult table tr td {
  color: #333333;
  border-top: 1px solid #888888;
}

.lotterySection {
  padding: 30px 0;
  min-height: max-content;
}

.lotteryTable {
  background-color: transparent;
  color: #000000;
}

.lotteryHeader {
  color: #fff;
  background: linear-gradient(#ec1c24, #811117);
}

.lotteryTable table tr td {
  color: #000000;
}

.lotteryTable td {
  white-space: normal;
  border: 1px solid #794444;
}

/** PROMOTION CONTENT **/

.promotion .nav {
  margin-bottom: 1rem;
}
.promotion .nav-link {
  padding: 0 15px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  height: 54px;
  line-height: 54px;
  margin-right: 5px;
  margin-top: 15px;
  min-width: 135px;
  opacity: 0.6;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
  border-radius: 0;
  justify-content: center;
  border: none;
}

.promotion .nav-link.active,
.promotion .nav-link:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  font-weight: 700;
  opacity: 1;
  border: none;
}

.promo-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promo-container img {
  width: 100%;
  cursor: pointer;
  transition: 0.3s ease;
}

.promo-container img:hover {
  transform: translateY(3px);
}

#tncDescription {
  text-align: left;
}

/** PROMOTION CONTENT END **/

/**** Suggestion ****/
.suggestWord {
  color: #fff;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
}

.suggestInput {
  padding: 8px;
  color: #000;
  width: 320px;
  height: 40px;
  font-size: 0.875rem;
  margin-bottom: 2rem;
  border-radius: 12px;
  background: #fff;
}

.suggestInput.long {
  width: 100%;
}

.textArea {
  /* overflow: auto; */
  /* display: block; */
  /* font-size: 13px; */
  /* line-height: 1.5; */
  /* resize: vertical; */
  /* margin-bottom: 8%; */
  min-height: 150px;
  /* padding: 12px 30px; */
  /* border-radius: 25px; */
  /* border: 1px solid #ffc400; */
  /* background: linear-gradient(#000000, #1e1e1e, #282828); */
}

.suggestCommon::placeholder {
  color: #e6e6e6;
  opacity: 1; /* Firefox */
}

.suggestCommon:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #e6e6e6;
}

.suggestCommon::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #e6e6e6;
}

/**** Fade In ****/

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

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.country-selector-container {
  position: absolute;
  z-index: 2000000001;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(../static/background.jpg) #000;
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.country-selector-container::before,
.country-selector-container::after {
  content: "";
  width: 20vw;
  height: 20vw;
  position: absolute;
  top: 50%;
  z-index: 2000000002;
  transform: translate(0, -50%);
  background: url(../static/arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.country-selector-container::before {
  left: 0;
}
.country-selector-container::after {
  right: 0;
  transform: translate(0, -50%) rotate(180deg);
}
.country-list-container {
  position: absolute;
  top: calc(50% + var(--gapSpace) * 2);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: var(--gapSpace);
}
.country-selector-logo {
  position: absolute;
  top: calc(50% - 200px - var(--gapSpace) * 2);
  height: 200px;
}
.country-selector-border {
  width: 80vw;
  max-width: 1000px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.country-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
}
.country-item p {
  margin-top: 0.5rem;
  text-transform: uppercase;
}
.country-item:hover {
  transform: translateY(-2px);
}
.country-item:hover img {
  filter: drop-shadow(0 0 2px var(--primaryColour)) brightness(1.1);
  transition: all 0.2s ease-out;
}

/**** Marquee ****/
.marqueeWrap {
  background: var(--primaryColour);
}

.soundCol {
  background: #000;
}

.marquee {
  color: var(--button-textColor);
}

.datepicker-container {
  color: #000;
}

/*  */

/** LUCKY SPIN **/

.roulette {
  font-family: Arial, Helvetica, Microsoft YaHei, Microsoft JhengHei, PingFangTC,
    sans-serif;
  overflow: hidden;
  width: 100%;
  min-width: 1440px;
}

.rouletteMain {
  background-image: url(../static/luckyspin/roulette_main.jpg);
  margin: 0 auto;
  position: relative;
  width: 100%;
  background-size: cover;
  min-height: max(880px, 85vh);
  overflow-x: auto;
  overflow-y: hidden;
}

.rouletteMain:before {
  background-image: url(../static/luckyspin/roulette_balloon.png);
  animation-direction: alternate;
  animation-timing-function: linear;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.rouletteMain:after {
  background-image: url(../static/luckyspin/roulette_ball.png);
  animation-direction: alternate-reverse;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.rouletteMain:after,
.rouletteMain:before {
  animation: rouletteDecoShake 25s infinite;
  content: "";
}

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

  33.33% {
    transform: rotate(-7.5deg);
  }

  66.66% {
    transform: rotate(11.25deg);
  }

  to {
    transform: rotate(-16.875deg);
  }
}

.rouletteMain_wrap {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.rouletteMain_head {
  display: flex;
  justify-content: center;
  padding: 6px 0;
  margin-bottom: 70px;
  position: relative;
  z-index: 1;
  list-style-type: none;
}

.rouletteMain_item > a {
  color: white;
  display: block;
  font-size: 20px;
  line-height: 48px;
  padding: 0 3px;
  position: relative;
  text-decoration: none;
}

.rouletteMain_item + .rouletteMain_item {
  margin-left: 36px;
}

.rouletteMain_item > a.active:after,
.rouletteMain_item > a:hover:after {
  width: 100%;
}

.rouletteMain_item > a:after {
  background-color: #ffdb00;
  border-radius: 5px;
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  transition: width 0.3s;
  width: 0;
}

.rouletteMain_body {
  display: flex;
  justify-content: space-evenly;
}

.rouletteMain_awards {
  align-self: center;
  list-style-type: none;
  padding-left: 0;
}

.rouletteMain_awards,
.rouletteMain_winner {
  flex: 0 0 20.4861111111%;
  position: relative;
  z-index: 1;
}

.rouletteMain_awards_item {
  padding-bottom: 30px;
  position: relative;
  width: 99%;
}

.rouletteMain_awards_item > div {
  align-items: center;
  background-image: url(../static/luckyspin/roulette-frame.png);
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  padding: 0 3.39%;
  height: 64px;
}

.rouletteMain_awards_item:first-of-type .rouletteMain_awards_medals {
  background-position: 0 0;
  color: #be5a18;
}

.rouletteMain_awards_item:first-of-type .rouletteMain_awards_medals:before {
  content: "1";
}

.rouletteMain_awards_medals {
  align-items: center;
  background-image: url(../static/luckyspin/medal.png);
  color: #674170;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  height: 68.75%;
  justify-content: center;
  width: 28%;
  background-position: 100% 0;
  background-size: 400% 100%;
}

.rouletteMain_awards_item:nth-of-type(2) .rouletteMain_awards_medals {
  background-position: 33.3333% 0;
  color: #6f6f80;
}

.rouletteMain_awards_item:nth-of-type(3) .rouletteMain_awards_medals {
  background-position: 66.6666% 0;
  color: #7c5552;
}

.rouletteMain_awards_item:nth-of-type(2) .rouletteMain_awards_medals:before {
  content: "2";
}
.rouletteMain_awards_item:nth-of-type(3) .rouletteMain_awards_medals:before {
  content: "3";
}
.rouletteMain_awards_item:nth-of-type(4) .rouletteMain_awards_medals:before {
  content: "4";
}
.rouletteMain_awards_item:nth-of-type(5) .rouletteMain_awards_medals:before {
  content: "5";
}
.rouletteMain_awards_item:nth-of-type(6) .rouletteMain_awards_medals:before {
  content: "6";
}
.rouletteMain_awards_item:nth-of-type(7) .rouletteMain_awards_medals:before {
  content: "7";
}
.rouletteMain_awards_item:nth-of-type(8) .rouletteMain_awards_medals:before {
  content: "8";
}

.rouletteMain_awards_prize {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 30%;
}

.rouletteMain_awards_prize > img {
  display: block;
  max-width: 83px;
}

.rouletteMain_awards_text {
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 3pxrgba (0, 0, 0, 0.8);
  width: 90%;
}

.roulette .roulette-period {
  color: #ffefbd;
  font-size: 21px;
  margin-top: -30px;
  position: absolute;
  text-shadow: 0 1px 5pxrgba (0, 0, 0, 0.8);
}

.rouletteMain_box {
  flex: 0 0 41.6666666667%;
  padding-bottom: 41.6666666667%;
  position: relative;
}

.rouletteMain_box_wrap {
  padding: 5.5%;
}

/** LUCKY SPIN END **/

/** LUCKY SPIN RULE **/

.rouletteRule {
  background-image: linear-gradient(180deg, #330051, #1d0124);
  padding: 85px 0;
}

.rouletteRule_wrap {
  background-image: linear-gradient(180deg, #6a0082, #360052);
  border-radius: 20px;
  box-shadow: inset 0 4px 7px rgb(255 255 255 / 35%),
    inset 0 -4px 7px rgb(0 0 0 / 25%), 0 0 45px rgb(0 0 0 / 70%);
  color: #fff;
  margin: 0 auto;
  max-width: 1000px;
  min-height: 350px;
  padding: 80px 45px;
  position: relative;
}

.rouletteRule_title {
  background-image: url(../static/luckyspin/rule.png);
  font-size: 24px;
  height: 75px;
  left: 50%;
  line-height: 76px;
  position: absolute;
  text-align: center;
  text-shadow: 0 -3px 0 rgb(0 0 0 / 50%);
  top: 0;
  transform: translate3d(-50%, -50%, 0);
  width: 366px;
}

.rouletteRule_text p {
  min-height: 16px;
}

/** LUCKY SPIN RULE END **/

/** HEADER **/

.navbar-list {
  display: flex;
  gap: 8px;
  list-style-type: none;
  flex-wrap: wrap;
}

.navbar-icon {
  display: flex;
  height: 50px;
  min-width: 85px;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  white-space: pre;
  transition: all 0.2s ease-out;
  color: #000;
  padding: 20px 10px 60px;
  border-bottom: 4px solid transparent;
}

.navbar-icon.active,
.navbar-icon:hover {
  background-color: #ffe46c;
  border-bottom: 4px solid #ffa32b;
  transition: 0.2s;
}

.navbar-icon:hover {
  color: #000;
}

.navbar-icon i {
  font-size: 22px;
}

.navbar-text {
  transition: all 0.2s ease-in;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  padding-top: 10px;
}

.navbar-text.active,
.navbar-text:hover {
  color: #000;
}

.navbar-icon:hover + .submenu,
.submenu:hover {
  opacity: 1;
  height: 300px;
}

.header-nav {
  align-items: center;
  color: white;
  font-weight: 600;
  display: flex;
  padding: 0 5px;
  justify-content: center;
  flex-direction: column;
  height: 97px;
  text-decoration: none;
}

.submenu {
  background-color: #1d1d1d;
  box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
  left: 0;
  height: 0px;
  min-width: 1004px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 100%;
  transition: 0.3s;
  width: 100%;
  z-index: 20;
  border-bottom: 4px transparent;
}

.submenu ul {
  font-size: 0;
  height: 300px;
  margin-left: 140px;
  margin-right: 140px;
  position: relative;
  overflow: scroll;
  overflow-x: hidden;
}

.submenu ul li {
  display: inline-flex;
  height: 100%;
  position: relative;
}

.submenu ul li a {
  display: block;
  height: 100%;
  padding: 0 15px;
  position: relative;
  transition: 0.2s;
  border-bottom: 3px solid transparent;
}

.submenu ul li a:hover {
  background-color: #302c35 !important;
}

.submenu ul li img {
  display: block;
  height: 80%;
  position: relative;
  top: 10%;
}

/** HEADER END**/

/** GAME PAGE CONTENT **/

.game-row {
  display: flex;
  padding: 60px 0 200px;
}

.replaceimgdetect img {
  max-width: 85% !important;
}

.nav-tabs {
  border-bottom: none;
}

.game_products {
  display: flex !important;
  justify-content: left;
  transition: all 300ms ease;
  grid-gap: 14px;
}

.inner_main .nav-items .nav-links {
  padding: 0;
  border: transparent;
}

.inner_main .nav-items .nav-links.active div {
  position: relative;
}

.inner_main .nav-items .nav-links.active div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: url(../static/garnish.png);
  background-size: contain;
}

.nav-tabs .nav-links.active {
  background-color: transparent;
}

.tab_bar_title_sec_inner {
  font-size: 35px;
  font-weight: 700;
  color: #fabb2e;
  text-shadow: 0px 1px 1px #685f5f;
  margin-bottom: 10px;
  line-height: normal;
}

.tab_bar_dec {
  font-size: 16px;
  justify-content: center;
  color: black;
}

.game_products_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  border: none;
  background: none;
}

.game_products_btntext {
  position: absolute;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
}

.nav-items img {
  max-width: 100px;
}

/** GAME PAGE CONTENT END **/

.agree-policy {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

.agree-policy label {
  color: #535353;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  margin-right: 4px;
}

.validate-policy {
  color: #d22323;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  text-align: center;
  margin-bottom: 40px;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #001e7a 5%, #0428a3 100%) !important;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #2c2c2c !important;
}

/* body {
	color: #fff;
} */

.ol,
ul {
  list-style: none;
}

body * {
  box-sizing: border-box;
}

* {
  outline: none;
}

/** LOGIN FORM **/

.hover-container.login .nrc-form .nrc-form-item {
  display: block !important;
  position: relative;
}

.nrc-form .nrc-form-item.vertical {
  margin-bottom: 0;
}

.nrc-form .nrc-form-item {
  align-items: center;
}

.nrc-form .nrc-form-item.vertical .nrc-form-input {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

#login.modal-body .nrc-form .nrc-form-item .nrc-form-input input {
  margin-right: 0;
  width: 100%;
}

.nrc-form .nrc-form-item .nrc-form-input input {
  margin-right: 20px;
  width: 280px;
}

.nrc-form .nrc-form-item .nrc-form-input select {
  margin-right: 20px;
  width: 280px;
}

.nrc-form-input input,
.nrc-form-input select {
  appearance: auto !important;
  background-color: #fff;
  border: 1px solid #ffc908;
  border-radius: 3px;
  box-sizing: border-box;
  color: black;
  display: block;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  height: 36px;
  padding-left: 10px;
  padding-right: 10px;
  width: calc(100% - 0px);
}

.nrc-form-input .Select-control.invalid,
.nrc-form-input input.invalid {
  background-color: rgba(255, 223, 223, 0.4);
  color: black;
}

.nrc-form-input input.invalid {
  background-color: #fff;
  border-color: #ffc908;
  box-shadow: 0 0 3px #ffd922;
}

.nrc-form .nrc-form-item.vertical .nrc-form-input small {
  height: 44px;
  text-align: left;
  width: 100%;
}

.nrc-form .nrc-form-item small.invalid-msg {
  color: #d22323;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
}

.invalid-msg {
  margin-top: 5px;
  display: none;
}

.highlight-color {
  color: #fdad00;
  text-decoration: none;
}

.highlight-color:hover {
  color: #fdad00;
  text-decoration: none;
}

.flex-right-bottom {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
}

#login .nrc-form .nrc-form-item {
  align-items: flex-start;
  display: inline;
  justify-content: flex-start;
}

/** LOGIN FORM END **/

/** REGISTER FORM **/

.main-wrap {
  margin: 0 auto;
  position: relative;
}

.app-body .signup {
  margin-top: 50px;
}

.white-container {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0rgba (0, 0, 0, 0.25);
  margin: 56px auto;
  padding: 20px 40px 40px;
}

.section-block .header {
  border-bottom: 1px solid #ccc;
  height: 38px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
}

.section-block .header .titles {
  align-items: baseline;
  display: flex;
}

.section-block .header h3 {
  color: black;
  font-size: 24px;
  font-weight: 400;
}

.nrc-form .nrc-form-item {
  margin-bottom: 30px;
}

.nrc-form .nrc-form-item {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
}

.nrc-form-item .nrc-form-input {
  align-items: center;
  display: flex;
  justify-content: center;
}

.nrc-form .nrc-form-item .nrc-form-label {
  padding-right: 10px;
  width: 280px;
  text-align: right;
}

.nrc-form .nrc-form-item .nrc-form-label label {
  color: #131313;
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  line-height: 36px;
  position: relative;
}

.nrc-form .nrc-form-item small {
  color: #777;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  line-height: 36px;
  width: 500px;
}

.nrc-form .nrc-form-item .nrc-form-label label.form-require:before {
  color: #ffa41c;
  content: "*";
  font-size: 18px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  left: -5px;
  line-height: 0;
  position: absolute;
  top: 12px;
}

.agree-policy {
  align-items: center;
  display: flex;
  justify-content: center;
}

.agree-policy label {
  color: #535353;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  margin-right: 4px;
}

.validate-policy {
  color: #d22323;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  text-align: center;
}

input[type="checkbox"] {
  accent-color: rgb(255 231 0);
}

.btn-group {
  align-items: center;
  display: flex;
  justify-content: center;
}

.forgot-body p {
  color: black;
  font-size: 15px;
}

/** REGISTER FORM END **/

.approot {
  background-color: #000;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: unset;
}

.main-wrap {
  margin: 0 auto;
  position: relative;
}

.quick-nav {
  background-color: #373228;
  color: white;
  width: 100%;
  padding: 2px 0;
}

.quick-nav .main-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-nav .current-timer {
  color: white;
  font-size: 13px;
  white-space: nowrap;
  width: 130px;
}

.lang {
  color: white;
  position: relative;
  display: inline-block;
  font-size: 13px;
  height: 32px;
  line-height: 32px;
  transition: 0.3s;
  width: 100px;
  z-index: 10;
  padding: 0 10px;
  cursor: pointer;
}

.lang:hover {
  background-color: #534761;
}

.lang-item:hover {
  background-color: #ffd106;
}

.lang i {
  font-size: 13px;
  line-height: 32px;
  position: absolute;
  right: 4px;
  top: 0px;
}

.lang-item {
  display: none;
  position: relative;
  width: 99px;
  right: 9px;
  background-color: #f5d64b;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 20;
  padding: 0 10px;
  font-weight: 500;
}

.lang:hover .lang-item {
  display: block;
}

/** HEADER **/

.approot header {
  /* background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908; */
  position: relative;
  width: 100%;
  border-bottom: 1.5px solid rgb(188 143 143);
}

.approot header .navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: static;
  /* border: 1px solid #cb9d00; */
  background: linear-gradient(to bottom, #003fff 0%, #001d7a 37%, #001451 100%);
}

.approot header .navigation .navigation-inner {
  justify-content: right;
  width: 100%;
  align-items: center;
  display: flex;
  margin: 0 auto;
}

#navbar-sub li ul {
    min-width: 100%;
    left: 0!important;
    position: absolute;
    background-color: #1d1d1d;
    color: #fff;
}

.approot header .logo {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: auto;
  width: 30%;
  min-width: 180px;
  max-width: 280px;
}


.navigation .navigation-inner .nav {
  display: flex;
  flex-wrap:wrap;
  padding-bottom: 6px;
}

.approot header .navigation .navigation-inner .nav .nav-item {
  color: black;
  cursor: pointer;
  font-size: 13px;
  font-weight: 300;
  height: 86px;
  min-width: 90px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  word-spacing: -1px;
}

#nav-item:hover {
  background-color: #1b0b2c;
  transition: 0.2s;
}

.approot header .navigation .navigation-inner .nav .nav-item a > img {
  margin-bottom: 9px;
}

.approot header .navigation .navigation-inner .nav .nav-item a > i {
  align-items: center;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  margin-bottom: 9px;
  text-decoration: none;
}

.approot header .navigation .navigation-inner .nav .nav-item a > i:before {
  color: black;
  display: block;
  font-size: 22px;
  line-height: 20px;
  margin-bottom: 2px;
}

/** --------------------------------  **/

.approot header .navigation .navigation-inner .nav .submenu {
  background-color: #1d1d1d;
  box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
  left: 0;
  height: 0px;
  min-width: 1004px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 100%;
  transition: 0.3s;
  width: 100%;
  z-index: 20;
  border-bottom: 4px transparent;
}

.approot header .navigation .navigation-inner .nav .nav-item:hover + .submenu {
  opacity: 1;
  height: 300px;
}

.approot header .navigation .navigation-inner .nav .submenu:hover {
  height: 300px;
  opacity: 1;
}

.approot header .navigation .navigation-inner .nav li {
  border-bottom: 4px solid transparent;
}

.approot header .navigation .navigation-inner .nav li:hover {
  /* background-color: #ffe46c; */
  /* border-bottom: 4px solid #ffa32b; */
  color: #e9ad3e;
  border-bottom: 2px solid #e9ad3e;
  transition: 0.2s;
}
.approot header .navigation .navigation-inner .nav li.active {
  background-color: #ffe46c;
  border-bottom: 4px solid #ffa32b;
  transition: 0.2s;
}

.approot header .navigation .navigation-inner .nav .submenu ul {
  font-size: 0;
  height: 300px;
  margin-left: 140px;
  margin-right: 140px;
  position: relative;
  overflow: scroll;
  overflow-x: hidden;
}

.approot header .navigation .navigation-inner .nav .submenu ul li {
  display: inline-flex;
  height: 100%;
  position: relative;
}

.approot header .navigation .navigation-inner .nav .submenu ul li a {
  font-size: 1rem;
  color: #fff;
  display: block;
  height: 100%;
  padding: 0 15px;
  position: relative;
  transition: 0.2s;
  border-bottom: 3px solid transparent;
}

.approot header .navigation .navigation-inner .nav .submenu ul li a:hover {
  background-color: #302c35 !important;
}

.approot header .navigation .navigation-inner .nav .submenu ul li img {
  display: block;
  height: 80%;
  position: relative;
  top: 10%;
}

.approot header .navigation .navigation-inner .nav .submenu ul li a span {
  position: relative;
  top: 30px;
}

/** --------------------------------  **/

/** HEADER END**/

/** PLAYER NAV **/

.player-nav {
  background: rgb(8 18 47);
  /* border: 1px solid #cb9d00; */
  height: 61px;
}

.main-wrap {
  margin: 0 auto;
  position: relative;
}

.notlogin-player-nav {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-end;
}

.login-title {
  align-items: center;
  color: black;
  display: flex;
  font-size: 13px;
}

.login-title i {
  border: 1px solid #000;
  border-radius: 50%;
  display: block;
  font-size: 19px;
  height: 25px;
  margin-right: 5px;
  width: 28px;
  padding: 2px;
}

.btn-big {
  border: 1px solid black;
  cursor: pointer;
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  margin: 0 5px;
  min-width: 60px;
  padding: 0 15px;
  user-select: none;
}

.btn-login {
  background-image: linear-gradient(#1d1d1d, #5b5b5b);
  color: #ffffff;
}

.btn-login:hover {
  background-image: linear-gradient(#1d1d1d, #5b5b5b);
  color: #ffffff;
}

.btn-signup {
  /* background-color: #ffd800; */
  border-color: #000000;
  color: black;
  text-decoration: none;
}

.btn-signup a {
  text-decoration: none;
  color: black;
}

.btn-signup:hover {
  background-image: #000000;
  border-color: #000000;
  color: black;
}

.btn-register {
  background-image: linear-gradient(#ffb62e, #eea30e);
  border-color: #000000;
  color: black;
  text-decoration: none;
}

.btn-register:hover,
.btn-register:active,
.btn-register:focus {
  background-image: linear-gradient(#eea30e, #ffb62e);
  border-color: #000000;
  color: black;
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px 30px;
  margin: 0 auto;
  max-width: 1000px;
}

.title-container i {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(236, 158, 13);
  color: #fabb2e;
  border-radius: 50%;
  font-size: 30px;
  height: 60px;
  margin-right: 20px;
  width: 60px;
}

.title-text {
  flex: 1;
}

.title-text h2 {
  font-family: myfont2;
  font-size: 25px;
  margin-bottom: 8px;
  background-image: linear-gradient(
    180deg,
    #ffc011 22%,
    #f0b10d 27%,
    #df7402 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 700;
}

.title-text p {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.language-navbar .language-selector .langText{
	    color: white;
}

/** PLAYER NAV END **/

/** PLAYER LOGIN NAV **/

.login-nav-item {
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  vertical-align: middle;
}

.login-nav-item a {
  color: rgba(255, 255, 255, 255);
  font-weight: 600;
  display: block;
  padding: 0 10px;
  text-decoration: none;
  transition: 0.3s;
}

.login-nav-item a:hover {
  color: white;
}

.login-nav-item a.active {
  color: white;
}

.id a {
  color: black;
  font-weight: 700;
  cursor: pointer;
  padding: 0 10px;
  text-decoration: none;
}

.wallet {
  align-items: center;
  display: flex;
  line-height: 100%;
  position: relative;
  user-select: none;
  white-space: nowrap;
  z-index: 10;
}

.wallet h2 {
  color: black;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0px;
}

/** PLAYER LOGIN NAV END **/

/** SIDE BAR **/

.side-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 95px;
  z-index: 25;
}

.side-menu li + li {
  margin-top: 5px;
}

.side-menu li a {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 2px solid #c2824e;
  border-radius: 5px 0 0 5px;
  color: black;
  display: block;
  font-size: 12px;
  height: 60px;
  line-height: 1.4;
  overflow: hidden;
  padding-left: 60px;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform 0.3s linear;
  width: 280px;
}

.side-menu li a:hover {
  transform: translate3d(-160px, 0, 0);
  transition: transform 0.3s ease-out 0.2s;
}

.side-menu li a img {
  left: 0;
  position: absolute;
}

.side-menu li a > h2 {
  color: black;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 0 0px;
  padding-left: 2px;
}

.side-menu li a > p {
  color: black;
  padding-left: 2px;
  font-weight: 500;
}

.side-menu li a > i {
  color: black;
  font-size: 32px;
  height: 100%;
  left: 0;
  line-height: 60px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 60px;
}

/** SIDE BAR END**/

/** MARQUEE CONTENT **/

.approot .marquee-container {
  width: 100%;
}

.approot .marquee-container .marquee-block {
  background-color: rgba(0, 0, 0, 0.5);
  line-height: 30px;
  /*width: 100%;*/
  z-index: 1;
  /*margin-top: 8px;*/
}

.approot .marquee-container .marquee-block .marquee-news {
  margin: auto;
  position: relative;
  display: flex;
  width: unset;
  border-bottom: 3px solid #2b2d3c;
  border-right: 1px solid #2b2d3c;
}

.news.marquee-wrap {
    box-sizing: border-box;
    cursor: pointer;
    margin: auto;
    position: relative;
    width: calc(100% - 50px);
    color: #fff;
    display: inline-flex;
    align-items: center;
}

.news.marquee-wrap .visible-area {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-custom {
  font-size: 15px;
}

.news-title {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.approot .marquee-container .marquee-block .marquee-news .news-title {
  /* background-color: #ffa41c; */
  /* border-radius: 50%; */
  color: #fff;
  /* height: 40px; */
  margin: 0;
  padding: 0;
  /* text-align: center; */
  nsform: scale(0.7);
  width: 15vw;
}

.approot .marquee-container.promox {
  position: relative;
  width: 100%;
  top: -8px;
}

/** MARQUEE CONTENT END**/

/** CAROUSEL SLIDER **/

.app-body {
  flex-grow: 1;
  background: #e7e7e7;
  position: relative;
}

.home-area {
  min-width: unset;
  overflow: hidden;
  width: 100%;
}

.home-area .carousel {
  /*height: 34.375vw;*/
  overflow: hidden;
  position: relative;
}

.carousel-control-next-icon {
  height: 4rem !important;
  width: 3rem !important;
}

.carousel-control-prev-icon {
  height: 4rem !important;
  width: 3rem !important;
}

.carousel-control-next-icon:hover {
  background-color: #292929;
}

.carousel-control-prev-icon:hover {
  background-color: #292929;
}

/** CAROUSEL SLIDER END**/

/** HOME GAME QUICK **/
.approot .home-icon-title {
  max-width: 1132px;
  margin: 0 auto;
  width: 100%;
}

.home-area .home-game-quick {
  background: #faf9f9;
  padding: 60px 0;
  z-index: 3;
}

.home-area .home-icon-title {
  align-items: center;
  color: white;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.home-area .home-icon-title i {
  align-items: center;
  border: 1px solid rgb(236, 158, 13);
  color: #fabb2e;
  border-radius: 50%;
  display: flex;
  font-size: 30px;
  height: 60px;
  width: 60px;
  justify-content: center;
  margin-right: 20px;
}

.home-area .home-icon-title .title-text {
  display: flex;
  flex-direction: column;
}

.home-area .home-icon-title .title-text > :not(small) {
  font-family: myfont2;
  font-size: 25px;
  margin-bottom: 8px;
  background-image: linear-gradient(
    180deg,
    #ffc011 22%,
    #f0b10d 27%,
    #df7402 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 700;
}

.home-area .home-icon-title .title-text small {
  color: black;
  font-size: 14px;
  line-height: 1.4;
}

.home-quick-box {
  display: flex;
  justify-content:center;
}

@media only screen and (max-width: 1080px) {
	.home-quick-box {
	  flex-wrap:wrap;
	}
}
.home-quick-box-item {
  cursor: pointer;
  height: 350px;
  margin: 0 3px;
  position: relative;
  width: 295px;
}

.home-quick-box-item .gametype-cover {
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.8s;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.home-quick-box-item h4 > div:first-child {
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  font-weight: 600;
}

.home-quick-box-item h4 > div:last-child {
  font-size: 12px;
  color: #cbb7db;
}

.home-quick-box .home-quick-box-item h4 {
  align-items: center;
  background: transparent url(../img/box1.png) 50%/240px 69px no-repeat;
  bottom: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  min-height: 69px;
  position: absolute;
  transition: bottom 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  width: 100%;
  z-index: 2;
}

.home-quick-box .home-quick-box-item:hover h4 {
  bottom: 35px;
}

.home-quick-box .home-quick-box-item:hover .gametype-cover {
  transform: rotateY(1turn);
}

.home-quick-box .home-quick-box-item .gametype-cover:after {
  background-color: rgba(0, 0, 0, 0.3);
  content: "";
  height: calc(100% - 4px);
  left: 2px;
  position: absolute;
  top: 2px;
  transition: background-color 0.3s;
  transition-delay: 0.3s;
  width: calc(100% - 4px);
}

.home-quick-box .home-quick-box-item:hover .gametype-cover:after {
  background-color: rgba(0, 0, 0, 0.8);
}

/** HOME GAME QUICK END**/

/** EGAME **/

.home-area .home-egame {
  background: #f5f5f5;
  padding: 60px 0;
  z-index: 3;
}

.home-egame .egame-container {
  margin: 0 auto;
  width: unset;
}

.home-area .home-egame .home-icon-title {
  max-width: 780px;
}

.home-egame .home-icon-title i {
  align-items: center;
  border: 1px solid rgb(236, 158, 13);
  border-radius: 50%;
  display: flex;
  font-size: 30px;
  height: 60px;
  width: 60px;
  justify-content: center;
  margin-right: 20px;
}

.egame-tab {
  background-image: linear-gradient(#e53f0f, #fbb807);
  border-radius: 6px;
  height: 92px;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
}

.egame-tab .egame-providers {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
}

.egame-container .egame-providers > div {
  color: black;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  height: 100%;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  width: 125px;
}

.egame-container .egame-providers > div:hover {
  background-image: linear-gradient(#ffd650, #ffa034);
  color: white;
}

.egame-container .egame-providers > div.active {
  background-image: linear-gradient(#ffd650, #ffa034);
  color: white;
}

.egame-container .egame-providers > div.active .egame-pic img {
  filter: brightness(700%) grayscale(100%);
}
.egame-container .egame-providers div:before {
  margin: 0 auto;
}

.egame-content {
  background: url(../img/gamebox.png) 50% / cover no-repeat;
  overflow: hidden;
  position: relative;
}

.egame-content > div{
	padding: 15px 15px 55px 15px;
}

.egame-games {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  height: 230px;
  padding:25px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.egame-games li {
  align-items: center;
  border: 1px solid #ffcd22;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 0 4px;
  position: relative;
  text-align: center;
}

.egame-games li img {
  height: 110px;
  margin: 0 auto 10px;
}

.egame-games li .title {
  color: white;
  font-size: 14px;
}

.egame-games li .link-cover {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
}

.egame-games li .link-cover button,
.egame-games li .link-cover a {
    padding: 10px;
    white-space: nowrap;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.egame-games li .link-cover .add-fav {
  display: none;
}

.egame-games li:hover .link-cover {
  opacity: 1;
}

.nrc-button {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 0;
  border-radius: 22.5px;
  color: black;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  height: 45px;
  box-shadow: 0px 2px 10px #41413494;
  transition: 0.2s ease;
}

button.nrc-button {
  padding: 0 20px;
}

.nrc-button:hover {
  background-color: #ffa41c;
}

.resume-item .nrc-button:hover {
  background: #ffa41c;
}

.home-egame .home-jp {
  align-items: center;
  display: flex;
  height: 45px;
  justify-content: center;
  left: -7px;
  margin: 0 auto;
  position: relative;
  top: -45px;
  user-select: none;
  width: 315px;
}

.home-egame .home-jp .home-jp-gp h2 {
  color: white;
  font-size: 14px;
  padding-right: 5px;
}

.home-egame .home-jp .home-jp-digi {
  color: #ffc425;
  font-size: 19px;
  width: 120px;
}

.is-animated {
  animation: 0.2s zoom-in;
}

@keyframes zoom-in {
  0% {
    transform: scale(0.2);
  }
  100% {
    transform: none;
  }
}

/** EGAME END **/

/** HOME MOBILE **/

.home-area .home-mobile {
  background: url(../static/home3.jpg) 50% / cover no-repeat;
  height: 500px;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

/** HOME MOBILE END **/

/** HOME SERVICE **/
.home-area .home-service {
  background-color: #ececec;
  display: block;
  line-height: 1.6;
  padding: 50px 0 80px;
  text-align: center;
}

.home-area .metal-title {
  display: flex;
  font-size: 44px;
  font-weight: 700;
  justify-content: center;
  margin-bottom: 20px;
}

.metal-title .golden {
  padding-right: 8px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    180deg,
    #ffc011 22%,
    #f0b10d 27%,
    #df7402 78%
  );
  display: block;
  line-height: 1;
  position: relative;
  padding-bottom: 10px;
}

.metal-title .silver {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    180deg,
    #505050 22%,
    #333331 27%,
    #2a2a2a 78%
  );
  display: block;
  line-height: 1;
  position: relative;
}

.home-subtitle {
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.pie-list {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 20px;
}

.pie-list li {
  align-items: center;
  display: flex;
  height: 150px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 133px;
}

.pie-list li .pie-ani {
  background-image: url(../img/pie-white.png);
  background-position: 50%;
  background-repeat: no-repeat;
  height: 85px;
  position: relative;
  width: 95px;
}

.pie-list li .pie-ani .pie-content {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding-top: 10px;
  width: 100%;
}

.pie-list li .pie-ani .pie-content .num {
  color: white;
  display: inline;
  font-weight: 800;
  font-size: 34px;
}

.pie-list li .pie-ani .pie-content .unit {
  bottom: -24px;
  color: #f7a711;
  font-weight: 800;
  display: inline;
  z-index: 20;
  font-size: 15px;
  position: absolute;
}

.pie-list li .pie-ani img {
  left: -20px;
  position: absolute;
  top: -19.5px;
  max-width: unset;
}

.pie-list li .pie-ani .mask {
  height: 133px;
  left: 47px;
  overflow: hidden;
  position: absolute;
  top: -20px;
  transform-origin: left;
  width: 67px;
}

.pie-list li .pie-ani .mask > div {
  height: 133px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 67px;
}

.pie-list li .pie-ani .mask > div > div {
  border: 15px solid rgba(229, 229, 229, 0.8);
  border-radius: 50%;
  box-sizing: border-box;
  height: 133px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 133px;
}

.pie-list li .pie-ani .filter {
  height: 133px;
  left: -20px;
  overflow: hidden;
  position: absolute;
  top: -20px;
  width: 67px;
}

.pie-list li .pie-ani .filter > div {
  height: 133px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 67px;
}

.pie-list li .pie-ani .filter > div > div {
  border: 15px solidrgba(229, 229, 229, 0.8);
  border-radius: 50%;
  box-sizing: border-box;
  height: 133px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 133px;
}

.pie-list li .pie-ani .mask.over-half > div {
  animation: mask1 0.7s linear 0.7s infinite both;
  animation-delay: 2.7s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transform: rotate(0);
  transform-origin: left;
}

.pie-list li .pie-ani .mask.half > div {
  animation: mask2 0.7s linear 0.7s infinite both;
  animation-delay: 2.7s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transform: rotate(0);
  transform-origin: left;
}

.pie-list li .pie-ani .pie1 > div {
  animation: pie1 0.6s linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transform: rotate(0deg);
  transform-origin: right;
}

.pie-list li .pie-ani .pie2 > div {
  animation: pie2 0.7s linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transform: rotate(0deg);
  transform-origin: right;
}

.pie-list li .pie-ani .pie3 > div {
  animation: pie3 1.05s linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transform: rotate(0deg);
  transform-origin: right;
}

.pie-list li .pie-ani .pie4 > div {
  animation: pie4 0.6s linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transform: rotate(0deg);
  transform-origin: right;
}

@keyframes pie1 {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(175deg);
  }
}
@keyframes pie2 {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(181deg);
  }
}
@keyframes pie3 {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(138deg);
  }
}
@keyframes pie4 {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(181deg);
  }
}
@keyframes mask1 {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(115deg);
  }
}
@keyframes mask2 {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(150deg);
  }
}

.pie-list li > .pie-text {
  bottom: -43px;
  left: 50%;
  line-height: 1;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pie-list li > .pie-text h5 {
  color: #f7a711;
  font-size: 12px;
  font-weight: 800;
  margin: 5px 0 6px;
  text-transform: uppercase;
}

.pie-list li > .pie-text p {
  color: black;
  font-size: 16px;
  font-weight: 700;
}

/** HOME SERVICE END **/

/** HOME FEATURE **/

.home-area .home-feature {
  background-color: #ececec;
  padding: 40px 20px 0;
}

.home-feature .feature-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  text-align: left;
}

.home-feature .feature-list li {
  align-items: center;
  display: flex;
  margin-bottom: 40px;
  width: calc(50% - 50px);
}

.home-feature .feature-list li .img.feature1 {
  background-image: url(../img/a1.png);
}
.home-feature .feature-list li .img.feature2 {
  background-image: url(../img/a2.png);
}
.home-feature .feature-list li .img.feature3 {
  background-image: url(../img/a3.png);
}
.home-feature .feature-list li .img.feature4 {
  background-image: url(../img/a4.png);
}

.home-feature .feature-list li .img {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 75px;
  width: 75px;
}

.home-feature .feature-list li .feature-content {
  line-height: 1.8;
  padding-left: 30px;
  width: calc(100% - 75px);
}

.feature-content h4 {
  color: black;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

.feature-content p {
  color: rgb(46, 45, 45);
  font-size: 14px;
}

/** HOME FEATURE ENDS **/

/** ABOUT US **/

.general-layout {
  background-color: #fff;
  box-sizing: border-box;
  color: #777;
  font-size: 14px;
  line-height: 1.8;
  margin: auto;
  min-height: 650px;
  padding: 50px 100px;
  position: relative;
}

.general-layout .gr-menu {
  background-color: rgba(255, 255, 255, 0.9);
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 220px;
}

.general-layout .gr-menu ul {
  list-style-type: none;
  margin-top: 65px;
  padding: 0;
}

.general-layout li {
  display: list-item;
  margin: 3px 0;
}

.general-layout .gr-menu li a {
  color: #6a6666;
  cursor: pointer;
  display: block;
  line-height: 20px;
  padding: 15px 0;
  text-decoration: none;
  width: 100%;
}

.general-layout a {
  background-color: transparent;
  font-size: 15px;
}

.general-layout .gr-menu li a.active,
.general-layout .gr-menu li a:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  box-shadow: 0px 0px 8px #ba9ac9;
  color: black;
  font-weight: 500;
}

.general-layout .cont {
  box-sizing: border-box;
  color: #777;
  font-size: 14px;
  left: 220px;
  line-height: 1.8;
  position: relative;
  width: calc(100% - 220px);
}

.general-layout h1 {
  color: #fabb2e;
  font-size: 2em;
  margin: 0.67em 0;
  font-weight: 700;
}

.general-layout h3 {
  color: #fabb2e;
  font-size: 1.2em;
  margin: 1em 0;
  font-weight: 700;
}

.general-layout p {
  margin: 0.25em 0;
  color: rgb(32, 32, 32);
}

/** ABOUT US END **/

/** PROMOTION **/

.section-promo {
  min-height: calc(100vh - 375px);
  padding: 40px 0;
}

.main-wrap {
  margin: 0 auto;
  position: relative;
}

.section-promo .promo_menu {
  margin-bottom: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.section-promo .promo_menu .pmbox {
  padding: 0 15px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  height: 54px;
  line-height: 54px;
  margin-right: 5px;
  margin-top: 15px;
  min-width: 135px;
  opacity: 0.6;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.section-promo .promo_menu .pmbox:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  font-weight: 700;
  opacity: 1;
}

.section-promo .promo_menu .pmbox.active {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  font-weight: 700;
  opacity: 1;
}

.promo_box .promo_bx {
  cursor: pointer;
  margin: 10px 0;
  transition: 0.3s ease;
}

.promo_box .promo_bx:hover {
  transform: translateY(3px);
}

#login {
  top: 25% !important;
}

.modal-dialog {
  border-radius: 10px;
  /* box-shadow: 0 2px 10px rgb(0 0 0 / 80%); */
  height: 80vh;
  max-width: 1110px;
  position: relative;
  width: 70vw;
}

.modal-header {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eedb0e 99.39%
    ),
    #ffc908;
  height: 50px;
  color: black;
  font-weight: 700;
  padding: 0 20px;
  font-size: 28px;
}

.modal-header i {
  /* color: black; */
  cursor: pointer;
}

.modal-dialog .modal-content .fixed-pt {
  background-color: rgba(204, 204, 204, 0.1);
  box-shadow: 1px 0 0 0 rgb(204 204 204 / 30%);
  box-sizing: border-box;
  height: calc(100% - 50px);
  position: absolute;
  max-width: 350px;
  padding: 15px;
  top: 50px;
  transition: 0.2s ease;
  width: 35%;
  z-index: 1;
}

.modal-dialog .modal-content .fixed-pt img {
  display: block;
  width: 100%;
}

.modal-dialog .modal-content .fixed-pt h1.title {
  font-size: 20px;
  line-height: 1.4;
  margin: 15px 0;
  color: black;
}

.modal-dialog .modal-content .toggle-btn i {
  align-items: center;
  display: none;
  color: #3e1283;
  background-color: rgba(239, 239, 239, 0.9);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  line-height: 1;
  text-indent: -2px;
  text-transform: none;
  transition: 0.3s ease;
  justify-content: center;
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-20%);
  width: 30px;
  height: 30px;
  z-index: 10;
  cursor: pointer;
}

.modal-dialog .modal-content .toggle-btn i:hover {
  background-color: #efefef;
  transform: translateY(0.5px);
  color: #611dcb;
}

.modal-dialog .modal-content .toggle-btn.min:after {
  content: "\f061";
  text-indent: 3px;
}

.modal-dialog .modal-content .fixed-pt.min {
  padding: 10px;
  width: 0%;
}

.modal-dialog .modal-content .fixed-pt.min h1.title,
.modal-dialog .modal-content .fixed-pt.min img {
  display: none;
}

.modal-body.promox {
  box-sizing: border-box;
  height: calc(100% - 50px);
  margin: 0 0 0 35%;
  overflow: auto;
  padding: 10px;
  width: 65%;
}

.modal-body.promox.active {
  margin-left: 0;
  padding: 20px 50px 80px;
  width: 100%;
}

.nrc-editor-view {
  height: auto;
  line-height: 1.4;
  padding: 3px;
}

.nrc-editor-view p {
  word-wrap: break-word;
  margin-bottom: 22px;
}

.nrc-editor-view > p:empty {
  height: 14px;
}

.nrc-editor-view ol {
  list-style-type: decimal;
}

.nrc-editor-view li {
  margin: 1em 0 1em -0.5em;
}

.nrc-editor-view table tbody tr td {
  border: 1px solid grey;
  padding: 3px 2px;
  width: 140px;
}

.modal-dialog .modal-content .apply-btn {
  background: transparent;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  left: 0;
  max-width: 350px;
  padding: 20px;
  position: absolute;
  transition: 0.2s ease;
  width: 35%;
  z-index: 5;
}

.modal-dialog .modal-content .apply-btn button {
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  cursor: pointer;
  transition: 0.3s ease;
}

.modal-dialog .modal-content .apply-btn button:hover,
.modal-dialog .modal-content .voucher-btn button:hover {
  transform: translateY(2px);
}

.modal-content .nrc-button {
  font-size: 16px;
  height: 45px;
  padding: 0 30px;
  box-shadow: 0px 2px 10px #ba9ac9;
}

.modal-dialog .modal-content .apply-btn.active {
  max-width: 100%;
  width: 100%;
}

/** PROMOTION END **/

/** SLOTS CONTENT **/

.app-body.egame {
  background-color: rgb(255 255 255);
}

.egame .egame-main {
  margin: 0px auto;
  min-height: 600px;
  position: relative;
  width: unset;
}

.segame-providers {
  display: flex;
  left: 0px;
  overflow: auto;
  position: absolute;
  top: -20%;
  width: 100%;
  z-index: 1;
  justify-content: center;
}

.segame-gplogo {
  color: #444;
  cursor: pointer;
  font-size: 14px;
  height: 90px;
  position: relative;
  text-align: center;
  transition: color 0.4s;
  white-space: nowrap;
  width: 60px;
}

.segame-gplogo > span {
  bottom: 0;
  display: block;
  left: 20px;
  line-height: 20px;
  overflow: hidden;
  position: absolute;
}

.segame-gplogo.active {
  color: black;
}

.segame-gplogo img {
  z-index: 88;
  background-color: #000;
  border-radius: 50%;
  content: "";
  height: 60px;
  left: 0;
  position: absolute;
  top: 0;
  transition: background-color 0.4s;
  width: 60px;
  z-index: 11;
}

.segame-gplogo.active img {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(198 122 14 / 10%) 48.43%,
      #ff9e16 99.39%
    ),
    #ffe46c;
}

.segame-gplogo.active span {
  color: black;
  font-weight: 900;
}

.segame-gplogo + .segame-gplogo {
  margin-left: 16px;
}

.segame-item {
  background-color: #000;
  background-image: linear-gradient(45deg, #141414 25%, transparent 0),
    linear-gradient(-45deg, #141414 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #141414 0),
    linear-gradient(-45deg, transparent 75%, #141414 0);
  background-size: 16px 16px;
  border-radius: 8px;
  box-shadow: inset 0 0 16px 4px #000;
  float: left;
  height: 190px;
  line-height: 1;
  margin: 0 12px 12px 0;
  overflow: hidden;
  perspective: 475px;
  position: relative;
  width: 190px;
}

.segame-tools {
  margin-top: 184px;
}

/**  .segame-item:first-of-type {
			height: 392px;
			perspective: 980px;
			width: 392px;
	}**/

.segame-item:before {
  bottom: 26px;
  color: #ffdc42;
  font-weight: 400;
  content: attr(data-gameprovider);
  left: 14px;
  position: absolute;
  text-shadow: 0 1px 5px #000;
  z-index: 1;
  font-size: 18px;
}

.segame-item > .title {
  background-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.1) 5%,
    #000 70%
  );
  bottom: 0;
  color: #fff;
  font-size: 14px;
  height: 50px;
  left: 0;
  line-height: 30px;
  padding: 20px 0 0 14px;
  position: absolute;
  text-shadow: 0 1px 5px #000;
  width: 100%;
}

.segame-item > .img {
  height: 100%;
}

.segame-item > .img > img {
  display: block;
  width: 100%;
}

.segame-item > .link-cover {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotateX(-105deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 0.3s linear;
  width: 100%;
  z-index: 1;
}

.segame-item > .link-cover > .nrc-button {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  font-size: 12px;
  font-weight: 800;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  transition: background-color 0.4s, transform 0.4s;
  width: 80%;
  text-align: center;
  text-decoration: none;
  color: black;
}

.segame-item:hover {
  box-shadow: 0 2px 10px rgb(69 165 255 / 80%),
    inset 2px 4px 4px rgb(93 158 255 / 77%),
    0 2px 4px 2px rgb(109 177 255 / 80%);
}

.segame-item:hover > .link-cover {
  transform: rotate3d(0, 0, 0, 0deg);
}

.segame-item > .link-cover > .nrc-button:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 2px 4px rgba(71, 70, 70, 0.5), 0 1px 6px 2px rgba(0, 0, 0, 0.8);
  transform: scale3d(1.05, 1.05);
}

/** SLOTS CONTENT END **/

/** SPORTS CONTENT **/

.section-row {
  min-height: calc(100vh - 375px);
  padding: 60px 0;
  width: unset;
}

.replaceimgdetect img {
  max-width: 85% !important;
}

.nav-tabs {
  border-bottom: none;
}

.game_products {
  display: flex !important;
  justify-content: left;
  transition: all 300ms ease;
  grid-gap: 14px;
}

.inner_main .nav-item .nav-link {
  padding: 0;
  border: transparent;
}

.inner_main .nav-item .nav-link.active {
  border: 2px solid #fabb2e;
  border-radius: 20px;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
}

.tab_bar_title_sec_inner {
  font-size: 35px;
  font-weight: 700;
  color: #fabb2e;
  text-shadow: 0px 1px 1px #685f5f;
  margin-bottom: 10px;
  line-height: normal;
}

.tab_bar_dec {
  font-size: 16px;
  justify-content: center;
  color: black;
}

.game_products_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  border: none;
  background: none;
}

.game_products_btntext {
  position: absolute;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
}

/** SPORTS CONTENT END **/

/** DAILY CHECKIN CONTENT  **/
.white-container.checkin {
  min-height: 400px;
}

.daily-checkin-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkin-coin {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.checkin-coin-total {
  background-image: linear-gradient(
    180deg,
    #ffc011 22%,
    #f0b10d 27%,
    #df7402 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 600;
  margin: 0;
  font-size: 2.3rem;
  line-height: 2.75rem;
  text-shadow: 0px 1px 2px rgb(107 19 0 / 16%);
}

.checkin-coin svg:first-child {
  margin-right: 0.5rem;
  width: 1.875rem;
  height: 1.875rem;
}

.checkin-coin svg:last-child {
  margin-left: 0.1875rem;
  width: 1.875rem;
  height: 1.875rem;
}

.checkin-wraper {
  margin-top: 0.75rem;
}

.checkin-ul {
  list-style: none;
  margin: 0;
  margin-top: 15px;
  padding: 0 0.625rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 20px;
}

.daily-checkin {
  width: 5.9rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: start;
  margin-right: 25px;
}

.daily-checkin.active {
  color: #461496;
}

.daily-checkin-height {
  height: 8rem;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(255 0 266 / 4%);
  background: rgba(225, 225, 255, 0.1);
  box-shadow: 3px 3px 8px #ba9ac9;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.daily-checkin-height.active {
  background-image: linear-gradient(45deg, #0045c7, #ff2c7d);
  border: 1px solid rgba(255 255 255 /49%);
  backdrop-filter: blur(5px);
}

.daily-checkin-num {
  color: #3c3939;
  top: 0.75rem;
  font-size: 16px;
  font-weight: 700;
  line-height: 0.875rem;
  position: absolute;
  width: 100%;
  padding: 7px;
  left: 50%;
  transform: translateX(-50%);
}

.daily-checkin-num.active {
  color: white;
}

.daily-checkin-img {
  width: 2.3rem;
  height: 2.3rem;
  bottom: 0.75rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgb(213 82 255 / 49%);
}

.daily-checkin-img.active {
  width: 2.3rem;
  height: 2.3rem;
  bottom: 0.75rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: none;
}

.daily-checkin-height:after {
  animation: shadowlight 2.5s infinite both;
  background-color: rgb(255 255 255 / 36%);
  content: "";
  height: 10%;
  position: absolute;
  top: 40%;
  left: -30%;
  transform: translate3d(80%, 0, 0) rotate(45deg);
  width: 250%;
}

@keyframes shadowlight {
  0% {
    transform: translate3d(-60%, 0, 0) rotate(-45deg);
  }

  to {
    transform: translate3d(60%, 0, 0) rotate(-45deg);
  }
}

.daily-checkin-date {
  margin-top: 0.375rem;
  font-size: 0.9rem;
  line-height: 0.875rem;
  font-weight: 400;
  color: rgb(0 0 0 / 73%);
}

.daily-checkin-date.active {
  color: #fabb2e;
  font-weight: 600;
}

.daily-checkin-btn {
  display: block;
  width: 17.5rem;
  border-radius: 1.875rem;
  border: none;
  color: black;
  font-weight: 600;
  background: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  box-shadow: 0px 0px 9px #b2a565;
  height: 2.9rem;
  font-size: 1.1rem;
  margin: 1.25rem auto 0;
}

/** DAILY CHECKIN END  **/

/** MY PROFILE CONTENT  **/

.main-wrap2 {
  margin: 0 auto;
  position: relative;
}

.white-container2 {
  background-color: #222;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 0 2px 4px 0rgba (0, 0, 0, 0.25);
  padding: 20px 40px 40px;
  height: 71px;
}

.white-container3 {
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 4px 0rgba (0, 0, 0, 0.25);
  padding: 20px 40px 40px;
  margin-bottom: 40px;
}

.white-container2 ul {
  list-style: none;
  position: absolute;
  top: 0px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.white-container2 ul li {
  display: inline-block;
  height: 70px;
  width: 100px;
}

.white-container2 ul li a {
  color: #efefef;
  cursor: pointer;
  font-size: 16px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 500;
  line-height: 2;
  height: 100%;
  transition: 0.1s ease;
  width: 100%;
  text-decoration: none;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.white-container2 ul li a span {
  font-size: 13px;
}

.white-container2 ul li a i {
  display: block;
  font-size: 28px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.white-container2 ul li a.active,
.white-container2 ul li a:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  font-weight: 500;
}

.white-container2 ul li a.active {
  font-weight: 700;
}

.profile {
  display: flex;
  justify-content: space-between;
}

.profile > div:first-child {
  margin-right: 50px;
  width: 690px;
}

.profile > div:last-child {
  width: 480px;
}

.section-block2 .header {
  border-bottom: 1px solid #ccc;
  height: 38px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.section-block2 .header .titles {
  align-items: baseline;
  display: flex;
}

.section-block2 .header h3 {
  background-image: linear-gradient(
    180deg,
    #ffc011 22%,
    #f0b10d 27%,
    #df7402 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 24px;
  font-weight: 700;
}

.profile-btn {
  text-decoration: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(247 222 140 / 23%) 48.43%,
      #ffd946a3 99.39%
    ),
    #ffb308;
  border: 1px solid transparent;
  border-radius: 5px;
  color: black;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 800;
  height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 20px;
  padding-right: 20px;
  transition: 0.3s;
  box-shadow: 0px 2px 10px #ba9ac9;
  letter-spacing: 0.2px;
}

.profile-btn:hover {
  text-decoration: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #ffd634 99.39%
    ),
    #ffcf22;
  box-shadow: 0px 2px 10px #978a52;
}

.resume-details {
  padding: 20px 0;
}

.resume-details div.resume-item {
  align-items: center;
  color: #363636;
  display: flex;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.resume-details div.resume-item p.title {
  margin-right: 20px;
  text-align: right;
  width: 172px;
}

.resume-details div.resume-item p.value {
  color: #222;
  width: 250px;
}

.profile-promo img {
  width: 100%;
  margin-bottom: 8px;
  transition: 0.3s ease;
}

.profile-promo img:hover {
  transform: translateY(3px);
}

.box {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 2px 10px #ba9ac9;
  transition: 0.3s ease;
}

.box:hover {
  transform: translateY(3px);
}

.profile .box {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: 100px;
  padding-right: 20px;
}

.profile .box.bank-card {
  margin-bottom: 20px;
}

.profile .box .title {
  background-image: linear-gradient(180deg, #787878, #3c3b3b);
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100px;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  width: 125px;
}

.profile .box .title:after {
  border-bottom: 99px solid #fff;
  border-left: 16px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.profile .box .info {
  flex: 1;
  padding-left: 10px;
}

.profile .box .info .card-no,
.profile .box .info .bank {
  color: rgb(148, 148, 148);
  font-size: 14px;
}

.profile .box .info .card-name {
  color: rgb(83, 83, 83);
}

.info.deleteBank {
  cursor: pointer;
}

.profile .box .btn {
  border: 1px solid #ffc908;
  border-radius: 5px;
  color: #f5b400;
  cursor: pointer;
  height: 38px;
  font-weight: 700;
  margin-left: 10px;
  text-align: center;
  width: 114px;
  box-shadow: 0px 2px 10px #d39b33;
}

.profile .box .btn:hover {
  background-color: #ffc908;
  color: black;
}

.profile .box .add-info {
  align-items: center;
  color: #c72828;
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
}

.profile .box .add-info i {
  font-size: 22px;
  margin-right: 10px;
}

.profile .box .add-info .add-info-title {
  font-size: 20px;
  font-weight: 500;
}

.profile .box .add-info .add-info-dec {
  font-size: 14px;
}

.profile .box.wallets .title {
  background-image: linear-gradient(180deg, #ff6e13 20%, #d6ac08 100%);
}

.profile .box.wallets.game .title {
  background-image: linear-gradient(180deg, #7b7b7b 20%, #c3c3c3 100%);
  color: #000;
}

.profile .box .price {
  color: #ff6e13;
  flex: 1;
  font-size: 38px;
  font-weight: 300;
  line-height: 100px;
  text-align: right;
}
.voucher-container {
  display: flex;
  flex-flow: row wrap;
  grid-gap: 10px;
}

.img-voucher {
  width: 100%;
  max-width: 140px;
  cursor: pointer;
  transform: scale(0.95);
  transition: all 0.2s linear;
}

.img-voucher:hover {
  width: 100%;
  max-width: 140px;
  cursor: pointer;
  transform: scale(0.99);
  transition: all 0.2s linear;
}

.voucherp {
  text-align: justify;
  overflow-y: auto;
  color: black;
  font-size: 13px;
  margin-bottom: 0px !important;
  line-height: 1.3;
}

.list-details {
  border: 1px solid #ccc;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-top: 0;
  overflow: hidden;
}

.list-details div {
  height: 45px;
  padding: 0 20px;
  padding-top: 15px;
}

.list-details div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.list-details div:nth-child(2n) {
  background-color: #f5f5f5;
}

.list-details div p {
  color: #282828;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group b {
  color: #3e1283;
}

.nrc-button.grey {
  background: #aaa !important;
}

.nrc-button.grey:hover {
  background: #c0bdbd;
}

.nrc-button.save:hover {
  background-color: #ffa41c;
  color: black;
}

.nrc-button.sms:hover {
  background-color: #ffa41c;
}

.nrc-button.sms {
  transition: 0.3s ease;
}
.nrc-button.sms:focus {
  transform: translateY(4px);
}

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

.flex-center a {
  width: 120px;
  text-decoration: none;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 48px;
}

.flex-center a:hover {
  width: 120px;
  text-decoration: none;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 48px;
  color: white;
}

.status-active {
  color: #8fc31f;
  font-weight: 600;
}

.status-p,
.value {
  color: black;
}

.nrc-form-input .Select-control:disabled,
.nrc-form-input input:disabled {
  background-color: #e7e7e7;
  cursor: not-allowed;
}

/** MY PROFILE CONTENT END **/

/** MY VIP CONTENT **/

.vip-display {
  height: 150px;
  display: flex;
  justify-content: center;
}

.vip-display-level {
  margin-right: 15px;
}

.vip-display-level img {
  border-radius: 8px;
  height: 90%;
  box-shadow: 0 2px 5px 3px rgb(150 147 152 / 44%);
}

.vip-intro-text {
  font-size: 17px;
  font-weight: 400;
  position: absolute;
  text-align: center;
  top: 10%;
  width: 100%;
  color: black;
}

.vip-display-link {
  align-items: center;
  background-color: #f6f6f6;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 90%;
  box-shadow: 0 1px 6px 2px rgb(238 159 16 / 44%);
  transition: transform 0.3s;
}

.vip-display-link img {
  height: 112%;
  position: relative;
  top: -8px;
}

.vip-display-link:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
}

.vip-conditions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-content {
  font-weight: 400;
  padding: 15px;
  cursor: default;
}

.card-content .condition-title {
  color: black;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.card-content .condition-title .status {
  border-radius: 100px;
  font-size: 13px;
  font-weight: 300;
  margin-left: 5px;
  padding: 4px 7px;
  white-space: nowrap;
}

.card-content .condition-title .status.not-pass {
  border: 1px solid #e94951;
  color: #e94951;
}

.card-detail-content {
  background-color: #fff;
  border-top: 1px solid #e9e9e9;
  padding: 15px;
}

.condition-item-block {
  color: black;
  cursor: default;
}

.condition-item-block .status {
  border-radius: 5px;
  font-size: 14px;
  font-weight: 300;
  margin-left: 5px;
  padding: 6px 7px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 6px 2px rgb(255 63 95 / 44%);
}

.condition-item-block .status.not-pass {
  background: #e94951;
  color: white;
}

.vip-privilege {
  margin: 30px 0;
  border-bottom: 1px solid #ccc;
}

.vip-privilege .titles h3 {
  color: #3e1283;
  font-size: 24px;
  font-weight: 400;
}

.vip-privilege-block {
  grid-gap: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.vip-privilege-item {
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}

.vip-privilege-block > div {
  text-align: center;
}

.privilege-item-img {
  height: 64px;
}

.privilege-item-title {
  color: black;
  font-weight: 400;
  line-height: 22px;
  margin: 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claim-btn {
  border-radius: 3px;
  color: black;
  font-weight: 700;
  font-size: 13px;
  height: inherit;
  padding: 6px 15px;
  cursor: default;
}

.nrc-button.nrc-button-disabled {
  border: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.4;
}

/** MY VIP CONTENT END **/

/** DEPOSIT CONTENT **/

.nav-tabs {
  border-bottom: none;
}

.afterlogin_deposit.nav-tabs .nav-item {
  margin-top: 15px;
  margin-right: 20px;
}

.afterlogin_deposit.nav .nav-item .nav-link {
  min-width: 150px;
  border-radius: 5px;
  text-align: center;
  background: #f8f9fb;
  color: black;
  height: 38px;
  border: 1px solid #ffc908;
  box-shadow: 0px 2px 10px #db9d2cd6;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.afterlogin_deposit.nav .nav-item .nav-link.active {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(247 222 140 / 23%) 48.43%,
      #ffd946a3 99.39%
    ),
    #ffb308;
  color: black;
  border: 1px solid #ffc908;
}

.mydeposit.nav .nav-item .nav-link {
  min-width: 100px;
  text-align: center;
  background: #f8f9fb;
  color: #000000;
  height: 38px;
  border: 2px solid #a3a2a3;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  background-size: cover;
  background-position: center;
  min-width: auto;
  transition: 0.3s ease;
}

.mydeposit.nav .nav-item .nav-link:hover {
  box-shadow: 2px 0px 5px 0px #ffc900;
}

.mydeposit.nav .nav-item .nav-link.active {
  box-shadow: 1px 0px 3px 0px #ffc900;
  border: 2px solid #ffb108;
}

.tab-content .nrc-button {
  padding: 10px 40px;
  margin-bottom: 40px;
}

.deposit_new_table {
  -webkit-box-shadow: 0px 0px 6px 0px rgb(196 182 127 / 70%);
  -moz-box-shadow: 0px 0px 6px 0px rgb(196 182 127 / 70%);
  box-shadow: 0px 0px 6px 0px rgb(196 182 127 / 70%);
}

.bank-list {
  padding-top: 20px;
  padding-bottom: 0px;
  list-style: none;
}

.bank-list li {
  padding-bottom: 5px;
  color: rgb(59, 59, 59);
  font-size: 17px;
  display: flex;
  grid-gap: 15px;
}

.bank-bold {
  color: black !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.nrc-form .nrc-form-item .nrc-form-label2 {
  padding-left: 10px;
  width: 280px;
  text-align: left;
  color: #353434;
}

.nrc-form .nrc-form-item .nrc-form-label2 label.form-require:before {
  color: #ffa41c;
  content: "*";
  font-size: 18px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  left: -5px;
  line-height: 0;
  top: 12px;
}

.nrc-formik-file input {
  opacity: 1;
  z-index: 99;
  height: 40px;
  padding: 5px;
  display: block;
  cursor: pointer;
}

.deposit-btn .nrc-button {
  padding: 0 30px;
  width: 150px;
  font-size: 17px;
  margin-left: 15px;
  transition: 0.3s ease;
}

.deposit-btn .nrc-button:hover {
  transform: translateY(2px);
  background-color: #ffa41c;
}

.modal-sm {
  max-width: 300px;
  height: auto !important;
  width: auto !important;
}

.amountwrapper {
  display: flex;
  text-align: center;
}

.amount-btn {
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  color: black;
  display: inline-block;
  padding: 5px 0;
  width: 70px;
  text-align: center;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 0rem;
  border-radius: 3px;
  border: 1px solid #ffc908;
  background-color: white;
}

.amount-btn:hover {
  background-color: #ffc908;
  color: black;
}

.amount-btn.active {
  background-color: #ffc908;
  color: black;
}

/** DEPOSIT CONTENT END **/

/** HISTORY CONTENT  **/

.myrewards.nav .nav-item .nav-link {
  min-width: 110px;
  text-align: center;
  background: #ffffff;
  color: rgb(58, 58, 58);
  height: 39px;
  border: 1px solid #ffc908;
  font-size: 17px;
  font-weight: 600;
  margin: 20px 0;
  box-shadow: 0px 2px 10px #db9d2cd6;
}

.myrewards.nav .nav-item .nav-link.active {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(247 222 140 / 23%) 48.43%,
      #ffd946a3 99.39%
    ),
    #ffb308;
  color: black;
  height: 39px;
  font-weight: 600;
  border: 1px solid #ffc908;
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.card-header:first-child {
  border-radius: 0.45rem 0.45rem 0 0;
}

.card-header {
  padding: 1.5rem;
  border-bottom: none;
}

.card .card-title {
  font-weight: 500;
  letter-spacing: 0.05rem;
  font-size: 1.24rem;
  color: #464855;
  text-align: right;
}

.card-content.history {
  background-color: #f5f5f5;
  padding: 0px;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e3ebf3;
}

.table.table-xl th,
.table.table-xl td {
  padding: 1.25rem 2rem;
  color: #5a5d6d;
}

.table.table-xl td {
  border-color: rgb(222, 226, 230);
}

.table.table-xl tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.74);
}

.table.table-xl tbody tr i {
  color: black;
  cursor: pointer;
}

.badge-success {
  background-color: #28d094;
}

.badge-secondary {
  background-color: #6b6f82;
}

.badge-danger {
  background-color: #ff4961;
}

/** HISTORY CONTENT END **/

/** REFERRAL CONTENT **/

.copy-text {
  position: relative;
  padding: 5px;
  border-radius: 6px;
  border: 1px solid #ffc908;
  width: 400px;
}

.copy-text input.text {
  border: none;
  padding: 5px;
  font-size: 16px;
  color: rgb(102, 100, 100);
  outline: none;
  width: 340px;
  background-color: transparent;
}

.copy-text .button-copy {
  padding: 8px 12px;
  background-image: linear-gradient(#ffbb4a, rgb(209 116 11));
  color: white;
  font-size: 15px;
  border: none;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
}

.bank-1 {
  color: black;
  text-decoration: none;
}

.bank-1:hover {
  color: black;
}

.rewards_title {
  color: black;
  font-size: 17px;
  font-weight: 700;
}

.reward_title b {
  color: #e49414;
  font-size: 17px;
  text-decoration: underline;
}

.referral-ol {
  color: black;
  font-size: 14px;
}

.referral-wrap {
  display: flex;
  grid-gap: 10px;
}

.referral-btn {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 0;
  border-radius: 5px;
  color: black;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  height: 38px;
  box-shadow: 0px 2px 10px #525d6b94;
  transition: 0.2s ease;
  width: 200px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.referral-btn:hover {
  color: black;
}

.referralp {
  font-size: 13px;
  color: black;
  font-weight: 600;
}

.agent-report {
  display: flex;
  grid-gap: 20px;
}

/** REFERRAL CONTENT END **/

/** FOOTER **/

.footer .footer-main {
  padding: 40px 0;
}

footer .footer-main .footer-cont.pure-g {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pure-g {
  text-rendering: optimizeSpeed;
}

.footer-cont.pure-g .pure-u-3-5 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 10%);
  width: 100%;
}

.footer-logo-box {
  margin: 0 auto;
  padding-bottom: 10px;
  padding-top: 40px;
  text-align: center;
}

.footer-logo-box img {
  max-width: 160px;
  filter: grayscale(100%) brightness(180%);
  opacity: 0.5;
  transform: scale(0.9);
  transition: 0.2s;
  padding: 5px 12px;
}

.footer-logo-box img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(0.9);
}

.menu-footer {
  display: flex;
  width: 100%;
  justify-content: center;
}

.menu-footer a {
  color: #979797;
  border-right: 1px solid #837c9c;
  font-size: 14px;
  margin: 28px 0;
  padding: 2px 10px;
  text-decoration: none;
}

.menu-footer a:last-child {
  border-right: 0;
}

.menu-footer a:hover {
  color: #ffd75d;
}

.copyright {
  width: 100%;
  color: #979797;
  font-size: 12px;
  text-align: center;
}

.powered {
  width: 100%;
  color: #c5c5c5;
  display: flex;
  font-size: 13px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.img-footer {
  width: 300px;
  margin-left: 10px;
}

.payment {
  width: 100%;
  color: #979797;
  display: grid;
  grid-gap: 5px;
  font-size: 13px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.payment-img img {
  max-width: 195px;
  filter: grayscale(100%) brightness(180%);
  opacity: 0.5;
  transform: scale(0.9);
  transition: 0.2s;
}

.payment-img img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(0.9);
}

/** FOOTER ENDS **/

/** LUCKY DRAW SIDE BAR **/

.event-qmenu.menu-close {
  transform: translateX(-83px);
}

.event-qmenu {
  animation: aqm 1.8s ease infinite;
  bottom: 10px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  left: 0;
  min-height: auto !important;
  position: fixed;
  transition: 0.3s ease;
  width: 110px;
  z-index: 21;
}

.event-qmenu .handle {
  bottom: 5px;
  cursor: pointer;
  position: absolute;
  right: 2px;
  width: 30px;
}

.event-qmenu .handle:after {
  color: #fff;
  content: "";
  font-family: "Font Awesome 6 Free";
  font-size: 28px;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  left: -11px;
  line-height: 1;
  position: absolute;
  text-align: center;
  text-shadow: 0 -1px 3px #290c56;
  text-transform: none;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
  width: 50px;
  transition: all ease-in 0.2s;
}

.event-qmenu.menu-close .handle:after {
  left: -13px;
  text-shadow: 0 1px 3px #290c56;
  transform: translateY(-50%) rotate(0deg);
}

.event-qmenu .handle path {
  fill: #ffc908;
}

.event-qmenu .cont {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  border: 3px solid #ffc908;
  border-bottom-right-radius: 15px;
  border-left: 0;
  border-top-right-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  min-height: 103px;
  padding: 10px;
  width: 80px;
  transition: 0.5s ease;
}

.event-qmenu .cont .event-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  margin: 5px 0;
  position: relative;
  transition: 0.3s ease;
  width: 60px;
}

.event-qmenu .cont .event-item:hover {
  transform: scale(1.2);
}

.event-qmenu .cont .event-item img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

@keyframes aqm {
  0% {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  }

  55% {
    filter: drop-shadow(0 2px 6px #ffbb3d);
  }

  70% {
    filter: drop-shadow(0 2px 6px #ffbb3d);
  }

  to {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  }
}

/** LUCKY DRAW SIDE BAR END **/

@media screen and (max-width: 600px) {
  .spin-container {
    flex-direction: column-reverse;
    max-width: 100vw;
  }
}

/** NOTIFICATION Content **/

.mynoti .nav-item:first-of-type {
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
  padding: 4px;
}

.mynoti .nav-item:last-of-type {
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
  padding: 4px;
}

.mynoti .nav-item {
  background: #414141;
}

.mynoti .nav-item .nav-link {
  min-width: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  height: 39px;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: 200px;
}

.mynoti .nav-item .nav-link.active {
  color: black;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  box-shadow: 0 2px 10px #525d6b94;
}

.noti-container {
  border: 2px solid #175aff61;
  border-radius: 2rem;
  background-color: #f6f6f6;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-bottom: 1rem;
}

.noti-date-container {
  background: linear-gradient(
      180deg,
      rgb(16 157 255 / 47%),
      rgb(64 164 255 / 40%) 48.43%,
      #e9f7fa 99.39%
    ),
    #d9f0f6;
  border: 1px solid #175aff61;
  border-radius: 16px;
  height: 60px;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.noti-day {
  width: 60px;
  font-size: 15px;
  font-weight: 700;
  color: black;
}

.noti-date {
  width: 60px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2rem;
  color: black;
}

.noti-content {
  display: flex;
  flex-direction: column;
  color: black;
}

.notiTitle {
  font-size: 18px;
  font-weight: 700;
}

/** NOTIFICATION Content END **/

/** Referrral Content **/

.btn-downline {
  background: linear-gradient(
      180deg,
      rgba(0 0 0/0%),
      rgb(225 179 25/23%) 48.43%,
      #eecc0e 99.39%
    ),
    #ffc908;
  border: 1px solid #ffe025;
  border-bottom: 1px solid #e9cc3d;
  box-shadow: 0 3px 9px 1px #ffe76a;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 20px;
  border-radius: 5px;
}

.downline-head {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 17px;
  font-weight: 700;
}

.dateField {
  width: 45%;
  height: 30px;
  display: block;
  margin: 0 auto;
  font-weight: 500;
  text-align: center;
  font-size: 14px;
}

.downlinetable {
  padding: 5px;
  text-align: center;
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  color: black;
}

.emptytable {
  margin-left: auto;
  border: none;
  margin-bottom: 20px;
  width: max-content;
}

.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
/** Referrral Content END **/

/** Suggestion Content **/

.suggestInput.long {
  width: 100%;
}

.textArea {
  min-height: 150px;
}

.suggestInput {
  padding: 8px;
  color: #000;
  width: 320px;
  height: 40px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 2rem;
  border-radius: 12px;
  border: 1px solid #ffc908;
  background: #fff;
}

/** Suggestion Content End **/

/** Latest VIP Content **/

.vip-table2 {
  padding-top: 20px;
}

.vip-table2 table {
  width: 100%;
  color: black;
}

.vip-table2 table tr.heading th {
  border-bottom: 0.01rem solid #ffc908;
}

.vip-table2 table tr.heading th:first-child,
.vip-table2 table tr td:first-child {
  width: 20%;
  text-align: left;
}

.vip-table2 table tr.heading th p {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  padding-top: 6px;
}

.vip-table2 table tr th {
  padding: 12px;
  width: 16%;
  text-align: center;
}

.vip-table2 table tr.titleRow td > p {
  display: inline-block;
  vertical-align: middle;
  align-items: center;
}

.vip-table2 table tr.titleRow td img {
  height: 24px;
}

.vip-table2 table tr.titleRow td p {
  font-size: 17px;
  font-weight: 600;
  line-height: 19px;
  color: #ffc908;
  padding-left: 12px;
  padding-top: 18px;
}

.vip-table2 table tr.contentRow td:first-child {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  color: black;
  padding-left: 44px;
}

.vip-table2 table tr.contentRow td {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: black;
}

.vip-table2 table tr td {
  padding: 12px;
  width: 16%;
  text-align: center;
}

/** Latest VIP Content END **/

#winners-game-remark,
#winners-slip-remark {
  position: absolute;
  display: flex;
  height: 32px;
  width: 100%;
  bottom: 0;
  justify-content: center;
  align-items: center;
  background-color: #000000a8;
  color: #fff;
  margin: 0;
}

.winnersRow {
  height: 64px;
}

.winner-table {
  font-size: 0.875rem;
  width: 100%;
  min-width: 240px;
  color: black;
  margin-bottom: 30px;
}

.winner-table__col-2,
.winner-table__col-3,
.winner-table__col-4,
.winner-table__col-5 {
  width: 15%;
}

.winner-table__col-1 {
  width: 10%;
  position: relative;
}

.winner-table__col-6 img {
  cursor: pointer;
}

.winner-table__col-6 a {
  text-decoration: none;
}
.winner-table__col-6 a:hover {
  background-color: #00b5fd;
  color: black;
}

.commonBtn {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 24px;
  border-radius: 100px;
  min-width: 96px;
  transition: all 0.2s linear;
  cursor: pointer;
}

.btn-hollow {
  color: black;
  background: 0 0;
  border: 1px solid rgb(74, 158, 255);
}

.gamelog .modal-dialog {
  box-shadow: none !important;
}

.modal.gamelog .modal-content {
  position: absolute;
}

.home-area .home-winner {
  background-color: #ececec;
  padding: 40px 20px 0;
}

.home-area .home-winner .metal-title {
  font-size: 38px;
}

#popup {
  top: 15px !important;
}

#popup .modal-dialog {
  box-shadow: none !important;
}

#popup .modal-content {
  border-radius: 28px;
  box-shadow: 0px 0px 7px 4px #7ccaff;
}

.commonModal.white {
  color: #000;
  font-size: 12px;
  border-radius: 24px;
  text-align: center;
  margin: 0 auto;
  border: 2px solid rgb(74, 158, 255);
  -moz-box-shadow: 0px 0px 7px 4px #7ccaff;
  -webkit-box-shadow: 0px 0px 7px 4px #7ccaff;
  box-shadow: 0px 0px 7px 4px #7ccaff;
  background: linear-gradient(to top, #a6daff, #e5f4ff, #ffffff);
  overflow: hidden;
}

.tncModalClose {
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  z-index: 99;
  top: 10px;
  right: 10px;
  border: none;
  display: block;
  font-size: 18px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #82cfff;
}

.tncModalClose.voucher {
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  z-index: 99;
  top: 3px;
  right: 10px;
  border: none;
  display: block;
  font-size: 18px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #82cfff;
}

.flex {
  display: flex;
  text-align: center;
  justify-content: center;
}

.svg-inline--fa {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}
.popup.header {
  color: black;
  font-weight: 700;
  font-size: 17px;
}

.popup.p {
  color: black;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrpay-image {
  width: 240px;
}

#snow {
  background: none;
  background-image: url(../static/s1-cny.png), url(../static/s2-cny.png);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  -webkit-animation: snow 15s linear infinite;
  -moz-animation: snow 15s linear infinite;
  -ms-animation: snow 15s linear infinite;
  animation: snow 15s linear infinite;
}

@keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }

  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}

@-moz-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }

  100% {
    background-position: 400px 1000px, 200px 400px, 100px 300px;
  }
}

@-webkit-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }

  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}

@-ms-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }

  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}

.loader {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  animation: rotate 1s linear infinite;
}

.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 3px solid var(--primaryColour);
  animation: prixClipFix 2s linear infinite;
}

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

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.referral-tnc-container {
  color: var(--body-textColor);
}

/*--------*/
@media screen and (max-width: 480px) {
  .game-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dark .nrc-form-input .Select-control.invalid,
.dark .nrc-form-input input.invalid {
  background-color: rgba(255, 223, 223, 0.4);
  color: black;
}

.dark .nrc-form-input input.invalid {
  background-color: #fff;
  border-color: #ffc908;
  box-shadow: 0 0 3px #ffd922;
}

.dark .nrc-form .nrc-form-item.vertical .nrc-form-input small {
  height: 44px;
  text-align: left;
  width: 100%;
}

.dark .nrc-form .nrc-form-item small.invalid-msg {
  color: #d22323;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
}

.dark .invalid-msg {
  margin-top: 5px;
  display: none;
}

.dark .highlight-color {
  color: #fdad00;
  text-decoration: none !important;
}

.dark .highlight-color:hover {
  color: #fdad00;
  text-decoration: none;
}

.dark .flex-right-bottom {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
}

#login .nrc-form .nrc-form-item {
  align-items: flex-start;
  display: inline;
  justify-content: flex-start;
}

/** LOGIN FORM END **/

/** REGISTER FORM **/

.dark .main-wrap {
  margin: 0 auto;
  position: relative;
}

.dark .app-body .signup {
  margin-top: 50px;
  color: white;
}

.dark .white-container {
  background-color: #222;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0rgba (0, 0, 0, 0.25);
  margin: 56px auto;
  padding: 20px 40px 40px;
}

.dark .section-block .header {
  border-bottom: 1px solid #ccc;
  height: 38px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
}

.dark .section-block .header .titles {
  align-items: baseline;
  display: flex;
}

.dark .section-block .header h3 {
  color: #ffd800;
  font-size: 24px;
  font-weight: 400;
}

.dark .nrc-form .nrc-form-item {
  margin-bottom: 30px;
}

.dark .nrc-form .nrc-form-item {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
}

.dark .nrc-form-item .nrc-form-input {
  align-items: center;
  display: flex;
  justify-content: center;
}

.dark .nrc-form .nrc-form-item .nrc-form-label {
  padding-right: 10px;
  width: 280px;
  text-align: right;
}

.dark .nrc-form .nrc-form-item .nrc-form-label label {
  color: #fff;
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  line-height: 36px;
  position: relative;
}

.dark .nrc-form .nrc-form-item span {
  color: #b5abab;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  line-height: 36px;
  width: 500px;
}

.dark .nrc-form .nrc-form-item .nrc-form-label label.form-require:before {
  color: #ffd800;
  content: "*";
  font-size: 18px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  left: -5px;
  line-height: 0;
  position: absolute;
  top: 12px;
}

.dark .agree-policy {
  align-items: center;
  display: flex;
  justify-content: center;
}

.dark .agree-policy label {
  color: white;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  margin-right: 4px;
}

.dark .validate-policy {
  color: #ff3737;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  text-align: center;
}

input[type="checkbox"] {
  accent-color: rgb(255 231 0);
}

input[type="text"]:focus,
input[type="password"]:focus,
textArea[type="textArea"]:focus,
input[type="number"]:focus {
  border: 2px solid #ffd800;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

textarea {
  outline: 1px solid transparent;
}

textarea:focus-visible {
  outline: 1px solid #ffd800;
  box-shadow: 0px 0px 5px 2px #dbdbdb;
}

.dark .btn-group {
  align-items: center;
  display: flex;
  justify-content: center;
}

.dark .forgot-body p {
  color: white;
  font-size: 15px;
}

/** REGISTER FORM END **/

.dark .approot {
  background-color: #000;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: unset;
}

.dark .quick-nav {
  background-color: #000;
  color: white;
  width: 100%;
}

.dark .quick-nav .main-wrap {
  display: flex;
  justify-content: space-between;
}

.dark .quick-nav .current-timer {
  color: white;
  font-size: 13px;
  white-space: nowrap;
  width: 130px;
}

.dark .lang {
  color: white;
}

.dark .lang:hover {
  background-color: #534761;
}

.dark .lang-item:hover {
  background-color: #ffd106;
}

.dark .lang-item {
  background-color: #f5d64b;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/** HEADER **/

.dark .approot header {
  background: linear-gradient(to bottom, #003fff 0%, #001d7a 37%, #001451 100%);
}

.dark .approot header .navigation .navigation-inner .nav .nav-item {
  color: black;
}

#nav-item:hover {
  background-color: #1b0b2c;
}

.dark .approot header .navigation .navigation-inner .nav .nav-item a > i {
  color: black;
}

.dark
  .approot
  header
  .navigation
  .navigation-inner
  .nav
  .nav-item
  a
  > i:before {
  color: black;
}

/** --------------------------------  **/

.dark .approot header .navigation .navigation-inner .nav .submenu {
  background-color: #1d1d1d;
  box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
}

.dark .approot header .navigation .navigation-inner .nav li:hover {
  color: #e9ad3e;
  border-bottom: 2px solid #e9ad3e;
}
.dark .approot header .navigation .navigation-inner .nav li.active {
  background-color: #ffe46c;
  border-bottom: 4px solid #ffd800;
}

.dark
  .approot
  header
  .navigation
  .navigation-inner
  .nav
  .submenu
  ul
  li
  a:hover {
  background-color: #302c35 !important;
}

.dark .approot header .navigation .navigation-inner .nav .submenu ul li img {
  display: block;
  height: 80%;
  position: relative;
  top: 10%;
}

/** --------------------------------  **/

/** HEADER END**/

/** PLAYER NAV **/

.dark .player-nav {
  /* background-image: linear-gradient(#ffc136, #dfbc2f); */
  /* border: 1px solid #cb9d00; */
}

.dark .login-title {
  color: white;
}

.dark .login-title i {
  border: 1px solid #000;
}

.dark .btn-big {
  /* border: 1px solid black; */
}

.dark .btn-login {
  background: #003fff;
  /* border-color: #ffe200; */
  color: #ffffff;
  margin-top: 3px;
}

.dark .btn-login:hover {
  background: #003fff;
  /* border-color: #ffe200; */
  color: #ffffff;
}

.dark .btn-signup {
  background-color: #003fff;
  border-color: #003fff;
  color: white;
  margin-top: 3px;
}

.dark .btn-signup a {
  color: black;
}

.dark .btn-signup:hover {
  background-color: #003fff;
  border-color: #003fff;
  color: white;
}

/** PLAYER NAV END **/

/** PLAYER LOGIN NAV **/

.dark .login-nav-item a {
  color: rgba(255, 255, 255, 255);
}

.dark .login-nav-item a:hover {
  color: white;
}

.dark .login-nav-item a.active {
  color: white;
}

.dark .id a {
  color: black;
}

.dark .wallet h2 {
  color: black;
}

/** PLAYER LOGIN NAV END **/

/** SIDE BAR **/

.dark .side-menu li a {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 2px solid #c2824e;
  color: black;
}

.dark .side-menu li a > h2 {
  color: black;
}

.dark .side-menu li a > p {
  color: black;
}

.dark .side-menu li a > i {
  color: black;
}

/** SIDE BAR END**/

/** MARQUEE CONTENT **/

.dark .approot .marquee-container .marquee-block {
  background-color: rgba(0, 0, 0, 0.5);
}

.dark .approot .marquee-container .marquee-block .marquee-news .news-title {
  background-color: #2b2d3c;
  color: #a2a2ac;
  /* display: flex; */
}
/** MARQUEE CONTENT END**/

/** CAROUSEL SLIDER **/

.dark .app-body {
  background: #020418;
  color:white;
}

.dark .carousel-control-next-icon:hover {
  background-color: #292929;
}

.dark .carousel-control-prev-icon:hover {
  background-color: #292929;
}

/** CAROUSEL SLIDER END**/

/** HOME GAME QUICK **/
.dark .home-area .home-game-quick {
  background: #020418;
}

.dark .home-area .home-mobile {
  background: url(../img/home3.png) 50% / cover no-repeat;
}

.dark .home-area .home-icon-title {
  color: white;
}

.dark .home-area .home-icon-title i {
  border: 1px solid #ffd800;
  color: #ffd800;
}

.dark .home-area .home-icon-title .title-text > :not(small) {
  font-size: 25px;
  margin-bottom: 8px;
  background-image: linear-gradient(
    180deg,
    #fdd800 22%,
    #ffd800 27%,
    #ffe400 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 700;
}

.dark .home-area .home-icon-title .title-text small {
  color: white;
  font-size: 14px;
  line-height: 1.4;
}

.dark .home-quick-box-item h4 > div:last-child {
  font-size: 12px;
  color: #cbb7db;
}

.dark .home-quick-box .home-quick-box-item h4 {
  color: #fff;
}

.dark .home-quick-box .home-quick-box-item .gametype-cover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

.dark .home-quick-box .home-quick-box-item:hover .gametype-cover:after {
  background-color: rgba(0, 0, 0, 0.8);
}

/** HOME GAME QUICK END**/

/** EGAME **/

.dark .home-area .home-egame {
  background: #020418;
  padding: 60px 0;
  z-index: 3;
}

.dark .home-egame .egame-container {
  margin: 0 auto;
  width: unset;
}

.dark .home-area .home-egame .home-icon-title {
  max-width: 780px;
}

.dark .home-egame .home-icon-title i {
  border: 1px solid #ffd800;
}

.dark .egame-tab {
  background-color: #ffd800;
}

.dark .egame-container .egame-providers > div {
  color: black;
}

.dark .egame-container .egame-providers > div:hover {
  background-image: linear-gradient(#ffd650, #ffa034);
  color: white;
}

.dark .egame-container .egame-providers > div.active {
  background-image: linear-gradient(#ffd650, #ffa034);
  color: white;
}

.dark .egame-container .egame-providers > div.active .egame-pic img {
  filter: brightness(700%) grayscale(100%);
}

.dark .egame-games li {
  border: 1px solid #ffcd22;
}

.dark .egame-games li .title {
  color: white;
}

.dark .egame-games li .link-cover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dark .nrc-button {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  box-shadow: 0px 2px 10px #41413494;
}

.dark .nrc-button:hover {
  background-color: #ffa41c;
}

.dark .resume-item .nrc-button:hover {
  background: #ffa41c;
}

.dark .home-egame .home-jp .home-jp-gp h2 {
  color: white;
}

.dark .home-egame .home-jp .home-jp-digi {
  color: #ffd800;
}

/** EGAME END **/

/** HOME SERVICE **/
.dark .home-area .home-service {
  background-color: #1e1e1e;
}

.dark .metal-title .golden {
  padding-right: 8px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    180deg,
    #fdd800 22%,
    #ffd800 27%,
    #ffe400 78%
  );
}

.dark .metal-title .silver {
  color: white;
  display: block;
  line-height: 1;
  position: relative;
  -webkit-text-fill-color: white;
}

.dark .home-subtitle {
  color: white;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.dark .pie-list li .pie-ani .pie-content .num {
  color: black;
  display: inline;
  font-weight: 700;
  font-size: 33px;
}

.dark .pie-list li .pie-ani .pie-content .unit {
  bottom: -24px;
  color: #ffd800;
  font-weight: 500;
  display: inline;
  z-index: 20;
  font-size: 15px;
  position: absolute;
}

.dark .pie-list li .pie-ani .mask > div > div {
  border: 15px solid rgb(26 25 25 / 90%);
  border-radius: 50%;
  box-sizing: border-box;
  height: 133px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 133px;
}

.dark .pie-list li .pie-ani .filter > div > div {
  border: 15px solidrgba(229, 229, 229, 0.8);
  border-radius: 50%;
  box-sizing: border-box;
  height: 133px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 133px;
}

.dark .pie-list li > .pie-text h5 {
  color: #ffd800;
  font-size: 12px;
  font-weight: 700;
  margin: 5px 0 6px;
  text-transform: uppercase;
}

.dark .pie-list li > .pie-text p {
  color: white;
  font-size: 16px;
  font-weight: 700;
}

/** HOME SERVICE END **/

/** HOME FEATURE **/

.dark .home-area .home-feature {
  background-color: #1e1e1e;
  padding: 40px 20px 0;
}

.dark .feature-content h4 {
  color: #ffd800;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

.dark .feature-content p {
  color: white;
  font-size: 14px;
}

/** HOME FEATURE ENDS **/

/** ABOUT US **/

.dark .general-layout {
  background-color: #3c3c3c;
  box-sizing: border-box;
  color: #777;
  font-size: 14px;
  line-height: 1.8;
  margin: auto;
  min-height: 650px;
  padding: 50px 100px;
  position: relative;
}

.dark .general-layout .gr-menu {
  background-color: #3c3c3c;
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 220px;
}

.dark .general-layout .gr-menu ul {
  list-style-type: none;
  margin-top: 65px;
  padding: 0;
}

.dark .general-layout li {
  display: list-item;
  margin: 3px 0;
}

.dark .general-layout .gr-menu li a {
  color: #fff;
  cursor: pointer;
  display: block;
  line-height: 20px;
  padding: 15px 0;
  text-decoration: none;
  width: 100%;
}

.dark .general-layout a {
  background-color: transparent;
  font-size: 17px;
}

.dark .general-layout .gr-menu li a.active,
.dark .general-layout .gr-menu li a:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  box-shadow: 0px 0px 8px #c1b870;
  color: black;
  font-weight: 700;
}

.dark .general-layout .cont {
  box-sizing: border-box;
  color: #777;
  font-size: 14px;
  left: 220px;
  line-height: 1.8;
  position: relative;
  width: calc(100% - 220px);
}

.dark .general-layout h1 {
  color: #ffd800;
  font-size: 2em;
  margin: 0.67em 0;
  font-weight: 700;
}

.dark .general-layout h3 {
  color: #ffd800;
  font-size: 1.2em;
  margin: 1em 0;
  font-weight: 700;
}

.dark .general-layout p {
  margin: 0.25em 0;
  color: #fff;
}

/** ABOUT US END **/

/** PROMOTION **/

.dark .section-promo {
  min-height: calc(100vh - 375px);
  padding: 40px 0;
}

.dark .main-wrap {
  margin: 0 auto;
  position: relative;
}

.dark .section-promo .promo_menu {
  margin-bottom: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.dark .section-promo .promo_menu .pmbox {
  padding: 0 15px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  height: 54px;
  line-height: 54px;
  margin-right: 5px;
  margin-top: 15px;
  min-width: 135px;
  opacity: 0.9;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.dark .section-promo .promo_menu .pmbox:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  opacity: 1;
}

.dark .section-promo .promo_menu .pmbox.active {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  font-weight: 700;
  opacity: 1;
}

.dark .promo_box .promo_bx {
  cursor: pointer;
  margin: 10px 0;
  transition: 0.3s ease;
}

.dark .promo_box .promo_bx:hover {
  transform: translateY(3px);
}

#login {
  top: 25% !important;
}

.dark .modal-content {
  max-height: 80vh;
  border: 1px solid black;
  background-color: var(--dropdown-bgColor);
  color: var(--dropdown-textColor);
}

.dark .modal-dialog {
  border-radius: 10px;
  height: 80vh;
  max-width: 1110px;
  position: relative;
  width: 70vw;
}

.dark .modal-header i {
  color: black !important;
  cursor: pointer;
}

.dark .modal-dialog .modal-content .fixed-pt {
  background-color: rgba(204, 204, 204, 0.1);
  box-shadow: 1px 0 0 0 rgb(204 204 204 / 30%);
  box-sizing: border-box;
  height: calc(100% - 50px);
  position: absolute;
  max-width: 350px;
  padding: 15px;
  top: 50px;
  transition: 0.2s ease;
  width: 35%;
  z-index: 1;
}

.dark .modal-dialog .modal-content .fixed-pt img {
  display: block;
  width: 100%;
}

.dark .modal-dialog .modal-content .fixed-pt h1.title {
  font-size: 20px;
  line-height: 1.4;
  margin: 15px 0;
  color: white;
}

.dark .modal-dialog .modal-content .toggle-btn i {
  align-items: center;
  display: none;
  color: #3e1283;
  background-color: rgba(239, 239, 239, 0.9);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  line-height: 1;
  text-indent: -2px;
  text-transform: none;
  transition: 0.3s ease;
  justify-content: center;
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-20%);
  width: 30px;
  height: 30px;
  z-index: 10;
  cursor: pointer;
}

.dark .modal-dialog .modal-content .toggle-btn i:hover {
  background-color: #efefef;
  transform: translateY(0.5px);
  color: #611dcb;
}

.dark .modal-dialog .modal-content .toggle-btn.min:after {
  content: "\f061";
  text-indent: 3px;
}

.dark .modal-dialog .modal-content .fixed-pt.min {
  padding: 10px;
  width: 0%;
}

.dark .modal-dialog .modal-content .fixed-pt.min h1.title,
.dark .modal-dialog .modal-content .fixed-pt.min img {
  display: none;
}

.dark .modal-body.promox {
  box-sizing: border-box;
  height: calc(100% - 50px);
  margin: 0 0 0 35%;
  overflow: auto;
  padding: 10px;
  width: 65%;
}

.dark .modal-body.promox.active {
  margin-left: 0;
  padding: 20px 50px 80px;
  width: 100%;
}

.dark .modal-btn {
  box-shadow: 0px 2px 10px #ffbd2b;
}

.dark .nrc-editor-view {
  height: auto;
  line-height: 1.4;
  padding: 3px;
  color: white;
}

.dark .nrc-editor-view p {
  word-wrap: break-word;
  margin-bottom: 22px;
}

.dark .nrc-editor-view > p:empty {
  height: 14px;
}

.dark .nrc-editor-view ol {
  list-style-type: decimal;
}

.dark .nrc-editor-view li {
  margin: 1em 0 1em -0.5em;
}

.dark .nrc-editor-view table tbody tr td {
  border: 1px solid grey;
  padding: 3px 2px;
  width: 140px;
}

.dark .modal-dialog .modal-content .apply-btn {
  background: transparent;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  left: 0;
  max-width: 350px;
  padding: 20px;
  position: absolute;
  transition: 0.2s ease;
  width: 35%;
  z-index: 5;
}

.dark .modal-dialog .modal-content .apply-btn button {
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  cursor: pointer;
  transition: 0.3s ease;
}

.dark .modal-dialog .modal-content .apply-btn button:hover {
  transform: translateY(2px);
}

.dark .modal-content .nrc-button {
  font-size: 16px;
  height: 45px;
  padding: 0 30px;
  box-shadow: 0px 2px 10px #ffbd2b;
}

.dark .modal-dialog .modal-content .apply-btn.active {
  max-width: 100%;
  width: 100%;
}

/** PROMOTION END **/

/** SLOTS CONTENT **/

.dark .app-body.egame {
  background-color: #1e1e1e;
}

.dark .egame .egame-main {
  margin: 0px auto;
  min-height: 600px;
  position: relative;
  width: unset;
}

.dark .segame-providers {
  display: flex;
  left: 0px;
  overflow: auto;
  position: absolute;
  top: -20%;
  width: 100%;
  z-index: 1;
  justify-content: center;
}

.dark .segame-gplogo {
  color: #444;
  cursor: pointer;
  font-size: 14px;
  height: 90px;
  position: relative;
  text-align: center;
  transition: color 0.4s;
  white-space: nowrap;
  width: 60px;
}

.dark .segame-gplogo > span {
  bottom: 0;
  display: block;
  left: 20px;
  line-height: 20px;
  overflow: hidden;
  position: absolute;
}

.dark .segame-gplogo.active {
  color: black;
}

.dark .segame-gplogo img {
  z-index: 88;
  background-color: #000;
  border-radius: 50%;
  content: "";
  height: 60px;
  left: 0;
  position: absolute;
  top: 0;
  transition: background-color 0.4s;
  width: 60px;
  z-index: 11;
}

.dark .segame-gplogo.active img {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(198 122 14 / 10%) 48.43%,
      #ff9e16 99.39%
    ),
    #ffe46c;
}

.dark .segame-gplogo.active span {
  color: black;
  font-weight: 900;
}

.dark .segame-gplogo + .segame-gplogo {
  margin-left: 16px;
}

.dark .segame-item {
  background-color: #000;
  background-image: linear-gradient(45deg, #141414 25%, transparent 0),
    linear-gradient(-45deg, #141414 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #141414 0),
    linear-gradient(-45deg, transparent 75%, #141414 0);
  background-size: 16px 16px;
  border-radius: 8px;
  box-shadow: inset 0 0 16px 4px #000;
  float: left;
  height: 190px;
  line-height: 1;
  margin: 0 12px 12px 0;
  overflow: hidden;
  perspective: 475px;
  position: relative;
  width: 190px;
}

.dark .segame-tools {
  margin-top: 184px;
}

/**  .segame-item:first-of-type {
        height: 392px;
        perspective: 980px;
        width: 392px;
    }**/

.dark .segame-item:before {
  bottom: 26px;
  color: #ffdc42;
  font-weight: 400;
  content: attr(data-gameprovider);
  left: 14px;
  position: absolute;
  text-shadow: 0 1px 5px #ffe1ac;
  z-index: 1;
  font-size: 18px;
}

.dark .segame-item > .title {
  background-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.1) 5%,
    #000 70%
  );
  bottom: 0;
  color: #fff;
  font-size: 14px;
  height: 50px;
  left: 0;
  line-height: 30px;
  padding: 20px 0 0 14px;
  position: absolute;
  text-shadow: 0 1px 5px #000;
  width: 100%;
}

.dark .segame-item > .img {
  height: 100%;
}

.dark .segame-item > .img > img {
  display: block;
  height: 100%;
  width: 100%;
}

.dark .segame-item > .link-cover {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotateX(-105deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 0.3s linear;
  width: 100%;
  z-index: 1;
}

.dark .segame-item > .link-cover > .nrc-button {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  font-weight: 800;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  transition: background-color 0.4s, transform 0.4s;
  width: 80%;
  text-align: center;
  text-decoration: none;
  color: black;
}

.dark .segame-item:hover > .link-cover {
  transform: rotate3d(0, 0, 0, 0deg);
}

.dark .segame-item > .link-cover > .nrc-button:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 2px 4px rgba(71, 70, 70, 0.5), 0 1px 6px 2px rgba(0, 0, 0, 0.8);
  transform: scale3d(1.05, 1.05);
}

/** SLOTS CONTENT END **/

/** SPORTS CONTENT **/

.dark .section-row {
  min-height: calc(100vh - 375px);
  padding: 60px 0;
  width: unset;
}

.dark .replaceimgdetect img {
  max-width: 85% !important;
}

.dark .nav-tabs {
  border-bottom: none;
}

.dark .game_products {
  display: flex !important;
  justify-content: left;
  transition: all 300ms ease;
  grid-gap: 14px;
}

.dark .inner_main .nav-item .nav-link {
  padding: 0;
  border: transparent;
}

.dark .inner_main .nav-item .nav-link.active {
  border: 2px solid #ffd800;
  border-radius: 20px;
}

.dark .nav-tabs .nav-link.active {
  background-color: transparent;
}

.dark .tab_bar_title_sec_inner {
  font-size: 35px;
  font-weight: 700;
  color: #ffd800;
  text-shadow: 0px 1px 1px #685f5f;
  margin-bottom: 10px;
  line-height: normal;
}

.dark .tab_bar_dec {
  font-size: 16px;
  justify-content: center;
  color: black;
  display: none;
}

.dark .game_products_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  border: none;
  background: none;
}

.dark .game_products_btntext {
  position: absolute;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
}

/** SPORTS CONTENT END **/

/** DAILY CHECKIN CONTENT  **/
.dark .white-container.checkin {
  min-height: 400px;
}

.dark .daily-checkin-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .checkin-coin {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.dark .checkin-coin-total {
  background-image: linear-gradient(
    180deg,
    #fdd800 22%,
    #ffd800 27%,
    #ffe400 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 600;
  margin: 0;
  font-size: 2.3rem;
  line-height: 2.75rem;
}

.dark .checkin-coin svg:first-child {
  margin-right: 0.5rem;
  width: 1.875rem;
  height: 1.875rem;
}

.dark .checkin-coin svg:last-child {
  margin-left: 0.1875rem;
  width: 1.875rem;
  height: 1.875rem;
}

.dark .checkin-wraper {
  margin-top: 0.75rem;
}

.dark .checkin-ul {
  list-style: none;
  margin: 0;
  margin-top: 15px;
  padding: 0 0.625rem;
  display: flex;
  justify-content: space-between;
}

.dark .daily-checkin {
  width: 5.9rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: start;
  margin-right: 25px;
}

.dark .daily-checkin.active {
  color: #461496;
}

.dark .daily-checkin-height {
  height: 8rem;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(255 0 266 / 4%);
  background: rgb(255 255 255 / 85%);
  box-shadow: 3px 3px 8px #fffbc7;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.dark .daily-checkin-height.active {
  background-image: linear-gradient(45deg, #0045c7, #ff2c7d);
  border: 1px solid rgba(255 255 255 /49%);
  backdrop-filter: blur(5px);
}

.dark .daily-checkin-num {
  color: #3c3939;
  top: 0.75rem;
  font-size: 16px;
  font-weight: 700;
  line-height: 0.875rem;
  position: absolute;
  width: 100%;
  padding: 7px;
  left: 50%;
  transform: translateX(-50%);
}

.dark .daily-checkin-num.active {
  color: white;
}

.dark .daily-checkin-img {
  width: 2.3rem;
  height: 2.3rem;
  bottom: 0.75rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgb(253 255 0 / 68%);
}

.dark .daily-checkin-img.active {
  width: 2.3rem;
  height: 2.3rem;
  bottom: 0.75rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: none;
}

.dark .daily-checkin-height:after {
  animation: shadowlight 2.5s infinite both;
  background-color: rgb(255 255 255 / 36%);
  content: "";
  height: 10%;
  position: absolute;
  top: 40%;
  left: -30%;
  transform: translate3d(80%, 0, 0) rotate(45deg);
  width: 250%;
}

@keyframes shadowlight {
  0% {
    transform: translate3d(-60%, 0, 0) rotate(-45deg);
  }

  to {
    transform: translate3d(60%, 0, 0) rotate(-45deg);
  }
}

.dark .daily-checkin-date {
  margin-top: 0.375rem;
  font-size: 0.9rem;
  line-height: 0.875rem;
  font-weight: 400;
  color: white;
}

.dark .daily-checkin-date.active {
  color: #ffd800;
  font-weight: 600;
}

.dark .daily-checkin-btn {
  display: block;
  width: 17.5rem;
  border-radius: 1.875rem;
  border: none;
  color: black;
  font-weight: 600;
  background: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  box-shadow: 0px 0px 9px #b2a565;
  height: 2.9rem;
  font-size: 1.1rem;
  margin: 1.25rem auto 0;
}

/** DAILY CHECKIN END  **/

/** MY PROFILE CONTENT  **/

.dark .main-wrap2 {
  margin: 0 auto;
  position: relative;
}


.dark .white-container2 {
  background-color: #000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 0 2px 4px 0rgba (0, 0, 0, 0.25);
  padding: 20px 40px 40px;
  height: 71px;
}

.dark .white-container3 {
  background-color: #3c3c3c;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 4px 0rgba (0, 0, 0, 0.25);
  padding: 20px 40px 40px;
  margin-bottom: 40px;
}

.dark .white-container2 ul {
  list-style: none;
  position: absolute;
  top: 0px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.dark .white-container2 ul li {
  display: inline-block;
  height: 70px;
  width: 100px;
}

.dark .white-container2 ul li a {
  color: #efefef;
  cursor: pointer;
  font-size: 16px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 500;
  line-height: 2;
  height: 100%;
  transition: 0.1s ease;
  width: 100%;
  text-decoration: none;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.dark .white-container2 ul li a span {
  font-size: 13px;
}

.dark .white-container2 ul li a i {
  display: block;
  font-size: 28px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.dark .white-container2 ul li a.active,
.dark .white-container2 ul li a:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  color: black;
  font-weight: 500;
}

.dark .white-container2 ul li a.active {
  font-weight: 700;
}

.dark .profile {
  display: flex;
  justify-content: space-between;
}

.dark .profile > div:first-child {
  margin-right: 50px;
  width: 690px;
}

.dark .profile > div:last-child {
  width: 480px;
}

.dark .section-block2 .header {
  border-bottom: 1px solid #ccc;
  height: 38px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.dark .section-block2 .header .titles {
  align-items: baseline;
  display: flex;
}

.dark .section-block2 .header h3 {
  background-image: linear-gradient(
    180deg,
    #fdd800 22%,
    #ffd800 27%,
    #ffe400 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 24px;
  font-weight: 700;
}

.dark .section-block2 .header .profile-btn {
  text-decoration: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(247 222 140 / 23%) 48.43%,
      #ffd946a3 99.39%
    ),
    #ffb308;
  border: 1px solid transparent;
  border-radius: 5px;
  color: black;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  height: 36px;
  padding-top: 6px;
  padding-left: 20px;
  padding-right: 20px;
  transition: 0.3s;
  box-shadow: 0px 2px 10px #ceba83;
}

.dark .section-block2 .header .profile-btn:hover {
  text-decoration: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #ffd634 99.39%
    ),
    #ffcf22;
  box-shadow: 0px 2px 10px #978a52;
}

.dark .profile-btn {
  text-decoration: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(247 222 140 / 23%) 48.43%,
      #ffd946a3 99.39%
    ),
    #ffb308;
  border: 1px solid transparent;
  border-radius: 5px;
  color: black;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 800;
  height: 36px;
  padding-top: 1px;
  padding-left: 20px;
  padding-right: 20px;
  transition: 0.3s;
  box-shadow: 0px 2px 10px #ba9ac9;
  letter-spacing: 0.2px;
}

.dark .profile-btn:hover {
  text-decoration: none;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #ffd634 99.39%
    ),
    #ffcf22;
  box-shadow: 0px 2px 10px #978a52;
}

.dark .resume-details {
  padding: 20px 0;
}

.dark .resume-details div.resume-item {
  align-items: center;
  color: #363636;
  display: flex;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.dark .resume-details div.resume-item p.title {
  margin-right: 20px;
  text-align: right;
  width: 172px;
  color: #fff;
  font-weight: 600;
}

.dark .resume-details div.resume-item p.value {
  color: #fff;
  width: 250px;
}

.dark .profile-promo img {
  width: 100%;
  margin-bottom: 8px;
  transition: 0.3s ease;
}

.dark .profile-promo img:hover {
  transform: translateY(3px);
}

.dark .box {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 2px 10px #9f99a2;
  transition: 0.3s ease;
}

.dark .box:hover {
  transform: translateY(3px);
}

.dark .profile .box {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: 100px;
  padding-right: 20px;
  margin-bottom: 25px;
}

.dark .profile .box.bank-card {
  margin-bottom: 20px;
}

.dark .profile .box .title {
  background-image: linear-gradient(180deg, #787878, #3c3b3b);
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100px;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  width: 125px;
}

.dark .profile .box .title:after {
  border-bottom: 99px solid #fff;
  border-left: 16px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.dark .profile .box .info {
  flex: 1;
  padding-left: 10px;
}

.dark .profile .box.wallets.game .title {
  background-image: linear-gradient(180deg, #7b7b7b 20%, #c3c3c3 100%);
  color: #fff;
}

.dark .turnover-winover {
  font-size: 26px;
  font-weight: 700;
}

.dark .profile .box .info .card-no,
.dark .profile .box .info .bank {
  color: rgb(148, 148, 148);
  font-size: 14px;
}

.dark .profile .box .info .card-name {
  color: rgb(83, 83, 83);
}

.dark .profile .box .btn {
  border: 1px solid #ffc908;
  border-radius: 5px;
  color: #f5b400;
  cursor: pointer;
  height: 38px;
  font-weight: 700;
  margin-left: 10px;
  text-align: center;
  width: 114px;
  box-shadow: 0px 2px 10px #d39b33;
}

.dark .profile .box .btn:hover {
  background-color: #ffc908;
  color: black;
}

.dark .profile .box .add-info {
  align-items: center;
  color: #c72828;
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
}

.dark .profile .box .add-info i {
  font-size: 22px;
  margin-right: 10px;
}

.dark .profile .box .add-info .add-info-title {
  font-size: 20px;
  font-weight: 500;
}

.dark .profile .box .add-info .add-info-dec {
  font-size: 14px;
}

.dark .profile .box.wallets .title {
  background-image: linear-gradient(180deg, #ff6e13 20%, #d6ac08 100%);
}

.dark .profile .box .price {
  color: #ffab13;
  flex: 1;
  font-size: 35px;
  font-weight: 600;
  line-height: 100px;
  text-align: right;
}

.dark .voucher-container {
  display: flex;
  flex-flow: row wrap;
  grid-gap: 10px;
}

.dark .img-voucher {
  width: 100%;
  max-width: 140px;
  cursor: pointer;
  transform: scale(0.95);
  transition: all 0.2s linear;
}

.dark .img-voucher:hover {
  width: 100%;
  max-width: 140px;
  cursor: pointer;
  transform: scale(0.99);
  transition: all 0.2s linear;
}

.dark .voucherp {
  text-align: justify;
  overflow-y: auto;
  color: black;
  font-size: 13px;
  margin-bottom: 0px !important;
  line-height: 1.3;
}

.dark .list-details {
  border: 1px solid #ccc;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-top: 0;
  overflow: hidden;
}

.dark .list-details div {
  height: 45px;
  padding: 0 20px;
  padding-top: 15px;
}

.dark .list-details div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.dark .list-details div:nth-child(2n) {
  background-color: #f5f5f5;
}

.dark .list-details div p {
  color: #282828;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
}

.dark .form-group {
  margin-bottom: 1rem;
}

.dark .form-group b {
  color: #3e1283;
}

.dark .nrc-button.grey {
  background: #aaa !important;
}

.dark .nrc-button.grey:hover {
  background: #c0bdbd;
}

.dark .nrc-button.save:hover {
  background-color: #ffa41c;
  color: black;
}

.dark .nrc-button.sms:hover {
  background-color: #ffa41c;
}

.dark .nrc-button.sms {
  transition: 0.3s ease;
}
.dark .nrc-button.sms:focus {
  transform: translateY(4px);
}

.dark .flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.dark .flex-center a {
  width: 120px;
  text-decoration: none;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 48px;
}

.dark .flex-center a:hover {
  width: 120px;
  text-decoration: none;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 48px;
  color: white;
}

.dark .status-active {
  color: #8fc31f;
  font-weight: 600;
}

.dark .status-p,
.dark .value {
  color: white;
}

.dark .nrc-form-input .Select-control:disabled,
.dark .nrc-form-input input:disabled {
  background-color: #e7e7e7;
  cursor: not-allowed;
}

/** MY PROFILE CONTENT END **/

/** MY VIP CONTENT **/

.dark .vip-display {
  height: 150px;
  display: flex;
  justify-content: center;
}

.dark .vip-display-level {
  margin-right: 15px;
}

.dark .vip-display-level img {
  border-radius: 8px;
  height: 90%;
}

.dark .vip-intro-text {
  font-size: 17px;
  font-weight: 400;
  position: absolute;
  text-align: center;
  top: 10%;
  width: 100%;
  color: black;
}

.dark .vip-display-link {
  align-items: center;
  background-color: #f6f6f6;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 90%;
  box-shadow: 0 1px 6px 2px rgb(238 159 16 / 44%);
  transition: transform 0.3s;
}

.dark .vip-display-link img {
  height: 112%;
  position: relative;
  top: -8px;
}

.dark .vip-display-link:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
}

.dark .vip-conditions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark .card-content {
  font-weight: 400;
  padding: 15px;
  cursor: default;
  background: #fff;
}

.dark .card-content .condition-title {
  color: black;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.dark .card-content .condition-title .status {
  border-radius: 100px;
  font-size: 13px;
  font-weight: 300;
  margin-left: 5px;
  padding: 4px 7px;
  white-space: nowrap;
}

.dark .card-content .condition-title .status.not-pass {
  border: 1px solid #e94951;
  color: #e94951;
}

.dark .card-detail-content {
  background-color: #fff;
  border-top: 1px solid #e9e9e9;
  padding: 15px;
}

.dark .condition-item-block {
  color: black;
  cursor: default;
}

.dark .condition-item-block .status {
  border-radius: 5px;
  font-size: 14px;
  font-weight: 300;
  margin-left: 5px;
  padding: 6px 7px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 6px 2px rgb(255 63 95 / 44%);
}

.dark .condition-item-block .status.not-pass {
  background: #e94951;
  color: white;
}

.dark .vip-privilege {
  margin: 30px 0;
}

.dark .vip-privilege .titles h3 {
  background-image: linear-gradient(
    180deg,
    #fdd800 22%,
    #ffd800 27%,
    #ffe400 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 24px;
}

.dark .vip-privilege-block {
  grid-gap: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.dark .vip-privilege-item {
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 5px;
  padding: 10px;
}

.dark .vip-privilege-block > div {
  text-align: center;
}

.dark .privilege-item-img {
  height: 64px;
}

.dark .privilege-item-title {
  color: black;
  font-weight: 400;
  line-height: 22px;
  font-size: 15px;
  margin: 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .claim-btn {
  border-radius: 3px;
  color: black;
  font-weight: 700;
  font-size: 13px;
  height: inherit;
  padding: 6px 15px;
  cursor: default;
}

.dark .nrc-button.nrc-button-disabled {
  border: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.4;
}

/** MY VIP CONTENT END **/

/** DEPOSIT CONTENT **/

.dark .nav-tabs {
  border-bottom: none;
}

.dark .afterlogin_deposit.nav-tabs .nav-item {
  margin-top: 15px;
  margin-right: 20px;
}

.dark .afterlogin_deposit.nav .nav-item .nav-link {
  min-width: 150px;
  border-radius: 5px;
  text-align: center;
  background: #f8f9fb;
  color: black;
  height: 38px;
  border: 1px solid #ffc908;
  box-shadow: 0px 2px 10px #db9d2cd6;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.dark .afterlogin_deposit.nav .nav-item .nav-link:hover {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #ffd634 99.39%
    ),
    #ffcf22;
  color: black;
  border: 1px solid #ffc908;
}

.dark .afterlogin_deposit.nav .nav-item .nav-link.active {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(247 222 140 / 23%) 48.43%,
      #ffd946a3 99.39%
    ),
    #ffb308;
  color: black;
  border: 1px solid #ffc908;
}

.dark .mydeposit.nav .nav-item .nav-link {
  min-width: 100px;
  text-align: center;
  background: #f8f9fb;
  color: #000000;
  height: 38px;
  border: 2px solid #a3a2a3;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  background-size: cover;
  background-position: center;
  min-width: auto;
  transition: 0.3s ease;
}

.dark .mydeposit.nav .nav-item .nav-link:hover {
  box-shadow: 2px 0px 5px 0px #ffd800;
}

.dark .mydeposit.nav .nav-item .nav-link.active {
  box-shadow: 1px 0px 3px 0px #ffd800;
  border: 2px solid #ffb108;
}

.dark .deposit_new_table {
  -webkit-box-shadow: 0px 0px 6px 0px rgb(196 182 127 / 70%);
  -moz-box-shadow: 0px 0px 6px 0px rgb(196 182 127 / 70%);
  box-shadow: 0px 0px 6px 0px rgb(196 182 127 / 70%);
  background-color: #fff;
  border: 2px solid #ffd800;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.dark .bank-list {
  padding-top: 20px;
  padding-bottom: 0px;
  list-style: none;
}

.dark .bank-list li {
  padding-bottom: 5px;
  color: rgb(59, 59, 59);
  font-size: 16px;
}

.dark .bank-bold {
  color: black !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.dark .bank-bold.copy {
  display: flex;
  grid-gap: 15px;
}

.dark .nrc-form .nrc-form-item .nrc-form-label2 {
  padding-left: 10px;
  width: 280px;
  text-align: left;
  color: white;
}

.dark .nrc-form .nrc-form-item .nrc-form-label2 label.form-require:before {
  color: #ffd800;
  content: "*";
  font-size: 18px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  left: -5px;
  line-height: 0;
  top: 12px;
}

.dark .nrc-formik-file input {
  opacity: 1;
  z-index: 99;
  height: 40px;
  padding: 5px;
  display: block;
  cursor: pointer;
}

.dark .deposit-btn .nrc-button {
  padding: 0 30px;
  width: 150px;
  font-size: 16px;
  margin-left: 15px;
  transition: 0.3s ease;
}

.dark .deposit-btn .nrc-button:hover {
  transform: translateY(2px);
  background-color: #ffa41c;
}

.dark .modal-sm {
  max-width: 300px;
  height: auto !important;
  width: auto !important;
}

.dark .amountwrapper {
  display: flex;
  text-align: center;
}

.dark .amount-btn {
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  color: black;
  display: inline-block;
  padding: 5px 0;
  width: 70px;
  text-align: center;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 0rem;
  border-radius: 3px;
  border: 1px solid #ffc908;
  background-color: white;
}

.dark .amount-btn:hover {
  background-color: #ffd800;
  color: black;
}

.dark .amount-btn.active {
  background-color: #ffc908;
  color: black;
}

.dark .suggestInput.long {
  width: 100%;
}

.dark .suggestInput {
  padding: 8px;
  color: #000;
  width: 320px;
  height: 40px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 2rem;
  border-radius: 12px;
  border: 1px solid #ffc908;
  background: #fff;
}

.dark .textArea {
  min-height: 150px;
}

/** DEPOSIT CONTENT END **/

/** HISTORY CONTENT  **/

.dark .myrewards.nav .nav-item .nav-link {
  min-width: 110px;
  text-align: center;
  background: #ffffff;
  color: rgb(58, 58, 58);
  height: 39px;
  border: 1px solid #ffc908;
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0;
  box-shadow: 0px 2px 10px #db9d2cd6;
}

.dark .myrewards.nav .nav-item .nav-link.active {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(247 222 140 / 23%) 48.43%,
      #ffd946a3 99.39%
    ),
    #ffb308;
  color: black;
  height: 39px;
  font-weight: 600;
  border: 1px solid #ffc908;
}

.dark .card {
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.dark .card-header:first-child {
  border-radius: 0.45rem 0.45rem 0 0;
}

.dark .card-header {
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-bottom: none;
}

.dark .card .card-title {
  font-weight: 500;
  letter-spacing: 0.05rem;
  font-size: 1.24rem;
  color: #464855;
  text-align: right;
}

.dark .card-content.history {
  background-color: #f5f5f5;
  padding: 0px;
}

.dark .table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e3ebf3;
}

.dark .table.table-xl th,
.dark .table.table-xl td {
  padding: 1.25rem 2rem;
  color: #5a5d6d;
}

.dark .table.table-xl tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.74);
}

.dark .table.table-xl tbody tr i {
  color: black;
  cursor: pointer;
}

.dark .badge-success {
  background-color: #28d094;
}

.dark .badge-secondary {
  background-color: #6b6f82;
}

.dark .badge-danger {
  background-color: #ff4961;
}

/** HISTORY CONTENT END **/

/** REFERRAL CONTENT **/

.dark .copy-text {
  border: 1px solid #ffc908;
}

.dark .copy-text input.text {
  color: #fff;
  background-color: transparent;
}

.dark .copy-text .button-copy {
  background-image: linear-gradient(#ffbb4a, rgb(209 116 11));
  color: white;
}

.dark .button-copy2 {
  background-image: linear-gradient(#ffe17b, rgb(255 155 21));
  color: white;
  font-size: 15px;
  border: none;
  outline: none;
  border-radius: 6px;
  width: 28px;
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dark .button-copy2:hover {
  color: white;
}

.dark .bank-1 {
  color: black;
  text-decoration: none;
}

.dark .bank-1:hover {
  color: black;
}

.dark .rewards_title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.dark .reward_title b {
  background-image: linear-gradient(
    180deg,
    #fdd800 22%,
    #ffd800 27%,
    #ffe400 78%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 17px;
}

.dark .referral-ol {
  color: white;
  font-size: 14px;
}

.dark .referral-wrap {
  display: flex;
  grid-gap: 10px;
}

.dark .referral-btn {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 0;
  border-radius: 5px;
  color: black;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  height: 38px;
  box-shadow: 0px 2px 10px #525d6b94;
  transition: 0.2s ease;
  width: 172px;
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

.dark .referral-btn:hover {
  color: black;
}

.dark .referralp {
  font-size: 13px;
  color: white;
  font-weight: 600;
  margin-top: 5px;
}

.dark .agent-report {
  display: flex;
  grid-gap: 20px;
}

.dark .report-detail {
  width: 100%;
  border-radius: 8px;
  padding: 24px 8px;
  font-size: 16px;
  text-align: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 21px;
  color: black;
  box-shadow: 0px 3px 9px 1px #e2d992;
}

.dark .report-detail span:nth-child(2) {
  font-weight: 700;
  font-size: 17px;
  word-wrap: break-word;
}

.dark .dateField {
  width: 45%;
  height: 30px;
  display: block;
  margin: 0 auto;
  font-weight: 500;
  text-align: center;
  font-size: 14px;
}

.dark .referralHistoryTable {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  color: white;
}

.dark .emptyTable {
  margin-left: auto;
  border: none;
  margin-bottom: 20px;
  width: max-content;
  color: white;
}

.dark .emptyTable th {
  font-weight: 500;
  border: none !important;
}

.dark .empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/** REFERRAL CONTENT END **/

/** NOTIFICATION CONTENT  **/

.dark .mynoti .nav-item {
  background: #1c1a1a;
}

.dark .mynoti .nav-item:first-of-type {
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
  padding: 4px;
}

.dark .mynoti .nav-item:last-of-type {
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
  padding: 4px;
}

.dark .mynoti .nav-item .nav-link {
  min-width: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  height: 39px;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: 200px;
}

.dark .mynoti .nav-item .nav-link.active {
  color: black;
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  box-shadow: 0 2px 10px #525d6b94;
}

.dark .noti-container {
  border: 2px solid #ffd800;
  border-radius: 1.2rem;
  background-color: #f6f6f6;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dark .noti-date-container {
  background: linear-gradient(
      180deg,
      rgba(0 0 0 / 0%),
      rgb(225 179 25 / 23%) 48.43%,
      #eaee0e 99.39%
    ),
    #ffc908;
  border: 1px solid #ffd800;
  border-radius: 16px;
  height: 60px;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dark .noti-day {
  width: 60px;
  font-size: 15px;
  font-weight: 700;
  color: black;
}

.dark .noti-date {
  width: 60px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2rem;
  color: black;
}

.dark .noti-content {
  display: flex;
  flex-direction: column;
  color: black;
}

.dark .notiTitle {
  font-size: 17px;
  font-weight: 700;
}

/** NOTIFICATION CONTENT END **/

/** FOOTER **/

.dark .footer .footer-main {
  padding: 40px 0;
}

footer .footer-main .footer-cont.pure-g {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dark .pure-g {
  text-rendering: optimizeSpeed;
}

.dark .footer-cont.pure-g .pure-u-3-5 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 10%);
  width: 100%;
}

.dark .footer-logo-box {
  margin: 0 auto;
  padding-bottom: 10px;
  padding-top: 40px;
}

.dark .footer-logo-box img {
  max-width: 160px;
  filter: grayscale(100%) brightness(180%);
  opacity: 0.5;
  transform: scale(0.9);
  transition: 0.2s;
  padding: 5px 12px;
}

.dark .footer-logo-box img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(0.9);
}

.dark .menu-footer {
  display: flex;
  width: 100%;
  justify-content: center;
}

.dark .menu-footer a {
  color: #979797;
  border-right: 1px solid #9c937c;
  font-size: 14px;
  margin: 15px 0;
  padding: 2px 10px;
  text-decoration: none;
}

.dark .menu-footer a:last-child {
  border-right: 0;
}

.dark .menu-footer a:hover {
  color: #ffd800;
}

.dark .copyright {
  color: #979797;
  font-size: 12px;
  text-align: center;
}

.dark .powered {
  width: 100%;
  color: #c5c5c5;
  display: flex;
  font-size: 13px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.dark .img-footer {
  width: 300px;
  margin-left: 10px;
}

.dark .payment {
  width: 100%;
  color: #979797;
  display: grid;
  grid-gap: 5px;
  font-size: 13px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.dark .payment-img img {
  max-width: 195px;
  filter: grayscale(100%) brightness(180%);
  opacity: 0.5;
  transform: scale(0.9);
  transition: 0.2s;
}

.dark .payment-img img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(0.9);
}

/** FOOTER ENDS **/

/** LUCKY DRAW SIDE BAR **/

.dark .event-qmenu.menu-close {
  transform: translateX(-83px);
}

.dark .event-qmenu {
  animation: aqm 1.8s ease infinite;
  bottom: 10px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  left: 0;
  min-height: auto !important;
  position: fixed;
  transition: 0.3s ease;
  width: 110px;
  z-index: 21;
}

.dark .event-qmenu .handle {
  bottom: 5px;
  cursor: pointer;
  position: absolute;
  right: 2px;
  width: 30px;
}

.dark .event-qmenu .handle:after {
  color: #fff;
  content: "";
  font-family: "Font Awesome 6 Free";
  font-size: 28px;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  left: -11px;
  line-height: 1;
  position: absolute;
  text-align: center;
  text-shadow: 0 -1px 3px #290c56;
  text-transform: none;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
  width: 50px;
  transition: all ease-in 0.2s;
}

.dark .event-qmenu.menu-close .handle:after {
  left: -13px;
  text-shadow: 0 1px 3px #290c56;
  transform: translateY(-50%) rotate(0deg);
}

.dark .event-qmenu .handle path {
  fill: #ffc908;
}

.dark .event-qmenu .cont {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  border: 3px solid #ffc908;
  border-bottom-right-radius: 15px;
  border-left: 0;
  border-top-right-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  min-height: 103px;
  padding: 10px;
  width: 80px;
  transition: 0.5s ease;
}

.dark .event-qmenu .cont .event-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  margin: 5px 0;
  position: relative;
  transition: 0.3s ease;
  width: 60px;
}

.dark .event-qmenu .cont .event-item:hover {
  transform: scale(1.2);
}

.dark .event-qmenu .cont .event-item img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

@keyframes aqm {
  0% {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  }

  55% {
    filter: drop-shadow(0 2px 6px #ffbb3d);
  }

  70% {
    filter: drop-shadow(0 2px 6px #ffbb3d);
  }

  to {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  }
}

/** LUCKY DRAW SIDE BAR END **/

.dark .home-area .home-winner {
  background-color: #1e1e1e;
  padding: 40px 20px 0;
}

.dark .home-area .home-winner .metal-title {
  font-size: 38px;
}

.dark .table-container {
  max-height: 480px;
  overflow-y: scroll;
  scrollbar-width: none;
}

.dark .table-container::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
}

#popup {
  top: 15px !important;
}

#popup .modal-dialog {
  box-shadow: none !important;
}

#popup .modal-content {
  border-radius: 28px;
  box-shadow: 0px 0px 7px 4px #ffd974;
}

.dark .commonModal {
  color: #fff;
  font-size: 12px;
  border-radius: 0.3rem;
  text-align: center;
  margin: 0 auto;
  background: #1e1e1e;
  overflow: hidden;
}

.dark .commonModal.white {
  color: #fff;
  font-size: 12px;
  border-radius: 24px;
  text-align: center;
  margin: 0 auto;
  border: 2px solid rgb(255 229 74);
  -moz-box-shadow: 0px 0px 7px 4px #ffd974;
  -webkit-box-shadow: 0px 0px 7px 4px #ffd974;
  box-shadow: 0px 0px 7px 4px #ffd974;
  background: linear-gradient(to top, #ffd55e, #ffe8a1, #ffffff);
  overflow: hidden;
}

.dark .commonModalHighlight {
  color: var(--modal-highlightColor);
}

.dark .tncModalClose {
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  z-index: 99;
  top: -10px;
  right: -10px;
  border: none;
  display: block;
  font-size: 18px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgb(255 229 74);
}

.dark .tncModalClose.voucher {
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  z-index: 99;
  top: 3px;
  right: 10px;
  border: none;
  display: block;
  font-size: 18px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgb(255 229 74);
}

.dark .signup-hint {
  color: white;
}

.dark .flex {
  display: flex;
  text-align: center;
  justify-content: center;
}

.dark .svg-inline--fa {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}
.dark .popup.header {
  color: var(--primaryColour);
  font-weight: 700;
  font-size: 17px;
}

.dark .popup.p {
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .winnersRow {
  height: 64px;
}

.dark .winner-table {
  font-size: 0.875rem;
  width: 100%;
  min-width: 240px;
  color: black;
  margin-bottom: 30px;
}

.dark .winner-table__col-2,
.dark .winner-table__col-3,
.dark .winner-table__col-4,
.dark .winner-table__col-5 {
  width: 15%;
}

.dark .winner-table__col-1 {
  width: 10%;
  position: relative;
}

.dark .winner-table__col-6 img {
  cursor: pointer;
}

.dark .winner-table__col-6 a {
  text-decoration: none;
}
.dark .winner-table__col-6 a:hover {
  background: #ffd800;
  color: black;
}

.dark .commonBtn {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 24px;
  border-radius: 100px;
  min-width: 96px;
  transition: all 0.2s linear;
  cursor: pointer;
}

.dark .btn-hollow {
  color: black;
  background: 0 0;
  border: 1px solid rgb(242 169 31);
}

.dark .winnersRow:nth-child(2n-1) td {
  background: rgb(211 211 211);
}

.dark .winnersRow td {
  background: rgb(246 246 247);
}

.dark .winner-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
}

.dark .winner-icon__circle {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  opacity: 0.8;
}

.dark .gamelog .modal-dialog {
  box-shadow: none !important;
}

.dark .modal.gamelog .modal-content {
  position: absolute;
}

.dark .swal2-popup {
  border: 1px solid black;
  background-color: #1e1e1e!important;
  color:white;
}

.dark .swal2-title,
.dark .swal2-content {
  color: white;
}

#voucherDescription {
  color: white;
}


.head_bar {
    min-height: 48px;
    margin-bottom: 5px;
    text-align: center;
    border-top: 1px solid #757493;
    border-left: 1px solid #3b425f;
    border-right: 1px solid #020a31;
    background: #021246;
    background: -moz-linear-gradient(top,#021246 0%,#010f36 35%,#020926 100%);
    background: -webkit-linear-gradient(top,#021246 0%,#010f36 35%,#020926 100%);
    background: linear-gradient(to bottom,#021246 0%,#010f36 35%,#020926 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#021246',endColorstr='#020926',GradientType=0);
}

.head_bar h3 {
    width: 100%;
    line-height: 22px;
    font-family: thaisanslite_r1;
    font-size: 28px;
    font-weight: bold;
    padding: 5px 0px 3px 0px;
    color: #fead0a;
    background: -webkit-linear-gradient(top,#ffffeb 0%,#fffe64 31%,#fffe64 31%,#e6c833 56%,#d4a032 82%,#d4a032 82%,#f1d64a 100%);
    background: linear-gradient(top,#ffffeb 0%,#fffe64 31%,#fffe64 31%,#e6c833 56%,#d4a032 82%,#d4a032 82%,#f1d64a 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.head_bar span {
    width: 100%;
    line-height: 18px;
    font-family: thaisanslite_r1;
    font-size: 18px;
    color: #a4a9bc;
    padding: 0px 0px 7px 0px;
}
.head_bar_rt {
    float: left;
    width: 100%;
}

.head_bar_rt {
    position: relative;
}

.tt_l figure {
    position: relative;
    margin: 0;
}
.tt_l figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.tt_col_x img, .tt_col_c img, .tt_col_a img, .tt_col_b img {
    width: 100%;
}

.banner_hover .tt_img_hover, .banner_hover {
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

.banner_hover .tt_img_hover {
    position: absolute;
    left: -100%;
    top: 0%;
    opacity: 0;
}
.tt_col_x img, .tt_col_c img, .tt_col_a img, .tt_col_b img {
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}



.right_ct .banner_hover {
    border: 1px solid #BFC0C4;
}

.banner_hover .tt_img_hover {
    position: absolute;
    left: -100%;
    top: 0%;
    opacity: 0;
}

.banner_hover:hover .tt_img_hover {
    left: 0px;
    top: 0px;
    opacity: 1;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.banner_hover .tt_img_hover,.banner_hover {
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}


.thaitheme1x:hover figure::before,figure:hover::before {
    -webkit-animation: shine 1.50s;
    animation: shine 1.50s;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.banner_hover {
    overflow: hidden;
}

img.tt_img_df {
    width: 100%;
}

.mb-2em {
    margin-bottom: 2em;
}

.copyright_footer {
    text-align: center;
    line-height: 18px;
    font-family: thaisanslite_r1;
    /* font-size: 18px; */
    /* padding: 20px 0px 10px 0px; */
    color: #fead0a;
    background: -webkit-linear-gradient(top,#ffffeb 0%,#fffe64 31%,#fffe64 31%,#e6c833 56%,#d4a032 82%,#d4a032 82%,#f1d64a 100%);
    background: linear-gradient(top,#ffffeb 0%,#fffe64 31%,#fffe64 31%,#e6c833 56%,#d4a032 82%,#d4a032 82%,#f1d64a 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

form#loginForm {
    display: flex;
}


img.tt_logo_over_banner {
    height: 55px;
    width: 55px;
    left: 0;
    top: 0;
    margin-left: 15em;
    margin-top: 1.1em;
}
.dark.dark .page-header-custom h5, .page-header-custom2 h5{
  color: #000 !important;
	font-size: 25px;
	font-weight: 500;
}
.dark.dark .page-header-custom p, .dark.dark .page-header-custom2 p{
	color: #868585;
}
.dark.dark .luckydr-btn-group a{
	color: #000 !important;
}
.dark.dark .luckydr-btn-group .active-tab{
	color: #259BBF !important;
}