/*CSS WHEEL*/

.box-countdown {

    display: flex;

    align-items: center;

    justify-content: center;

}

.coutn_text {

    font-weight: 600;

    font-size: 1.5rem;

    text-transform: uppercase;

    margin-right: 3rem;

}

ul[time-countdown] {

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 10px;

    list-style: none;

    padding-left: 0;

    margin: 3rem 0;

}

ul[time-countdown] li {

    width: 5rem;

    height: 5rem;

    color: var(--color-main);

    background-color: rgb(13 93 214 / 10%);

    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: center;

    border-radius: .5rem;

    margin-right: 1rem;

}

ul[time-countdown] li .number {

    font-size: 2rem;

    font-weight: 600;

    line-height: 1.2;

}

ul[time-countdown] li .init {

    position: relative;

    color: var(--color-main);

    font-size: 1.3rem;

    font-weight: 500;

}



.wheel-circle {

    width: 500px;

    max-width: 100%;

}



.wheel-spinning-svg {

    position: relative;

}

.wheel-spinning-svg:before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 92%;

    height: 92%;

    border-radius: 50%;

    border: 10px solid #237bc3;

}



#box-wheel .wheel-pointer {

    width: 95px;

    height: 50px;

    position: absolute;

    top: 0;

    left: 50%;

    bottom: unset;

    transform: translateX(-50%);

    margin-top: auto;

    margin-bottom: auto;

    z-index: 10;

    transition: all .2s ease;

    transform-origin: 73.31% 44.89%;

}



#box-wheel .icon_pointer {

    transform: translateX(-50%);

    transform-origin: 0px 0px;

    touch-action: pan-x pan-y pinch-zoom;

    position: absolute;

    top: 11px;

    left: 50%;

    font-size: 3.5rem;

    color: var(--color-highlight);

}



#box-wheel .wheel-wheel-circle {

    width: 500px;

    height: 500px;

    background-size: cover;

}



#box-wheel .list-prize {

    text-align: center;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.item-prize {

    width: 25%;

    height: 19%;

    text-align: center;

    top: 50%;

    font-size: 14px;

    left: 50%;

    position: absolute;

    transform-origin: 0 0;

    font-weight: 700;

    color: #fff;

    text-transform: uppercase;

}



.spinning {

    animation-duration: 7s;

    animation-iteration-count: 1;

    animation-timing-function: cubic-bezier(0,0,.2,1);

    animation-fill-mode: forwards;

}



@keyframes animateArrow {

  50% {

    right: -50px;

  }

}



@keyframes spinning {

    0% {

        transform: rotate(0deg);

    } 100% {

        transform: rotate(1980deg);

    }

}



#box-wheel .wheel-logo {

    position: absolute;

    top: 50%;

    left: 50%;

    text-align: center;

    transform: translate(-50%, -50%);

    margin-left: 0;

    margin-top: 0;

    width: 80px;

    height: 80px;

    padding: 3px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: 600;

    color: #fff;

    cursor: pointer;

    border-radius: 50%;

    background: #237bc3;

}



[rotate-g] {

    transform: rotate(-113deg) scale(0.89, 0.89);

}



.prize {

    text-align: center;

}

.prize img {

    max-width: 100%;

    margin-top: 5px;

}

.prize .title-default {

    font-weight: 700;

    font-size: 2.5rem;

    text-transform: uppercase;

}

.prize [prize-name] {

    font-style: italic;

    font-weight: 700;

    font-size: 1.6rem;

}