.spinner-container {
    text-align: center;
    margin-top: 20px;
}

.spinner {
    width: 400px;
    height: 400px;
    position: relative;
}

#spin {
    border: 1px solid #ccc;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 0px;
    z-index: 1000;
    background: #fff;
    cursor: pointer;
    font-family: 'Exo 2', sans-serif;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


#spin:after {
    content: "SPIN";
    text-align: center;
    line-height: 68px;
    color: #CCC;
    text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 100000;
    display: block;
}

#spin:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 28px 20px;
    border-color: transparent transparent #ffffff transparent;
    top: -12px;
    left: 14px;
}
#spinner-canvas{
    transition: all ease 2s;
}
#inner-spin{
    width:54px;
    height:54px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-27px 0 0 -27px;
    border-radius:50%;
    z-index:999;
    box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;

    background: rgb(255,255,255);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


#spin:not([disabled]):active #inner-spin{
    box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}

#spin:not([disabled]):active:after{
    font-size:15px;
}

#shine{
    width:250px;
    height:250px;
    position:absolute;
    top:0;
    left:0;
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    opacity:0.1;
}

/*ANIMATION*/
@-webkit-keyframes hh {
    0%, 100%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    50%{
        transform: rotate(7deg);
        -webkit-transform: rotate(7deg);
    }
}

@keyframes hh {
    0%, 100%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    50%{
        transform: rotate(7deg);
        -webkit-transform: rotate(7deg);
    }
}

.spin {
    -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
    animation: hh 0.1s;
}

#spin:disabled {
    cursor: unset; /* Change cursor style to indicate it's not clickable */
}