@font-face {
  font-family: Muli;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/muli/v26/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk40eiNxw.woff2)
    format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01a0-01a1,
    U+01af-01b0, U+1ea0-1ef9, U+20ab;
}

@font-face {
  font-family: Muli;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/muli/v26/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk50eiNxw.woff2)
    format("woff2");
  unicode-range: U+0100-024f, U+0259, U+1e??, U+2020, U+20a0-20ab, U+20ad-20cf,
    U+2113, U+2c60-2c7f, U+a720-a7ff;
}

@font-face {
  font-family: Muli;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/muli/v26/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk30eg.woff2)
    format("woff2");
  unicode-range: U+00??, 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;
}

@import url("https://fonts.cdnfonts.com/css/muli");

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  margin: 0;
}

body {
  box-sizing: border-box;
}
body.body-mobile {
  background: transparent !important;
  background-color: transparent !important;
}

body.body-mobile .login-wrapper {
  background-color: transparent !important;
  background: linear-gradient(
    to right,
    #a8000087 0,
    #410505 50%,
    #8b030375 100%
  );
}

body.body-mobile .main-content .inner-wrap {
  background: linear-gradient(
    to right,
    #a8000087 0,
    #410505 50%,
    #8b030375 100%
  );
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #ff0000f2;
}

#dialog-container.dialog-container-off {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.rounded {
  border-radius: 15px !important;
  overflow: hidden;
}

.rtp {
  position: fixed;
  bottom: 40px;
  left: 5px;
  z-index: 100;
}

button#live,
button#semua,
button#slot,
button#togel {
  background: linear-gradient(rgb(255 209 0) 0, rgb(154 108 5) 100%);
  opacity: 1;
}

button#carigame,
button#minigame,
button#slot,
button#togelall {
  filter: drop-shadow(2px -4px 1px #072b3f);
  transition: 0.3s;
}

.results,
.timer-game {
  align-content: center;
}

.game-togel .lobby-game-angka-keluar,
div#lobtoto > a > div.angka-keluar {
  font-size: 30px !important;
  margin-top: -5px !important;
  color: gold;
}

div#lobtoto > a > b {
  margin-top: 30px !important;
}

#game-live a.game-lobby-content,
.game-togel a.game-lobby-content,
div#lobtoto > a {
  background-size: 100% 100% !important;
  background: linear-gradient(25deg, #9d0000ab, #120101d9, #000000e6);
  border: 1px solid red;
}

div#lobmini > a {
  background: url("https://datahot.store/theme/button-togel-alx.png") 0 0/100%
      100%,
    linear-gradient(0deg, #020024 0, #002121 62%, #003c3c 100%) center/100% 100%
      no-repeat !important;
}

.dib {
  display: inline-block;
}

@font-face {
  font-family: Poppins;
  src: url("https://db.onlinewebfonts.com/t/8e85c24067e0c4f54318abf16531ece7.eot");
  src: url("https://db.onlinewebfonts.com/t/8e85c24067e0c4f54318abf16531ece7.eot?#iefix")
      format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/8e85c24067e0c4f54318abf16531ece7.woff2")
      format("woff2"),
    url("https://db.onlinewebfonts.com/t/8e85c24067e0c4f54318abf16531ece7.woff")
      format("woff"),
    url("https://db.onlinewebfonts.com/t/8e85c24067e0c4f54318abf16531ece7.ttf")
      format("truetype"),
    url("https://db.onlinewebfonts.com/t/8e85c24067e0c4f54318abf16531ece7.svg#Poppins")
      format("svg");
}

div#lobtoto .button-extra-big2 {
  padding: 15px 0 0 !important;
}

.input-cari-wrapper input#cari-game {
  border-radius: 15px;
  color: #202124;
  font-size: 16px;
  height: 28px;
  margin: 2px;
  padding: 1.6rem 1.4rem;
  z-index: 1;
  border: none;
  outline: 0;
  flex: 1;
}

button#live,
button#semua,
button#slot,
button#togel {
  border-radius: 15px;
}

@keyframes borderAnimation {
  0%,
  100%,
  50% {
    border-color: red;
  }

  25%,
  75% {
    border-color: gold;
  }
}

img.header-logo {
  width: 179px;
  height: 48px;
  margin-left: 58px;
  margin-top: -63px;
}

button#live,
button#semua,
button#togel {
  color: #000;
  border: 1px solid #dbff00;
}

.game-wrapper .game-lobby-content .game-angka .lobby-game-angka-keluar,
span#bal-text > font {
  color: gold !important;
}

.lobby-content-top .mb-lobby-balance {
  color: #ffffffde !important;
}

button#live:hover,
button#semua:hover,
button#slot:hover,
button#togel:hover {
  box-shadow: 0 2px 0 0 #0c768c;
}

button.btn-game-hs {
  width: 100%;
  white-space: nowrap;
  overflow-x: hidden;
  background: linear-gradient(
    to bottom,
    #f60606 0,
    #9c0404 50%,
    #aa0101 100%
  ) !important;
  color: #fff;
  padding: 0.75rem 0.5rem;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 1px solid red;
}

button#slot {
  color: #000;
  border: 1px solid #dbff00;
}

.button-lobby-container .button-lobby-wrapper > .button-filter-lobby {
  text-transform: uppercase;
}

button#carigame:hover,
button#minigame:hover,
button#togelall:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #0c768c;
}

.results {
  background-color: linear-gradient(to bottom, #fff 0%, #c7c7c7 100%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5px;
  padding: 0 !important;
  border: 1px solid #ffe600 !important;
  background: linear-gradient(
    to bottom,
    #740202 0,
    #630000 50%,
    #a10000 100%
  ) !important;
}

.title-game-child {
  display: none !important;
}

.login-wrapper:first-child {
  background: linear-gradient(to bottom, #b90f0f 0, #430000 100%);
  color: #fff;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.login-wrapper .home-button-wrapper .btn.btn-1 {
  background: linear-gradient(to bottom, #00c4ff 0, #08507e 100%);
  border-radius: 17px;
  border: 2px solid #00f7ff;
}

.button {
  text-align: center;
  color: #000;
  padding: 10px 26px;
  display: inline-block;
  margin-bottom: 10px;
  font-family: aller;
  font-size: 24px;
  font-weight: 700;
  box-shadow: none;
  box-shadow: inset 0 -4px 0 rgb(0 0 0) !important;
}

.pesan-rahasia,
.pesan-rahasia2 {
  font-size: 12px;
  font-family: helvetica;
  animation: 2s ease-in-out infinite borderAnimation;
  pointer-events: none;
  text-align: center;
  font-weight: 700;
}

.mb-sidenav .side-link-container > li {
  border-bottom: 2px solid #7e7e7e !important;
  background: linear-gradient(
    360deg,
    #2b0505 0,
    #b00303 50%,
    #940303 100%
  ) !important;
  box-shadow: inset 1px 1px 1px #000;
}

.mb-sidenav .side-link-container > li .side-link .side-link-dot,
.slot-content,
.wrapper2 {
  background: 0 0 !important;
}

.mb-sidenav .side-link-container > li .side-link .side-link-dot.active {
  background-color: #ffbf27 !important;
}

a.buttonWrap.buttonlc2.button-orange {
  background: linear-gradient(to bottom, #fd0000 0, #7d0000 100%);
  border: 1px solid red;
  background-clip: padding-box;
  animation: 2s ease-in-out infinite borderAnimation;
  text-align: center;
  font-weight: 700;
}

.button-reds {
  background: linear-gradient(to bottom, #21fd03 0, #023f09 100%);
  border: 2px solid #06ff00;
  color: #fff !important;
}

.buttonlc2 {
  box-shadow: inset 0 0 0 #905c00 !important;
}

.buttons:hover,
.buttonss:hover {
  opacity: 2.8;
}

.button,
.buttonbl,
.buttond,
.buttondapk,
.buttong,
.buttonlc2,
.buttons,
.buttonss,
input[type="submit"] {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 17px !important;
}

.owl-pagination {
  margin-top: -5px;
  margin-bottom: 5px;
  display: none;
}

.marquee.running-text {
  color: #fff;
  background: #840505;
  margin-bottom: 1px;
  line-height: 12px;
  text-shadow: 0 0 2px #f87076;
  box-shadow: 0 0 4px #ffe900;
  border: 1px solid #fa0505;
  font-size: 11px;
}

@media screen and (max-width: 576px) {
  .bank-status .bank {
    width: 32% !important;
    display: inline-block;
    background-color: #fff !important;
    padding: 3px 10px 5px 10px !important;
    margin: 5px 0 0 0;
    height: 26px !important;
    text-align: left;
    border-radius: 6px;
  }

  .bank-status .bank img:first-child {
    width: 8px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 13px;
  }

  .bank-status .bank img:last-child {
    width: 40px;
    display: inline-block;
    vertical-align: middle;
  }
}

.slot-content img {
  margin: 3px 0;
  border: 1px solid gold;
}

button#mop-qrispayment {
  background: url("https://datahot.store/theme/button-red.png") center/cover
    no-repeat;
  color: #fff;
}

button#mop-qrispayment img {
  background: url("https://datahot.store/theme/icon-qris-alx.png") center/80%
    no-repeat;
  object-position: -99999px 99999px;
}

button#mop-bank img {
  background: url("https://datahot.store/theme/icon-bank-alx.png") center/80%
    no-repeat;
  object-position: -99999px 99999px;
}

.owl-item {
  margin-bottom: 30px;
}

header.header-after-login .header-wrapper .buttn-header-deposit {
  border: 1px solid red;
  background-clip: padding-box;
  text-align: center;
  padding: 0.9rem 1rem;
  font-weight: 700;
  color: #fff;
}

.inner-wrap.addpad {
  background: #1e1e1e;
}

a.buttonWrap.buttong.button-green.contactSubmitButton,
a.buttonWrap.buttons.button-blue.contactSubmitButton {
  line-height: 14px !important;
  display: block !important;
  height: 40px !important;
  margin-right: 0;
  width: 100%;
  text-transform: uppercase;
  cursor: pointer;
}

input#loginBtnHeader {
  border-radius: 17px !important;
  background: linear-gradient(to bottom, #4f0 0, #1c7a00 100%);
  border: 1px solid #2fff00;
  box-shadow: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 1;
  cursor: pointer;
}

button#btn-promo-more {
  background: linear-gradient(
    to left,
    #980b0b 0,
    red 50%,
    #980b0b 100%
  ) !important;
  color: #fff !important;
}

a#btn-promo-play {
  background-image: linear-gradient(
    to right top,
    #fff700,
    #f9cf00,
    #fffa04,
    #fff700
  ) !important;
  color: #000 !important;
  display: none;
}

#loginBtnHeader {
  border-radius: 17px !important;
  background: linear-gradient(to bottom, #f7f3a4 0, #ffc308 100%);
  border: 1px solid #ffce00;
  box-shadow: none;
  color: #000;
  text-transform: uppercase;
  font-weight: 700;
}

a.buttonWrap.buttong.button-green.contactSubmitButton,
a.buttonWrap.buttons.button-blue.contactSubmitButton {
  background: linear-gradient(to bottom, #05a3ff 0, #09305c 100%);
  box-shadow: 0 0 2px #6eeaeb;
  border: 1px solid #0ef;
  color: #fff;
  text-transform: uppercase;
  border-radius: 17px !important;
}

a#gambar-top {
  margin: auto;
}

.pesan-rahasia2 {
  position: relative;
  bottom: -770px;
  background: padding-box #212121;
  padding: 10px;
  border-radius: 9px;
  color: #fff;
  border: 2px solid transparent;
}

a#prediksi,
a#rtp {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid red;
  padding: 8px;
  border-radius: 10px;
  background: #000;
  box-shadow: inset 0 0 5px 0 #000;
}

a#prediksi:hover,
a#rtp:hover {
  background: linear-gradient(0deg, #eb0000 0, #b00316 50%, red 100%);
}

@media only screen and (max-width: 600px) {
  .pesan-rahasia1 {
    bottom: -789px;
  }

  .pesan-rahasia2 {
    bottom: -796px;
  }
}

@media only screen and (max-width: 316px) {
  .pesan-rahasia2 {
    bottom: -771px;
  }
}

#QRIS {
  height: 300px;
  background: #636363;
}

#QRIS a img {
  display: initial;
}

a#ibanking-DANA,
a#ibanking-QRIS {
  background: 0 0;
}

.promosi-content-container
  .promosi-content
  .promosi-btn-wrapper
  .btn-promo#btn-promo-more {
  background: linear-gradient(
    360deg,
    rgb(131 104 4) 34%,
    rgb(255 202 0) 98%
  ) !important;
  color: #fff !important;
  width: 100% !important;
  height: 73px !important;
  border-radius: 0 5px 5px 0 !important;
  margin-top: 0 !important;
  padding: 3px !important;
  border: 1px double gold !important;
}

.promosi-content-container .promosi-content .promosi-btn-wrapper {
  width: 14% !important;
  height: 100% !important;
  display: flex !important;
}

.promosi-content-container .promosi-content {
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  z-index: 1 !important;
}

.lobby-content-top {
  background: url("https://datahot.store/theme/bg-saldo-mobile.jpg") !important;
  padding: 1.5rem 2rem;
  border-bottom: 3px double gold;
}

.peraturan-content {
  color: #fff !important;
}

body.body-mobile #application-box,
.content.smartb4 {
  background-image: url("https://datahot.store/theme/bg-mobile-hotdepo.webp") !important;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.main-content {
  background-image: url("https://datahot.store/theme/bg-mobile-hotdepo.webp") !important;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.content.smartb4 .inner-wrap {
  background-color: transparent !important;
  background: none !important;
}

.content.smartb4 .panel-blue {
  background: linear-gradient(
    to right,
    #a8000087 0,
    #410505 50%,
    #8b030375 100%
  );
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #ff0000f2;
}

.panel-blue {
  background: linear-gradient(
    to right,
    #a8000087 0,
    #410505 50%,
    #8b030375 100%
  );
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #ff0000f2;
}

.pesan-rahasia {
  background: padding-box #212121;
  padding: 10px;
  border-radius: 10px;
  margin: 12px 18px !important;
  color: #fff;
  border: 2px solid transparent;
}

.iconkeylogin,
.iconkeylogin1,
.iconuserlogin,
.iconuserlogin1 {
  left: 18px;
  background: #c20006;
  border-radius: 17px 0 0 17px;
  padding: 10px 13px;
  box-shadow: 1px 0 5px #000;
  position: absolute;
}

div#injectautodepoqris {
  justify-content: center;
}

.promosi-content-container {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 440px) {
  .bank-sprite.bca {
    background-position: 0 -7px !important;
  }

  .bank-sprite.mandiri {
    background-position: -80px -4px !important;
  }

  .bank-sprite.bri {
    background-position: -121px -3px !important;
    background-size: 267px !important;
  }

  .bank-sprite.bni {
    background-position: -265px -8px !important;
  }

  .bri {
    width: 77px !important;
  }
}

.buttoncontact {
  margin-top: 1rem;
}

.iconuserlogin,
.iconuserlogin1 {
  top: 42.5px;
}

.iconkeylogin img,
.iconkeylogin1 img,
.iconuserlogin img,
.iconuserlogin1 img {
  width: 19.3px;
  filter: brightness(28) contrast(8.8);
}

.iconkeylogin,
.iconkeylogin1 {
  top: 98.8px;
}

input#navbar_password,
input#navbar_username {
  border-radius: 17px !important;
}

.bank-cashier {
  gap: 10px;
  border-radius: 10px;
  background: #fff;
}

.no-bottom {
  background: #18010140 !important;
}

.game-lobby-content {
  background: linear-gradient(0deg, #000, #350000, #000);
}

.game-title {
  background: linear-gradient(red 0, #590000 100%);
  padding: 5px;
  box-shadow: 0 -4px 3px 6px gold;
  width: 100%;
  margin-top: -3em;
  margin-bottom: 1.5em;
}

#game-live .game-title {
  padding: 0.5em 0;
}

.pool-container {
  display: none;
}

.item-data {
  border: 1px solid red;
  border-radius: 10px;
}

img.gambar-togel {
  position: absolute;
  height: 28px;
  top: 0;
  left: 0;
  border-radius: 0;
  padding: 2px;
  background: #520000;
  border-right: 1px solid gold;
}

.game-angka {
  padding-top: 0 !important;
  padding-bottom: 10px;
  color: gold;
}

.game-wrapper :first-child {
  grid-column: 1/2 !important;
}

.banner-promotion {
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid red;
  box-shadow: 1px 1px 1px #000;
  display: none !important;
}

.effect7 {
  height: auto !important;
}

.game-wrapper .game-lobby-content .game-title {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
  padding-top: 5rem !important;
  padding-left: 30px;
}

p.pasarantogel {
  text-align: center;
  padding: 5px 10px;
  border: 1px solid #dbff00;
  border-radius: 10px;
  margin-bottom: 10px;
  background: linear-gradient(rgb(255 209 0) 0, rgb(154 108 5) 100%);
  color: #000;
  font-weight: 700;
}

.slot-wrapper {
  background: linear-gradient(to bottom, #ec0404 0%, #560000 100%);
  box-shadow: inset 0 0 5px 3px #ff0000, inset 0 2px 0 0 #fff,
    inset 0 0 0 2px #620000, 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid gold;
  align-content: center;
  font-size: 15px;
}

#game-elottery .slot-header {
  background: linear-gradient(to bottom, #ec0404 0%, #560000 100%);
  box-shadow: inset 0 0 5px 3px #ff0000, inset 0 2px 0 0 #fff,
    inset 0 0 0 2px #620000, 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid gold;
  align-content: center;
  font-size: 15px;
  width: 100%;
  margin: 1em 0;
}

.slot-header-right button {
  background: linear-gradient(to bottom, #2c2c2c 0%, #000000 100%) !important;
}

.slot-header span {
  font-size: 15px !important;
}

button#loginBtnHeader {
  padding: 10px 26px !important;
  line-height: 20px !important;
  background-image: linear-gradient(to bottom, #d10000 0%, #470101 100%);
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: bold;
  text-transform: uppercase !important;
  font-size: 18px !important;
  box-shadow: inset 0 -2px 0 rgb(255 0 0);
  height: 45px !important;
}

.contactField.requiredField,
.contactField.contactOption {
  height: 44px;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 0px;
  border-radius: 7px;
  border: 3px groove;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-color: #ff0000;
}

.color-grey {
  color: #fff !important;
}

input#navbar_password,
input#navbar_username {
  width: 99%;
  border: 2px solid #e3342f;
}

.button-green,
.buttons,
.pool-name {
  text-transform: uppercase;
}

.slick-dots,
a.buttonWrap.buttons.button-blue.contactSubmitButton {
  display: none !important;
}

.button-red1 {
  background-image: url("https://datahot.store/theme/button-gif.webp");
  background-repeat: no-repeat, repeat;
  background-size: 120px 60px;
  width: 120px;
  height: 60px;
  text-align: center;
  font-size: 23px;
  padding-top: 10px;
  border: 2px solid #fff600;
  border-radius: 20px 17px 17px;
  box-shadow: 0 0 5px #ffe900;
  margin-bottom: 12px;
  color: #fff;
}

.list-menu-mobile {
  width: 100%;
  padding-top: 5px;
  border-top: 1px solid gold;
  padding-bottom: 30px;
}

.list-menu-mobile a {
  width: 20%;
  padding: 0 5px;
  display: inline-block;
  margin-top: 5px;
}

.list-menu-mobile a img,
.slick-slide img,
.slider {
  width: 100%;
}

#wowslider-container1 {
  z-index: 0 !important;
}

.page-header.smartb1 {
  margin-top: 0px !important;
  border-bottom: none !important;
  width: 100% !important;
  overflow: visible !important;
}

.content.smartb4 > .container.main.no-bottom {
  position: relative;
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
}

.news-head {
  height: 35px;
}
.news-body {
  height: 35px;
  overflow: hidden;
}

.tickercontainer {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.tickercontainer .masking {
  position: relative;
  left: 0px;
  width: 100%;
  height: 35px;
  overflow: hidden;
}

ul.newsticker {
  position: relative;
  width: 100%;
  list-style-type: none;
  margin-top: 7px;
  padding: 0px;
}

ul.newsticker li {
  float: left;
  margin: 0px;
  padding: 0px;
}

ul.newsticker a {
  white-space: nowrap;
  padding: 0px;
  margin: 0 45px 0 0;
  color: #717171;
}

ul.newsticker span {
  margin: 0 10px 0 0;
}

/* smartBanner.isSupportDevice() */
.smart-banner-download .page-header.smartb1 {
  height: 100px;
}

.smart-banner-download .app-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

.smart-banner-download .page-header .smartb2 {
  margin-top: 75px;
  z-index: 9999999;
  overflow: visible;
}

.smart-banner-download .page-header .buttonlc.smartb3 {
  margin-top: 75px;
  z-index: 9999999;
  overflow: visible;
}

/* smartBanner.isSupportDevice() */

.page-header .smartb2 {
  position: absolute !important;
  top: 5px !important;
  left: 0px !important;
}

.page-header .smartb3 {
  position: absolute !important;
  top: 18px !important;
  right: 30px !important;
}

.header-logo2 {
  width: 165px !important;
  height: 48px !important;
  margin-top: 6px !important;
  margin-left: auto;
  margin-right: auto;
}

.page-header .header-logo2 {
  width: 165px !important;
  height: 48px !important;
  margin-top: 6px !important;
  margin-left: auto;
  margin-right: auto;
}

.buttonlc.smartb3 .buttonWrap {
  padding-bottom: 0 !important;
}

.buttonlc.smartb3 .buttonlc2 {
  margin-bottom: 0 !important;
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  height: 36px;
  line-height: 35px;
  color: white;
  background: #840505;
  margin-bottom: -6px;
  text-shadow: 0px 0px 2px #f87076;
  box-shadow: 0px 0px 4px #ffe900;
  border: 1px solid #fa0505;
  font-size: 18px;
}

.marquee-inner {
  position: absolute;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 220%;
  height: 35px;
  line-height: 35px;
}

.marquee-wrapper #liscroll > li > a {
  padding-top: 0px !important;
  display: inline-flex;
  width: 200%;
}

.marquee-item::marker {
  color: transparent;
}

.marqee-list {
  float: left;
  width: 100%;
  margin-top: -3px;
  margin-bottom: 0 !important;
}

.marquee-item {
  -webkit-transition: -webkit-animation 0.2s ease-out;
  transition: -webkit-animation 0.2s ease-out;
  transition: animation 0.2s ease-out;
  transition: animation 0.2s ease-out, -webkit-animation 0.2s ease-out;
}

.marquee-inner.to-left {
  -webkit-animation: marqueeLeft 15s linear infinite;
  animation: marqueeLeft 15s linear infinite;
}

@-webkit-keyframes marqueeLeft {
  0% {
    left: 100%;
  }

  100% {
    left: -250%;
  }
}

@keyframes marqueeLeft {
  0% {
    left: 100%;
  }

  100% {
    left: -250%;
  }
}

.main {
  background-color: #600a0a;
}

.panel {
  background: #000;
}

.clearfix {
  overflow: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.button-satu {
  animation: 1s infinite buttonkeren;
}

.button-dua {
  background: linear-gradient(
    to bottom,
    #fe0 0,
    #e7c407 50%,
    #fdd700 100%
  ) !important;
  border: 2px solid #ffd700 !important;
  border-radius: 10px;
  padding: 7px 20px;
  margin: 12px 0;
  background: rgb(114 0 2);
  background-size: 400% 400%;
  color: #000000 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: grGradient 6s ease infinite;
  position: relative;
  overflow: hidden;
  font-size: 20px;
  box-shadow: 0px 3px 1px 1px gold;
  border-bottom: 4px solid #8e5d01 !important;
}

.button-blue {
  background: linear-gradient(to bottom, #f7f3a4 0, #ffc308 100%);
  border: 1px solid #ffce00;
  box-shadow: none;
  color: #000;
}

.button-green {
  background: linear-gradient(to bottom, #05a3ff 0, #09305c 100%);
  box-shadow: 0 0 2px #6eeaeb;
  border: 1px solid #0ef;
  color: #fff;
}

.contactSubmitButton {
  line-height: 14px !important;
  display: block !important;
  height: 40px !important;
  margin-right: 0;
  width: 100%;
  border-radius: 17px;
}

.contactField {
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 0;
  border-radius: 17px;
}

.buttonlc2 {
  animation: 0.5s infinite change-color !important;
  box-shadow: inset 0 1px 0 red;
  background: linear-gradient(to left, #870202 0, #ab1414 50%, #cf0404 100%);
  font-size: 12px;
}

.button-red {
  background: linear-gradient(to bottom, #fd0000 0, #340303 100%);
  box-shadow: 2px 2px 9px 0 red;
  border: 1px solid red;
}

.buttondapk {
  text-align: center;
  color: #fff;
  padding: 10px 26px;
  display: inline-block;
  margin-bottom: 10px;
  font-family: aller;
  font-size: 17px;
}

.btn-close,
.close,
.custd-25px {
  font-size: 25px;
}

.buttonjoin:nth-child(4),
.modal-mobile.hidden {
  display: none;
}

.owl-theme .owl-controls .owl-page span {
  display: none;
  width: 12px;
  height: 12px;
  margin: 5px 7px;
  filter: Alpha(Opacity=50);
  opacity: 0.5;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #869791;
}

footer#footer {
  width: 1170px;
  margin: auto;
}

@-webkit-keyframes change-color {
  0%,
  100% {
    color: #000;
  }

  50% {
    color: #fff;
  }
}

@keyframes change-color {
  0%,
  50% {
    color: #fff;
  }

  100% {
    color: #000;
  }
}

.pukiayam {
  width: 100%;
  height: 230px;
}

.icon-mobile {
  margin: auto;
  padding: 0;
  display: table;
  text-align: center;
}

.icon-mobile li {
  list-style: none;
  display: inline-block;
  width: 24%;
  margin-bottom: 0;
}

.icon-mobile li a {
  display: block;
}

.icon-mobile li a img {
  max-width: 100%;
}

.scontent {
  margin-bottom: 0 !important;
}

.wrapper2 {
  background: linear-gradient(
    to bottom,
    #650b0b 0,
    #000 46%,
    #0b0707 50%,
    #460000 100%
  );
  margin-top: -30px;
}

#slider-hasil {
  min-height: 167px;
}

.owl-theme .owl-controls {
  margin-top: -29px;
}

.close {
  opacity: 1;
  color: #fff;
}

.btn-close {
  font-weight: 700;
  opacity: 1;
  color: #fff;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
}

.modal-mobile {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
}

.modal-mobile .modal-container-mobile {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
}

.modal-mobile .body {
  display: inline-block;
  padding: 10px;
}
#dialog-container.modal-show,
#dialog-container #myModal {
  display: block !important;
  opacity: 1;
}
#dialog-container.modal-show.dialog-container-off,
#dialog-container.modal-show.dialog-container-off #myModal {
  display: none !important;
  opacity: 0 !important;
}
#dialog-container .modal-dialog .modal-content {
  background-color: transparent !important;
  margin-top: 20px;
}
#myModal .modal-header {
  border-bottom: none !important;
}
#myModal .modal-content {
  background-color: transparent !important;
}
.popup-img {
  width: 100%;
  height: auto;
}

.button-satu {
  background: linear-gradient(
    to bottom,
    #fe0 0,
    #e7c407 50%,
    #fdd700 100%
  ) !important;
  border: 1px solid #ff0 !important;
  color: #000 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.custd-15px,
.custd-18px,
.custd-25px {
  color: #fff;
  font-family: Muli !important;
}

.custd-container {
  border-radius: 25px;
  padding: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 830px;
  height: 130px;
  margin-top: 10px;
}

.custd-bg {
  background-color: #5f0000;
  font-family: Muli !important;
}

.custd-25px {
  font-weight: 700;
}

.custd-18px {
  font-size: 16px;
}

.custd-15px {
  font-size: 15px;
}

.custd-right {
  text-align: right;
  font-family: Muli !important;
}

.custd-left {
  text-align: left !important;
  font-family: Muli !important;
  margin-left: 2px;
}

.custd-center {
  vertical-align: center;
  font-family: Muli !important;
}

.progress21,
.progress31 {
  padding: 3px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25),
    0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar21,
.progress-bar31 {
  height: 10px;
  border-radius: 30px;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.05)
  );
  transition: width 0.4s linear, background-color 0.4s linear;
}

.progress-moved2 .progress-bar21 {
  width: 10%;
  background-color: red;
  animation: 3s progressAnimation21;
}

@keyframes progressAnimation21 {
  0% {
    width: 1%;
    background-color: red;
  }

  100% {
    width: 10%;
    background-color: red;
  }
}

.progress-moved11 .progress-bar31 {
  width: 30%;
  background-color: red;
  animation: 3s progressAnimation31;
}

@keyframes progressAnimation31 {
  0% {
    width: 1%;
    background-color: red;
  }

  100% {
    width: 30%;
    background-color: red;
  }
}

.app_title {
  font-size: 15px;
  font-weight: 700;
  color: #fc0;
}

.app_slogan {
  font-size: 11px;
  color: #fff;
  letter-spacing: 0;
}

.btn-green {
  font-size: 14px;
  padding: 8px;
  color: #000;
  background: linear-gradient(to bottom, #f6df00 0, #9e730b 100%);
  box-shadow: 0 0 3px #ffe900;
  border: 1px solid #f6fa05;
  border-radius: 20px;
}

@media only screen and (max-width: 600px) {
  .app_title {
    font-size: 13px;
    font-weight: 700;
    color: #fc0;
  }

  .app_slogan {
    font-size: 10px;
    color: #fff;
    letter-spacing: 0;
  }

  .btn-green {
    font-size: 12px;
    padding: 8px;
    color: #000;
    background: linear-gradient(to bottom, #f6df00 0, #9e730b 100%);
    box-shadow: 0 0 3px #ffe900;
    border: 1px solid #f6fa05;
    border-radius: 20px;
  }

  .space {
    right: 9px !important;
  }
}

.button-orange {
  background: linear-gradient(
    to bottom,
    #f00d0d 0,
    #b42323 50%,
    #d91111 50%,
    #a91414 50%,
    #cf0404 100%
  );
}

@media only screen and (max-width: 300px) {
  .header-logo2 {
    width: 146px;
    height: 45px;
    margin-top: 0;
    margin-left: 20%;
    margin-right: auto;
  }

  .app_title {
    font-size: 11px;
    font-weight: 700;
    color: #fc0;
  }

  .app_slogan {
    font-size: 8px;
    color: #fff;
    letter-spacing: 0;
  }

  .btn-green {
    font-size: 8px;
    padding: 8px;
    color: #000;
    background: linear-gradient(to bottom, #f6df00 0, #9e730b 100%);
    box-shadow: 0 0 3px #ffe900;
    border: 1px solid #f6fa05;
    border-radius: 20px;
  }

  .button-red {
    background: linear-gradient(to bottom, #fd0000 0, #340303 100%);
    box-shadow: 2px 2px 9px 0 red;
    border: 1px solid red;
    font-size: 15px;
  }
}

.bungkus-jackpot .progresif-jackpot {
  padding: 10px 10px !important;
}

.progresif-jackpot {
  font-size: 22px;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 5px;
  text-align: center;
  color: gold;
  background: url("https://datahot.store/theme/progresif-jackpot.webp")
    center/100%;
  width: 100%;
  margin: 10px auto;
}

.bungkus-jackpot {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  display: flex;
  align-items: center;
  padding-top: 0;
  justify-content: center;
  border-radius: 0;
}

.progresif-jackpot span {
  color: #fff;
  margin-right: 15px;
}

.slider-mobile {
  width: 80%;
  margin: 0 auto;
}

.messagebleft-container {
  transition: top 2s, right 2s, bottom 2s, left 2s, opacity 2s;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  min-height: 14px;
  background: linear-gradient(to right, #a80000 0, #410505 50%, #8b0303 100%);
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #070b0e;
  line-height: 22px;
  padding: 18px 24px;
  bottom: -100px;
  top: -100px;
  opacity: 0;
  z-index: 9999;
}

.pool-date,
.pool-name {
  font-size: 8px !important;
}

.messagebleft-container .action {
  background: inherit;
  display: inline-block;
  font-size: inherit;
  text-transform: uppercase;
  color: #4caf50;
  margin: 0 0 0 24px;
  padding: 0;
  min-width: min-content;
  cursor: pointer;
}

@media (min-width: 640px) {
  .messagebleft-container {
    min-width: 288px;
    max-width: 568px;
    display: inline-flex;
    border-radius: 2px;
    margin: 24px;
  }
}

.messagebleft-pos.bottom-center {
  top: auto !important;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.messagebleft-pos.bottom-left {
  top: auto !important;
  bottom: 0;
  left: 0;
}

.messagebleft-pos.bottom-right {
  top: auto !important;
  bottom: 0;
  right: 0;
}

.messagebleft-pos.top-left {
  bottom: auto !important;
  top: 0;
  left: 0;
}

.messagebleft-pos.top-center {
  bottom: auto !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.messagebleft-pos.top-right {
  bottom: auto !important;
  top: 0;
  right: 0;
}

@media (max-width: 640px) {
  .messagebleft-container {
    left: 0;
    right: 0;
    width: 100%;
  }

  .messagebleft-pos.bottom-center,
  .messagebleft-pos.top-center {
    left: 0;
    transform: none;
  }
}

.button-red {
  border-radius: 20px;
}

#slider-hasil .slider {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  justify-items: stretch;
  justify-content: center;
}

.pool-name {
  color: #fff !important;
  font-weight: bolder !important;
  width: 100% !important;
  text-align: center !important;
  background: #ce0000;
  padding: 3px 2px;
  border-bottom: 1px solid #f5fb00;
}

.pool-date {
  color: #fc0 !important;
  margin-left: 0 !important;
  padding-top: 2px;
  text-align: center;
  font-weight: 500;
}

.pool-result {
  font-size: 18px !important;
  color: #f5ff00 !important;
}

.note {
  color: #fff !important;
}

.grubsearchPasaran {
  width: 100%;
  padding: 5px 16px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-radius: 20px;
  background: #ce0000;
  border: 1px solid gold !important;
  position: relative;
}

.grubsearchPasaran input {
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 5px;
  color: #ffffff;
  letter-spacing: 1px;
  background: linear-gradient(
    to bottom,
    #740202 0%,
    #630000 50%,
    #a10000 100%
  ) !important;
  box-shadow: none;
}

.grubsearchPasaran img {
  width: 38px;
  margin-right: 5px;
  filter: brightness(10) drop-shadow(1px 2px 2px #00000054) contrast(1);
  border-right: 6px double gold;
  padding-right: 6px;
}

.grubsearchPasaran input::placeholder {
  color: #b3bfc5;
}

.hotdepo-wrap {
  margin-inline: auto;
  padding: 0px 12px 2px;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 1rem;
  width: 100%;
}

.hotdepo-title {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background-size: 300% 300%;
  animation: alxShimmer 4s ease infinite;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  margin-bottom: 1px;
  letter-spacing: 1px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes alxShimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.hotdepo-search-pill {
  flex: 1;
  height: 39px;
  border-radius: 50px;
  background: linear-gradient(270deg, #1a1c1b, #c20006, #5d1113);
  background-size: 400% 400%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 14px rgba(0, 0, 0, 0.35);
  border: 2px solid #ffc107;
  animation: alxGradient 6s ease infinite;
  position: relative;
  overflow: hidden;
  transition: filter 0.2s ease;
}

.hotdepo-search-pill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75px;
  width: 50px;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  transform: skewX(-20deg);
  transition: all 0.3s ease;
}

.hotdepo-search-pill:hover::after {
  left: 130%;
  transition: all 0.5s ease;
}

.hotdepo-search-pill:hover {
  box-shadow: 0 12px 26px rgba(204, 46, 46, 0.55),
    0 0 18px rrgba(204, 46, 46, 0.4);
  filter: brightness(1.08);
}

.hotdepo-search-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 2px solid gold;
  padding: 5px;
  background: #6a0500;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 6px 18px rgba(0, 0, 0, 0.35);
  margin-bottom: 0px;
  border-radius: 50px;
  height: 53px;
}

.hotdepo-search-icon {
  width: 43px;
  height: 43px;
  min-width: 42px;
  display: grid;
  place-items: center;
  background: gold;
  border: 2px solid #ffc107;
  color: #fff;
  border-radius: 999px;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  align-content: center;
}

.hotdepo-btn {
  width: 100%;
  border: 2px solid #ffffff;
  border-radius: 10px;
  padding: 7px 20px;
  margin: 12px 0;
  background: rgb(13 155 21);
  background-size: 400% 400%;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: alxGradient 6s ease infinite;
  position: relative;
  overflow: hidden;
  font-size: 20px;
}

.hotdepo-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75px;
  width: 50px;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  transform: skewX(-20deg);
  transition: all 0.3s ease;
}

.hotdepo-btn:hover::after {
  left: 130%;
  transition: all 0.5s ease;
}

.hotdepo-btn:hover {
  box-shadow: 0 12px 26px rgba(255, 210, 31, 0.55),
    0 0 18px rgba(255, 210, 31, 0.4);
  transform: translateY(-1px);
}

.hotdepo-btn:active {
  transform: translateY(1px);
}

@keyframes alxGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.login-wrapper .form-input .password-wrapper > button {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
}
.login-wrapper .form-input .password-wrapper > button > svg {
  width: 1.5rem;
  color: #818285;
}
.login-wrapper .form-input .password-wrapper > button > svg.active {
  display: block;
}
.scontent {
  margin-bottom: 0px !important;
}
.dib {
  display: inline-block;
}
hr {
  margin-top: 5px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  clear: both;
}
body {
  line-height: 1.5;
}
#dialog-container.dialog-container-off {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.results {
  background: white;
}
.pool-result span {
  font-size: 12px;
  font-weight: 400;
  margin-right: 5px;
}
#slider-hasil-left,
#slider-hasil-right {
  display: none;
}
#slider-hasil img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  position: fixed;
  top: -10%;
  z-index: 999999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
  -webkit-animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}
@-webkit-keyframes snowflakes-fall {
  0% {
    top: -10%;
  }

  100% {
    top: 100%;
  }
}
@-webkit-keyframes snowflakes-shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
  }
}
@keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@keyframes snowflakes-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(80px);
  }
}
.snowflake:nth-of-type(0) {
  left: 0%;
  -webkit-animation-delay: 0s, 0s;
  animation-delay: 0s, 0s;
}
.snowflake:first-of-type {
  left: 10%;
  -webkit-animation-delay: 1s, 1s;
  animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
  left: 20%;
  -webkit-animation-delay: 6s, 0.5s;
  animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
  left: 30%;
  -webkit-animation-delay: 4s, 2s;
  animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
  left: 40%;
  -webkit-animation-delay: 2s, 2s;
  animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
  left: 50%;
  -webkit-animation-delay: 8s, 3s;
  animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
  left: 60%;
  -webkit-animation-delay: 6s, 2s;
  animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
  left: 70%;
  -webkit-animation-delay: 2.5s, 1s;
  animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
  left: 80%;
  -webkit-animation-delay: 1s, 0s;
  animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
  left: 90%;
  -webkit-animation-delay: 3s, 1.5s;
  animation-delay: 3s, 1.5s;
}
.snowflake:nth-of-type(10) {
  left: 25%;
  -webkit-animation-delay: 2s, 0s;
  animation-delay: 2s, 0s;
}
.snowflake:nth-of-type(11) {
  left: 65%;
  -webkit-animation-delay: 4s, 2.5s;
  animation-delay: 4s, 2.5s;
}

#application-box {
  position: relative;
}

#application-box #header-box {
  background: #000000;
  position: fixed;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  left: 0;
}
#header-box .burger-box,
#header-box .logo-register,
#header-box .register-button {
  position: relative;
  display: flex;
  padding: 5px 0px;
}
#application-box #header-box .logo-register img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 50px;
}
#header-box .burger-box button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  box-shadow: none;
  border: none;
}
#header-box .burger-box button:hover .burger-icon {
  background: #fed804;
}
#header-box .burger-box .burger-icon {
  width: 25px;
  height: 5px;
  border-radius: 5px;
  background: #fff;
}
#mySidenav {
  background: linear-gradient(rgb(150, 1, 3) 41%, rgb(6, 0, 0) 98%) !important;
  display: none;
  position: fixed;
  width: 0px;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
}
#application-box.fixed-notscrolled #mySidenav {
  display: block;
  position: fixed;
  opacity: 1;
  width: 65%;
  height: 100vh;
  z-index: 999;
}

#mySidenav .header-sidenav {
  position: relative;
  background: #3b0709;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
#mySidenav .header-sidenav .brand-logo {
  position: relative;
}
#mySidenav .header-sidenav .brand-logo img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 50px;
}
#mySidenav .header-sidenav .button-back {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 4rem;
  font-weight: 700;
  margin-left: 1rem;
  cursor: pointer;
}
#mySidenav .header-sidenav .button-back .fa {
  font-size: 4rem;
  font-weight: 700;
  cursor: pointer;
}
#mySidenav .header-sidenav .button-back:hover {
  color: #fed804;
}

#mySidenav .menu-sidenav {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
#mySidenav .menu-sidenav .row {
  margin-right: 0px;
  margin-left: 0px;
}
#mySidenav .menu-sidenav ul {
  position: relative;
  padding: 15px;
}
#mySidenav .menu-sidenav ul > li {
  position: relative;
  display: block;
}
#mySidenav .menu-sidenav ul > li > a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(to bottom, #410303 0%, #750404 100%);
  box-shadow: 2px 3px 3px 2px rgba(0, 0, 0, 0.2) !important;
  border-right: 6px solid #ff0000 !important;
  border-left: 4px solid #ff0000 !important;
  border-bottom: 1px solid #ff0000 !important;
  border-top: 1px solid #ff0000 !important;
  margin-bottom: 8px !important;
  border-radius: 35px !important;
  line-height: 25px;
  color: #ffffff;
  font-size: 17px !important;
  text-decoration: none;
  padding: 8px 15px;
}
#mySidenav .menu-sidenav ul > li > a:hover,
#mySidenav .menu-sidenav ul > li > a:active,
#mySidenav .menu-sidenav ul > li > a:focus {
  color: #160958;
  background-image: none;
  background-color: #ffffff;
}
#mySidenav .menu-sidenav .button-sidenav {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
}
#mySidenav .menu-sidenav .button-sidenav .col-12 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}
#header-box .register-button a.button,
#mySidenav .menu-sidenav .button-sidenav a.button {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(to bottom, #f82b00 0%, #cb1e00 100%);
  background-repeat: repeat-x;
  padding: 8px 12px;
  letter-spacing: 2px;
  font-weight: bolder;
  color: #000000;
  font-size: 13px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  font-family: Muli !important;
  text-decoration: none;
  border-width: 3px !important;
  border-radius: 18px 0 !important;
  margin-bottom: 0px !important;
  outline: 0;
  z-index: 5;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
#header-box .register-button a.button:hover,
#mySidenav .menu-sidenav .button-sidenav a.button:hover {
  background-image: linear-gradient(to bottom, #3b0709 0%, #3b0709 100%);
  border: 3px solid red;
  color: #ffffff;
}
#header-box .register-button a.button::before,
#mySidenav .menu-sidenav .button-sidenav a.button::before {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: -1;
  filter: blur(0px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: 10s linear infinite glowing;
  transition: opacity 0.1s;
  content: "";
  background: linear-gradient(90deg, red, #fffb00, red);
  background-size: 300%;
  opacity: 1;
  border-radius: 18px 0;
}

@keyframes glowing {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 300% 0;
  }
}

#mySidenav .menu-sidenav .text-optional {
  position: relative;
  color: #dbdbdb;
}
#mySidenav .menu-sidenav .text-optional a {
  color: #fffb00;
}
#mySidenav .menu-sidenav .text-optional a:hover {
  color: #fff;
}
#mySidenav .text-optional.text-copyright {
  position: relative;
  color: #dbdbdb;
}

#application-box .berita {
  position: relative;
  background: #840505;
  margin-bottom: 1px;
  box-shadow: 0 0 4px #ffe900;
  border: 1px solid #fa0505;
}
#application-box .berita .info-label-header-box {
  display: none;
}
#application-box .berita .text-info-header {
  position: relative;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 0 2px #f87076;
  line-height: 12px;
}

#application-box section {
  position: relative;
  width: 100%;
  padding: 10px;
}
#application-box > section > .container {
  position: relative;
  width: 100%;
  min-width: 100%;
  background: linear-gradient(
    to right,
    #a8000087 0,
    #410505 50%,
    #8b030375 100%
  );
  padding: 8px;
  border-radius: 10px;
  color: #fff;
}
#application-box section .breadcumb-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  color: #ffe900;
  background-color: #fff;
  background: linear-gradient(
    to right,
    #a8000087 0,
    #410505 50%,
    #8b030375 100%
  );
}
#application-box section .breadcumb-title .breadcumb-text .main-title {
  color: #fff;
}
#application-box section .img-header-game {
  position: relative;
}
#application-box section .img-header-game img {
  width: 100%;
  min-width: 100%;
  height: auto;
}

#application-box section > .container .list-games-index {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
#application-box section > .container .list-games-index .each-game-index {
  position: relative;
  border-radius: 10px;
  border-width: 2px;
  border-style: groove;
  border-color: rgb(219, 175, 76);
  border-image: initial;
  transition: 0.3s;
  text-align: center;
  cursor: pointer;
}
#application-box section > .container .list-games-index .each-game-index img {
  width: 100% !important;
  height: 100% !important;
}
#application-box section > .container .list-games-index .each-game-index:hover {
  transform: scale(1.05);
  z-index: 10;
}

#application-box #footer {
  position: relative;
  color: #fff;
  padding: 10px;
  margin-bottom: 80px;
}
#application-box #menu-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
}
#application-box #menu-footer .row.bottom-navbar {
  position: relative;
  width: 100% !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
}
#application-box #menu-footer .row.bottom-navbar a.each-footer-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

#addons-properties-footer {
  position: relative;
  background: linear-gradient(
    to right,
    #a8000087 0,
    #410505 50%,
    #8b030375 100%
  );
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #ff0000f2;
}
#addons-properties-footer .container {
  padding-right: 0px;
  padding-left: 0px;
}
#addons-properties-footer .article-games {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #fff;
}
#addons-properties-footer .article-games > div {
  position: relative;
  width: 100% !important;
  min-height: 70px;
  display: flex;
  justify-content: start;
  align-items: center;
}
#addons-properties-footer .article-games > div.slot-games,
#addons-properties-footer .article-games > div.casino-games {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
}
#addons-properties-footer
  .article-games
  > div.slot-games
  .daftar-slot-hotdepotogel {
  cursor: pointer;
  margin: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: gold;
  border-image: initial;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.5s;
  animation: 2s ease 0s infinite alternate none running shadow;
}
#addons-properties-footer
  .article-games
  > div.slot-games
  .daftar-slot-hotdepotogel:hover {
  opacity: 0.3;
}
#addons-properties-footer .article-games img {
  position: relative;
  width: 100% !important;
  height: auto !important;
}

.hotdepo-table {
  margin-bottom: 15px;
  margin-top: 5px;
}
.hotdepotogel-table {
  border: 1px solid gold;
  border-radius: 5px;
  border-collapse: separate;
  border-spacing: 4px;
  max-width: 824px;
  margin: auto;
  width: 100%;
}
table.hotdepotogel-table td {
  background: #910203;
  font-size: 13px;
  color: #fff;
  padding: 5px;
  background-color: none;
  text-align: left;
  border: 1px solid gold;
  border-radius: 5px;
  line-height: 15px;
}
table.hotdepotogel-table thead {
  font-size: 15px;
  text-align: center;
  background: radial-gradient(
    circle 214px at 46.5% 54.2%,
    #6e0000 0,
    #600000 96%
  );
  color: #fff;
  line-height: 33px;
}

#application-box #addons-properties-footer #slide-left1,
#addons-properties-footer #disclaimer-footer .link-alternatif-desktop,
#addons-properties-footer #disclaimer-footer .container-footer-bawah,
#addons-properties-footer #disclaimer-footer .yellowfoot,
#application-box #addons-properties-footer #payment-information-footer {
  display: none !important;
}