/*CSS for cell : randomHopsGame*/
  
#stage {
    position:absolute;
    margin: 0 auto;
    width: 810px;
    height:370px;
    padding: 0 0 0px;
    top: 0px;
    left:0px;
  }
  
  .perspective-on {
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
            perspective: 1000px;    /* Setting the perspective of the contents of the stage but not the stage itself*/
  }
  .perspective-off {
    -webkit-perspective: 0;
       -moz-perspective: 0;
            perspective: 0;
  }
  
  #rotate {
    margin: 0 auto 0;
    width: 810px;
    height: 370px;
    padding-top: 145px;
    padding-left: 64px;
    /* Ensure that we're in 3D space */
    transform-style: preserve-3d;
  }
  
  .ring {
    position: relative;
    height: 80px;
    width: 340px;
    float: left;
    transform-style: preserve-3d;
  
  }
  .slot {
    position: absolute;
    width: 340px;
    height: 80px;
    box-sizing: border-box;
    opacity: 0.9;
    color: ghostwhite; /* #7D3BBB; #141A54; */
    border : 3px solid #feb300; /*thin solid ghostwhite;*/
    border-top: transparent;
    border-bottom: transparent;
    border-radius: 35px;
    font-size: 30px;
    font-weight: bold;
    line-height: 80px;
    margin: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  
  .backface-on {
    -webkit-backface-visibility: visible;
       -moz-backface-visibility: visible;
            backface-visibility: visible;
  }
  
  
  .go {
    display: block;
    margin: 0 auto 20px;
    padding:10px 30px;
    font-size: 20px;
    cursor: pointer;
  }
  label {
    cursor: pointer;
    display: inline-block;
    width: 45%;
    text-align: center;
  }
  .tilted {
    transform: rotateY(45deg);
  }

  .highlight-answer
  {
    position:absolute;
    left:4px;
    top:133px;
    border : 3px solid #7D3BBB;
    border-radius: 40px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .highlight-answer-src
  {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #feb300;
    font-size: 30px;
    margin-left: 40px;
    margin-right: 40px;
  }

  .text-randhops-introduction
  {
    display: flex;
    position:absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 40px;
    color:ghostwhite; /*#7D3BBB;*/
    font-size:18px;

    border-radius:5px;
    /*font-family: 'Bubblegum Sans';*/
    font-family:'Bubblegum sans';
    white-space: pre-wrap;
  }

  .yes-no-randHops-button
  {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: absolute;
  }

.time-circle-rhops
{
  position: absolute;
  display: flex;
  flex-basis: auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.rationale-desc-spin-hops
{
  position: absolute;
  border-radius: 6px;
}

  

.message-notification-xx{
    background: linear-gradient(to right, salmon, rgb(250, 76, 57));
    border-radius:50%; 
    text-align:center; 
    position:absolute;
    color: ghostwhite;
    left: 469px;  
    bottom: 18px;
    z-index: 700;

 }

 .traffic-lights-lorn
 {
  position: absolute;
  left:0px;
  top:5px;
  z-index: 650;
 }

 .traffic-lights-lorn:hover
 {
    cursor: pointer;
 }

 .achievement-icon
 {
    position:absolute;
    left:5px;
    bottom:10px;
    z-index:600;

 }
 .achievement-icon:hover
 {
   cursor: pointer;
   transform: scale(1.2);
 }

 .rationale-icon
 {
  position:absolute;
  right:5px;
  top:3px;
  z-index:2900;
 }

 .rationale-icon:hover
 {
   cursor: pointer;
 }

  /*=====*/
  .spin-0     { transform: rotateX(-3719deg); }
  .spin-1     { transform: rotateX(-3749deg); }
  .spin-2     { transform: rotateX(-3779deg); }
  .spin-3     { transform: rotateX(-3809deg); }
  .spin-4     { transform: rotateX(-3839deg); }
  .spin-5     { transform: rotateX(-3869deg); }
  .spin-6     { transform: rotateX(-3899deg); }
  .spin-7     { transform: rotateX(-3929deg); }
  .spin-8     { transform: rotateX(-3959deg); }
  .spin-9     { transform: rotateX(-3989deg); }
  .spin-10    { transform: rotateX(-4019deg); }
  .spin-11    { transform: rotateX(-4049deg); }
  /*=====*/
  @keyframes back-spin {
      /*0%    { transform: rotateX(0deg); }*/
      100%  { transform: rotateX(30deg); }
  }
  @keyframes tiltin {
      0%    { transform: rotateY(0deg);}
      50%   { transform: rotateY(0deg);}
      100%  { transform: rotateY(45deg);}
  }
  @keyframes tiltout {
      0%    { transform: rotateY(45deg);}
      100%  { transform: rotateY(0deg);}
  }
  
  @keyframes spin-0 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3719deg); }
  }
  @keyframes spin-1 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3749deg); }
  }
  @keyframes spin-2 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3779deg); }
  }
  @keyframes spin-3 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3809deg); }
  }
  @keyframes spin-4 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3839deg); }
  }
  @keyframes spin-5 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3869deg); }
  }
  @keyframes spin-6 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3899deg); }
  }
  @keyframes spin-7 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3929deg); }
  }
  @keyframes spin-8 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3959deg); }
  }
  @keyframes spin-9 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-3989deg); }
  }
  @keyframes spin-10 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-4019deg); }
  }
  @keyframes spin-11 {
      0%    { transform: rotateX(30deg); }
      100%  { transform: rotateX(-4049deg); }
  }