@font-face {
  font-family: lato;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: lato;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u8w4BMUTPHjxsAXC-q.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: lato;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u_w4BMUTPHjxsI5wq_FQft1dw.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: lato;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u_w4BMUTPHjxsI5wq_Gwft.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: lato;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u_w4BMUTPHjxsI3wi_FQft1dw.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: lato;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u_w4BMUTPHjxsI3wi_Gwft.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjxAwXjeu.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wXg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: lato;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: lato;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: lato;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh50XSwaPGR_p.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: lato;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh50XSwiPGQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes spin {
  from {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    moz-transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
    moz-transform: rotateY(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

@-webkit-keyframes progressAnimationStrike {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes progressAnimationStrike {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@-webkit-keyframes animate-stripes {
  100% {
    background-position: -100px 0;
  }
}

@keyframes animate-stripes {
  100% {
    background-position: -100px 0;
  }
}

@-webkit-keyframes change {
  from {
    top: 45%;
  }
  to {
    top: 50%;
  }
}

@keyframes change {
  from {
    top: 45%;
  }
  to {
    top: 50%;
  }
}

@-webkit-keyframes bonus-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes bonus-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

html {
  position: relative;
  height: 100%;
  width: 100%;
  color: #000;
  font-family: lato, sans-serif;
  font-size: 16px;
}

body {
  position: relative;
  height: 100%;
  width: 100%;
  color: #000;
  font-family: lato, sans-serif;
  font-size: 16px;
}

.layout-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 500px;
  min-height: 100%;
  height: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding-top: 200px;
}

section {
  margin: 1rem 0;
}

hr {
  display: block;
  width: 100%;
  border: 1px solid #dee2e6;
}

.ajax-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.75) no-repeat center center;
  z-index: 10000;
  display: none;
}

.ajax-loader-detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  background: url(https://bigwin888.gg/assets/frontend/cny-css-2024/img/cny-2023-bigwin-loader.webp) no-repeat center;
  z-index: 10000;
  margin: 0 auto;
  background-size: 100%;
}

.tab-content {
  margin-top: 1rem;
}

.nav-item {
  margin: unset;
  width: 50%;
  border: unset;
  color: #a2a2a2;
  text-align: center;
  cursor: pointer;
  padding: 0 10px;
  padding-top: 5px;
}

.icon-color-r-1 {
  color: #FFC00E;
}

.btn-logout {
  font-size: 0.8em;
  background-color: #000;
  color: #ffd01a;
  border: none;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 1rem;
  -webkit-transition: background-color 100ms ease-in-out, -webkit-transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 100ms ease-in-out, -webkit-transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.btn-login {
  font-size: 0.8em;
  background-color: #000;
  color: #ffd01a;
  border: none;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 1rem;
  -webkit-transition: background-color 100ms ease-in-out, -webkit-transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 100ms ease-in-out, -webkit-transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.top-menu {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 500px;
  top: 0;
  left: 50%;
  z-index: 1030;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-weight: 900;
}

.btn-refresh-wallet {
  cursor: pointer;
}

.wallet-navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-image: url("/assets/frontend/bigwin-css-2024/img/bigwin-navbar-background.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10px 15px 45px;
  position: relative;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

.nav-bar-container {
  -webkit-transform: unset;
          transform: unset;
  margin-top: -35px;
  padding: 0 30px;
}

.nav-bar-container > .row {
  position: relative;
  background-image: url("/assets/frontend/bigwin-css-2024/img/bigwin-navbar-action-background.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-bar-container-element {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%);
  margin-left: -15px;
  margin-right: -15px;
}

.nav-bar-container-element-img-1 {
  width: 100%;
  max-height: 56px;
}

.navbar-item-s {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin: 0;
}

.navbar-item-s:active {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.navbar-item-s:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.navbar-item-s > span {
  font-size: 0.8em;
}

.ewallet {
  padding: 0;
  margin: 0;
  font-size: 0.8em;
}

.ewallet-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  z-index: 100;
  padding-bottom: 5px;
}

.ewallet-balance {
  font-size: 1.5em;
}

.wallet-navbar-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          /* align-items: center; */
  text-align: center;
  z-index: 100;
}

.website-icon {
  max-width: 65px;
  min-width: 65px;
  min-height: 62px;
  max-height: 62px;
}

.website-icon-img {
  width: 100%;
}

.navbar-item {
  cursor: pointer;
  min-height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  padding: 0 5px;
}

.navbar-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 500px;
  height: 65px;
  z-index: 128;
  font-weight: 900;
  border-radius: 0.75rem 0.75rem 0 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc100), to(#ffe500));
  background-image: linear-gradient(to bottom, #ffc100, #ffe500);
  color: #000;
  text-align: center;
  -webkit-box-shadow: 0 -5px 10px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -5px 10px 1px rgba(0, 0, 0, 0.2);
}

.navbar-bottom-background {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 500px;
  height: 85px;
  background-color: #c0ad91;
  filter: blur(8px);
  -webkit-filter: blur(15px);
}

.navbar-bottom-conatainer {
  position: relative;
  top: 0;
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  padding: 0 35px;
}

.navbar-bottom-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 15px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.navbar-bottom-content:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.navbar-bottom-content:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.navbar-bottom-item-title {
  font-size: 0.7em;
}

.Layer_1 {
  width: 45px;
  height: 45px;
}

.menu-item-logo-img {
  width: 100%;
}

.circle {
  background-image: -webkit-gradient(linear, left top, right top, from(#700000), color-stop(#a50200), to(#700000));
  background-image: linear-gradient(to right, #700000, #a50200, #700000);
  border-radius: 50%;
  -webkit-box-shadow: 0 -5px 10px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -5px 10px 1px rgba(0, 0, 0, 0.2);
  padding: 5.5px;
  margin: 0 10px;
}

.notice-content-detail {
  position: relative;
  padding: 0 25px 15px;
  border-radius: 2rem;
  -webkit-box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 900;
}

.notice-detail-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 70px;
}

.notice-logo {
  position: absolute;
  overflow: hidden;
  width: 8.5rem;
  height: 8.5rem;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #fff;
  padding: 15px;
  border: #fff 0 solid;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.notice-logo-img {
  width: 100%;
}

.modal-close-action {
  display: block;
  margin: 15px 0 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  display: block;
  margin: 15px 0 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}

.notice-close {
  cursor: pointer;
  color: #fff;
  background-image: -webkit-gradient(linear, right top, left top, from(#ffc100), to(#ffe500));
  background-image: linear-gradient(to left, #ffc100, #ffe500);
  opacity: 5;
  outline: none;
  border: none;
  border-radius: 50%;
  font-size: 30px;
  line-height: 0.5;
  padding: 6px 6px 8px !important;
  margin-right: -10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.notice-close:hover {
  background-color: #efb10a;
  opacity: 10;
  border-radius: 50% !important;
  border: none !important;
  outline: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.notice-close:focus {
  outline: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.notice-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100px;
  padding: 10px;
  text-align: center;
}

.notice-detail > span:first-child {
  border: 2px #000 solid;
  border-radius: 1rem 1rem 0 0;
  background-color: #ffc100;
  color: #000;
  font-size: 1.4em;
}

.notice-detail-content {
  margin: 0 0 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.notice-detail-content-detail > span:first-child {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 10px 5px;
  padding: 5px;
  border: 2px #80808033 solid;
  border-radius: 1rem;
}

.progress {
  border: #414042 4px solid;
  border-radius: 1rem;
  outline: none;
}

.progress-bar {
  background-color: #ee303c;
  border-radius: 1rem;
  -webkit-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  transition-property: width, background-color;
  margin: 0;
  background-color: #fff;
  border-radius: 3px;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  width: 100%;
  height: 20px;
}

.progress-bar span {
  border-radius: 3px;
  display: block;
  text-indent: -9999px;
}

.progress-bar::-webkit-progress-value {
  background-image: -webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)), var(--referral-program-bar-color);
}

.progress-bar::-moz-progress-bar {
  background-image: -moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)), var(--referral-program-bar-color);
}

.progress-striped .progress-bar {
  background-color: #fcbc51;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
  -webkit-animation: progressAnimationStrike 3s;
  animation: progressAnimationStrike 3s;
}

progress:not(value) {
  background-color: #fff;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 20px;
  background-color: #fff;
  border-radius: 3px;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  color: #4169e1;
  position: relative;
  -webkit-animation: progressAnimationStrike 3s;
  animation: progressAnimationStrike 3s;
}

progress[value]::-webkit-progress-bar {
  background-color: #fff;
  border-radius: 3px;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
}

progress[value]::-webkit-progress-value {
  position: relative;
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius: 3px;
  -webkit-animation: animate-stripes 5s linear infinite;
  animation: animate-stripes 5s linear infinite;
}

progress[value]::-webkit-progress-value:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  top: 7px;
  right: 7px;
  background-color: #fff;
  border-radius: 100%;
}

progress[value]::-moz-progress-bar {
  background-image: -moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #09c, #f44);
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius: 3px;
}

.login-page {
  display: block;
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding: 0 25px;
  background-image: url("/assets/frontend/bigwin-css-2024/img/login-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  min-height: 100%;
  height: auto;
}

.login-page .inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 380px;
  margin: 0 auto !important;
  min-height: 100%;
  height: auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.login-page .login-page-element-1 {
  display: none;
  z-index: 99;
  position: fixed;
  top: 0;
  left: -20px;
  right: -20px;
  -webkit-transform: translate(0%, -45%);
  transform: translate(0%, -45%);
  min-width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.login-page .login-page-element-1 img {
  width: 100%;
}

.login-page .login-page-element-2 {
  display: none;
  z-index: 99;
  position: fixed;
  bottom: 0;
  left: -15px;
  right: -15px;
  -webkit-transform: translate(0%, 45%);
  transform: translate(0%, 45%);
  min-width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.login-page .login-page-element-2 img {
  width: 100%;
}

.login-page .login-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.login-page .login-header .logo-img {
  width: 100%;
  max-width: 500px;
}

.login-page .login-container {
  z-index: 100;
  min-height: 180px;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(#fe9b48), color-stop(#fbc773), to(#ea892e));
  background-image: linear-gradient(to bottom, #ffc841, #ffb000, #9c4d24);
  border-radius: 15px;
  padding: 20px 15px 10px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
}

.login-page .login-container .login-form .login-form-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.login-page .login-container .login-form .login-form-content .form-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.login-page .login-container .login-form .login-form-content .form-field .form-field-icon {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
  margin: auto;
  font-size: 25px;
  color: #000;
}

.login-page .login-container .login-form .login-form-content .form-field .form-field-input {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 87%;
  flex: 0 0 87%;
  max-width: 87%;
}

.login-page .login-container .login-form .login-form-content .form-field .form-field-input .phone {
  width: 100%;
  color: #000;
  padding: 12px;
  border: 0 solid;
  border-radius: 10px;
  outline: none;
}

.login-page .login-container .login-form .login-form-content .form-field .form-field-input .password {
  width: 100%;
  color: #000;
  padding: 12px;
  border: 0 solid;
  border-radius: 10px;
  outline: none;
}

.login-page .login-container-action {
  z-index: 100;
  position: relative;
  margin: 10px 0 0;
  min-height: 90px;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(#fe9b48), color-stop(#fbc773), to(#ea892e));
  background-image: linear-gradient(to top, #ffc841, #ffb000, #9c4d24);
  border-radius: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0 10px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
}

.login-page .login-container-action .btn-login-action {
  position: absolute;
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%);
  top: 0;
}

.login-page .login-container-action .btn-login-action .btn_login {
  cursor: pointer;
  background-color: #ffc00e;
  border-radius: 25px;
  color: #000;
  font-size: 26px;
  width: 100%;
  font-weight: 800;
  padding: 5px 0;
}

.login-page .login-container-action .btn-login-action .btn_login:active {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.login-page .login-container-action .btn-login-action .btn_login:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.login-page .login-container-action .row {
  margin: 0 0 15px;
  width: 100%;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.login-page .login-container-action .row .btn-register-action {
  padding: 0 2.5px;
}

.login-page .login-container-action .row .btn-register-action .btn_register {
  cursor: pointer;
  background-color: #001c19;
  border: 5px solid transparent;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  width: 100%;
  font-weight: 700;
  padding: 2.5px 0;
}

.login-page .login-container-action .row .btn-register-action .btn_forget_password {
  cursor: pointer;
  background-image: -webkit-gradient(linear, left top, right top, from(#fe9b48), color-stop(#fbc773), to(#ea892e));
  background-image: linear-gradient(to right, #001c19, #1c4535, #001c19);
  border: 5px solid #fff;
  border-radius: 5px;
  color: #ffc00e;
  font-size: 16px;
  width: 100%;
  font-weight: 700;
  padding: 2.5px 0;
}

.login-page .login-container-action .row .btn-forget-password-action {
  padding: 0 2.5px;
}

.login-page .login-container-action .row .btn-forget-password-action .btn_register {
  cursor: pointer;
  background-color: #001c19;
  border: 5px solid transparent;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  width: 100%;
  font-weight: 700;
  padding: 2.5px 0;
}

.login-page .login-container-action .row .btn-forget-password-action .btn_forget_password {
  cursor: pointer;
  /* background-image: -webkit-gradient(linear, left top, right top, from(#fe9b48), color-stop(#fbc773), to(#ea892e));
  background-image: linear-gradient(to right, #001c19, #1c4535, #001c19); */
  border: 5px solid transparent;
  border-radius: 5px;
  color: #000000;
  background-color:#ffffff;
  font-size: 16px;
  width: 100%;
  font-weight: 700;
  padding: 2.5px 0;
}

.login-page .live-chat {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #000;
  font-weight: 700;
}

.login-page .live-chat:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.login-page .live-chat:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.login-page .live-chat .Layer_1 a img {
  width: 100%;
}

.add-withdraw-acc-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 25px;
  z-index: 100;
}

.add-withdraw-acc-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 350px;
}

.add-withdraw-acc-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 15px;
  color: #ffc100;
  width: 100%;
  text-align: center;
}

.add-withdraw-acc-title > span {
  font-size: 1.5em;
  color: #000;
}

.add-withdraw-acc-title > span > span {
  color: red;
}

.add-withdraw-acc-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 1em;
}

.add-withdraw-acc-form-item {
  padding-top: 0.5rem;
}

.add-withdraw-acc-form-item > span > span {
  color: red;
}

.reset-password-detail {
  position: absolute;
  margin: 12px 10px 12px 30px;
  margin: auto 0;
  margin-right: 15px;
  z-index: 1;
}

.help-block {
  color: red;
  font-size: 0.8em;
}

.selcet-withdraw-bank {
  position: relative;
  width: 100%;
  min-height: 35px;
  border-radius: 1rem;
  font-size: 1em;
  font-weight: 700;
  padding: 5px 20px;
  border: 0 solid;
  border-bottom: 2px #fff solid;
  -webkit-box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background-color: #fff;
  color: #000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.withdraw-bank-account {
  position: relative;
  width: 100%;
  min-height: 35px;
  border-radius: 1rem;
  font-size: 1em;
  font-weight: 700;
  padding: 5px 20px;
  border: 0 solid;
  border-bottom: 2px #fff solid;
  -webkit-box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background-color: #fff;
  color: #000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.withdraw-bank-account:focus {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.add-withdraw-bank-action {
  margin: 15px 0;
  margin-left: auto;
  margin-right: auto;
}

.btn_sumbit_withdraw_bank_detail {
  min-width: 200px;
  width: auto;
  color: #fff;
  text-align: center;
  background-color: #ffc100;
  padding: 5px;
  font-size: 1.5em;
}

.circle-top {
  position: fixed;
  z-index: -99;
  top: -76px;
  right: -108px;
  max-width: 400px;
}

.circle-bottom {
  position: fixed;
  z-index: -99;
  bottom: -125px;
  left: -120px;
  max-width: 400px;
}

.live-chat {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.live-chat:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.live-chat:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.live-chat > .Layer_1 > a > img {
  width: 100%;
}

.reset-password-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 100%;
  height: auto;
  padding-top: 0 !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.reset-password-container > .header > .title {
  display: block;
  text-align: center;
}

.reset-password-container > .header > .title > .title-detail i {
  padding: 0 10px;
  color: #ffc100;
}

.reset-password-container > .header > .title > .title-detail > h3 {
  text-transform: uppercase;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
}

.reset-password-form {
  background-image: -webkit-gradient(linear, left top, right top, from(#f4bd25), color-stop(#fcea8b), to(#f4bd25));
  background-image: linear-gradient(to right, #f4bd25, #fcea8b, #f4bd25);
  border-radius: 0.75rem;
  padding: 30px 20px;
  padding-bottom: 10px;
  margin-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 7px 7px 4px 1px, rgba(0, 0, 0, 0.19) 7px 7px 4px 1px;
  box-shadow: rgba(0, 0, 0, 0.5) 7px 7px 4px 1px, rgba(0, 0, 0, 0.19) 7px 7px 4px 1px;
}

.reset-password-form .form-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.reset-password-form-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-bottom: 20px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.reset-password-form-list i {
  font-size: 20px;
}

.reset-password-form-list span.help-block {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  margin-left: 30px;
  color: red;
}

.new-password {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  border-radius: 10px;
  font-size: 16px;
  position: relative;
  width: 100%;
  color: #000;
  padding: 15px;
  border: 0;
  border-bottom: 2px #fff solid;
  -webkit-box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  background-color: #fff;
}

.old-password {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  border-radius: 10px;
  font-size: 16px;
  position: relative;
  width: 100%;
  color: #000;
  padding: 15px;
  border: 0;
  border-bottom: 2px #fff solid;
  -webkit-box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  background-color: #fff;
}

.retype-password {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  border-radius: 10px;
  font-size: 16px;
  position: relative;
  width: 100%;
  color: #000;
  padding: 15px;
  border: 0;
  border-bottom: 2px #fff solid;
  -webkit-box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 1px -2px 2px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.19);
  background-color: #fff;
}

.btn_reset_password {
  text-align: center;
  background-image: -webkit-gradient(linear, left top, right top, from(#f4bd25), color-stop(#fcea8b), to(#f4bd25));
  background-image: linear-gradient(to right, #f4bd25, #fcea8b, #f4bd25);
  border: 1px solid transparent;
  padding: 25px;
  font-size: 20px;
  border-radius: 20px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 7px 7px 4px 1px, rgba(0, 0, 0, 0.19) 7px 7px 4px 1px;
  box-shadow: rgba(0, 0, 0, 0.5) 7px 7px 4px 1px, rgba(0, 0, 0, 0.19) 7px 7px 4px 1px;
}

.btn_reset_password span {
  color: #ffc100;
  font-weight: 700;
  background: #000;
  padding: 10px 20px;
  border-radius: 10px;
}

.game-list {
  min-height: 100%;
  height: auto;
  padding: 45px 10px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
}

.game-category {
  margin-top: 0.4em;
  padding: 0;
  border-radius: 0.35rem;
}

.game-category .nav-pills {
  margin: -0.3em 0;
}

.game-category .nav-pills .nav-link {
  display: -ms-grid;
  display: grid;
  text-align: center;
  margin: 0.3em 0;
  padding: 0.3em;
  font-size: 0.8em;
  line-height: 1.2;
  height: 35px;
  font-weight: 1000;
  border: 2px solid #ffc10e;
  background: #fff;
  color: #000;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.game-category .nav-pills .nav-link img {
  max-width: 25px;
  margin: 0 auto;
}

.game-category .nav-pills .nav-link.active {
  background: #ffc10e;
  color: #fff;
}

.game-category .nav-pills .show > .nav-link {
  background: #ffc10e;
  color: #fff;
}

.game-content {
  padding: 0 0.25em;
}

.game-content .game-card {
  position: relative;
  padding: 0.4em;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.game-content .game-card i.bw-icon-maintance {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 30%;
  max-height: 50%;
  margin: auto;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 5px 10px rgba(0, 0, 0, 0.2), 0 1px 5px 10px rgba(0, 0, 0, 0.19);
  box-shadow: 0 1px 5px 10px rgba(0, 0, 0, 0.2), 0 1px 5px 10px rgba(0, 0, 0, 0.19);
  font-size: 2.5em;
}

.game-content .game-card .game-image {
  width: 100%;
  border-radius: 0.35rem;
}

.game-content .game-card .new-game {
  position: absolute;
  top: 45%;
  bottom: 0;
  left: 4px;
  max-width: 55%;
  margin: auto;
}

.game-content .game-card:active {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.game-content .game-card:hover {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.game-content .game-image.game-maintenance-images {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.disabled {
  pointer-events: none;
}

.acc-game-detail-header {
  position: relative;
  padding: 2em 0;
  padding-bottom: 1em;
}

.acc-game-container {
  margin-top: -4em;
  z-index: 100;
  background: #fff;
  border-radius: 2rem;
}

.acc-game-content {
  position: relative;
  margin: 0;
  padding: 0 1.5em 15px;
  font-size: 0.85em;
  border-radius: 2rem;
  -webkit-box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  font-family: Lato, sans-serif;
  font-weight: 900;
}

.acc-game-logo-img {
  display: block;
  width: 100%;
}

.game-modal-close-action {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 1em;
}

.game-acc-close {
  cursor: pointer;
  color: #fff;
  background-image: -webkit-gradient(linear, right top, left top, from(#ffc100), to(#ffe500));
  background-image: linear-gradient(to left, #ffc100, #ffe500);
  opacity: 5;
  outline: none;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  line-height: 0.5;
  padding: 6px 6px 8px !important;
  margin-right: -10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.game-acc-close:focus {
  outline: none;
}

.game-acc-close:hover {
  background-color: #efb10a;
  opacity: 10;
  border-radius: 50% !important;
  border: none !important;
  outline: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.game-name--balance {
  display: block;
  border-radius: 1.75rem 1.75rem 0 0;
  background-color: #ffc100;
  padding: 0.25em;
  font-weight: 700;
  text-align: center;
  font-size: 1.1em;
  width: inherit;
}

.acc-game-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100px;
  padding: 10px;
}

.acc-game-detail .title {
  margin: 0 0 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.acc-game-detail .title .notice {
  color: red;
  font-size: 10px;
  word-spacing: -0.5px;
}

.acc-game-detail-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.8em;
  padding: 5px 0;
}

.wallet-balance-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background: silver;
  outline: none;
  margin: 10px 0;
  -webkit-transition: 0.2s;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.wallet-balance-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 16px;
  border-radius: 0.25rem;
  background-image: -webkit-gradient(linear, right top, left top, from(#ffc100), to(#ffe500));
  background-image: linear-gradient(to left, #ffc100, #ffe500);
  cursor: pointer;
}

.wallet-balance-range::-moz-range-thumb {
  width: 28px;
  height: 16px;
  border-radius: 0.25rem;
  background-image: linear-gradient(to left, #ffc100, #ffe500);
  cursor: pointer;
}

.transfer-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 0.2em;
}

.transfer-inner .wallet-transfer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  max-width: 55%;
}

.acc-game-transfer {
  padding-left: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.75em;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
}

.acc-game-transfer .transfer-notice {
  position: relative;
  font-size: 0.9em;
  opacity: 0.5;
}

.transfer-range {
  font-size: 0.75em;
}

.acc-username-title {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
}

.acc-password-title {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
}

.wallet-balance-amount {
  position: relative;
  background: silver;
  border-radius: 0.45rem;
  line-height: 1;
  font-size: 1em;
  font-weight: 700;
  padding: 0.45em 1em;
  border: 0;
  outline: 0;
}

.acc-username {
  background-color: silver;
  border-radius: 0.45rem;
  min-height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 10px;
  width: 100%;
}

.acc-password {
  background-color: silver;
  border-radius: 0.45rem;
  min-height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5px 10px;
  width: 100%;
}

.acc-game-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 15px;
  padding: 0;
}

.acc-game-action-item {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  padding: 5px;
}

.btn-game-play {
  width: 100%;
  outline: none;
  border-radius: 0.45rem;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  font-size: 1.7em;
  background-image: -webkit-gradient(linear, left top, right top, from(#41a856), to(#41a856));
  background-image: linear-gradient(to right, #41a856, #41a856);
  border: 2px solid #396e47;
  padding: 0.5em 0.8em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: background-color 0.1s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.btn-game-play:focus {
  outline: none;
}

.btn-change-id {
  width: 100%;
  outline: none;
  border-radius: 0.45rem;
  color: #000;
  font: inherit;
  font-weight: 800;
  font-size: 1.2em;
  background: #fff;
  border: 2px #ffc100 solid;
  padding: 0.5em 0.8em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: background-color 0.1s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.btn-change-id:focus {
  outline: none;
}

.btn-game-download {
  width: 100%;
  outline: none;
  border-radius: 0.45rem;
  color: #000;
  font: inherit;
  font-weight: 800;
  font-size: 1.2em;
  background: #fff;
  border: 2px #ffc100 solid;
  padding: 0.5em 0.8em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: background-color 0.1s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: background-color 0.1s ease-in-out, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.btn-game-download:focus {
  outline: none;
}

.game_copy {
  position: absolute;
  right: 35px;
  display: inline-block;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  font-size: 1rem;
  border-radius: 0.25rem;
  outline: none;
}

.btn_copy:active {
  outline: none;
}

.btn_copy:focus {
  outline: none;
}

.withdraw-container {
  min-height: 100%;
  height: auto;
  padding: 45px 10px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
}

.withdraw {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  height: 190px;
  width: 335px;
  padding: 15px 0 10px 15px;
  color: #000;
  font-weight: 900;
  font-size: 1.5rem;
  border-radius: 1rem;
  margin: auto;
}

.withdraw .title {
  margin-bottom: 10px;
}

.withdraw .title span {
  background-color: #ffc100;
  border-radius: 0.45rem;
  padding: 5px 10px;
  font-weight: 900;
}

.withdraw > .withdraw_form {
  margin: 0;
  margin-top: auto;
}

.withdraw > .withdraw_form > .fg_withdraw_amount {
  -webkit-box-flex: 0;
  -ms-flex: 0 75%;
  flex: 0 75%;
  max-width: 75%;
}

.withdraw > .withdraw_form > .fg_withdraw_amount > span {
  position: absolute;
  bottom: 24px;
  left: 25px;
}

.withdraw-bank {
  font-size: 12px;
}

.withdraw-back-acc {
  font-size: 12px;
}

.withdraw-bank-name {
  font-size: 12px;
}

.withdraw_amount {
  position: relative;
  width: 100%;
  padding-left: 55px;
  border: 0 solid;
  font-weight: 900;
  outline: none;
  background: #fff;
  border-radius: 1rem;
}

.error_withdraw_amount {
  display: block;
  height: 13px;
  font-size: 13px;
  font-weight: 400;
  color: red;
}

.btn-withdraw-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  bottom: 24px;
  right: 0;
  line-height: 1.1;
  padding: 0 1rem;
  font-size: 1.4em;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.trn-withdraw-content {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  padding: 15px 20px;
  width: 292px;
  height: 354px;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2rem;
  -webkit-box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  outline: 0;
}

.trn-withdraw-content > hr {
  border: 1px solid #ffc100;
  margin-top: 5px;
  margin-bottom: 5px;
}

.trn-withdraw-modal-dialog {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.withdraw-form {
  position: relative;
  width: 100%;
  height: 22px;
  color: #000;
  font-weight: 900;
  padding: 1px 10px;
  border: 2px #e3b104 solid;
  border-radius: 0.75rem;
  outline: none;
  font-size: 1em;
}

.btn-acc-withdraw-submit {
  background-color: #ffc100;
  width: 100%;
  color: #000;
  border: none;
  font-weight: 900;
  padding: 5px;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0.95rem/50%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn-acc-withdraw-submit:active {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.btn-acc-withdraw-submit:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.withdraw-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 25px;
  height: 25px;
  background-color: transparent !important;
  opacity: 5 !important;
  border-radius: 50% !important;
  border: none !important;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 1.5rem/50%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.withdraw-close:active {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 5 !important;
}

.withdraw-close:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 5 !important;
}

.trn-withdraw-detail-header {
  height: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  font-weight: 400;
  padding-bottom: 5px;
}

.trn-withdraw-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 65px;
  height: 55px;
  padding: 8px;
  background-color: #ffc100;
  text-align: center;
  border-radius: 0.5rem;
}

.trn-withdraw-acc-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 5px 5px 5px 10px;
  font-size: 10px;
}

.trn-withdraw-acc-bank {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.trn-withdraw-acc-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.trn-withdraw-acc-no {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.withdraw-acc-bank-detail {
  margin: 0;
}

.trn-withdraw-form-detail {
  height: 35%;
}

.trn-withdraw-form-detail > .withdraw-detail-list {
  font-weight: 900;
  font-size: 11px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.trn-withdraw-form-detail > .withdraw-detail-list > .form-bank {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.trn-withdraw-form-detail > .withdraw-detail-list > .form-bank > .bank-acc-list {
  width: 20%;
}

.trn-withdraw-form-detail > .withdraw-detail-list > .form-bank > .bank-acc {
  width: 52%;
}

.bank-acc-name {
  width: 20%;
}

.withdraw-detail-footer > .total-withdraw-detail {
  position: relative;
  font-weight: 900;
  font-size: 11px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 3px 0;
}

.withdraw-detail-footer > .total-withdraw-detail > .trn-withdraw-amount {
  margin: auto;
  width: 111%;
  font-weight: 700;
}

.withdraw-detail-footer > .total-withdraw-detail > .total-withdraw-amount {
  position: relative;
  width: 100%;
  color: #e3b104;
  padding: 5px;
  border: 2px #e3b104 solid;
  border-radius: 0.5rem;
  outline: none;
  background-color: #000;
}

.withdraw-detail-footer > .total-withdraw-detail > .withdraw-tax {
  position: absolute;
  left: 0;
  bottom: 0;
}

.withdraw-detail-footer > .actions {
  padding: 0;
}

.withdraw-detail-footer > .actions > .trn-withdraw-action {
  width: 100%;
  padding: 10px 25px;
}

.payment-channel-list {
  min-height: 100%;
  height: auto;
  padding: 45px 10px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: url("/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.payment-channel-list .payment-channel-list-container .payment_channel_s {
  padding: 10px;
  text-align: center;
}

.payment-channel-list-container {
  margin: 0;
}

.payment-channel-image {
  border-radius: 0%;
  width: 100%;
  cursor: pointer;
}

.bank-list-contianer {
  min-height: 100%;
  height: auto;
  padding: 45px 10px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: url("/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bank-list-row {
  margin: 0;
}

.bank-list {
  cursor: pointer;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 5px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 5px 0 rgba(0, 0, 0, 0.19);
}

.top-up-container {
  min-height: 100%;
  height: auto;
  padding: 45px 10px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
}

.bank {
  margin: 15px auto;
  position: relative;
  max-width: 335px;
  height: 190px;
  padding: 0 0 15px 15px;
  color: #fff;
  background-repeat: no-repeat;
  font-size: 1.5em;
  font-weight: 900;
  border-radius: 1rem;
  text-align: center;
}

.bank-setting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: end;
  align-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  height: 50%;
  font-size: 1em;
}

.bank_form_detail {
  height: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.bank-form {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.bank-form > div:first-child {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.bank-form > div > input {
  position: relative;
  width: 100%;
  padding: 0 0 2px 55px;
  border: 0 solid;
  font-weight: 900;
  outline: none;
  background: #fff;
  border-radius: 1rem;
}

.bank-form > .amount-between {
  display: block;
  font-size: 0.4em;
  color: red;
}

.bank-form > .help-block_TotalAmount {
  color: red;
  position: absolute;
  bottom: -12px;
  font-size: 0.4em;
}

.bank-rm {
  position: absolute;
  left: 9px;
  color: #000;
}

.btn-bank-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  bottom: 13px;
  right: 0;
  line-height: 1.1;
  padding: 0 1rem;
  font-size: 1.4em;
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.cdm-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 700;
}

.cdm-container .row {
  margin: 0;
}

.cdm-container label {
  padding: 0 15px;
  font-size: 14px !important;
}

.help-block-cdm {
  color: red;
  font-size: 0.7em;
  font-family: lato;
}

.cdm-row {
  padding: 0 5px;
}

.cdm-row-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
}

.cdm-form-control {
  font-size: 14px;
  height: 33.5px;
  padding: 0.275rem 0.75rem;
}

.btn-cdm-copy {
  padding: 0 15px;
  background-color: #000;
  color: #ffc100;
}

.fa-copy-sm {
  font-size: 0.8em;
}

.fg_cdm_acc_name {
  padding: 5px 0;
}

.fg_cdm_bank_account {
  padding: 5px 0;
}

.fg_TotalAmount {
  padding: 5px 0;
}

.fg_Reference {
  padding: 5px 0;
}

.upload-receipt-content {
  border-radius: 1rem;
  padding: 5px 15px 0;
}

.cdm-total-amount {
  line-height: 1em;
}

.cdm-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1rem;
}

.btn_do_upload_receipt {
  width: auto;
  font-weight: 900;
  min-width: 150px;
  border-radius: 0.45rem;
  font-size: 1.5em;
}

.digi {
  background: url(https://d371k8xma58gqc.cloudfront.net/bwportal-images/bigwin888-pin-card/bigiwn888-payment-type-digi-pin.png) no-repeat center;
  background-size: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hotlink {
  background: url(https://d371k8xma58gqc.cloudfront.net/bwportal-images/bigwin888-pin-card/bigiwn888-payment-type-hotlink-pin.png) no-repeat center;
  background-size: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.celcom {
  background: url(https://d371k8xma58gqc.cloudfront.net/bwportal-images/bigwin888-pin-card/bigiwn888-payment-type-celcom-pin.png) no-repeat center;
  background-size: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.digi-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: url('/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png');
  background-size: cover;
  background-position: center;
}

.digi-container > .digi {
  position: relative;
  max-width: 335px;
  min-height: 190px;
  padding: 10px;
  color: #000;
  font-family: lato, sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin: 0 auto;
}

.hotlink-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: url('/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png');
  background-size: cover;
  background-position: center;
}

.hotlink-container > .hotlink {
  position: relative;
  max-width: 335px;
  min-height: 190px;
  padding: 10px;
  color: #000;
  font-family: lato, sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin: 0 auto;
}

.celcom-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: url('/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png');
  background-size: cover;
  background-position: center;
}

.celcom-container > .celcom {
  position: relative;
  max-width: 335px;
  min-height: 190px;
  padding: 10px;
  color: #000;
  font-family: lato, sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin: 0 auto;
}

.digi_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0 10px;
  margin-bottom: 0;
}

.hotlink_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0 10px;
  margin-bottom: 0;
}

.celcom_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0 10px;
  margin-bottom: 0;
}

.btn-digi-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  right: 0;
  line-height: 1.1;
  padding: 2px 2rem;
  font-size: 1.4em;
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.btn-hotlink-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  right: 0;
  line-height: 1.1;
  padding: 2px 2rem;
  font-size: 1.4em;
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.btn-celcom-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  right: 0;
  line-height: 1.1;
  padding: 2px 2rem;
  font-size: 1.4em;
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.digi_pin {
  position: relative;
  text-align: center;
  width: 100%;
  color: #000;
  padding: 0 10px 2px;
  border: 2px #000 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
  font-size: 20px;
}

.hotlink_pin {
  position: relative;
  text-align: center;
  width: 100%;
  color: #000;
  padding: 0 10px 2px;
  border: 2px #000 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
  font-size: 20px;
}

.celcom_pin {
  position: relative;
  text-align: center;
  width: 100%;
  color: #000;
  padding: 0 10px 2px;
  border: 2px #000 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
  font-size: 20px;
}

.digi_pin_amount {
  position: relative;
  text-align: center;
  width: 50%;
  color: #000;
  padding: 0 15px 2px;
  border: 2px #ffc100 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
}

.hotlink_pin_amount {
  position: relative;
  text-align: center;
  width: 50%;
  color: #000;
  padding: 0 15px 2px;
  border: 2px #ffc100 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
}

.celcom_pin_amount {
  position: relative;
  text-align: center;
  width: 50%;
  color: #000;
  padding: 0 15px 2px;
  border: 2px #ffc100 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
}

.fg_digi_pin {
  padding: 5px 0;
}

.fg_digi_pin > .title > h6 {
  font-weight: 900;
}

.fg_hotlink_pin {
  padding: 5px 0;
}

.fg_hotlink_pin > .title > h6 {
  font-weight: 900;
}

.fg_celcom_pin {
  padding: 5px 0;
}

.fg_celcom_pin > .title > h6 {
  font-weight: 900;
}

.s-digi-pin-amount {
  font-size: 11px;
}

.s-hotlink-pin-amount {
  font-size: 11px;
}

.s-celcom-pin-amount {
  font-size: 11px;
}

.s-digi-pin-rm {
  font-size: 28px;
  font-style: italic;
  line-height: 0.75em;
}

.s-hotlink-pin-rm {
  font-size: 28px;
  font-style: italic;
  line-height: 0.75em;
}

.s-celcom-pin-rm {
  font-size: 28px;
  font-style: italic;
  line-height: 0.75em;
}

.fg_digi_pin_amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.fg_hotlink_pin_amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.fg_celcom_pin_amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.digi_pin_amount_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 10px;
}

.hotlink_pin_amount_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 10px;
}

.celcom_pin_amount_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 10px;
}

.error_digi_pin {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_digi_pin_amount {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_hotlink_pin {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_hotlink_pin_amount {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_celcom_pin {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_celcom_pin_amount {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.tng {
  background: url(https://d371k8xma58gqc.cloudfront.net/bwportal-images/bigwin888-pin-card/bigiwn888-payment-type-tng.png) no-repeat center;
  background-size: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.boost {
  background: url(https://d371k8xma58gqc.cloudfront.net/bwportal-images/bigwin888-pin-card/bigiwn888-payment-type-boost.png) no-repeat center;
  background-size: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.grab {
  background: url(https://d371k8xma58gqc.cloudfront.net/bwportal-images/bigwin888-pin-card/bigiwn888-payment-type-grab.png) no-repeat center;
  background-size: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.tng-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: url('/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png');
  background-size: cover;
  background-position: center;
}

.tng-container > .tng {
  position: relative;
  max-width: 335px;
  min-height: 190px;
  padding: 10px;
  color: #000;
  font-family: lato, sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin: 0 auto;
}

.boost-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: url('/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png');
  background-size: cover;
  background-position: center;
}

.boost-container > .boost {
  position: relative;
  max-width: 335px;
  min-height: 190px;
  padding: 10px;
  color: #000;
  font-family: lato, sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin: 0 auto;
}

.grab-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: url('/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png');
  background-size: cover;
  background-position: center;
}

.grab-container > .grab {
  position: relative;
  max-width: 335px;
  min-height: 190px;
  padding: 10px;
  color: #000;
  font-family: lato, sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin: 0 auto;
}

.tng_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0 10px;
  margin-bottom: 0;
}

.boost_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0 10px;
  margin-bottom: 0;
}

.grab_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0 10px;
  margin-bottom: 0;
}

.btn-tng-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  right: 0;
  line-height: 1.1;
  padding: 2px 2rem;
  font-size: 1.4em;
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.btn-boost-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  right: 0;
  line-height: 1.1;
  padding: 2px 2rem;
  font-size: 1.4em;
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.btn-grab-submit {
  opacity: 1;
  cursor: pointer;
  position: absolute;
  right: 0;
  line-height: 1.1;
  padding: 2px 2rem;
  font-size: 1.4em;
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
}

.tng_pin {
  position: relative;
  text-align: center;
  width: 100%;
  color: #000;
  padding: 0 10px 2px;
  border: 2px #000 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
  font-size: 1em;
}

.boost_pin {
  position: relative;
  text-align: center;
  width: 100%;
  color: #000;
  padding: 0 10px 2px;
  border: 2px #000 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
  font-size: 1em;
}

.grab_pin {
  position: relative;
  text-align: center;
  width: 100%;
  color: #000;
  padding: 0 10px 2px;
  border: 2px #000 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
  font-size: 1em;
}

.tng_pin_amount {
  position: relative;
  text-align: center;
  width: 50%;
  color: #000;
  padding: 0 15px 2px;
  border: 2px #ffc100 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
}

.boost_pin_amount {
  position: relative;
  text-align: center;
  width: 50%;
  color: #000;
  padding: 0 15px 2px;
  border: 2px #ffc100 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
}

.grab_pin_amount {
  position: relative;
  text-align: center;
  width: 50%;
  color: #000;
  padding: 0 15px 2px;
  border: 2px #ffc100 solid;
  border-radius: 0.75rem;
  font-weight: 900;
  outline: none;
  background: #fff;
}

.fg_tng_pin {
  padding: 5px 0;
}

.fg_tng_pin > .title > h6 {
  font-weight: 900;
}

.fg_boost_pin {
  padding: 5px 0;
}

.fg_boost_pin > .title > h6 {
  font-weight: 900;
}

.fg_grab_pin {
  padding: 5px 0;
}

.fg_grab_pin > .title > h6 {
  font-weight: 900;
}

.s-tng-pin-amount {
  font-size: 11px;
}

.s-boost-pin-amount {
  font-size: 11px;
}

.s-grab-pin-amount {
  font-size: 11px;
}

.s-tng-pin-rm {
  font-size: 28px;
  font-style: italic;
  line-height: 0.75em;
}

.s-boost-pin-rm {
  font-size: 28px;
  font-style: italic;
  line-height: 0.75em;
}

.s-grab-pin-rm {
  font-size: 28px;
  font-style: italic;
  line-height: 0.75em;
}

.fg_tng_pin_amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.fg_boost_pin_amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.fg_grab_pin_amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.tng_pin_amount_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 10px;
}

.boost_pin_amount_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 10px;
}

.grab_pin_amount_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 10px;
}

.error_tng_pin {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_tng_pin_amount {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_boost_pin {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_boost_pin_amount {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_grab_pin {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.error_grab_pin_amount {
  display: block;
  font-size: 0.5em;
  font-family: lato;
  color: red;
  min-height: 19px;
}

.download-apk-page {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffbf00), color-stop(#ffe500), color-stop(50%, white));
  background-image: linear-gradient(to bottom, #ffbf00, #ffe500, white 50%);
}

.download-apk-page .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.download-apk-page .title {
  background: #000;
  color: #fff;
  border-radius: 1rem;
  padding: 0 0.5em;
  margin: 1em 0;
}

.download-apk-page .title span {
  color: #ffc100;
}

.download-apk-page .images-wrapping {
  width: 55%;
  max-width: 55%;
  margin: 0 0 1em;
  -webkit-box-shadow: 6px 7px 15px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 6px 7px 15px 2px rgba(0, 0, 0, 0.4);
  border-radius: 2.6rem;
}

.download-apk-button {
  border: 4px #ffc100 solid;
  background: #fff;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0.75rem;
  font-size: 1.4em;
  font-weight: 900;
  padding: 0 0.5em;
  line-height: 2;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.download-apk-button:hover {
  outline: none;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.download-apk-button:active {
  outline: none;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.transaction-histroy-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffbf00), color-stop(#ffe500), color-stop(50%, white));
  background-image: linear-gradient(to bottom, #ffbf00, #ffe500, white 50%);
  font-size: 13px;
  letter-spacing: 0;
  word-spacing: 1px;
}

.nav {
  margin: 0 -10px;
}

.nav-pills .nav-link.active {
  background-color: #000;
  color: #ffc100;
}

.nav-pills .show > .nav-link {
  background-color: #000;
  color: #ffc100;
}

.nav-link {
  background-color: #fff;
  color: #000;
}

.nav-link:hover {
  color: #ffc100;
}

.search-transaction-date-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 700;
  margin: 5px -5px 10px;
  letter-spacing: 0;
  word-spacing: 1px;
}

.transaction_search_date_button {
  border-radius: 0.7rem;
  min-width: 115px;
  font-weight: 900;
  font-size: 1em;
}

.transaction-search-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 700;
  min-width: 200px;
}

.s-t-d-content-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-right: 5px;
  padding-left: 5px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.s-t-d-c-item-s {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.s-t-d-c-item-form {
  max-height: 25px;
  padding-bottom: 0;
  padding-top: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
  font-size: 1em;
  font-weight: 700;
}

.transaction-histroy-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.transaction-histroy-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 10px 0 0;
}

.transaction-histroy-detail-item-s-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8%;
  flex: 0 0 8%;
  max-width: 8%;
  padding-bottom: 10px;
  padding-top: 10px;
}

.transaction-histroy-detail-item-s-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 52%;
  flex: 0 0 52%;
  max-width: 52%;
  padding-bottom: 10px;
  padding-top: 10px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-left: 15px;
}

.transaction-histroy-detail-item-s-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
  padding-bottom: 10px;
  padding-top: 10px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding-right: 15px;
  padding-top: 15px;
}

.transaction-histroy-detail-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  border: 1px solid #ffc100;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  min-height: 90px;
}

.t-h-d-item-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #fff;
}

.transaction-histroy-title {
  font-size: 1.4em;
  font-weight: 700;
}

.transaction-histroy-detail-date {
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: 700;
}

.transaction-histroy-detail-date-detail {
  background-image: -webkit-gradient(linear, left top, right top, from(#ffc100), to(#ffe500));
  background-image: linear-gradient(to right, #ffc100, #ffe500);
  padding: 10px 15px;
}

.t-h-d-status-1 {
  margin-top: -12px;
  padding-bottom: 15px;
  font-size: 1.8em;
}

.t-h-d-status-2 {
  font-size: 1.2em;
  -webkit-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
}

.red {
  color: red;
}

.red-bg {
  background-color: red;
}

.red-hr {
  border: 3px solid red;
}

.yellow {
  color: #ff7300;
}

.yellow-bg {
  background-color: #ff7300;
}

.yellow-hr {
  border: 3px solid #ff7300;
}

.green {
  color: green;
}

.green-bg {
  background-color: green;
}

.green-hr {
  border: 3px solid green;
}

.t-h-d-item-status-1 {
  font-size: 0.7em;
}

.t-h-d-item-status-2 {
  display: block;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.t-h-d-item-status-3 {
  font-weight: 700;
}

.t-h-d-amount {
  padding-bottom: 5px;
  font-size: 1.6em;
}

.t-h-d-item-hr {
  width: 100%;
  margin-left: -15px;
}

.t-h-d-item-serial {
  padding-top: 13px;
  font-size: 0.8em;
}

.t-h-d-item-date-time {
  font-size: 0.8em;
  color: #000;
  font-weight: 400;
}

.referral-agent-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: url("/assets/frontend/bigwin-css-2024/img/bigwin-layout-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.referral-agent {
  --referral-font-color-1: #fff;
  --referral-font-color-2: #000;
  --referral-font-color-3: #000;
  --referral-border-color-1: #000;
  --referral-border-color-2: #fff;
  --referral-theme-1: rgb(255, 193, 0);
  --referral-theme-2: #000;
  --referral-theme-3: rgb(255, 193, 0);
  --referral-button-1: linear-gradient(
    to left,
    rgb(255, 128, 0),
    rgb(255, 189, 51)
  );
  --referral-button-focus: #000;
  --referral-button-shadow: 0px 5px 10px 0px rgb(255 189 51 / 76%);
  --referral-program-bar-color: -webkit-linear-gradient(
    left,
    rgb(255, 128, 0),
    rgb(255, 189, 51)
  );
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.referral-agent-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  font-size: 1em;
}

.referral-angpao-quest {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border: 8px solid var(--referral-border-color-1);
  background: var(--referral-theme-1);
  color: var(--referral-font-color-3);
  border-radius: 1rem;
  padding: 5px;
}

.referral-angpao-quest-detail-1 {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 35%;
  flex: 0 0 35%;
  max-width: 100%;
}

.referral-finger {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-25%, -75%);
  transform: translate(-25%, -75%);
  width: 20%;
  max-width: 20%;
  -webkit-animation: change 0.3s linear infinite alternate;
  animation: change 0.3s linear infinite alternate;
}

.referral-angpao-quest-detail-1-title {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-45%, -223%);
  transform: translate(-45%, -223%);
  width: 80%;
  max-width: 80%;
  text-align: center;
  background: #000;
  color: #fff;
  border-radius: 1rem;
  font-size: 0.75em;
}

.referral-angpao-quest-detail-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 5%;
  flex: 0 0 5%;
  max-width: 5%;
}

.referral-angpao-quest-detail-2 .referral-angpao-quest-exp {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18.5%;
  right: 0;
  overflow: visible;
  margin: auto 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 160px;
  max-width: 40%;
  height: 0.8rem;
  border: #333 4px solid;
}

.referral-angpao-quest-detail-2 .referral-angpao-quest-exp .angpao_quest_total_amount {
  z-index: -100;
  position: absolute;
  top: 0;
  line-height: 1.5;
  left: 6%;
  margin-top: -15px;
  border-radius: 0.45rem;
  font-size: 1.05em;
  font-weight: 700;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: left;
  transform-origin: left;
  background: #333;
  padding: 2.5px;
  padding-left: 20px;
  padding-right: 5px;
  color: #fff;
}

.referral-angpao-quest-detail-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
  margin-top: 25px;
  margin-left: 10px;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.referral-angpao-quest-detail-3 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.referral-commision-wallet {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 5px 0;
}

.referral-commision-wallet-detail-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

.referral-commision-wallet-detail-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  text-align: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  max-width: 65%;
  font-weight: 700;
}

.referral-commision-wallet-detail-2 .item:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  background: var(--referral-theme-1);
  border: 4px solid var(--referral-border-color-1);
  border-radius: 0.5rem;
  padding: 10px 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1.3;
  margin-bottom: 5px;
  font-size: 1em;
}

.referral-commision-wallet-detail-2 .item:first-child .item-detail span {
  background: var(--referral-theme-2);
  border-radius: 0.45rem;
  padding: 0 5px;
  color: var(--referral-font-color-1);
}

.referral-commision-wallet-detail-2 .item:last-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  background: var(--referral-theme-2);
  color: var(--referral-font-color-1);
  border-radius: 0.5rem;
  padding: 10px 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1.3;
  margin-bottom: 5px;
  font-size: 1em;
}

.referral-commision-wallet-detail-2 .item .item-detail {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
}

.referral-commision-wallet-detail-2 .referral-commision-wallet-amount {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  color: var(--referral-font-color-3);
}

.referral-content {
  position: relative;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 250px;
  font-weight: 900;
}

.referral-social-media-content-member-link-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  font-weight: 900;
  color: var(--referral-font-color-3);
}

.referral-social-media-content-member-link-text-referral-link {
  padding: 0;
  font-size: 1.2em;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.referral-social-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: var(--referral-theme-3);
  padding: 4px;
  border-radius: 2rem;
}

.referral-social-media-content-member-link-detail {
  font-size: 0.9em;
  position: relative;
  line-height: 1px;
  min-width: 72%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 20px;
  color: var(--referral-font-color-2);
  padding: 0;
  margin: 0 5px;
  overflow: hidden;
  font-weight: 900;
  border: 1px transparent solid;
  border-radius: 0.2rem;
  outline: 0;
  background: 0 0;
}

.referral-social-media-btn-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: auto;
}

.referral-social-media-btn-copy {
  width: 100%;
  border: 2px var(--referral-font-color-2) solid;
  color: var(--referral-font-color-2);
  border-radius: 1rem;
  font-weight: 900;
  outline: 0;
  font-size: 0.7em;
  padding: 0 5px;
  background-color: transparent;
}

.referral-social-media-list {
  padding: 10px 35px 0;
}

.sosial-media-list-detail {
  padding: 0 10px;
}

.referral-active-hr {
  display: block;
  width: 100%;
  border: 0 var(--referral-theme-1) solid;
  border-width: 2px;
  border-radius: 5rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 0 0 8px 0.5px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 0 8px 0.5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 8px 0.5px rgba(0, 0, 0, 0.75);
}

.referral-active-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.referral-active-item:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.referral-active-item:last-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.referral-btn {
  position: relative;
  border-radius: 2rem;
  padding: 3px;
  height: 100%;
  color: var(--referral-border-color-2);
  background-image: var(--referral-button-1);
  box-shadow: var(--referral-button-shadow);
  -webkit-box-shadow: var(--referral-button-shadow);
  -moz-box-shadow: var(--referral-button-shadow);
}

.btn_transfer {
  border: 2px var(--referral-border-color-2) solid;
  color: var(--referral-border-color-2);
  border-radius: 2rem;
  background-color: transparent;
  width: 150px;
  font-size: 0.75em;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 2px;
  padding: 3px 30px;
}

.btn_transfer:focus {
  border: 2px var(--referral-button-focus) solid;
  color: var(--referral-button-focus);
}

.btn_transfer:hover {
  border: 2px var(--referral-button-focus) solid;
  color: var(--referral-button-focus);
}

.btn_cash_out {
  border: 2px var(--referral-border-color-2) solid;
  color: var(--referral-border-color-2);
  border-radius: 2rem;
  background-color: transparent;
  width: 150px;
  font-size: 0.75em;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 2px;
  padding: 3px 30px;
}

.btn_cash_out:focus {
  border: 2px var(--referral-button-focus) solid;
  color: var(--referral-button-focus);
}

.btn_cash_out:hover {
  border: 2px var(--referral-button-focus) solid;
  color: var(--referral-button-focus);
}

.referral-btn-icon {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  bottom: 0;
  right: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.referral-content-detail {
  position: relative;
  padding: 0 25px 15px;
  border-radius: 2rem;
  -webkit-box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 900;
}

.referral-detail-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 70px;
}

.referral-logo {
  position: absolute;
  overflow: hidden;
  width: 8.5rem;
  height: 8.5rem;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #fff;
  padding: 15px;
  border: #fff 0 solid;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.referral-logo-img {
  width: 100%;
}

.referral-close {
  cursor: pointer;
  color: #fff;
  background-image: -webkit-gradient(linear, right top, left top, from(#ffc100), to(#ffe500));
  background-image: linear-gradient(to left, #ffc100, #ffe500);
  opacity: 5;
  outline: none;
  border: none;
  border-radius: 50%;
  font-size: 30px;
  line-height: 0.5;
  padding: 6px 6px 8px !important;
  margin-right: -10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.referral-close:hover {
  background-color: #efb10a;
  opacity: 10;
  border-radius: 50% !important;
  border: none !important;
  outline: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.referral-close:focus {
  outline: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.referral-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  border: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  padding: 15px 0;
  border: 1px #e9e9e9 solid;
}

.referral-detail > span:first-child {
  border: 2px #000 solid;
  border-radius: 1rem 1rem 0 0;
  background-color: #ffc100;
  color: #000;
  font-size: 1.4em;
}

.referral-detail > .trn-name {
  margin: 0;
  padding: 2px 10px;
  padding-right: 0;
  width: 65%;
  font-size: 1em;
}

.referral-detail > .trn-amount {
  margin: 0;
  padding: 2px 10px 2px 0;
  min-width: 35%;
  max-width: 35%;
  text-align: right;
}

.referral-detail > .trn-status {
  margin: 0;
  padding: 2px 10px;
  width: 65%;
}

.referral-detail > .trn-time {
  margin: 0;
  padding: 2px 10px 2px 0;
  min-width: 35%;
  max-width: 35%;
  text-align: right;
  font-weight: 900;
}

.referral-detail-content {
  margin: 0 0 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.referral-detail-content-detail > span:first-child {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 10px 5px;
  padding: 5px;
  border: 2px #80808033 solid;
  border-radius: 1rem;
}

.referral-modal-dialog {
  max-width: 100%;
  margin: 1.75rem 1.5rem;
}

.referral-agent-report-container {
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffbf00), color-stop(#ffe500), color-stop(50%, white));
  background-image: linear-gradient(to bottom, #ffbf00, #ffe500, white 50%);
  letter-spacing: 0;
  word-spacing: 1px;
}

.referral-report {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 220px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 45px;
  font-weight: 900;
}

.referral-history-list {
  font-weight: 900;
}

.referral-total-history {
  z-index: 100;
  position: relative;
  border: #ffc100 solid;
  border-width: 7px;
  border-radius: 2rem;
  min-width: 150px;
  min-height: 150px;
  line-height: 1.2;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 60% 65%;
  transform-origin: 60% 65%;
  background-color: #1f1f1f;
}

.referral-total-history .referral-total-history-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 78% 78%;
  transform-origin: 78% 78%;
  text-align: center;
  color: #fff;
}

.referral-total-history-detail span:first-child {
  font-size: 0.85em;
}

.referral-total-history-detail span:last-child {
  font-size: 2.5em;
}

.referral-total-amount-history {
  z-index: 90;
  position: relative;
  border: #1f1f1f solid;
  border-width: 7px;
  border-radius: 2rem;
  min-width: 135px;
  min-height: 135px;
  line-height: 1.2;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 66% 81%;
  transform-origin: 66% 81%;
  background-color: #ffc100;
}

.referral-total-amount-history .referral-total-amount-history-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 90% 100%;
  transform-origin: 90% 100%;
  text-align: center;
  color: #1f1f1f;
}

.referral-total-amount-history-detail span:first-child {
  font-size: 0.85em;
}

.referral-total-amount-history-detail span:last-child {
  font-size: 1.2em;
}

.referral-search-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 700;
  min-width: 200px;
}

.btn_agent_history_nav {
  border-radius: 0.7rem;
  min-width: 115px;
  font-weight: 900;
  font-size: 1em;
}

.referral-history-container {
  padding: 25px 0 0;
  margin-bottom: 10px;
  min-height: 305px;
  position: relative;
}

.referral-history-container > .title {
  padding: 0 0 15px;
}

.referral-history-container > .title > h4 {
  font-weight: 900 !important;
  font-size: 1em;
  margin: 0;
}

.search-referral-total-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 900;
  margin: 5px -5px 10px;
  letter-spacing: 0;
  word-spacing: 1px;
  font-size: 0.8em;
}

.s-r-t-content-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-right: 5px;
  padding-left: 5px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.s-r-t-c-item-s {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.s-r-t-c-item-form {
  max-height: 25px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
  font-size: 1em;
  font-weight: 700;
}

.select-referral-date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  border: 1px #e9e9e9 solid;
}

.select-referral-date > p {
  margin: 0;
  padding: 15px;
  width: 100%;
}

.referral-date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.referral-date > p {
  margin: 0;
  padding: 15px;
  font-size: 1em;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(#ffc100), to(#ffe500));
  background-image: linear-gradient(to right, #ffc100, #ffe500);
}

.bonus-container {
  --color-to-b-1: linear-gradient(to bottom, #770004, #ab0005, #770004);
  --color-to-r-1: linear-gradient(to right, #330002, #ab0005, #330002);
  --color-1: #ab0005;
  --color-2: #fff;
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bonus-container .inner {
  margin: 0 auto;
  background-image: url(https://bwportal.s3.ap-southeast-1.amazonaws.com/bwportal-images/bigwin888-cny/bonus/bw-layout-bg-01.png);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
}

.bonus-container .inner .bonus-card-list {
  max-width: 400px;
  padding: 15px;
  margin: 0 auto;
}

.bonus-container .inner .bonus-banner {
  background: radial-gradient(circle, #a00005 0%, #660003 75%, #a00005 100%);
  margin: 15px 0;
  text-align: center;
}

.bonus-container .inner .bonus-banner span {
  text-transform: uppercase;
  background: -webkit-gradient(linear, left top, left bottom, from(#fffad4), color-stop(#fcd030), color-stop(#cea13b), color-stop(#f1db98), to(#fffad4));
  background: linear-gradient(#fffad4, #fcd030, #cea13b, #f1db98, #fffad4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 2;
  font-size: 28px;
  font-weight: bolder;
}

.bonus-container .inner .bonus-banner img {
  width: 100%;
}

.bonus-card {
  --color-to-b-1: linear-gradient(to bottom, #770004, #ab0005, #770004);
  --color-to-r-1: linear-gradient(to right, #330002, #ab0005, #330002);
  --color-1: #ab0005;
  --color-2: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 100%;
  height: 130px;
  background: #fff;
  border-radius: 20px;
  -webkit-box-shadow: 0 4px 8px 0 #00000033, 0 6px 20px 0 #00000030;
  box-shadow: 0 4px 8px 0 #00000033, 0 6px 20px 0 #00000030;
  overflow: hidden;
}

.bonus-card .bonus-icon-item {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 13%;
  flex: 0 0 13%;
  max-width: 13%;
  text-align: center;
  background-image: var(--color-to-b-1);
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.bonus-card .bonus-icon-item img {
  width: 70%;
}

.bonus-card .bouns-wrapping-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  padding-left: 10px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
  height: 100%;
}

.bonus-card .bouns-wrapping-item .bonus-time-calculate-element {
  position: absolute;
  top: 1%;
  left: 0%;
  -webkit-transform: translate(11%, 0%);
  transform: translate(11%, 0%);
  background-image: var(--color-to-r-1);
  color: var(--color-2);
  font-size: 16px;
  padding: 0 15px;
  font-weight: bolder;
  border-radius: 0 0 8px 8px;
}

.bonus-card .bouns-wrapping-item .bonus-wrapping-title {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bolder;
  color: var(--color-1);
  line-height: 1.2;
  margin: 5px 0;
}

.bonus-card .bouns-wrapping-item .bonus-wrapping-description {
  font-style: italic;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  margin-bottom: 10px;
}

.bonus-card .bouns-wrapping-item .bonus-wrapping-program .bonus-progress {
  position: relative;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: 0.25rem;
  border: var(--color-1) 1px solid;
  border-radius: 1rem;
  outline: none;
  width: 100%;
}

.bonus-card .bouns-wrapping-item .bonus-wrapping-program .amount {
  position: absolute;
  font-size: 14px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-weight: bolder;
}

.bonus-card .bonus-action-item {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 27%;
  flex: 0 0 27%;
  max-width: 27%;
  text-align: center;
}

.bonus-card .bonus-action-item img {
  width: 70%;
  max-height: 75px;
  margin-bottom: 5px;
}

.bonus-card .bonus-action-item button {
  width: 70%;
  background-image: var(--color-to-r-1);
  color: var(--color-2);
  font-weight: bolder;
  border-radius: 20px;
  font-size: 12px;
  padding: 5px 0;
  line-height: 1;
}

.bonus-notice-modal {
  --color-1: linear-gradient(to left, #ffc100, #ffe500);
  --color-2: #000;
  --color-3: #fff;
}

.bonus-notice-modal .bonus-notice-content-detail {
  position: relative;
  padding: 0 15px 0;
  border-radius: 2rem;
  -webkit-box-shadow: 0 1rem 1.5rem #00000080;
  box-shadow: 0 1rem 1.5rem #00000080;
  font-size: 14px;
  font-weight: 900;
}

.bonus-notice-modal .bonus-notice-detail-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 70px;
}

.bonus-notice-modal .bonus-notice-logo {
  position: absolute;
  overflow: hidden;
  width: 8.5rem;
  height: 8.5rem;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: var(--color-3);
  padding: 15px;
  border: var(--color-3) 0 solid;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.bonus-notice-modal .bonus-notice-logo-img {
  width: 100%;
}

.bonus-notice-modal .modal-close-action {
  display: block;
  margin: 15px 0 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}

.bonus-notice-modal .bonus-notice-close {
  cursor: pointer;
  color: var(--color-3);
  background-image: var(--color-1);
  opacity: 5;
  outline: none;
  border: none;
  border-radius: 50%;
  font-size: 30px;
  line-height: 0.5;
  padding: 6px 6px 8px !important;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.bonus-notice-modal .bonus-notice-close:hover {
  background-color: var(--color-1);
  opacity: 10;
  border-radius: 50% !important;
  border: none !important;
  outline: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.bonus-notice-modal .bonus-notice-close:focus {
  outline: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.bonus-notice-modal .bonus-notice-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100px;
  text-align: center;
}

.bonus-notice-modal .bonus-notice-detail .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 300px;
  min-height: 320px;
  padding: 15px;
  width: 100%;
  margin: 0 auto;
}

.bonus-notice-modal .bonus-notice-detail .inner h5 {
  font-weight: bolder;
  border-bottom: 1px solid #000;
}

.bonus-notice-modal .bonus-notice-detail .inner p {
  margin: 0 0 5px;
}

.bonus-notice-modal .bonus-notice-detail .inner ul {
  text-align: left;
}

.bonus-notice-modal .bonus-notice-detail .inner .bonus-modal-button-a {
  background-image: var(--color-1);
  color: var(--color-2);
  text-transform: uppercase;
  margin-top: auto;
  width: 100%;
  border-radius: 15px;
  font-weight: bolder;
  margin-bottom: 10px;
}

.bonus-draw-container {
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 45px 15px 100px;
  border-radius: 1rem;
  position: relative;
  top: -45px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffbf00), color-stop(#ffe500), color-stop(15%, white));
  background-image: linear-gradient(to bottom, #ffbf00, #ffe500, white 15%);
  overflow: hidden;
}

.bonus-draw-container .inner {
  max-width: 400px;
  margin: 0 auto;
}

.bonus-draw-container .inner .bonus-draw-title {
  position: relative;
  background-image: url(https://bwportal.s3.ap-southeast-1.amazonaws.com/bwportal-images/bigwin888-cny/spin/bw-bonus-draw-bg-01.png);
  background-size: 100% 100%;
  padding: 10px 0 35px;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.bonus-draw-container .inner .bonus-draw-title span {
  font-size: 28px;
  color: #fff;
  font-weight: bolder;
}

.bonus-draw-container .inner .bonus-draw-title .bonus-draw-amount {
  position: absolute;
  width: 80%;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  margin-bottom: -40px;
  background-image: url(https://bwportal.s3.ap-southeast-1.amazonaws.com/bwportal-images/bigwin888-cny/spin/bw-bonus-draw-bg-02.png);
  background-size: 100% 100%;
}

.bonus-draw-container .inner .bonus-draw-title .bonus-draw-amount span {
  font-size: 30px;
  line-height: 3;
}

.bonus-draw-container .inner .bonus-draw-jackpot-group-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bonus-draw-container .inner .bonus-draw-jackpot-group-item .bonus-draw-title {
  border: 4.8px solid #fff;
  border-radius: 10px;
}

.bonus-draw-container .inner .bonus-draw-jackpot-group-item .bonus-draw-title:first-child {
  position: relative;
  background-image: url(https://bwportal.s3.ap-southeast-1.amazonaws.com/bwportal-images/bigwin888-cny/spin/bw-bonus-draw-bg-03.png);
  background-size: 100% 100%;
  padding: 10px 0 15px;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  width: 45%;
}

.bonus-draw-container .inner .bonus-draw-jackpot-group-item .bonus-draw-title:last-child {
  position: relative;
  background-image: url(https://bwportal.s3.ap-southeast-1.amazonaws.com/bwportal-images/bigwin888-cny/spin/bw-bonus-draw-bg-04.png);
  background-size: 100% 100%;
  padding: 10px 0 15px;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  width: 45%;
}

.bonus-draw-container .inner .bonus-draw-jackpot-group-item .bonus-draw-title span {
  font-size: 16px;
  color: #fff;
  font-weight: bolder;
}

.bonus-draw-container .inner .bonus-draw-jackpot-group-item .bonus-draw-title .bonus-draw-amount {
  position: absolute;
  width: 80%;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  margin-bottom: -25px;
  background-image: url(https://bwportal.s3.ap-southeast-1.amazonaws.com/bwportal-images/bigwin888-cny/spin/bw-bonus-draw-bg-02.png);
  background-size: 100% 100%;
}

.bonus-draw-container .inner .bonus-draw-jackpot-group-item .bonus-draw-title .bonus-draw-amount span {
  font-size: 14px;
  line-height: 3.5;
}

.bonus-draw-container .inner .bonus-draw-spin {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.bonus-draw-container .inner .bonus-draw-spin .spin-arrow-element {
  z-index: 99;
  position: absolute;
  top: 3px;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  width: 50px;
}

.bonus-draw-container .inner .bonus-draw-spin .spin-arrow-element img {
  width: 100%;
}

.bonus-draw-container .inner .bonus-draw-spin .spin {
  position: relative;
  background-image: url(https://bwportal.s3.ap-southeast-1.amazonaws.com/bwportal-images/bigwin888-cny/spin/bw-bonus-draw-spin-01.png);
  background-size: 100% 100%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 3px 5px #00000033, 0 0 3px 5px #00000030;
  box-shadow: 0 0 3px 5px #00000033, 0 0 3px 5px #00000030;
  margin: 0 auto 20px;
}

.bonus-draw-container .inner .bonus-draw-spin .spin [class*='spin-element'] {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-01 {
  position: absolute;
  top: 22%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-01 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-01 .spin-item span {
  position: absolute;
  top: -17px;
  left: 10px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-02 {
  position: absolute;
  top: 28%;
  left: 50%;
  -webkit-transform: translateX(28%);
  transform: translateX(28%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-02 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-02 .spin-item span {
  position: absolute;
  top: -17px;
  left: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-03 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(65%);
  transform: translateX(65%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-03 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-03 .spin-item span {
  position: absolute;
  top: -17px;
  left: 10px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-04 {
  position: absolute;
  bottom: 28%;
  left: 50%;
  -webkit-transform: translateX(28%);
  transform: translateX(28%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-04 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-04 .spin-item span {
  position: absolute;
  bottom: -17px;
  left: 10px;
  -webkit-transform: rotate(140deg);
  transform: rotate(140deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-05 {
  position: absolute;
  bottom: 8%;
  left: 50%;
  -webkit-transform: translateX(-55%);
  transform: translateX(-55%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-05 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-05 .spin-item span {
  position: absolute;
  bottom: 23px;
  left: 10px;
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-06 {
  position: absolute;
  bottom: 28%;
  right: 50%;
  -webkit-transform: translateX(-28%);
  transform: translateX(-28%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-06 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-06 .spin-item span {
  position: absolute;
  bottom: -17px;
  right: 10px;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-08 {
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translateX(-65%);
  transform: translateX(-65%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-08 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-08 .spin-item span {
  position: absolute;
  top: -17px;
  right: 10px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-09 {
  position: absolute;
  top: 28%;
  right: 50%;
  -webkit-transform: translateX(-28%);
  transform: translateX(-28%);
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-09 .spin-item {
  position: relative;
}

.bonus-draw-container .inner .bonus-draw-spin .spin .spin-element-09 .spin-item span {
  position: absolute;
  top: -17px;
  right: 10px;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

.bonus-draw-container .inner .bonus-draw-spin .spin span {
  text-align: center;
  font-size: 17px;
  font-weight: bolder;
  color: #fff;
  line-height: 1;
}

.bonus-draw-container .inner .bonus-draw-spin .spin.spin-active {
  -webkit-animation-name: bonus-spin;
  animation-name: bonus-spin;
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.bonus-draw-container .inner .bonus-draw-spin .bonus-draw-action button {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -66%);
  transform: translate(-50%, -66%);
  text-transform: uppercase !important;
  background-color: #fff;
  border: 4px solid #febf0f;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 3px 5px #00000033, 0 0 3px 5px #00000030;
  box-shadow: 0 0 3px 5px #00000033, 0 0 3px 5px #00000030;
  padding: 6px;
}

.bonus-draw-container .inner .bonus-draw-spin .bonus-draw-action button span {
  background-color: #9b1f21;
  width: 100%;
  display: block;
  border-radius: 50%;
  border: 2px solid #4d4a4b;
  color: #fabd09;
  font-size: 12px;
  font-weight: bolder;
  line-height: 3.834;
}

.bonus-draw-container .inner .jackpot-history-table table.jackpot-history {
  background-color: #fdcd00;
  text-align: center;
  font-size: 13px;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 4px 2px #00000033, 0 0 4px 2px #00000030;
  box-shadow: 0 0 4px 2px #00000033, 0 0 4px 2px #00000030;
  overflow: hidden;
}

.bonus-draw-container .inner .jackpot-history-table table.jackpot-history thead {
  text-transform: uppercase;
  text-decoration: underline;
  line-height: 1;
}

.bonus-draw-container .inner .jackpot-history-table table.jackpot-history tbody {
  background-color: #fff;
}

.bonus-draw-container .inner .jackpot-history-table table.jackpot-history th {
  font-weight: bolder;
  border: 0;
  padding: 10px;
}

.bonus-draw-container .inner .jackpot-history-table table.jackpot-history td {
  font-weight: bolder;
  border: 0;
  padding: 8px;
}

.ticker-wrap {
  width: 100%;
  line-height: 1.5;
  overflow: hidden;
  background: #fff;
  padding-left: 100%;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  margin: -10px -15px 15px;
}

.ticker-wrap .ticker {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 14px;
  color: #000;
  font-weight: bolder;
  font-style: normal;
}

@media only screen and (max-width: 480px) {
  .layout-body {
    width: 100%;
    -webkit-transform: none;
    transform: none;
    height: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
    left: 0;
  }
  .navbar-bottom {
    width: 100%;
    height: 55px;
    border-radius: 0.75rem 0.75rem 0 0;
    -webkit-transform: none;
    transform: none;
    left: 0;
  }
  .navbar-bottom-conatainer {
    -webkit-transform: translateY(-40%);
    transform: translateY(-40%);
    padding: 0 25px;
  }
  .navbar-bottom-content {
    margin: 0 5px;
  }
  .Layer_1 {
    width: 31px;
    height: 31px;
  }
  .navbar-bottom-item-title {
    font-size: 0.7em;
  }
  .menu-item-logo-img {
    width: 60px;
  }
  .circle-top {
    max-width: 350px;
  }
  .circle-bottom {
    max-width: 350px;
  }
  .acc-game-content {
    font-size: 0.8em;
  }
  .cdm-container {
    font-size: 0.7em;
    padding: 30px 15px 100px;
  }
  .digi_form {
    padding: 0 5px;
  }
  .hotlink_form {
    padding: 0 5px;
  }
  .celcom_form {
    padding: 0 5px;
  }
  .digi_pin {
    font-size: 0.8em;
  }
  .hotlink_pin {
    font-size: 0.8em;
  }
  .celcom_pin {
    font-size: 0.8em;
  }
  .digi_pin_amount {
    font-size: 0.8em;
  }
  .hotlink_pin_amount {
    font-size: 0.8em;
  }
  .celcom_pin_amount {
    font-size: 0.8em;
  }
  .btn-digi-submit {
    font-size: 1.1em;
  }
  .btn-hotlink-submit {
    font-size: 1.1em;
  }
  .btn-celcom-submit {
    font-size: 1.1em;
  }
  .error_digi_pin {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_digi_pin_amount {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_hotlink_pin {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_hotlink_pin_amount {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_celcom_pin {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_celcom_pin_amoun {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .tng_form {
    padding: 0 5px;
  }
  .boost_form {
    padding: 0 5px;
  }
  .grab_form {
    padding: 0 5px;
  }
  .tng_pin {
    font-size: 0.8em;
  }
  .boost_pin {
    font-size: 0.8em;
  }
  .grab_pin {
    font-size: 0.8em;
  }
  .tng_pin_amount {
    font-size: 0.8em;
  }
  .boost_pin_amount {
    font-size: 0.8em;
  }
  .grab_pin_amount {
    font-size: 0.8em;
  }
  .fg_tng_pin_amount {
    padding-bottom: 10px;
  }
  .fg_boost_pin_amount {
    padding-bottom: 10px;
  }
  .fg_grab_pin_amount {
    padding-bottom: 10px;
  }
  .btn-tng-submit {
    font-size: 1.1em;
  }
  .btn-boost-submit {
    font-size: 1.1em;
  }
  .btn-grab-submit {
    font-size: 1.1em;
  }
  .error_tng_pin {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_tng_pin_amount {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_boost_pin {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_boost_pin_amount {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_grab_pin {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .error_grab_pin_amoun {
    display: block;
    font-size: 0.349em;
    font-family: lato;
    color: red;
    min-height: 17px;
  }
  .transaction-histroy-container {
    font-size: 11.5px;
    padding: 50px 15px 0;
  }
  .search-transaction-date-content {
    letter-spacing: -0.5px;
  }
  .transaction-histroy-detail-item-s-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
    padding-left: 5.5px;
  }
  .t-h-d-amount {
    font-size: 1.4em;
  }
  .transaction-histroy-detail-item-s-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
    padding-right: 5.5px;
    padding-top: 5.5px;
  }
  .t-h-d-status-1 {
    margin-top: -11px;
    padding-bottom: 15px;
    font-size: 1.8em;
  }
  .referral-agent-detail {
    font-size: 0.9em;
  }
  .referral-social-media-content-member-link-text-referral-link {
    font-size: 1em;
  }
  .referral-social-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px;
    border-radius: 2rem;
  }
  .referral-social-media-content-member-link-detail {
    font-size: 0.8em;
  }
  .referral-social-media-btn-copy {
    font-size: 0.55em;
  }
  .btn_transfer {
    width: 115px;
    font-size: 0.55em;
    padding: 3px 20px;
  }
  .btn_cash_out {
    width: 115px;
    font-size: 0.55em;
    padding: 3px 20px;
  }
  .referral-total-history {
    min-width: 135px;
    min-height: 135px;
  }
  .referral-total-history .referral-total-history-detail {
    -webkit-transform-origin: 84% 84%;
    transform-origin: 84% 84%;
  }
  .referral-total-amount-history {
    min-width: 115px;
    min-height: 115px;
  }
  .referral-total-history-detail span:first-child {
    font-size: 0.75em;
  }
  .referral-total-history-detail span:last-child {
    font-size: 2em;
  }
  .referral-total-amount-history-detail span:first-child {
    font-size: 0.75em;
  }
  .referral-total-amount-history-detail span:last-child {
    font-size: 1em;
  }
}

@media only screen and (max-width: 320px) {
  html {
    font-size: 15px;
  }
  body {
    font-size: 15px;
  }
  .circle-top {
    max-width: 300px;
  }
  .circle-bottom {
    max-width: 300px;
  }
  .digi-container > .digi {
    padding: 10px;
    color: #000;
    min-height: 190px;
    height: auto;
  }
  .hotlink-container > .hotlink {
    padding: 10px;
    color: #000;
    min-height: 190px;
    height: auto;
  }
  .celcom-container > .celcom {
    padding: 10px;
    color: #000;
    min-height: 190px;
    height: auto;
  }
  .fg_digi_pin > .title > h6 {
    font-size: 0.6em;
  }
  .fg_hotlink_pin > .title > h6 {
    font-size: 0.6em;
  }
  .fg_celcom_pin > .title > h6 {
    font-size: 0.6em;
  }
  .s-digi-pin-rm {
    font-size: 26px;
  }
  .s-hotlink-pin-rm {
    font-size: 26px;
  }
  .s-celcom-pin-rm {
    font-size: 26px;
  }
  .digi_pin_amount {
    font-size: 0.8em;
  }
  .hotlink_pin_amount {
    font-size: 0.8em;
  }
  .celcom_pin_amount {
    font-size: 0.8em;
  }
  .fg_tng_pin > .title > h6 {
    font-size: 0.6em;
  }
  .fg_boost_pin > .title > h6 {
    font-size: 0.6em;
  }
  .fg_grab_pin > .title > h6 {
    font-size: 0.6em;
  }
  .s-tng-pin-rm {
    font-size: 26px;
  }
  .s-boost-pin-rm {
    font-size: 26px;
  }
  .s-grab-pin-rm {
    font-size: 26px;
  }
  .tng_pin_amount {
    font-size: 0.8em;
  }
  .boost_pin_amount {
    font-size: 0.8em;
  }
  .grab_pin_amount {
    font-size: 0.8em;
  }
  .transaction-histroy-container {
    font-size: 11px;
  }
  .search-transaction-date-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    letter-spacing: -0.5px;
  }
  .s-t-d-content-item {
    padding-top: 5px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .s-t-d-c-item-s {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .s-t-d-c-item-form {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
  }
  .t-h-d-item-serial {
    padding-top: 10px;
  }
  .referral-agent-detail {
    font-size: 0.65em;
  }
  .search-referral-total-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .s-r-t-content-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-right: 5px;
    padding-left: 5px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: 10px;
  }
}

@media screen and (max-width: 480px) {
  .top-menu {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    -webkit-transform: none;
    transform: none;
  }
}

@media screen and (max-width: 320px) {
  .navbar-item-s > span {
    font-size: 0.7em;
  }
}

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

@media only screen and (max-width: 350px) {
  .btn-game-play {
    font-size: 1em;
  }
  .btn-game-download {
    font-size: 1em;
  }
  .btn-change-id {
    font-size: 1em;
  }
  .bonus-draw-container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (max-width: 380px) {
  .referral-agent-detail {
    font-size: 0.8em;
  }
}