.wheelContainer {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
    background-position: top;
  }
  h4{
    color: white;
  }
  /* .wheelContainer{
    position:relative;
    width:100%;
    height:100%;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    left:50%;
    top:18%;
    transform: translate(-50%, -50%) ; 
  } */
  
  .wheelContainer{
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    /* margin-left: auto; */
    /* margin-right: auto; */
    left: 50%;
    top: 15px;
    transform: translate(-50%, -50%);
  }
  
  .wheelSVG{
    position:relative;
    width:100%;
    visibility:hidden;
    overflow:visible;
    
  }
  .peg{
    visibility:hidden;
  }
  .wheelOutline, .valueContainer, .toast, .centerCircle{
    pointer-events:none;
  }
  
  .wheelText{
    pointer-events:none;
    /* font-size:28px; */
    /* fill:red; */
    text-anchor:middle;
    font-family:'Fjalla One', Arial, sans-serif;
    -webkit-user-select: none;
    user-select:none;
    writing-mode: rl-tb;
    font-weight: 800;
  }
  
  .toast {
    position:absolute;
    background-color:#26bfca;
    border-radius:12px;
    opacity:0;
    text-align:center;
    width: 80%;
    height: 55vh;
    background: url(/assets/media/bg-toast.png);
  }
  .toast p{
    clear: both;
    font-family:'Fjalla One', Arial, sand-serif;
    margin:23px;
    font-size:30px;
    color:#ededed;
    letter-spacing:-0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height:32px;
    -webkit-transition: font-size .2s ease;
    transition: font-size .2s ease;
    -webkit-transition: line-height .2s ease;
    transition: line-height .2s ease;
  }
  .mySpinBtn{
    position: sticky;
    z-index: 1222;
    margin-top: 52%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 28%;
    background: aqua;
    font-size: 25px;
    border-top-left-radius: 22px;
    border-bottom-right-radius: 22px;
  }
  
  .cngform{
    
  }
  .bgimage{
    width:100%;
    position: relative;
    top: 30%;
  }
  
  @media only screen and (max-width : 480px) {
    .toast p, .toast span{
      font-size: 20px;
      line-height:18px;
      color: white;
    }
    .wheelContainer{
      width: 100%;
    }
  }
  
  @media only screen and (min-width : 1400px) and (max-width : 1600px) {
    .wheelContainer{
     width: 60%;
     left: 30%;
     top: 18%
     }
    .bgimage{
      width: 60%;
           left: 20%;
     }
   }
  
  @media only screen and (min-width : 1200px) and (max-width : 1400px) {
    .wheelContainer{
     width: 60%;
     left: 30%;
     top: 18%;
     }
    .bgimage{
      width: 60%;
      left:20%;
     }
  }
  
  @media only screen and (min-width : 525px) and (max-width : 600px) {
    .wheelContainer{
      width: 500px;
    }
  }
  
  @media only screen and (min-width : 801px)  {
    .toast p, .toast span{
      font-size:58px;
      line-height:60px;
    }
  }
  
  
  @media only screen and (max-height : 480px) {
    .toast p, .toast span{
      font-size:33px;
      line-height:35px;
    }
  }