#promo-special-b-container {
  font-family: euro;
  color: #fff;
  font-size: 4rem;
  text-align: center;
  margin-left: 3rem;
  text-transform: unset;
}
#promo-special-c-container {
  font-family: euro;
  color: #fff;
  font-size: 4rem;
  text-align: center;
  margin-left: 3rem;
  text-transform: unset;
}
#promo-special-a-container p {
  padding: 1rem;
}
#promo-special-a-container {
  font-family: good-times-rg;
  color: #fff;
  font-size: 4rem;
  text-align: center;
  margin-left: 3.5rem;
  margin-top: 2rem;
}
#draw-counter {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 3.2rem;
  left: 88rem;
  z-index: 110;
  font-size: 2.6rem;
  -webkit-transform: scale(1.1, 1);
  -moz-transform: scale(1.1, 1);
  -o-transform: scale(1.1, 1);
  transform: scaleX(1.1);
  color: #fff;
  text-shadow: 0.1rem 0 0.1rem rgb(0 0 0);
  font-family: euro, sans-serif;
  font-weight: 700;
}
#result-container {
  width: 100%;
  height: 100vh;
  background: url(./images/result.png) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.result-number-row {
  height: 3.2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-top: 0.2rem solid rgba(255, 255, 255, 0.2);
}
.result-number {
  font-size: 2.3rem;
  width: 3.6rem;
  height: 3.6rem;
  line-height: 4.2rem;
  font-family: euro-regular, sans-serif;
  border-radius: 50%;
  text-align: center;
  -webkit-text-stroke: 0.1rem #000;
  margin-left: 0.2rem;
}
.yellow-result {
  background-color: #fff20c;
  box-shadow: inset -1px -2px 10px #eadc00;
}
.brown-result {
  background: #ff9a22;
  box-shadow: inset -1px -3px 4px #ec7d00;
}
.game-id {
  -webkit-transform: scale(1, 1.2);
  -moz-transform: scale(1, 1.2);
  -o-transform: scale(1, 1.2);
  transform: scaleY(1.2);
  color: #fff;
  font-size: 2.8rem;
  margin-right: 1rem;
  font-family: Moire-extra-bold;
  text-shadow: 0rem 0rem 0.3rem #333;
}
.number-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
}
.divider {
  width: 0.2rem;
  height: 5.2rem;
  position: relative;
  top: 0.6rem;
  background-color: #fff3;
}
#init-container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(./images/init.png) no-repeat;
  background-size: cover;
}
#init {
  width: 10rem;
  height: 5rem;
  font-size: 4rem;
  font-family: dock-bold, sans-serif;
  border: none;
  outline: none;
  cursor: pointer;
  color: #f0f8ff;
  text-transform: capitalize;
}
#video-container {
  position: relative;
  width: 100%;
  height: 56.25vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  user-select: none;
}
video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 1 !important;
}
#video-parent-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@font-face {
  font-family: Moire-extra-bold;
  src: url(./assets/MoireW01ExtraBold-602728ac.ttf);
}
@font-face {
  font-family: Moire-bold;
  src: url(./assets/MoireBold-f1e609a2.ttf);
}
@font-face {
  font-family: euro;
  src: url(./assets/eurostilecnd-197bc465.woff);
}
@font-face {
  font-family: euro-regular;
  src: url(./assets/euro-regular-71466acc.otf);
}
@font-face {
  font-family: good-times-rg;
  src: url(./assets/good_times_rg-1020aff9.otf);
}
@keyframes bounce-in {
  0% {
    transform: scale(2.5);
    opacity: 0;
  }
  30% {
    opacity: 0.5;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.25);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
@keyframes draw-ball {
  0% {
    top: 755rem;
    width: 10.5rem;
    height: 10.5rem;
    left: 73rem;
  }
  5% {
    top: 500rem;
    width: 10.5rem;
    height: 10.5rem;
    left: 73rem;
  }
  10% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  13% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  15% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  17% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  19% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  21% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  23% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  25% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  27% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  29% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  31% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  33% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  35% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  37% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  39% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  41% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  43% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  45% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  47% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  49% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  51% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  53% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  55% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  57% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  59% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  61% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  63% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  65% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  67% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  69% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  71% {
    width: 32rem;
    height: 32rem;
    top: 11.05rem;
    left: 60.9rem;
  }
  73% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  75% {
    width: 32rem;
    height: 32rem;
    top: 11rem;
    left: 61rem;
  }
  80% {
    top: -8rem;
    width: 10.5rem;
    height: 10.5rem;
    left: 72rem;
  }
  to {
    top: -20rem;
    width: 10.5rem;
    height: 10.5rem;
    left: 72rem;
  }
}
@keyframes popOut {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(50%) rotate(2deg);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html {
  font-size: 1vw;
}
body {
  padding: 0;
  margin: 0;
  background: black;
  z-index: 60;
}
#main-container {
  background-color: #000;
  width: 100%;
  height: 56vw;
  display: flex;
}
#left-container {
  height: 100%;
  width: 58%;
  background: linear-gradient(90deg, #800500, #e11d06, #ff1b00);
}
#right-container {
  height: 100%;
  width: 42%;
  background-color: #ff1b00;
}
.black-red-gradient-bg {
  background: rgb(17, 3, 2);
  background: linear-gradient(
    0deg,
    rgba(17, 3, 2, 1) 10%,
    rgba(122, 10, 10, 1) 83%,
    rgba(145, 3, 3, 1) 100%
  );
}
.transparent-bg {
  background-color: #0000;
}
#left-top {
  margin: 3rem 2rem 0.1rem 4rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#left-center {
  margin-right: 2rem;
  margin-left: 4rem;
}
.number-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.2rem;
}
#left-bottom {
  margin-top: 0.1rem;
  margin-left: 4.3rem;
  margin-right: 2rem;
  display: flex;
  align-items: start;
}
#right-top {
  margin: 3rem 7rem 0rem 6rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.gold-black-text {
  background: -webkit-linear-gradient(top, #fce300 30%, #796719 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.draw-text {
  font-family: Moire-extra-bold;
  font-size: 4rem;
  filter: drop-shadow(0rem -0.05rem 0.2rem #000);
  -webkit-text-stroke: 0.1rem #ffef13;
}
.shadow-text {
  filter: drop-shadow(0rem 0rem 0.2rem rgb(28, 26, 26));
}
.almarai-font {
  font-family: Almarai;
}
.draw-number-text {
  color: #fff;
  font-family: Moire-bold;
  -webkit-text-stroke: 0.15rem #fff;
  text-shadow: 0rem 0rem 0.4rem #000;
  font-size: 3.4rem;
  margin-left: 0.6rem;
  -webkit-transform: scale(1, 1.2);
  -moz-transform: scale(1, 1.2);
  -o-transform: scale(1, 1.2);
  transform: scaleY(1.2);
}
.orange-gradient-bg {
  background-image: url(./images/number-selected-orange-bg.png);
  background-size: cover;
  background-color: #ffa91b;
}
.heads {
  font-family: euro;
  letter-spacing: 0.1rem;
  font-size: 2.6rem;
  height: 4rem;
  width: 13rem;
  text-align: center;
  line-height: 3.5rem;
  margin-left: auto;
}
.yellow-gradient-bg {
  background-image: url(./images/number-selected-yellow-bg.png);
  background-size: cover;
  background-color: #ff0;
}
.yellow-special-gradient-bg {
  background-image: url(./images/heads.png);
  background-size: 100% 100%;
}
.orange-special-gradient-bg {
  background-image: url(./images/tails.png);
  background-size: 100% 100%;
}
.white-special-gradient-bg {
  background-image: url(./images/evens.png);
  background-size: 100% 100%;
}
.silver-grandien-bg {
  background: #ffffff;
  background: -moz-linear-gradient(
    top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
  );
  background: -webkit-linear-gradient(
    top,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
  );
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#f6f6f6",GradientType=0);
}
.number-selected {
  height: 4.7rem;
  font-size: 3rem;
  width: 5rem;
  font-family: euro-regular, sans-serif;
  border-radius: 1.3rem;
  margin-left: 0.15rem;
  animation: bounce-in 0.6s ease-out;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  -webkit-text-stroke: 0.12rem #000;
  z-index: 1000;
}
.number-unselected {
  height: 4.8rem;
  font-size: 3rem;
  width: 5.05rem;
  font-family: euro-regular, sans-serif;
  color: #f90f03;
  border-radius: 1.4rem;
  margin-left: 0.15rem;
  -webkit-text-stroke: 0.12rem #f90f03;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.number-text {
  padding-top: 0.9rem;
  -webkit-transform: scale(1, 1.08);
  -moz-transform: scale(1, 1.08);
  -o-transform: scale(1, 1.08);
  transform: scaleY(1.08);
}
.number-unselected-bg {
  background-image: url(./images/num4.png);
  opacity: 0.65;
  background-size: 100% 100%;
}
.count-down {
  margin-top: -1.4rem;
  font-size: 7.5rem;
  width: 100%;
  margin-left: 10.5rem;
  font-family: euro;
  letter-spacing: 0.2rem;
}
.blink-animation {
  animation: blink 1s;
  animation-iteration-count: infinite;
}
.pick-text {
  width: 100%;
  margin-left: 8rem;
  margin-top: 0.8rem;
  font-family: good-times-rg;
  font-size: 3.7rem;
  color: red;
}
#hit-win-table-container td {
  padding-right: 5rem;
}
#hit-win-table-container {
  margin-left: 5.2rem;
  margin-top: 2rem;
  border-collapse: separate;
  font-size: 3rem;
}
.hit-win-table-head {
  font-family: euro;
  font-size: 3.2rem;
  background-color: #fef110;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0rem 0rem 0.2rem #333);
  margin-top: -4rem;
  width: 17rem;
  display: flex;
  justify-content: space-between;
}
.squash {
  -webkit-transform: scale(1.1, 1);
  -moz-transform: scale(1.1, 1);
  -o-transform: scale(1.1, 1);
  transform: scaleX(1.1);
}
.hit-win-table-value {
  color: #fff;
  font-size: 3.2rem;
  font-family: euro;
  text-shadow: 0rem 0rem 0.5rem rgb(74 9 4);
  display: flex;
  justify-content: space-between;
  width: 20rem;
  margin-top: -6.5rem;
}
.pipe-image {
  width: 39rem;
  height: 56rem;
  z-index: 0;
  position: absolute;
  left: 57.6rem;
}
.pipe-image-transparent {
  width: 39rem;
  height: 56rem;
  z-index: 100;
  position: absolute;
  left: 57.6rem;
}
.ball-image {
  width: 0rem;
  z-index: 50;
  position: absolute;
}
.animate-draw-ball {
  animation-name: draw-ball;
  animation-duration: 2.5s;
}
.animate-shake-ball {
  animation: shake-ball 0.1s;
  animation-iteration-count: infinite;
}
.count-down-text {
  background: linear-gradient(
    to top,
    rgb(105, 86, 34),
    rgb(253, 216, 93),
    rgb(255, 247, 130)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.1rem #fdd85d;
  filter: drop-shadow(0rem -0.05rem 0.3rem #2d0505);
  -webkit-transform: scale(1.15, 1);
  -moz-transform: scale(1.15, 1);
  -o-transform: scale(1.15, 1);
  transform: scaleX(1.15);
}
.bets-closed {
  margin-top: 0rem;
  font-size: 5.2rem;
  width: 100%;
  margin-left: 3.2rem;
  letter-spacing: 0.3rem;
  font-family: euro;
}
.red-text {
  color: red;
}
.special-place-holder {
  opacity: 0.3;
  background: #0000008f;
  border-radius: 1.1rem;
  color: #19000024;
}