/*-----------------  GOOGLE FONTS  -----------------*/
@import url("https://fonts.googleapis.com/css2?family=PT+Serif&display=swap");

/*-----------------  VARIABLES  -----------------*/
:root {
  /* Colors */
  --white_color: rgb(255, 255, 255);
  --gold_color: rgb(255, 215, 0);
  --green_color: rgb(5 117 230);
  --body_background: linear-gradient(to right, #141e30, #243b55);
  --spin_background: #0575e6;
}
/*-----------------  Base  -----------------*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

}
body {
  height: 100vh;
  background: var(--body_background);
}
/*-----------------  Styling Start  -----------------*/
h1 {
  position: absolute;
  font-size: 4rem;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}
.container {
  width: 90%;
  max-width: 34.37rem;
  margin-top: 3rem;
  max-height: 90vh;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 3rem;
  border-radius: 1rem;
}
.wheel_box {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 30px;
}
#spinWheel {
  transform: rotate(289deg);
}
#text p {
  color: #f1c94d;
  font-weight: 700;
  text-shadow: 1px 1px 1px black;
}
.spin-card-header {
  background-image:url('../../../libraries/assets/backgorund-img/header-game.jpg');
  padding: 30px;
}
#spin_btn {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  height: 96px;
  width: 96px;
  border-radius: 50%;
  cursor: pointer;
  border: 0;
  background: #f0dd97;
  text-transform: uppercase;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  font-weight: 600;
  z-index: 11;
}
.navgation_arrow {
  position: relative;
}
.navgation_arrow:before {
  content: "";
  display: inline;
  width: 20px;
  height: 20px;
  position: relative;
}

.fa-solid {
  position: absolute;
  top: -10%;
  left: 43.7%;
  font-size: 4rem;
  color: #f0dd97;
  transform: rotate(-225deg);
}
#text {
  font-size: 1.5rem;
  text-align: center;
  margin-top: 1.5rem;
  color: var(--gold_color);
  font-weight: 500;
}
.inner-box_01 > span span,
.inner-box_02_bottom > span,
.table-box-histry > .table-boll-color {
  display: inline-block;
  border: 1px solid #1e1a1400;
  width: 49px;
  height: 49px;
  border-radius: 26px;
  font-size: 22px;
  line-height: 2.1;
  font-weight: 700;
  margin-right: 5px;
  text-align: center;
  color: #ffffff;
  box-shadow: 4px 6px 3px #0000005e;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #3c1941 !important;
  background-color: #f1c94d !important;
  border-color: #dee2e600 !important;
}
.inner-box_03_bottom > span {
  display: inline-block;
  border: 1px solid #15151654;
  width: 45px;
  height: 28px;
  font-weight: 700;
  margin-right: 5px;
}

.inner-box_01,
.span-token-background {
  border: 1px solid #fff;
  padding-bottom: 11px;
  text-align: center;
  background-image: url("../../assets/backgorund-img/background-img-box.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 127px;
}
.inner-box_2 {
  background-image: url("../../assets/backgorund-img/background-img-box.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 49%;
  text-align: center;
}
.remaining-spin,
.winning-box {
  position: relative;
}
.remaining-spin::before {
  content: "";
  width: 2px;
  height: 100%;
  display: inline-block;
  background-color: #fff;
  position: absolute;
  top: 0px;
  right: 17px;
}
.winning-box::after {
  content: "";
  width: 2px;
  height: 100%;
  display: inline-block;
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: -15px;
}
.inner-box-coin {
  /* background-image: url("../../assets/backgorund-img/background-img-box.jpg");
  background-size: cover; */
  background:#69696930;
}
.inner-box_02 > span span {
  display: inline-block;
  border: 1px solid #71717f;
  width: 32px;
  height: 32px;
  font-size: 20px;
  font-weight: 700;
  margin-right: 5px;
  text-align: center;
  border-radius: 5px;
  color: #6b6b6b;
}
.left-box a,
.right-box a {
  background: linear-gradient(to right, #eb3941, #f94c53, #e14e53, #ff4750);
  box-shadow: 0 5px 15px rgb(15 14 14 / 32%);
  color: #ebff06 !important;
}

.game-btn {
  --border: 5px; /* the border width */
  --slant: 0.7em; /* control the slanted corners */
  --color: #37e8fc; /* the color */
  font-size: 26px;
  padding: 0.4em 1.2em;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: var(--color);
}
.game-btn:focus-visible {
  outline-offset: calc(-1 * var(--border));
  outline: var(--border) solid #000c;
  clip-path: none;
  background-size: 0 0;
}
.game-btn:hover,
.game-btn:active {
  color: #fff;
  --t: 0.2s 0.1s;
}
.game-btn:active {
  --s: #0005;
  transition: none;
}

.background-bg-spin {
  background-image: url("../../../libraries/assets/backgorund-img/sun-tornado.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: relative;
}
.background-bg-spin::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0000005e;
  top: 0;
  z-index:11;
}
li.nav-item {
  margin-bottom: 5px;
}
.remaining-spin, .winning-box, .wheel_box, .play-box{
  position:relative;
  z-index:99;
}
.spin-color-btn-bottom_box .first-btn {
  width: 14%;
  height: 44px;
  background-color: #000000;
  background-image: -webkit-linear-gradient(296deg, #000000 51%, #ff9c00 22px);
  box-shadow: 4px 6px 3px #0000004a;
  margin-right: 8px;
}
.spin-color-btn-bottom_box .second-btn {
  background-color: #dc1c13;
  width: 14%;
  height: 44px;
  box-shadow: 4px 6px 3px #0000004a;
  margin-right: 8px;
}
.spin-color-btn-bottom_box .third-btn {
  background-color: #008000;
  width: 13%;
  height: 44px;
  box-shadow: 4px 6px 3px #0000004a;
  margin-right: 8px;
}
.half-btn-black-golden {
  background-color: #0073ff;
  background-image: -webkit-linear-gradient(330deg, #000000 54%, #ff9c00 6px);
  background-origin: border-box;
}

.stake-btn {
  position: absolute;
  left: 41%;
  top: 47%;
  bottom: 23%;
}
.btn-spin_btn {
  border-radius: 37px !important;
  padding: 6px 20px !important;
  min-height: 33px;
  color: green !important;
  font-weight: 400!important;
  text-shadow: 1px 1px 1px #0000009c !important;
}

.fa-location-arrow {
  transform: translate(-21px, -9px) rotate(314deg);
}
.btn-big-spin,
.btn-small-spin {
  width: 22%;
  color: #fff;
  font-size: 20px;
  padding: 7px 19px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

.btn-big-spin {
  background-color: #dc1c13;
}
.btn-small-spin {
  background-color: green;
}
.btn-big-spin:hover {
  background-color: #ff564e;
}
.heading-box {
  font-weight: 800;
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
  margin-top: 6px;
}
.remaining-spin span,
.winning-box span {
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.2px;
}
.table-boll-color {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50px;
}
.nav-pills > li > a,
.nav-tabs > li > a {
  color: #ffffff !important;
  font-weight: 400 !important;
  background: #4a4a4a !important;
  margin-right: 5px;
}
.wheel_box {
  position: relative;
  margin-top: 25px !important;
}
.wheel_box::before {
  content: "";
  width: 100%;
  height: 133%;
  background-image: url("../../../../application/libraries/assets/backgorund-img/background-spin-game.jpg");
  background-repeat: no-repeat;
  background-size: 376px;
  top: -35px;
  transform: translateX(31.5%);
  z-index: 1;
}
@media (min-width: 1445px) {
  .wheel_box::before {
    transform: translate(38.3%, -10%);
  }
}
@media (max-width: 1200px) {
  .wheel_box::before {
    transform: translate(31.3%, -10%);
  }
}

@media (max-width: 1024px) {
  .wheel_box::before {
    transform: translate(28.3%, -9%);
  }
}

@media (max-width: 768px) {
  #spinWheel {
    transform: rotate(287deg);
  }
  .wheel_box::before {
    transform: translate(20.3%, -9%);
  }

  .fa-solid {
    left: 42.7%;
  }
}
@media (max-width: 500px) {
  .wheel_box:before {
    width: 100%;
    height: 125%;
    top: -18px;
    transform: translateX(1%);
    background-size: 332px;
    z-index: 1;
  }
  #spinWheel {
    transform: rotate(287deg);
  }
  .btn-spin_btn {
    padding: 6px 15px !important;
    min-height: 33px;
   
    font-weight: 400!important;
    text-shadow: 1px 1px 1px #0000009c !important;
  }
  .inner-box_01 {
    height: 83px;
    margin-top: 6px;
    width: 50%;
  }
  .play-box {
    border-top: 3px dashed black;
    border-bottom: 3px dashed black;
  }
  .span-token-background {
    height: 149px;
  }
  .fa-solid {
    left: 43.7%;
  }
  .stake-btn {
    left: 36%;
  }
  .inner-box_01 > span span {
    width: 25px;
    height: 25px;
    font-size: 12px;
    line-height: 2;
  }
  .inner-box_02 {
    height: 77px;
  }
  .heading-box {
    font-weight: 800;
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 10px;
    margin-top: 6px;
  }
  .inner-box_02 > span span {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
  .inner-box_2 {
    width: 56%;
    margin-top:0px;
  }
  .spin-color-btn-bottom_box .second-btn,
  .spin-color-btn-bottom_box .first-btn,
  .spin-color-btn-bottom_box .third-btn {
    width: 24.7%;
  }
  .btn-big-spin,
  .btn-small-spin {
    width: 40%;
  }
  .stake-btn {
    top: 48%;
    bottom: 18%;
  }
  .inner-box_2 {
    border-left: 4px dotted #060606;
  }
}

@media (max-width: 376px) {
  .wheel_box:before {
    transform: translateX(3%);
    background-size: 296px;
    z-index: 1;
    top: -12px;
  }
  .wheel_box {
    margin-left: 6px;
    width: 300px;
  }
}