.body{
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  background-image: url(21a04d47b0c68b4e7e7b.png);
  background-size: auto 110%;
  background-position: center;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: "Roboto Condensed", sans-serif;
}

.bonus_body{
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  background-image: url(7286a68fa5675535411e.png);
  background-size: auto 110%;
  background-position: center;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: "Roboto Condensed", sans-serif;
}

@media only screen and (max-width: 1200px) {
  body {
    /*u ovom delu je stajala bg_small.jpg*/
    background-image: url(21a04d47b0c68b4e7e7b.png);
  }
}

#reels {
  display: flex;
  width: 100vw;
  height: calc((4 / 4) * 100vw);
  max-height: calc(90vh - 50px - 40px);
  max-width: calc((4 / 4) * (90vh - 50px - 40px));
}

.reel {
  overflow: hidden;
  width: 25%;
  height: 100%;
}

.reel > .icons > img {
  width: calc(100% + 6px);
  margin: -3px 0 0 -3px;
  height: auto;

  /* enable gpu accelaration, fixes iOS flicker */
  transform: translate3d(0, 0, 0);
}

#controls {
  height: 62.5px;
  display: flex;
  align-items: center;
  justify-content: space-center;
  align-items: center;
  padding: 5px 30px;
}

#spin{
  height: 100px;
  width: 300px;
  margin: auto;
  opacity: 0;
}

#controls label {
  display: flex;
  align-items: center;
  margin: 0;
}

#controls label input {
  margin-right: 5px;
}

input[type="checkbox"] {
  width: 40px;
  height: 40px;
}

#jackpot {
  color: #d5ad6d;
  font-size: 40px;
  text-align: center;
}

#slot.inverted .reel {
  transform: scaleY(-1);
}

#slot.inverted .reel > .icons > img {
  transform: scaleY(-1);
}

#ulog{
  width: 200px;
  background-color: rgba(0, 0, 0, 0.833);
  color: #fff;
  border-color: #fff;
  border-width: 1px;
  border-radius: 5px 0px 0px 5px;
  
}


#statesPanel{
  margin-right: 30px;
  margin-top: 330px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  color: #fff;
  padding: 4rem 10rem 5.5rem;
  animation: flicker 1.5s infinite alternate;     
}
label{
  margin-top: 40px;
}
label::-moz-selection {
  color: #08f;
}

label::selection {
  color: #08f;
}

label:focus {
  outline: none;
}

@keyframes flicker {
    
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    
      text-shadow:
          -0.2rem -0.2rem 1rem #fff,
          0.2rem 0.2rem 1rem #fff,
          0 0 2rem #08f,
          0 0 4rem #08f,
          0 0 6rem #08f,
          0 0 8rem #08f,
          0 0 10rem #08f;
           
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}


#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.852); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.cards{
  z-index: 999;
  color: #fff;
  display: none;
  position: fixed;
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
}

.cards1{
  z-index: 999;
  color: #fff;
  display: none;
  position: fixed;
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
}

.card_r{
  display: none;
  padding: 30px;
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: rgb(82, 82, 82);
  color:#fff;
  margin: 10px;
  border-radius: 15px;
}

.card{
  min-width: 40px;
  padding: 30px;
  background-color: rgb(39, 39, 39);
  margin: 10px;
  padding-top: 60px;
  padding-bottom: 60px;
  border-radius: 15px;
}