.x-lucky-wheel-share-component {
    padding-top: 3rem;
    background-color: #000;
    background-size: cover;
    background-position: 50%
  }
  
  @media (max-width: 767.98px) {
    .x-lucky-wheel-share-component {
      padding-top: 2rem
    }
  }
  
  .x-lucky-wheel-share-component .-heading-title {
    margin-bottom: .75rem;
    background: linear-gradient(180deg, #f5bc2f, #ffd879 33.5%, #f5bc2f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
  }
  
  @media (max-width: 767.98px) {
    .x-lucky-wheel-share-component .-heading-title {
      font-size: 2rem
    }
  }
  
  @media (max-width: 575.98px) {
    .x-lucky-wheel-share-component .-heading-title {
      font-size: 1.75rem
    }
  }
  
  .x-lucky-wheel-share-component .-tabs-wrapper {
    display: flex;
    align-items: center;
    justify-content: center
  }
  
  .x-lucky-wheel-share-component .-tabs-wrapper .-btn-tab {
    min-width: 140px;
    color: #fafafa;
    background: #841f49;
    border-radius: 0;
    font-size: 1.125rem;
    font-weight: 500
  }
  
  .x-lucky-wheel-share-component .-tabs-wrapper .-btn-tab.-active, .x-lucky-wheel-share-component .-tabs-wrapper .-btn-tab:hover {
    color: #fafafa;
    background: #c02363
  }
  
  .x-lucky-wheel-share-component .-tabs-wrapper .-btn-tab:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
  }
  
  .x-lucky-wheel-share-component .-tabs-wrapper .-btn-tab:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px
  }
  
  @media (max-width: 767.98px) {
    .x-lucky-wheel-share-component .-tabs-wrapper .-btn-tab {
      min-width: 120px;
      font-size: 1rem
    }
  }
  
  @media (max-width: 575.98px) {
    .x-lucky-wheel-share-component .-tabs-wrapper .-btn-tab {
      min-width: 100px;
      font-size: 1rem
    }
  }
  
  .x-lucky-wheel-share-component .-btn-spin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 300px;
    margin: auto;
    border-radius: .25rem;
    color: #fafafa;
    background: linear-gradient(180deg, #fdb368, #f25a59)
  }
  
  .x-lucky-wheel-share-component .-btn-spin:hover {
    color: #fafafa;
    background: linear-gradient(180deg, #dc9852, #c33938)
  }
  
  .x-lucky-wheel-share-component .-btn-spin.-disabled, .x-lucky-wheel-share-component .-btn-spin:disabled {
    -webkit-filter: brightness(.75);
    filter: brightness(.75)
  }
  
  .x-lucky-wheel-share-component .-btn-spin .-text {
    font-size: 1.25rem;
    font-weight: 600;
    text-shadow: none
  }
  
  .x-lucky-wheel-share-component .-btn-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    aspect-ratio: 1;
    color: #fafafa;
    background: hsla(0, 0%, 100%, .2);
    border-radius: 4px
  }
  
  .x-lucky-wheel-share-component .-btn-info:hover {
    color: #fafafa;
    background: hsla(0, 0%, 100%, .5)
  }
  
  .x-lucky-wheel-share-component .-btn-info.-disabled, .x-lucky-wheel-share-component .-btn-info:disabled {
    -webkit-filter: brightness(.75);
    filter: brightness(.75)
  }
  
  @media (max-width: 767.98px) {
    .x-lucky-wheel-share-component .-btn-info {
      width: 36px
    }
  }
  
  .x-lucky-wheel-share-component .-btn-info-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    position: absolute;
    right: 2rem;
    z-index: 1
  }
  
  @media (max-width: 767.98px) {
    .x-lucky-wheel-share-component .-btn-info-wrapper {
      flex-direction: column;
      align-items: flex-end;
      right: 1rem
    }
  }
  
  .x-lucky-wheel-share-component .-no-result-wrapper {
    padding: 3rem 0
  }
  
  @media (max-width: 767.98px) {
    .x-lucky-wheel-share-component .-wheel-entry-wrapper {
      padding: 0 1rem
    }
  }
  
  .x-wheel-progress-wrapper {
    margin-top: -17rem;
    padding: 18.5rem 0 2.5rem;
    color: #fafafa;
    background: linear-gradient(180deg, #731e58, #5c255a)
  }
  
  @media (max-width: 575.98px) {
    .x-wheel-progress-wrapper {
      margin-top: -48%;
      padding: 53% 0 2.5rem
    }
  }
  
  .x-wheel-progress-wrapper .-inner-wrapper {
    max-width: 550px;
    margin: auto;
    text-align: center
  }
  
  @media (max-width: 767.98px) {
    .x-wheel-progress-wrapper .-inner-wrapper {
      font-size: .9375rem
    }
  }
  
  @media (max-width: 575.98px) {
    .x-wheel-progress-wrapper .-inner-wrapper {
      font-size: .875rem
    }
  }
  
  .x-wheel-progress-wrapper .-progress {
    position: relative;
    padding: 3px;
    height: 28px;
    border-radius: 4px;
    background: #3e1739
  }
  
  .x-wheel-progress-wrapper .-progress-bar {
    color: #fafafa;
    background: linear-gradient(180deg, #de216e, #ff3385);
    border-radius: 4px
  }
  
  .x-wheel-progress-wrapper .-label {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }
  
  #luckyWheelResultModal .x-title-modal {
    font-weight: 600;
    color: #fbc844
  }
  
  #luckyWheelResultModal .-modal-content .-modal-header {
    padding-bottom: .5rem
  }
  
  .x-lucky-wheel-history-modal.-v2 .-modal-content .-modal-body {
    padding: 0 1rem 1.5rem
  }
  
  .x-wheel-result-modal-container {
    text-align: center
  }
  
  .x-wheel-result-modal-container .-reward-image-wrapper {
    position: relative;
    width: 160px;
    height: auto;
    margin: auto;
    aspect-ratio: 1;
    padding: 1.25rem
  }
  
  .x-wheel-result-modal-container .-reward-image-wrapper .-img-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    translate: -50% -50%;
    -webkit-animation: x-wheel-reward-spin 6s linear infinite;
    animation: x-wheel-reward-spin 6s linear infinite
  }
  
  .x-wheel-result-modal-container .-reward-image-wrapper .-img {
    position: relative;
    width: 100%;
    z-index: 1
  }
  
  .x-wheel-result-modal-container .-description {
    font-size: 1.125rem
  }
  
  .x-wheel-result-modal-container .-notice-box {
    width: 100%;
    margin: 2rem auto 0;
    padding: 1rem;
    color: #fdb368;
    background: #310b1d;
    border-radius: .5rem;
    overflow: hidden
  }
  
  .x-wheel-result-modal-container .-notice-box .-detail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem
  }
  
  .x-wheel-result-modal-container .-notice-box-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
    display: block;
    color: #fafafa
  }
  
  .x-wheel-result-modal-container .-ic-bell {
    width: 34px
  }
  
  @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-60%);
      transform: translateX(-60%);
      opacity: 0
    }
  
    to {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
    }
  }
  
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-60%);
      transform: translateX(-60%);
      opacity: 0
    }
  
    to {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
    }
  }
  
  .x-wheel-result-modal-container .-ic-chevron {
    -webkit-animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) infinite alternate both;
    animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) infinite alternate both
  }
  
  .x-wheel-result-modal-container .-ic-chevron.-right {
    rotate: -180deg
  }
  
  .x-wheel-result-modal-container .-btn-close-modal {
    width: 100%;
    margin-top: 1rem;
    padding: .75rem;
    color: #fafafa;
    background: #fdb368;
    transition: all .2s
  }
  
  .x-wheel-result-modal-container .-btn-close-modal:hover {
    color: #fafafa;
    background: #fec68e
  }
  
  .x-wheel-result-modal-container .-btn-notify {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    font-size: .9375rem;
    color: #fff;
    background: transparent;
    border-radius: 4px
  }
  
  .x-wheel-result-modal-container .-btn-notify:hover {
    color: #fafafa;
    background: hsla(0, 0%, 100%, .1)
  }
  
  @media (min-width: 992px) {
    .x-wheel-history-container {
      max-height: 550px
    }
  }
  
  .x-wheel-history-container .-bill-history-container {
    max-height: unset;
    overflow: unset
  }
  
  .x-wheel-history-container .-bill-history-container:last-child {
    padding-bottom: 1rem
  }
  
  .x-wheel-history-container .table .-transaction-body-wrapper {
    width: 130px
  }
  
  .x-wheel-history-container .table .-amount.-deposit {
    color: #2bb065
  }
  
  .x-wheel-history-container .table .-datetime {
    color: #d4d4d4
  }
  
  .x-wheel-history-container .table .-code, .x-wheel-history-container .table .-code a {
    color: #fdb368
  }
  
  .x-wheel-history-container .-btn-apply {
    min-width: 100px;
    padding: .5rem;
    font-size: .875rem;
    color: #fafafa;
    background: linear-gradient(180deg, #fdb368, #f25a59);
    border-radius: 5px
  }
  
  .x-wheel-history-container .-btn-apply:hover {
    color: #fafafa;
    background: linear-gradient(180deg, #dc9852, #c33938)
  }
  
  .x-wheel-history-container .-btn-apply.-disabled, .x-wheel-history-container .-btn-apply:disabled {
    -webkit-filter: brightness(.75);
    filter: brightness(.75)
  }
  
  .x-wheel-history-container .-btn-load-more {
    color: #fafafa;
    background: linear-gradient(180deg, #fdb368, #f25a59);
    border-radius: 5px
  }
  
  .x-wheel-history-container .-btn-load-more:hover {
    color: #fafafa;
    background: linear-gradient(180deg, #dc9852, #c33938)
  }
  
  .x-wheel-history-container .-btn-load-more.-disabled, .x-wheel-history-container .-btn-load-more:disabled {
    -webkit-filter: brightness(.75);
    filter: brightness(.75)
  }
  
  .x-wheel-history-container .-paginate-info {
    margin-top: .5rem;
    font-size: .75rem;
    font-style: italic
  }
  
  @-webkit-keyframes x-wheel-reward-heartbeat {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  
    10% {
      -webkit-transform: scale(.91);
      transform: scale(.91);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }
  
    17% {
      -webkit-transform: scale(.98);
      transform: scale(.98);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  
    33% {
      -webkit-transform: scale(.87);
      transform: scale(.87);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }
  
    45% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }
  
  @keyframes x-wheel-reward-heartbeat {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  
    10% {
      -webkit-transform: scale(.91);
      transform: scale(.91);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }
  
    17% {
      -webkit-transform: scale(.98);
      transform: scale(.98);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  
    33% {
      -webkit-transform: scale(.87);
      transform: scale(.87);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
    }
  
    45% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
    }
  }
  
  @-webkit-keyframes x-wheel-reward-spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
  
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
    }
  }
  
  @keyframes x-wheel-reward-spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
  
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
    }
  }
  
  .x-wheel-container {
    position: relative;
    width: 550px;
    height: auto;
    aspect-ratio: 1;
    margin: 4rem auto 3rem;
    padding: 1.5rem;
    overflow: hidden;
    background-size: contain
  }
  
  @media (max-width: 767.98px) {
    .x-wheel-container {
      width: 100%;
      max-width: 500px;
      margin-top: 2rem;
      margin-bottom: 1.5rem
    }
  }
  
  .x-wheel-container .-wheel-ring {
    width: 96%;
    height: 96%
  }
  
  .x-wheel-container .-center-pin, .x-wheel-container .-wheel-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }
  
  .x-wheel-container .-center-pin {
    width: 28%;
    height: auto;
    aspect-ratio: 1;
    background: #000;
    border: 3px solid orange;
    border-radius: 9999px
  }
  
  .x-wheel-container .-wheel-pin {
    position: absolute;
    bottom: 13%;
    left: 50%;
    z-index: 1;
    width: 76%;
    height: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
  
  .x-wheel-container .-reward-img {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;
    width: 47%;
    opacity: 0;
    visibility: hidden;
    -webkit-filter: drop-shadow(1px 2px 5px rgba(0, 0, 0, .5));
    filter: drop-shadow(1px 2px 5px rgba(0, 0, 0, .5));
    transition: all .2s
  }
  
  .x-wheel-container .-reward-img.-loaded {
    opacity: 1;
    visibility: visible;
    -webkit-animation: x-wheel-reward-heartbeat 1s ease-in-out .2s 2 both;
    animation: x-wheel-reward-heartbeat 1s ease-in-out .2s 2 both
  }
  
  .x-wheel-inner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92%;
    height: 92%;
    background: #141414;
    border-radius: 9999px;
    overflow: hidden;
    translate: -50% -50%
  }
  
  .x-wheel-inner-wrapper.-length-8 .-spinner {
    -webkit-transform: rotate(23deg);
    transform: rotate(23deg)
  }
  
  .x-wheel-inner-wrapper.-length-9 .-spinner {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg)
  }
  
  .x-wheel-inner-wrapper.-length-9 .-wheel-section {
    -webkit-clip-path: polygon(0 0, 53% 0, 100% 100%, 0 53%);
    clip-path: polygon(0 0, 53% 0, 100% 100%, 0 53%)
  }
  
  .x-wheel-inner-wrapper.-length-10 .-spinner {
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg)
  }
  
  .x-wheel-inner-wrapper.-length-10 .-wheel-section {
    -webkit-clip-path: polygon(0 0, 48% 0, 100% 100%, 0 48%);
    clip-path: polygon(0 0, 48% 0, 100% 100%, 0 48%)
  }
  
  .x-wheel-inner-wrapper.-length-11 .-spinner {
    -webkit-transform: rotate(29deg);
    transform: rotate(29deg)
  }
  
  .x-wheel-inner-wrapper.-length-11 .-wheel-section {
    -webkit-clip-path: polygon(0 0, 45% 0, 100% 100%, 0 45%);
    clip-path: polygon(0 0, 45% 0, 100% 100%, 0 45%)
  }
  
  .x-wheel-inner-wrapper.-length-11 .-wheel-content-wrapper {
    max-width: 46%
  }
  
  .x-wheel-inner-wrapper.-length-12 .-spinner {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
  }
  
  .x-wheel-inner-wrapper.-length-12 .-wheel-section {
    -webkit-clip-path: polygon(0 0, 42% 0, 100% 100%, 0 42%);
    clip-path: polygon(0 0, 42% 0, 100% 100%, 0 42%)
  }
  
  .x-wheel-inner-wrapper.-length-12 .-wheel-content-wrapper {
    max-width: 45%
  }
  
  .x-wheel-inner-wrapper.-length-11 .-wheel-content-wrapper .-text, .x-wheel-inner-wrapper.-length-12 .-wheel-content-wrapper .-text {
    font-size: .9375rem
  }
  
  @media (max-width: 575.98px) {
    .x-wheel-inner-wrapper.-length-11 .-wheel-content-wrapper .-text, .x-wheel-inner-wrapper.-length-12 .-wheel-content-wrapper .-text {
      font-size: .75rem
    }
  }
  
  .x-wheel-inner-wrapper .-spinner {
    width: 100%;
    height: 100%;
    transition: -webkit-transform 7s cubic-bezier(.35, 0, .2, 1);
    transition: transform 7s cubic-bezier(.35, 0, .2, 1);
    transition: transform 7s cubic-bezier(.35, 0, .2, 1), -webkit-transform 7s cubic-bezier(.35, 0, .2, 1)
  }
  
  .x-wheel-inner-wrapper .-wheel-section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 50%;
    height: 50%;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    rotate: calc(1turn/var(--wheel-length)*var(--wheel-index));
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-clip-path: polygon(0 0, 58% 0, 100% 100%, 0 58%);
    clip-path: polygon(0 0, 58% 0, 100% 100%, 0 58%)
  }
  
  .x-wheel-inner-wrapper .-wheel-section:nth-child(odd) {
    background: linear-gradient(#1a1a1a, #332f2d)
  }
  
  .x-wheel-inner-wrapper .-wheel-section:nth-child(2n) {
    background: linear-gradient(#353535, #353535)
  }
  
  .x-wheel-inner-wrapper .-wheel-section.-active {
    background: linear-gradient(#fe602c, #ff8c2d)
  }
  
  .x-wheel-inner-wrapper .-wheel-content-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    rotate: -45deg;
    text-align: center;
    max-width: 52%
  }
  
  .x-wheel-inner-wrapper .-wheel-content-wrapper .-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    color: #fff
  }
  
  @media (max-width: 575.98px) {
    .x-wheel-inner-wrapper .-wheel-content-wrapper .-text {
      font-size: .875rem
    }
  }
  
  .x-wheel-inner-wrapper .-wheel-content-wrapper .-img {
    width: 40%;
    height: auto;
    margin-top: .5rem
  }
  
  .x-wheel-progress {
    position: relative;
    width: 550px;
    height: 1.25rem;
    margin: auto
  }
  
  .x-wheel-progress .-label {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }
  
  
  .whell1 {
    --wheel-index: 1;
  }
  
  .whell2 {
    --wheel-index: 2;
  }
  
  .whell3 {
    --wheel-index: 3;
  }
  
  .whell4 {
    --wheel-index: 4;
  }
  
  .whell5 {
    --wheel-index: 5;
  }
  
  .whell6 {
    --wheel-index: 6;
  }
  
  .whell7 {
    --wheel-index: 7;
  }
  
  .whell8 {
    --wheel-index: 8;
  }
  
  .whell9 {
    --wheel-index: 9;
  }
  
  .whell10 {
    --wheel-index: 10;
  }
  
  .whell11 {
    --wheel-index: 11;
  }
  
  .whell12 {
    --wheel-index: 12;
  }
  
  .whell13 {
    --wheel-index: 13;
  }
  
  
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
  }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
  }
  
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
  }
  
  
  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 5%, 0);
      transform: translate3d(0, 5%, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
  }
  
  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-5%, 0, 0);
      transform: translate3d(-5%, 0, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }
  
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-5%, 0, 0);
      transform: translate3d(-5%, 0, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }
  
  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
  }
  
  @-webkit-keyframes fadeInUpGameCategory {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 1%, 0);
      transform: translate3d(0, 1%, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }
  
  @keyframes fadeInUpGameCategory {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 1%, 0);
      transform: translate3d(0, 1%, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }
  
  @-webkit-keyframes x-excited-fade-in {
    0% {
      opacity: 0;
      -webkit-transform: scale(14);
      transform: scale(14)
    }
  
    50% {
      opacity: 0;
      -webkit-transform: scale(10);
      transform: scale(10)
    }
  
    75% {
      opacity: 0;
      -webkit-transform: scale(6);
      transform: scale(6)
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  }
  
  @keyframes x-excited-fade-in {
    0% {
      opacity: 0;
      -webkit-transform: scale(14);
      transform: scale(14)
    }
  
    50% {
      opacity: 0;
      -webkit-transform: scale(10);
      transform: scale(10)
    }
  
    75% {
      opacity: 0;
      -webkit-transform: scale(6);
      transform: scale(6)
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  }
  
  @-webkit-keyframes x-excited-fade-out {
    0% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  
    25% {
      opacity: 0;
      -webkit-transform: scale(2);
      transform: scale(2)
    }
  
    50% {
      opacity: 0;
      -webkit-transform: scale(3);
      transform: scale(3)
    }
  
    to {
      opacity: 0;
      -webkit-transform: scale(5);
      transform: scale(5)
    }
  }
  
  @keyframes x-excited-fade-out {
    0% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  
    25% {
      opacity: 0;
      -webkit-transform: scale(2);
      transform: scale(2)
    }
  
    50% {
      opacity: 0;
      -webkit-transform: scale(3);
      transform: scale(3)
    }
  
    to {
      opacity: 0;
      -webkit-transform: scale(5);
      transform: scale(5)
    }
  }
  
  .fadeInUpGameCategory {
    -webkit-animation-name: fadeInUpGameCategory;
    animation-name: fadeInUpGameCategory
  }
  
  @-webkit-keyframes fadeInGameCategory {
    0% {
      opacity: 0
    }
  
    to {
      opacity: 1
    }
  }
  
  @keyframes fadeInGameCategory {
    0% {
      opacity: 0
    }
  
    to {
      opacity: 1
    }
  }
  
  .fadeInGameCategory {
    -webkit-animation-name: fadeInGameCategory;
    animation-name: fadeInGameCategory
  }
  
  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }
  
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }
  
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
  }
  
  @-webkit-keyframes fadeInNotOpacity {
    0% {
      opacity: 1
    }
  
    to {
      opacity: 1
    }
  }
  
  @keyframes fadeInNotOpacity {
    0% {
      opacity: 1
    }
  
    to {
      opacity: 1
    }
  }
  
  .x-bill-history-container .-no-result-wrapper .-heading-title .-title {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 300;
    color: #d9ad70;
  }
  
  .x-bill-history-container .-no-result-wrapper {
    padding: 1rem;
    background-color: hsla(0, 0%, 100%, .1);
    border-radius: 5px;
    text-align: center;
  }
  
  .fadeInNotOpacity {
    -webkit-animation-name: fadeInNotOpacity;
    animation-name: fadeInNotOpacity
  }
  
  @-webkit-keyframes x-hamburger-wave {
    0% {
      width: 70%
    }
  
    to {
      width: 100%
    }
  }
  
  @keyframes x-hamburger-wave {
    0% {
      width: 70%
    }
  
    to {
      width: 100%
    }
  }
  
  @-webkit-keyframes fadeInModal {
    0% {
      opacity: 0
    }
  
    to {
      opacity: 1
    }
  }
  
  @keyframes fadeInModal {
    0% {
      opacity: 0
    }
  
    to {
      opacity: 1
    }
  }
  
  .fadeInModal,
  .fadeInRegister {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
  }
  
  @media (max-width:991.98px) {
  
    .fadeInModal,
    .fadeInRegister {
      -webkit-animation-name: fadeInModal;
      animation-name: fadeInModal
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 5%, 0);
      transform: translate3d(0, 5%, 0)
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }
  }