.thewheel .modal-body {
  padding: 0;
}
  .wheelContainer {
    background-color: #18bb9b;
    color: #4b8278;
    padding: 0.5rem;
  }
  .wheelHolder {
    padding: 1rem;
    background-color: #083930;
    background-image: url(/images/fortune-wheel/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 5rem 0;
  }
  .wheelTitle {
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 0.25rem;
    font-size: 2rem;
    filter: drop-shadow(0px 0px 4px #0a5748);
    text-transform: uppercase;
  }
  .wheelLine .wheelItemHolder,
  .wheelRow {
    width: 10%
  }
  .wheelItemHolder {
    padding: 0.25rem;
  }
  .wheelItemHolder.focus {
    background: #ffff66;
      border-radius: 0.25rem;
  }
  .wheelItemHolder.unfocus {
    filter:grayscale(1);
  }
  .wheelItem {
    display: block;
    max-height: 121px;
    max-width: 139px;
    background: url(/images/fortune-wheel/picture1.png) no-repeat center;
    background-size: 100%;
    margin: auto;
  }
  .wheelItem.picture1 {
    background-image: url(/images/fortune-wheel/picture1.png);
  }
  .wheelItem.picture1.used {
    background-image: url(/images/fortune-wheel/picture1-used.png);
  }
  .wheelItem.picture2 {
    background-image: url(/images/fortune-wheel/picture2.png);
  }
  .wheelItem.picture2.used {
    background-image: url(/images/fortune-wheel/picture2-used.png);
  }
  .wheelItem.picture3 {
    background-image: url(/images/fortune-wheel/picture3.png);
  }
  .wheelItem.picture3.used {
    background-image: url(/images/fortune-wheel/picture3-used.png);
  }
  .wheelItem.exclusive-picture {
    background-image: url(/images/fortune-wheel/exclusive-picture.png);
  }
  .wheelItem.exclusive-picture.used {
    background-image: url(/images/fortune-wheel/exclusive-picture-used.png);
  }
  .wheelItem.exclusive-video {
    background-image: url(/images/fortune-wheel/exclusive-video.png);
  }
  .wheelItem.exclusive-video.used {
    background-image: url(/images/fortune-wheel/exclusive-video-used.png);
  }
  .wheelItem.exclusive-game {
    background-image: url(/images/fortune-wheel/exclusive-game.png);
  }
  .wheelItem.exclusive-game.used {
    background-image: url(/images/fortune-wheel/exclusive-game-used.png);
  }
  .wheelItem.vip {
    background-image: url(/images/fortune-wheel/vip.png);
  }
  .wheelItem.vip.used {
    background-image: url(/images/fortune-wheel/vip-used.png);
  }
  .wheelItem.unlisted {
    background-image: url(/images/fortune-wheel/unlisted.png);
  }
  .wheelItem.unlisted.used {
    background-image: url(/images/fortune-wheel/unlisted-used.png);
  }
  .wheelMiddle {
    width: 80%;
  }
  .wheelLeft {
    display: block;
    margin: auto;
    text-align: center;
    padding: 0 2rem;
  }
  .wheelPushButton {
    display: block;
    max-height: 156px;
    max-width: 591px;
    background: url(/images/fortune-wheel/push-1-button.png) no-repeat center;
    background-size: 100%;
    margin: 1.5rem auto;
  }
  .wheelPushButton:hover {
    filter: drop-shadow(0px 0px 20px #106005);
    z-index: 10;
  }
  .wheelPushButton10 {
    background-image: url(/images/fortune-wheel/push-10-button.png);
  }
  
  .wheelPushButton.disabled,
  .wheelPushButton.disabled:hover
  {
    filter:grayscale(1);
  }
  
  .wheelErrorHolder {
    display: none;
      border-radius: 0.5rem;
      padding: 0.5rem;
      margin-right: auto !important;
      margin-left: auto !important;
      background-color: #E74C3C;
      border-color: #e43725;
      color: #fff;
      flex: 0 0 83.3333333333%;
      max-width: 83.3333333333%;
  }
  .wheelErrorHolder.show {
    display: block;
  }
  .wheelSuccessHolder {
    display: none;
      border-radius: 0.5rem;
      padding: 0.5rem;
      margin-right: auto !important;
      margin-left: auto !important;
      background-color: #18bb9b;
      border-color: #18bb9b;
      color: #fff;
      flex: 0 0 83.3333333333%;
      max-width: 83.3333333333%;
  }
  .wheelSuccessHolder.show {
    display: block;
  }
  .wheelInfoHolder {
    display: none;
      border-radius: 0.5rem;
      /*padding: 0.5rem;
      margin-right: auto !important;
      margin-left: auto !important;
    font-size: 30px;
    font-weight: bold;*/
      color: #fff;
      flex: 0 0 83.3333333333%;
      max-width: 83.3333333333%;
  }
  .wheelInfoHolder.show {
    display: block;
  }
  .wheelRight {
    display: block;
    margin: auto;
    padding: 0 2rem;
  }
  .wheelRules .h5 {
    text-align: center;
    color: #fdfa2b;
    font-weight: bold;
  }
  .wheelRules ul {
    line-height: 1.5;
  }
  .wheelRules > ul {
    transition: all 1s ease-in-out;
  }
  .wheelRules > ul:hover {
    background: #2f4f43;
    border-radius: 2rem;
  }


@media (max-width: 767px) {

  .wheelHolder {
    padding: 0;
    background-image: url(/images/fortune-wheel/bg-mobile.png);
    background-size: contain;
    background-position: bottom center;
  }
  .wheelLine .wheelItemHolder,
  .wheelRow {
    width: 16.6666666667%
  }
  .wheelMiddle {
    width: 66.6666666667%;
  }
  
  .wheelRules ul {
    font-size: 80%;
    line-height: 1.3;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .wheelRules {
    font-size: 80%;
  }
}