@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');

button:focus,
input:focus {
    outline: none;
    box-shadow: none;
}

a,
a:hover {
    text-decoration: none;
}

body {
    font-family: 'Roboto', sans-serif;
}

/*------------------  */
.wheel-spin-box {
    position: relative;
    display: inline-block;
}

#spinwheel {
    position: relative;
    width: 360px;
    margin: auto;
}

.wheeldotsround {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wheeldotsround {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wheeldotsround .wheeldots {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    z-index: 1;
}

.wheeldotsround .wheeldots:nth-child(2n+1) {
    background: #fff;
}

.wheeldotsround .wheeldots.active-dots {
    background: #ff8400;
}

.wheeldotsround .wheeldots.active-dots:nth-child(2n+1) {
    background: #2660a4;
}

.wheeldotsround .wheeldots:nth-child(1) {
    left: calc(50% - 4px);
    top: 3px;
}

.wheeldotsround .wheeldots:nth-child(2) {
    right: 25%;
    top: 7%;
}

.wheeldotsround .wheeldots:nth-child(3) {
    right: 7%;
    top: 25%;
}

.wheeldotsround .wheeldots:nth-child(4) {
    right: 3px;
    top: 50%;
}

.wheeldotsround .wheeldots:nth-child(5) {
    right: 8.2%;
    bottom: 23%;
}

.wheeldotsround .wheeldots:nth-child(6) {
    right: 25%;
    bottom: 7%;
}

.wheeldotsround .wheeldots:nth-child(7) {
    left: calc(50% - 4px);
    bottom: 3px;
}

.wheeldotsround .wheeldots:nth-child(8) {
    left: 25%;
    bottom: 7%;
}

.wheeldotsround .wheeldots:nth-child(9) {
    left: 8.2%;
    bottom: 23%;
}

.wheeldotsround .wheeldots:nth-child(10) {
    left: 3px;
    top: 50%;
}

.wheeldotsround .wheeldots:nth-child(11) {
    left: 7%;
    top: 25%;
}

.wheeldotsround .wheeldots:nth-child(12) {
    left: 25%;
    top: 7%;
}

#spinwheel {
    position: relative;
    width: 360px;
    margin: auto;
}

#spinwheel svg {
    width: 100%;
    height: 100%;
    border: 15px solid #CE3816;
    border-radius: 50%;
    background: #CE3816;
}

.chartholder {

}

.wheel-spin-box .chartholder .slice path {
    fill: #441ced;
}

.wheel-spin-box .chartholder .slice:nth-child(2n+1) path {
    fill: #F9AA00;
}

.wheel-spin-arrow {
    position: relative;
    margin-top: -35px;
    text-align: center;
    z-index: 1;
}

.wheel-spin-arrow svg {
    max-width: 65px;
}

.spin-click-button {
    background-color: #000;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border: none;
    padding: 14px 35px;
    border-radius: 15px;
}

@media (max-width: 479.98px) {
    #spinwheel {
        width: 270px;
    }
}

.span-alert{
    font-weight: bold;
    font-size: .9rem;
    color: #ec4646;
    /*text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white, 0px 0px 6px black;*/
    animation: shadow-animation 2s infinite alternate;

}

.success-message{
   color: #3AB137;
    animation: shadow-animation 2s infinite alternate;
    text-align: center;
    font-size: 1.3rem;
    margin-top: 1rem;
    display: none;
}


@keyframes shadow-animation {
    0% {
        text-shadow: 2px 2px 10px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white, 0px 0px 6px black;
    }
    50% {
        text-shadow: 2px 2px 16px white, -2px -2px 6px white, 2px -2px 6px white, -2px 2px 6px white, 0px 0px 8px black;
    }
    100% {
        text-shadow: 2px 2px 14px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white, 0px 0px 6px black;
    }
}