.container {
  width: 400px;
  height: auto;
  margin: 0 auto;
  position: relative;
  margin-top: 25px;
}

.display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  border: 1px solid #f5f5f5;
  border-radius: 20px; 
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  margin: 20px auto;
}

.marker {
  position: absolute;
  width: 60px;
  left: 42%;
  top: -15px;
  z-index: 2;
}

.marker_no_login {
  position: absolute;
  width: 60px;
  left: 169px;
  top: -15px;
  z-index: 2;
}

.reward_modal
{
  display:inline-block;
  font-size: 1.5em;
}

.name_reward_modal
{
  font-weight: 400;
}

.chance_span
{
  font-size: 0.8em;
}

.img_reward_modal
{
  width: 55px;
  border-radius: 4px;
  height: auto;
}

.p_explain_modal
{
  font-size: 1.25em;
}

.button-wof {
  display: block;
  width: 280px;
  margin: 40px auto;
  cursor: pointer;
  margin-bottom: 8px;
}

.button-wof2 {
  display: block;
  width: 280px;
  margin: 40px auto;
  cursor: pointer;
  margin-bottom: 8px;
  cursor: no-drop;
  filter: grayscale(0.6);
}

.button-wof:hover {
  opacity: 0.8;
}

.blur {
  animation: blur 10s;
}

@keyframes blur {
  0% {
    filter: blur(1.5px);
  }
  80% {
    filter: blur(1.5px);
  }
  100% {
    filter: blur(0px);
  }
}

.ban_msg_win
{
    color: black;
    font-size: 3em;
    padding: 16px;
    background-color: #f5f5f5;
    width: 100%;
    height: 35%;
    position: absolute;
    z-index: 10;
    top: 207px;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    transition: visibility 0s, opacity 1.4s linear;
}
.button_back
{
    min-width: 100px;
    background: linear-gradient(to right,#4e7bbc 1000%,#a1c6ea 28%,#bbd1ea 10%,#f5f5f5 10%);
    white-space: nowrap;
    border-radius: 15px;
    transition: all .2s ease-out,color .2s ease-out;
    border: 0;
    cursor: pointer;
    font-weight: 400;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%);
    z-index: 0;
    position: relative;
    padding: 14px;
    font-size: 0.75em;
}
#div-timer
{
    text-align: center;
    font-size: 1.5em;
    border: 3px dashed;
    border-radius: 6px;
    padding: 10px;
    margin-top: 20px;
}
#countdown-wof
{
   font-size: 2em;
}
.msg_premium
{
  padding: 8px;
  border: 2px solid #daaa32;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: auto;
}
.loader{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}
/* LOADER 7 */

#loader-7{
  -webkit-perspective: 120px;
  -moz-perspective: 120px;
  -ms-perspective: 120px;
  perspective: 120px;
}

#loader-7:before{
  content: "";
  position: absolute;
  left: 25px;
  top: 25px;
  width: 50px;
  height: 50px;
  background-color: #f5f5f5;
  animation: flip 1s infinite;
}

@keyframes flip {
  0% {
    transform: rotate(0);
}

50% {
    transform: rotateY(180deg);
}

100% {
    transform: rotateY(180deg)  rotateX(180deg);
}
}

.rainbow {
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 3s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 3s infinite;
  
  /* Standar Syntax */
  animation: rainbow 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow {
    0%{color: #000;}
  10%{color: #eba300;}   
    20%{color: #eba300;}
  30%{color: #eba300;}
    40%{color: #eba300;}
  50%{color: #eba300;}
    60%{color: #000;}
  70%{color: #000;}
  80%{color: #000;}
  90%{color: #000;}
    100%{color: #000;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
    0%{color: #000;}
  10%{color: #eba300;}   
    20%{color: #eba300;}
  30%{color: #eba300;}
    40%{color: #eba300;}
  50%{color: #eba300;}
    60%{color: #000;}
  70%{color: #000;}
  80%{color: #000;}
  90%{color: #000;}
    100%{color: #000;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: #000;}
  10%{color: #ffc83d;}   
    20%{color: #ffc83d;}
  30%{color: #ffc83d;}
    40%{color: #ffc83d;}
  50%{color: #ffc83d;}
    60%{color: #000;}
  70%{color: #000;}
  80%{color: #000;}
  90%{color: #000;}
    100%{color: #000;}
}

.rainbow2 {
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow2 3s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow2 3s infinite;
  
  /* Standar Syntax */
  animation: rainbow2 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow2 {
    0%{color: #F5F5F5;}
  10%{color: #eba300;}   
    20%{color: #eba300;}
  30%{color: #eba300;}
    40%{color: #eba300;}
  50%{color: #eba300;}
    60%{color: #F5F5F5;}
  70%{color: #F5F5F5;}
  80%{color: #F5F5F5;}
  90%{color: #F5F5F5;}
    100%{color: #F5F5F5;}
}

/* Internet Explorer */
@-ms-keyframes rainbow2{
    0%{color: #F5F5F5;}
  10%{color: #eba300;}   
    20%{color: #eba300;}
  30%{color: #eba300;}
    40%{color: #eba300;}
  50%{color: #eba300;}
    60%{color: #F5F5F5;}
  70%{color: #F5F5F5;}
  80%{color: #F5F5F5;}
  90%{color: #F5F5F5;}
    100%{color: #F5F5F5;}
}

/* Standar Syntax */
@keyframes rainbow2{
    0%{color: #F5F5F5;}
  10%{color: #ffc83d;}   
    20%{color: #ffc83d;}
  30%{color: #ffc83d;}
    40%{color: #ffc83d;}
  50%{color: #ffc83d;}
    60%{color: #F5F5F5;}
  70%{color: #F5F5F5;}
  80%{color: #F5F5F5;}
  90%{color: #F5F5F5;}
    100%{color: #F5F5F5;}
}

.rainbow_event {
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow_event 3s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow_event 3s infinite;
  
  /* Standar Syntax */
  animation: rainbow_event 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow_event {
    0%{color: #003E1F;}
  10%{color: #D90429;}   
    20%{color: #D90429;}
  30%{color: #D90429;}
    40%{color: #D90429;}
  50%{color: #D90429;}
    60%{color: #003E1F;}
  70%{color: #003E1F;}
  80%{color: #003E1F;}
  90%{color: #003E1F;}
    100%{color: #003E1F;}
}

/* Internet Explorer */
@-ms-keyframes rainbow_event{
    0%{color: #003E1F;}
  10%{color: #D90429;}   
    20%{color: #D90429;}
  30%{color: #D90429;}
    40%{color: #D90429;}
  50%{color: #D90429;}
    60%{color: #003E1F;}
  70%{color: #003E1F;}
  80%{color: #003E1F;}
  90%{color: #003E1F;}
    100%{color: #003E1F;}
}

/* Standar Syntax */
@keyframes rainbow_event{
    0%{color: #003E1F;}
  10%{color: #D90429;}   
    20%{color: #D90429;}
  30%{color: #D90429;}
    40%{color: #D90429;}
  50%{color: #D90429;}
    60%{color: #003E1F;}
  70%{color: #003E1F;}
  80%{color: #003E1F;}
  90%{color: #003E1F;}
    100%{color: #003E1F;}
}

.card
{
  border:2px dashed;
  width:22rem;
  padding:8px;
  border-radius:4px;
  margin: 15px;
}
@media(min-width:583px) and (max-width:1280px) 
{
  .ban_msg_win
  {
    height: 42%;
  }

}

@media(min-width:420px) and (max-width:535px) 
{
  .ban_msg_win
  {
    height: 38%;
    width: 100%;
  }
  .btn-lg
  {
    font-size: 14px;
  }
  #div-timer
  {
    width: 80%;
    margin: auto;
    margin-top: 20px;
  }
  #ban-wof
  {
    width: 85%;
  }

}

@media(min-width:290px) and (max-width:419px) 
{
  .ban_msg_win
  {
    height: 56%;
    width: 100%;
  }
  .btn-lg
  {
    font-size: 14px;
  }
  #div-timer
  {
    width: 80%;
    margin: auto;
    margin-top: 20px;
  }
  .reward_modal
  {
    font-size: 1.05em;
  }
  .img_reward_modal
  {
    width: 48px;
  }
  .p_explain_modal
  {
    font-size: 1.1em;
  }
  #ban-wof
  {
    width: 85%;
  }
  .msg_premium
  {
    width:80%;
  }

}

@media(min-width:345px) and (max-width:375px) 
{
  .ban_msg_win
  {
    height: 75%;
    width: 100%;
  }
  .container {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    margin-top: 0;
  }

}

@media(min-width: 768px) and (max-width: 991px)
{
  .button_back
  {
    margin-top: 25px;
  }
}