.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, #fdba76, #f76f6f)
}

.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: #454545;
    border-radius: 4px
}

.x-lucky-wheel-share-component .-btn-info:hover {
    color: #fafafa;
    background: #585858
}

.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: #ececed;
    background: var(--background-image-top) !important
}

@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: var(--background-login-gradient) !important
}

.x-wheel-progress-wrapper .-progress-bar {
    color: #ececed;
    background: linear-gradient(270deg, #de216e, #de216e);
    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: #fdb368
}

#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;
    background-color: var(--background-image-button) !important;
    margin-top: 100px;

}

.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: #1b070f;
    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: var(--text-theme-menu-no-active);
    background: var(--background-image-top) !important;
    transition: all .2s
}

.x-wheel-result-modal-container .-btn-close-modal:hover {
    color: var(--text-theme-menu-no-active);
    background: var(--background-bg-text-highlight) !important;


}

.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: #262626;
    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: #a3a3a3
}

.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, #fdba76, #f76f6f)
}

.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, #fdba76, #f76f6f)
}

.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;
}