.wheel-page {
    width: calc(100vw - 40px);
    max-width: 1380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.wheel-container {
    display: flex;
    width: 100%;
    max-width: 1145px;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

.wheel-main {
    display: flex;
    transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
}
.wheel-main .left {
    width: 871px;
    height: 420px;
    background: url(../../../system/wheel/wheel-banner-background.png);
    border-radius: 24px;
}

.wheel-main .left .layer:first-child {
    margin-top: 0;
}

.wheel-main .left .layer {
    width: 100%;
    height: 420px;
    margin-top: -420px;
}

.wheel-main .left .layer.visible {
    display: flex;
    justify-content: center;
}
.wheel-main .left .layer.visible .pretty-girl {
    width: 500px;
    height: 420px;
    background: url(../../../system/wheel/pretty-girl.png);
    transform: translate(48px, 0px);
}

.wheel-main .left .layer.content {
    width: 300px;
    height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}
.wheel-main .left .layer.content .details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wheel-main .left .layer.content .details .title {
    color: #FFF;
    text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);
    font-size: 64px;
    font-weight: 900;
    line-height: 100%; /* 64px */
    text-transform: uppercase;
}
.wheel-main .left .layer.content .details .description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    font-weight: 500;
}
.wheel-main .left .layer.content .status {
    border-radius: 24px;
    background: rgba(18, 47, 80, 0.80);
    backdrop-filter: blur(5px);
    max-width: 271px;
    padding: 20px;
}

.wheel-main .left .layer.content .status.enjoy {
    background: unset;
    animation-range: 58px;
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 0px;
}
.wheel-main .left .layer.content .status.enjoy .line {
    background: #FFF;
    width: 4px;
    height: 58px;
}

.wheel-main .left .layer.content .status.enjoy span {
    color: #FFF;
    text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);
    font-family: Lufga;
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%; /* 32px */
    text-transform: uppercase;
}

.wheel-main .left .layer.content .status.has_spin {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wheel-main .left .layer.content .status.has_spin .top {
    display: flex;
    align-items: center;
}
.wheel-main .left .layer.content .status.has_spin .top .info {
    display: flex;
    gap: 10px;
}
.wheel-main .left .layer.content .status.has_spin .top .info .icon {
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(84deg, rgba(79, 172, 254, 0.30) -7.08%, rgba(0, 209, 219, 0.30) 132.64%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.wheel-main .left .layer.content .status.has_spin .top .info .icon svg {}
.wheel-main .left .layer.content .status.has_spin .top .info .name {
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 110%; /* 15.4px */
}
.wheel-main .left .layer.content .status.has_spin .top .value {
    color: rgba(255, 255, 255, 0.50);
    font-size: 16px;
    font-weight: 400;
}
.wheel-main .left .layer.content .status.has_spin .top .value span {
    color: #4FACFE;
    font-weight: 600;
}
.wheel-main .left .layer.content .status.has_spin .lines {
    display: flex;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 400;
     /* 15.4px */
    align-items: center;
    gap: 10px;
}
.wheel-main .left .layer.content .status.has_spin .lines .line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.wheel-main .left .layer.content .status.has_spin .bottom {}
.wheel-main .left .layer.content .status.has_spin .bottom .timer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wheel-main .left .layer.content .status.has_spin .bottom .timer .top .title {
    display: flex;
    gap: 5px;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
}

.wheel-main .left .layer.content .status.has_spin .bottom .timer .top {
    
     /* 15.4px */
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
}
.wheel-main .left .layer.content .status.has_spin .bottom .timer .top svg {}
.wheel-main .left .layer.content .status.has_spin .bottom .timer .progress {
    width: 100%;
    height: 12px;
    background: #121B52;
    border-radius: 14px;
}

.wheel-main .left .layer.content .status.has_spin .bottom .timer .top .text {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 400;
}

.wheel-main .left .layer.content .status.has_spin .bottom .timer .progress .line {
    background: linear-gradient(84deg, #4FACFE -7.08%, #00D1DB 132.64%);
    height: 12px;
    border-radius: 14px;
    max-width: 100%;
    width: 50%;
    transition: all 550ms linear;
}

.wheel-main .left .layer.content .status.notspin {
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.wheel-main .left .layer.content .status.notspin .rule {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.wheel-main .left .layer.content .status.notspin .rule svg {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.wheel-main .right {
    margin-top: -47.5px;
    margin-left: -241px;
}

.wheel-main .right .wheel {
    width: 515px;
    height: 515px;
    border-radius: 50%;
    background: #0056E1;
    filter: drop-shadow(0px 0px 35.9px #003DD8) drop-shadow(0px 0px 23.9px rgba(0, 0, 0, 0.25));
    -webkit-filter: drop-shadow(0px 0px 35.9px #003DD8) drop-shadow(0px 0px 23.9px rgba(0, 0, 0, 0.25));
    -moz-filter: drop-shadow(0px 0px 35.9px #003DD8) drop-shadow(0px 0px 23.9px rgba(0, 0, 0, 0.25));
    -o-filter: drop-shadow(0px 0px 35.9px #003DD8) drop-shadow(0px 0px 23.9px rgba(0, 0, 0, 0.25));
}

.wheel-main .right .wheel .circle {
    width: 440px;
    height: 440px;
    background: #0F386F;
    border-radius: 50%;
    margin: 37.5px;
    position: absolute;
}

.wheel-main .right .wheel .selector {
    width: 515px;
    height: 515px;
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 4;
    border-radius: 50%;
    overflow: hidden;
}
.wheel-main .right .wheel .selector svg {
    margin-top: -1px;
}

.wheel-main .right .wheel .lights {
    width: 515px;
    height: 515px;
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
}
.wheel-main .right .wheel .lights .row:first-child {
    margin-top: 0px;
}
.wheel-main .right .wheel .lights .row {
    margin-top: -515px;
    width: 515px;
    height: 495px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
}

.wheel-main .right .wheel .lights .row .light {
    width: 16px;
    height: 16px;
    background-image: radial-gradient(76.26% 76.26% at 73.38% 55.71%, #F5D919 0%, #F16922 85%, #F5D919 100%);
    filter: drop-shadow(0px 4.676px 0px rgba(0, 0, 0, 0.25));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wheel-main .right .wheel .lights .row .light .glow {
    width: 33px;
    height: 33px;
    background: rgba(244, 255, 92, 0.79);
    filter: blur(15px);
    -webkit-filter: blur(15px);
    -o-filter: blur(15px);
    -moz-filter: blur(15px);
    position: absolute;
    border-radius: 50%;
    z-index: 3;
}

.wheel-main .right .wheel .lights .row:nth-child(1) .light:first-child  {
    opacity: 0;
}

.wheel-main .right .wheel .lights .row:nth-child(1) .light:first-child .glow {
    animation: unset !important;
    opacity: 0;
}

.wheel-main .right .wheel .lights .row:nth-child(1) {transform: rotate(0deg);}
.wheel-main .right .wheel .lights .row:nth-child(1) .light {transform: rotate(0deg);}
.wheel-main .right .wheel .lights .row:nth-child(2) {transform: rotate(22.5deg);}
.wheel-main .right .wheel .lights .row:nth-child(2) .light {transform: rotate(-22.5deg);}
.wheel-main .right .wheel .lights .row:nth-child(3) {transform: rotate(45deg);}
.wheel-main .right .wheel .lights .row:nth-child(3) .light {transform: rotate(-45deg);}
.wheel-main .right .wheel .lights .row:nth-child(4) {transform: rotate(67.5deg);}
.wheel-main .right .wheel .lights .row:nth-child(4) .light {transform: rotate(-67.5deg);}
.wheel-main .right .wheel .lights .row:nth-child(5) {transform: rotate(90deg);}
.wheel-main .right .wheel .lights .row:nth-child(5) .light {transform: rotate(-90deg);}
.wheel-main .right .wheel .lights .row:nth-child(6) {transform: rotate(112.5deg);}
.wheel-main .right .wheel .lights .row:nth-child(6) .light {transform: rotate(-112.5deg);}
.wheel-main .right .wheel .lights .row:nth-child(7) {transform: rotate(135deg);}
.wheel-main .right .wheel .lights .row:nth-child(7) .light {transform: rotate(-135deg);}
.wheel-main .right .wheel .lights .row:nth-child(8) {transform: rotate(157.5deg);}
.wheel-main .right .wheel .lights .row:nth-child(8) .light {transform: rotate(-157.5deg);}

.wheel-main .right .wheel .lights.neutral {}
.wheel-main .right .wheel .lights.neutral .row:nth-child(1) .light .glow {animation: 0.8s blink-light linear infinite;}
.wheel-main .right .wheel .lights.neutral .row:nth-child(2) .light .glow {animation: 0.8s blink-light-reverse linear infinite;}
.wheel-main .right .wheel .lights.neutral .row:nth-child(3) .light .glow {animation: 0.8s blink-light linear infinite;}
.wheel-main .right .wheel .lights.neutral .row:nth-child(4) .light .glow {animation: 0.8s blink-light-reverse linear infinite;}
.wheel-main .right .wheel .lights.neutral .row:nth-child(5) .light .glow {animation: 0.8s blink-light linear infinite;}
.wheel-main .right .wheel .lights.neutral .row:nth-child(6) .light .glow {animation: 0.8s blink-light-reverse linear infinite;}
.wheel-main .right .wheel .lights.neutral .row:nth-child(7) .light .glow {animation: 0.8s blink-light linear infinite;}
.wheel-main .right .wheel .lights.neutral .row:nth-child(8) .light .glow {animation: 0.8s blink-light-reverse linear infinite;}

@keyframes blink-light {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blink-light-reverse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Sectors */
.wheel-main .right .wheel .sectors {
    width: 515px;
    height: 515px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    overflow: hidden;
}
.wheel-main .right .wheel .sectors .row:first-child {
    margin-top: 0px;
}
.wheel-main .right .wheel .sectors .row {
    margin-top: -416px;
    width: 416px;
    height: 416px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 0px;
    transition: transform ease 5s;
    justify-content: space-between;
}

.wheel-main .right .wheel .sectors .row .sector:first-child {
    margin-top: 0;
}

.wheel-main .right .wheel .sectors .row .sector {
    width: 416px;
    height: 416px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -416px;
}

.wheel-main .right .wheel .sectors .row .sector .values {
    width: 416px;
    height: 416px;
    position: absolute;
    overflow: hidden;
}
.wheel-main .right .wheel .sectors .row .sector .values .row {
    width: 386px;
    height: 386px;
    padding: 15px;
    /* transform: rotate(0deg) !important; */
    /* justify-content: unset; */
}
.wheel-main .right .wheel .sectors .row .sector .values .row .value {
    display: flex;
    align-items: center;
    /* gap: 30px; */
    flex-direction: column-reverse;
    height: 112px;
    justify-content: space-between;
}

/* .wheel-main .right .wheel .sectors .row .sector .values .row .value.cash {}
.wheel-main .right .wheel .sectors .row .sector .values .row .value.freeplay {margin-top: 10px;margin-bottom: -6px;}
.wheel-main .right .wheel .sectors .row .sector .values .row .value.deposit {margin-top: -7px;margin-bottom: -10px;}
.wheel-main .right .wheel .sectors .row .sector .values .row .value.vip_xp {margin-top: 9px;margin-bottom: 3px;} */

.wheel-main .right .wheel .sectors .row .sector .values .row .value:first-child {}
.wheel-main .right .wheel .sectors .row .sector .values .row .value:first-child .name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.wheel-main .right .wheel .sectors .row .sector .values .row .value:first-child .sector-value {
    writing-mode: horizontal-tb;
}
.wheel-main .right .wheel .sectors .row .sector .values .row .value:last-child {flex-direction: column;}
.wheel-main .right .wheel .sectors .row .sector .values .row .value:last-child .name {
    /* transform: rotate(90deg); */
    writing-mode: vertical-lr;
}
.wheel-main .right .wheel .sectors .row .sector .values .row .value:last-child .sector-value {writing-mode: horizontal-tb;transform: rotate(180deg);}

.wheel-main .right .wheel .sectors .row .sector.light .values .row .value .name {
    color: #1F55B8;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.wheel-main .right .wheel .sectors .row .sector.dark .values .row .value .name {
    color: #529DFF;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.wheel-main .right .wheel .sectors .row .sector .values .row .value .sector-value {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.25);
    font-size: 24px;
    font-weight: 600;
    writing-mode: tb-rl;
}

.wheel-main .right .wheel .sectors .row .sector.light .values .row:nth-child(1) {transform: rotate(0deg);}
.wheel-main .right .wheel .sectors .row .sector.light .values .row:nth-child(2) {transform: rotate(120deg);}
.wheel-main .right .wheel .sectors .row .sector.light .values .row:nth-child(3) {transform: rotate(240deg);}
.wheel-main .right .wheel .sectors .row .sector.dark .values .row:nth-child(1) {transform: rotate(30deg);}
.wheel-main .right .wheel .sectors .row .sector.dark .values .row:nth-child(2) {transform: rotate(150deg);}
.wheel-main .right .wheel .sectors .row .sector.dark .values .row:nth-child(3) {transform: rotate(270deg);}

.wheel-main .right .wheel .button-block {
    width: 515px;
    height: 515px;
    position: absolute;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wheel-main .right .wheel .button-block .button-circle {
    width: 100px;
    height: 100px;
    background: #0F386E;
    filter: drop-shadow(0px 0px 37.6px rgba(0, 0, 0, 0.25));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wheel-main .right .wheel .button-block .button-circle .button {
    width: 90px;
    height: 90px;
    background: #207EFC;
    box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.25) inset;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.25);
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 300ms;
}

.wheel-main .right .wheel .button-block .button-circle .button.active {
    background: rgba(32, 126, 252, 0.20);
    box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0) inset;
    color: rgba(255, 255, 255, 0.2);
    transition: all 300ms;
}

@media (max-width: 800px) {
    .wheel-container {
        width: calc(100vw - 30px);
        
    }

    .wheel-main {
        flex-direction: column;
        margin-top: 0;
    }

    .wheel-main .left {
        width: 515px;
        height: 701px;
        background-position: top;
        background-size: 255%;
    }

    .wheel-main .right {
        margin-top: -291px;
        margin-left: 0px;
    }

    .wheel-main .left .layer.content {
        margin-top: -700px;
        height: 334px;
    }

    .wheel-main .left .layer.visible {
        overflow: hidden;
        height: 700px;
    }

    .wheel-main .left .layer.visible .pretty-girl {height: 640px;transform: translate(179px, 25px);}
}

/* History */
.wheel-history {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wheel-history .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wheel-history .top .title {
    color: #FFF;
    font-size: 20px;
    font-weight: 800;
    line-height: 20px; /* 100% */
}
.wheel-history .top .tabs {
    display: flex;
    gap: 10px;
}
.wheel-history .top .tabs span {
    border-radius: 24px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 400;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 300ms;
}
.wheel-history .top .tabs span.active {
    border-radius: 24px;
    background: #4D85FF;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
     /* 15.4px */
    padding: 3px 10px;
    transition: all 300ms;
}

.wheel-history .table.all .col .id {}
.wheel-history .table.all .col .user {}
.wheel-history .table.all .col .bonus {}
.wheel-history .table.all .col .date {}

.wheel-history .table.user .col .id {}
.wheel-history .table.user .col .bonus {}
.wheel-history .table.user .col .status {}
.wheel-history .table.user .col .date {}

.vip-plug {
    border-radius: 24px;
    background: linear-gradient(152deg, #FCB84C -37.59%, #F5691A 200.14%);
    width: 100%;
    height: 260px;
    cursor: pointer;
}

.vip-plug .layer:first-child {
    margin-top: 0;
}

.vip-plug .layer {
    width: 100%;
    height: 260px;
    margin-top: -260px;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 0;
    position: relative;
}

.vip-plug .icon {
    padding: 7px;
}
.vip-plug .icon svg {}

.vip-plug .layer:nth-child(1) {
    align-items: flex-start;
    justify-content: flex-end;
}

.vip-plug .layer:nth-child(2) {
    align-items: flex-end;
}
.vip-plug .layer:nth-child(3) {
    justify-content: center;
    align-items: flex-start;
}
.vip-plug .layer:nth-child(4) {
    justify-content: center;
}
.vip-plug .layer:nth-child(5) {
    justify-content: flex-end;
    overflow: unset;
}
.vip-plug .layer:nth-child(6) {
    z-index: 1;
}

.vip-plug .vip-1 {
    width: 155px;
    height: 141px;
    background: url(../../../system/wheel/vip/vip-1.png);
    background-size: 100%;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    animation: 20s wheel-vip-vip1 linear infinite;
}

.vip-plug .vip-2 {
    width: 247px;
    height: 170px;
    background: url(../../../system/wheel/vip/vip-2.png);
    background-size: 100%;
    opacity: 0.2;
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    animation: 30s wheel-vip-vip2 linear infinite;
}

.vip-plug .crown {
    width: 410px;
    height: 309px;
    background: url(../../../system/wheel/vip/crown.png);
    background-size: 100%;
    transform: scale(1.1) translate(-20px, 0px);
    transition: all 300ms;
}

.vip-plug:hover .crown {
    transform: scale(1.1) translate(-20px, -5px);
    transition: all 300ms;
}

.vip-plug .crown.small {
    width: 182px;
    height: 137px;
    opacity: 0.5;
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    animation: 30s wheel-vip-crown-small linear infinite;
} 

@keyframes wheel-vip-vip1 {
    0% {transform: translate(-7px, -16px);}
    50% {transform: translate(53px, 26px);}
    100% {transform: translate(-7px, -16px);}
}

@keyframes wheel-vip-vip2 {
    0% {transform: translate(0px, -52px);}
    50% {transform: translate(-30px, -11px);}
    100% {transform: translate(0px, -52px);}
}

@keyframes wheel-vip-crown-small {
    0% {transform: rotate(36deg) translate(98px, 24px);}
    50% {transform: rotate(36deg) translate(128px, -47px);}
    100% {transform: rotate(36deg) translate(98px, 24px);}
}

.vip-plug .content {
    width: 468px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vip-plug .content .title {
    color: #fff;
    text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);
    font-size: 64px;
    font-weight: 900;
    line-height: 100%; /* 64px */
    text-transform: uppercase;
}
.vip-plug .content .descriptions {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 1000px) {
    .vip-plug .layer:nth-child(5) {
        overflow: hidden;
    }

    .vip-plug .crown {
        transform: scale(0.9) translate(20px, 0px);
    }

    .vip-plug:hover .crown {
        transform: scale(0.9) translate(20px, -5px);
    }
}

@media (max-width: 878px) {
    .vip-plug .crown {
        transform: translate(50px, 0px);
    }

    .vip-plug:hover .crown {
        transform: translate(50px, -5px);
    }
}

@media (max-width: 800px) {
    .vip-plug .crown {
        transform: scale(0.7) translate(200px, -3px);
    }

    .vip-plug:hover .crown {
        transform: scale(0.75) translate(200px, -3px);
    }

    .vip-plug {
        height: 219px;
    }

    .vip-plug .layer {
        height: 219px;
        margin-top: -219px;
    }

    .vip-plug .content {padding: 30px;width: 500px;}
}

@media (max-width: 600px) {
    .vip-plug .content .title {
        font-size: 37px;
    }
    .vip-plug .content .descriptions {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
    }

    .vip-plug .content {padding: 30px;width: 262px;}
    .vip-plug .crown {
        transform: scale(0.7) translate(200px, -3px);
    }

    .vip-plug:hover .crown {
        transform: scale(0.75) translate(200px, -3px);
    }
}

.vip-plug .right {}
.vip-plug .right svg {}

.wheel-plugs {
    display: flex;
    border-radius: 24px;
    gap: 10px;
    width: 100%;
    margin-top: -60px;
    z-index: -1;
}

.wheel-plugs .plug {
    width: calc(100% / 4);
    height: auto;
    border-radius: 24px;
    overflow: hidden;
}
.wheel-plugs .plug .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.wheel-plugs .plug .top .type {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.30);
    margin-left: 20px;
    color: #FFF;
    font-size: 12px;
    font-weight: 400;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 11px;
}
.wheel-plugs .plug .top .icon {
    width: 81px;
    height: 81px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(14px, -14px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.wheel-plugs .plug .top .icon svg {
    padding-top: 5px;
    padding-right: 5px;
}

.wheel-plugs .plug.cash {
    border: 1px solid #0020F2;
    background: linear-gradient(85deg, #0020F2 -24.52%, #004BED 6.24%, #0059DF 49.3%, #003FC8 98.52%, #001FB8 129.28%);
}

.wheel-plugs .plug.freeplay {
    border: 1px solid #9D4DFF;
    background: linear-gradient(90deg, #9D4DFF -3.97%, #B445FE 5.74%, #A727FD 46.76%, #6215FC 81.31%, #7A0FFC 103.98%);
}

.wheel-plugs .plug.deposit {
    border: 1px solid #79EE73;
    background: linear-gradient(91deg, #79EE73 -83.7%, #4FB1A1 128.49%), linear-gradient(90deg, #29C264 -3.97%, #30CE30 5.74%, #26CD66 46.76%, #55D726 81.31%, #C8CD28 103.98%);
    overflow: hidden;
}

.wheel-plugs .plug.vip {
    border: 1px solid #FCB84C;
    background: linear-gradient(152deg, #FCB84C -37.59%, #F5691A 200.14%), linear-gradient(85deg, #F27100 -24.52%, #ED6300 6.24%, #DF7000 49.3%, #C87500 98.52%, #B85C00 129.28%);
}

.wheel-plugs .plug .info {
    width: calc(100% - 40px);
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -18px;
    padding-bottom: 20px;
}
.wheel-plugs .plug .info .title {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
}
.wheel-plugs .plug .info span {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
}
.wheel-plugs .plug .info span b {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 800px) {
    .wheel-plugs {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0px;
    }

    .wheel-plugs .plug {
        width: calc((100% - 14px) / 2);
        border-radius: 24px;
        overflow: hidden;
    }

    .wheel-main .left .layer.content .status.enjoy {
        margin-bottom: 42px;
        transform: scale(1.3);
        transform-origin: 0px 0px;
        backdrop-filter: none;
    }

    .wheel-main .left .layer.content .status.notspin {

    }
}

.wheel-page .table .body .tr .col.bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wheel-page .table .body .tr .col.bonus svg {
    width: 20px;
    height: auto;
}

.wheel-page .table .body .tr .col.bonus.freeplay svg {
    width: 15px;
    height: auto;
}

.wheel-page .table .body .tr .col.bonus.cash span {
    color: #558bfb;
    font-weight: 500;
}

.wheel-page .table .body .tr .col.bonus.vip_xp span {
    font-weight: 500;
    color: #faa13e;
}
.wheel-page .table .body .tr .col.bonus.freeplay span {
    color: #a14ae5;
    font-weight: 500;
}
.wheel-page .table .body .tr .col.bonus.deposit span {
    font-weight: 500;
    color: #6bd196;
}

.wheel-page .table .body .tr .col.status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.wheel-page .table .body .tr .col.status .claim_button {
    width: 70px;
    height: 30px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    padding: 0px 0px;
}
.wheel-page .table .body .tr .col.status .claim_button.deposit {background: #6bd196;}
.wheel-page .table .body .tr .col.status .claim_button.cash {background: #558bfb;}
.wheel-page .table .body .tr .col.status .claim_button.vip_xp {background: #faa13e;}
.wheel-page .table .body .tr .col.status .claim_button.freeplay {background: #a14ae5;}

.wheel-page .table .body .tr .col.status .timer {
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wheel-page .table .body {
    max-height: 380px;
    overflow: hidden scroll;
}

@media(max-width: 600px) {
    .wheel-page .table.my .col.id {
        display: none;
    }

    .wheel-page .table.my .col.bonus {
        text-align: left;
    }

    .wheel-page .table.my .body .col.bonus {
    justify-content: flex-start;
    }
}

@media (max-width: 450px) {
    .wheel-page .table.my .body .tr .col.status {
    flex-direction: column-reverse;
    gap: 5px;
}
    .wheel-page .table.my .body .tr .col.status .timer {
    width: auto;
    font-size: 12px;
}
}

@media(max-width: 440px) {
    .wheel-page .table.all .col.id {
        display: none;
    }

    .wheel-page .table.all .col.user {
        text-align: left;
    }
}