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

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}
body {
  background-color: #192443;
}
.navbar {
  background-color: #101421 !important;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
}
.offcanvas {
  background-color: #161d2e !important;
  color: white;
}
.large-hide {
  display: none;
}
.small-hide {
  display: block;
}
.blue-gradient {
  background-image: linear-gradient(to right, #0095ff, #0855c4) !important;
  color: white;
}
.green-gradient {
  background-image: linear-gradient(to right, #31bc69, #089e4e) !important;
  color: white;
}
.yellow-gradient {
  background-image: linear-gradient(to right, #fff173, #ffb800) !important;
}
.purple-gradient {
  background-image: linear-gradient(to right, #d062ff, #7bb0ff) !important;
  color: white;
}
.carousel-img {
  width: 75%;
}
.carousel-btn {
  border-radius: 50%;
  width: 20px !important;
  height: 20px !important;
}
.footer-bottom {
  position: fixed;
  bottom: 0;
  background-color: #101421;
  color: white;
  width: 100%;
}
.text-small {
  font-size: 13px;
}
.span-icon {
  margin-bottom: -9px !important;
  border-radius: 15px;
}
.material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.nav-item:hover {
  background-color: #4a609c;
}
/* bottomnav */
.bottom-nav-btn {
  color: white;
}
.bottom-nav-btn-active {
  color: rgb(249, 215, 114);
}

/* login */
.login {
  min-height: 100vh;
  background-image: url(../../images/frontend/images/blue-bg.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login .container {
  max-width: 500px;
}
.glass-container {
  background: #41414173;
  backdrop-filter: blur(100px);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.214);
}

/* register */
.register {
  min-height: 100vh;
  background-image: url(../../images/frontend/images/blue-bg.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register .container {
  max-width: 500px;
}

@media (max-width: 540px) {
  .offcanvas {
    width: 85% !important;
  }
  .large-hide {
    display: block;
  }
  .small-hide {
    display: none;
  }
  .carousel-img {
    width: 100%;
  }
}

.game-home {
  min-height: 100vh;
  background-image: url(../../images/frontend/images/Desktopbg.png);
  background-size: cover;
  background-attachment: fixed;
}

.gamenav {
  background-color: #101421;
  padding: 10px 5px;
}
.amountpanel {
  border: 1px solid white;
  border-radius: 10px;
  padding: 2px 5px;
}
.goldcoin {
  width: 40px;
  height: 40px;
}
.addamounrbtn {
  width: 40px;
  height: 40px;
}
.text-small {
  font-size: 13px;
}
@media (max-width: 540px) {
  .game-home {
    background-image: url(../../images/frontend/images/gamebg.png);
  }
  .goldcoin {
    width: 25px;
    height: 25px;
  }
  .addamounrbtn {
    width: 25px;
    height: 25px;
  }
  .control-panel {
    position: fixed;
    bottom: 0;
    margin-bottom: -5px;
  }
  .first-btn {
    margin-left: 180%;
  }
}

.btn-img {
  width: 40px;
  height: 40px;
}
.small-btn-img {
  width: 20px;
  height: 20px;
}
.dagger-img {
  width: 60px;
  height: 60px;
}
.btn-num {
  margin-top: -9px;
}
.win-col {
  overflow-x: scroll;
}
.black-btn {
  border: 1px solid white;
  background-image: linear-gradient(#848484, #1c1c1c);
  color: white;
}
.red-btn {
  border: 1px solid white;
  background-image: linear-gradient(#dd0000, #400000);
  color: white;
}
.yellow-btn {
  border: 1px solid white;
  background-image: linear-gradient(#fff173, #ffb800) !important;
  color: dark;
}
::-webkit-scrollbar {
  display: none;
}
.color-spin {
  display: flex;
  overflow-x: scroll;
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-350%);
  }
}
.move-right {
  animation: moveRight 0.4s infinite linear;
}
.active-color-btn {
  border: 3px solid blue !important;
}
.active-btn-num {
  border: 3px solid blue !important;
}
.active-btn-num .btn-img {
  width: 50px;
  height: 50px;
}
.blue-box {
  width: 50px;
  height: 50px;
  /* border: 2px solid blue; */
  margin-bottom: -15%;
  position: absolute;
}
.emoji-img {
  width: 15px;
  height: 15px;
}
.emoji-img-left {
  margin-left: -5px;
}

#wallet,
#add-amount,
#home,
#transaction-history,
#withdrawal,
#profile {
  padding-top: 100px;
}

.profile-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 5px solid #fff;
}
.dropdown-toggle::after {
  margin-left: 10.255em !important;
}
a.dropdown-item {
  color: #fff;
}
.navbar-nav .dropdown-menu {
  background-color: #192443;
}