.reveal-overlay.black {
  background-color: black;
}
.error-container {
  background-color: #262222;
  color: #A8A8A8;
}
.error-container > div {
  padding: 10px 20px 50px;
}
.error-container label {
  color: #A8A8A8;
}
.error-container .error-containerTitle {
  color: #A8A8A8;
  border-bottom: 2px solid #CE8625;
  font-weight: bold;
  margin: 5px auto 1rem;
  padding: 5px 0;
}
#lobby-wallet {
  background-color: #262222;
  color: #A8A8A8;
}
#lobby-wallet label {
  color: #A8A8A8;
}
#lobby-wallet .lobby-walletTitle {
  color: #CE8625;
  border-bottom: 1px solid #403b3b;
  text-transform: uppercase;
  font-weight: bold;
  margin: 5px auto 1rem;
  padding: 5px 0;
}
#lobby-wallet .lobby-walletTitle i.fa {
  color: #A8A8A8;
}
#lobby-wallet .walletValue {
  color: #CE8625;
}
.walletTransferContainer {
  background-color: #e8d96b;
  background: -webkit-gradient(linear, left top, left bottom, from(#e8d96b), to(#a28746));
  background: -webkit-linear-gradient(top, #e8d96b, #a28746);
  background: -moz-linear-gradient(top, #e8d96b, #a28746);
  background: -ms-linear-gradient(top, #e8d96b, #a28746);
  background: -o-linear-gradient(top, #e8d96b, #a28746);
  color: #473300;
}
.walletTransferContainer a,
.walletTransferContainer label,
.walletTransferContainer i {
  color: #473300;
}
.walletTransferContainer .walletTransferContainerTitle {
  color: #473300 !important;
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 1px solid #473300;
  margin: 5px auto 1rem;
  padding: 5px 0;
}
#modal-quicktransfer .modal-wrapper,
#modal-autotransfer .modal-wrapper {
  background-color: #FFFFFF;
  color: #000000;
}
#modal-quicktransfer .modal-wrapper .modal-wrapper-close,
#modal-autotransfer .modal-wrapper .modal-wrapper-close {
  color: #0B0A0A;
}
#modal-quicktransfer .modal-wrapper .modal-wrapper-close:hover,
#modal-autotransfer .modal-wrapper .modal-wrapper-close:hover {
  color: #000000;
}
#modal-quicktransfer .modal-wrapper header,
#modal-autotransfer .modal-wrapper header {
  background-color: #CE8625;
  color: #0B0A0A;
  font-weight: bold;
  font-size: 1.1em;
  min-height: 45px;
  padding: 10px 30px 10px 10px;
}
#modal-quicktransfer .modal-wrapper article,
#modal-autotransfer .modal-wrapper article {
  color: #000000;
  padding: 0.9375rem;
}
#modal-quicktransfer .modal-wrapper article label,
#modal-autotransfer .modal-wrapper article label {
  color: #000000;
}
#modal-quicktransfer .modal-wrapper nav,
#modal-autotransfer .modal-wrapper nav {
  padding: 0 10px;
  margin: 1rem 0 0 0;
  text-align: right;
}
#modal-quicktransfer .modal-wrapper .btnContinue,
#modal-autotransfer .modal-wrapper .btnContinue {
  background-color: #0B0A0A;
  color: #CE8625;
  border: 1px solid #CE8625;
}
#modal-quicktransfer .modal-wrapper .btnContinue:focus,
#modal-autotransfer .modal-wrapper .btnContinue:focus,
#modal-quicktransfer .modal-wrapper .btnContinue:active,
#modal-autotransfer .modal-wrapper .btnContinue:active {
  background-color: #0B0A0A;
  color: #CE8625;
}
#modal-quicktransfer .modal-wrapper .btnContinue:hover,
#modal-autotransfer .modal-wrapper .btnContinue:hover {
  background-color: #000000;
  color: #CE8625;
  border: 1px solid #FFFFFF;
}
#modal-quicktransfer .modal-wrapper .btnContinue.is-active,
#modal-autotransfer .modal-wrapper .btnContinue.is-active {
  background-color: #0B0A0A;
  color: #000000;
  border: 1px solid #CE8625;
}
#modal-quicktransfer .modal-wrapper .buttonTopUp,
#modal-autotransfer .modal-wrapper .buttonTopUp {
  background-color: #CE8625;
  color: #0B0A0A;
  border: 1px solid #0B0A0A;
}
#modal-quicktransfer .modal-wrapper .buttonTopUp:focus,
#modal-autotransfer .modal-wrapper .buttonTopUp:focus,
#modal-quicktransfer .modal-wrapper .buttonTopUp:active,
#modal-autotransfer .modal-wrapper .buttonTopUp:active {
  background-color: #CE8625;
  color: #0B0A0A;
}
#modal-quicktransfer .modal-wrapper .buttonTopUp:hover,
#modal-autotransfer .modal-wrapper .buttonTopUp:hover {
  background-color: #8d5c19;
  color: #0B0A0A;
  border: 1px solid #FFFFFF;
}
#modal-quicktransfer .modal-wrapper .buttonTopUp.is-active,
#modal-autotransfer .modal-wrapper .buttonTopUp.is-active {
  background-color: #CE8625;
  color: #000000;
  border: 1px solid #CE8625;
}
div[id^="modal-"] .modal-wrapper .error-message-container {
  max-height: 350px;
  overflow-y: auto;
}
div[id^="modal-"] .modal-wrapper .dot-loader {
  display: inline-block;
  width: 50px;
  --bgOption: no-repeat radial-gradient(circle closest-side, #000000 90%, transparent);
  background: var(--bgOption) 0% 50%, var(--bgOption) 50% 50%, var(--bgOption) 100% 50%;
  background-size: 60% 30%;
  animation: dotbounce 1s infinite linear;
  padding: 10px;
  margin: 0px 0px -5px -5px;
}
@keyframes dotbounce {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }
  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }
  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }
  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}

.hotmatchapi-container .category-title {
  padding-bottom: 10px;
  color: #CE8625;
  text-align: center;
}
.hotmatchapi-container .sport-tab-container {
  position: relative;
  margin: 10px 0 0 0;
  padding: 0 30px;
  overflow: hidden;
}
.hotmatchapi-container .sport-tab-container .sport-tab {
  display: inline-block;
  padding: 5px 5px;
  width: 100px;
  height: 25px;
  text-align: center;
  background-color: #000000;
  color: #CE8625;
  border: 1px solid #CE8625;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
@media screen and (min-width: 40em) {
  .hotmatchapi-container .sport-tab-container .sport-tab {
    padding: 8px 8px;
    width: 110px;
    height: 25px;
  }
}
@media screen and (min-width: 64em) {
  .hotmatchapi-container .sport-tab-container .sport-tab {
    padding: 10px 10px;
    width: 110px;
    height: 25px;
  }
}
.hotmatchapi-container .sport-tab-container .sport-tab:hover,
.hotmatchapi-container .sport-tab-container .sport-tab.is-active {
  background-color: #CE8625;
  color: #000000;
  border: 1px solid #CE8625;
}
.hotmatchapi-container .sport-tab-container .swiper-button-prev,
.hotmatchapi-container .sport-tab-container .swiper-button-next {
  border-top: 3px solid #CE8625;
  border-left: 3px solid #CE8625;
  position: absolute;
  top: 70%;
  width: 20px;
  height: 20px;
  background: none;
  z-index: 10;
  cursor: pointer;
}
.hotmatchapi-container .sport-tab-container .swiper-button-prev {
  left: 12px;
  transform: rotate(-45deg);
}
.hotmatchapi-container .sport-tab-container .swiper-button-next {
  right: 12px;
  transform: rotate(135deg);
}
.hotmatchapi-container .sport-tab-container .swiper-button-disabled {
  display: none;
}
.hotmatchapi-container .iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 210px;
  /* this value depend on width, if width value changed, here also need to change */
  height: 0;
  margin: 0 auto 10px auto;
}
.hotmatchapi-container .iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
#lobby-wallet {
  background-color: #262222;
  color: #A8A8A8;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
#lobby-wallet label {
  color: #A8A8A8;
}
#lobby-wallet .lobby-walletTitle {
  color: #CE8625;
  text-transform: uppercase;
  font-weight: bold;
  margin: 5px auto 1rem;
  padding: 5px 0;
}
#lobby-wallet .lobby-walletTitle i.fa {
  color: #A8A8A8;
}
#lobby-wallet .walletValue {
  color: #A8A8A8;
}
#modal-insufficient-balance #lobby-wallet {
  margin-bottom: 10px;
}
#modal-insufficient-balance #lobby-wallet span[data-status="-1"]:after {
  font-family: 'FontAwesome';
  content: '\f021';
  animation: 2s linear 0s normal none infinite fa-spin;
  display: inline-block;
  margin-left: 5px;
}
#modal-insufficient-balance #btnCancelTransfer {
  display: inline-block !important;
  margin-right: 10px;
}
#modal-insufficient-balance .modal-wrapper {
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 0.6em;
}
#modal-insufficient-balance .modal-wrapper .modal-wrapper-close {
  color: #FFFFFF;
}
#modal-insufficient-balance .modal-wrapper .modal-wrapper-close:hover {
  color: #FFFFFF;
}
#modal-insufficient-balance .modal-wrapper header {
  background-color: #CE8625;
  color: #000000;
  font-weight: bold;
  font-size: 1.1em;
  min-height: 45px;
  padding: 10px 30px 10px 10px;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
#modal-insufficient-balance .modal-wrapper article {
  background-color: #000000;
  color: #A8A8A8;
  padding: 0.9375rem;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
#modal-insufficient-balance .modal-wrapper article label {
  color: #A8A8A8;
}