div.the_wheel {
    /*background-image: url(../images/wheel_back.png);*/
    /*background-position: center;*/
    /*background-repeat: inherit;*/
    /*background-size: cover;*/
}

@media only screen and (max-width: 450px) and (min-width: 400px) {
    .spinContainer {
        width: 110px !important;
        height: 110px !important;
        top: 49%;
        left: 50%;
    }
}

@media only screen and (max-width: 450px) and (min-width: 400px) {
    .canvasPosition {
        width: 90%;
        height: 100%;
        /*background-size: 330px !important;*/
    }

    .spinnerArrow {
        width: 10% !important;
    }

    .spinContainer {
        width: 110px !important;
        height: 110px !important;
        top: 49%;
        left: 50%;
    }
}

@media only screen and (max-width: 500px) {
    /*#spin:after {*/
    /*    line-height: 113px !important;*/
    /*    !*width: 113px !important;*!*/
    /*    height: 68px;*/
    /*    display: block;*/
    /*}*/

    #inner-spin {
        width: 62px !important;
        height: 62px !important;
        position: absolute;
        top: 50% !important;
        left: 50% !important;
        /*margin: -27px 0 0 -27px;*/
        border-radius: 50%;
        transform: translate(-50%, -50%);

    }

    #spin {
        width: 110px !important;
        height: 110px !important;
        top: 49%;
        left: 50%;
    }

    /*#inner-spin-vector {*/
    /*    top: -14%;*/
    /*    left: 25% !important;*/
    /*}*/
}

#inner-spin-vector {
    background-image: url(../../assets/images/spinner/spinner_vector.svg);
    background-repeat: no-repeat;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -14%;
    left: 40%;
    /*transform: rotate(270deg);*/
    background-size: 25px 25px;
}

.SpinnerBackGround {
    text-align: center;
}

#inner-spin {
    width: 65%;
    height: 65%;
    position: absolute;
    top: 50%;
    left: 50%;
    /*margin: -27px 0 0 -27px;*/
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(#FFC993, #B47A3F) !important;
    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); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(234, 234, 234, 1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaeaea', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}

.canvasPosition {
    position: relative !important;
    background-image: url('../../assets/images/spinner/spinner_outer_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    /*left: 5px;*/
    /*background-size: 150px 150px*/
    /*background-size: 64vh;*/
    /*background-size: 360px;*/
    width: 85%;
    background-size: 100%;
    /*height: 50vh;*/
}


@media only screen and (max-width: 400px) {
    /*.canvasPosition {*/
    /*    width: 98%;*/
    /*    height: 100%;*/
    /*    background-size: 47vh;*/
    /*}*/
    .spinnerArrow {
        width: 10% !important;
    }

    /*#spin{*/
    /*    left:49% !important;*/
    /*}*/
}

@media only screen and (min-width: 1400px) {
    /*.canvasPosition {*/
    /*    background-size: 355px;*/
    /*}*/
}

@media only screen and (max-width: 400px) {
    /*.canvasPosition {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    !*background-size: 44vh;*!*/
    /*    background-size: 100%;*/
    /*}*/
}


@media only screen and (max-width: 500px) and (min-width: 450px) {
    /*.canvasPosition {*/
    /*    width: 90%;*/
    /*    height: 100%;*/
    /*    !*background-size: 58vh;*!*/
    /*}*/

    .spinnerArrow {
        width: 10% !important;
    }
}

@media only screen and (max-width: 600px) and (min-width: 500px) {
    /*.canvasPosition {*/
    /*    width: 90%;*/
    /*    height: 100%;*/
    /*    !*background-size: 58vh;*!*/
    /*}*/

    .spinnerArrow {
        width: 10% !important;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 600px) {
    /*.canvasPosition {*/
    /*    width: 90%;*/
    /*    height: 100%;*/
    /*    background-size: 400px;*/
    /*}*/
    .spinnerArrow {
        width: 10% !important;
    }
}


#spin {
    width: 132px;
    height: 130px;
    position: absolute;
    top: 49%;
    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: linear-gradient(#74132D, #3E0A19);
    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;
    transform: translate(-50%, -50%);
}

#spin:after {
    content: "SPIN";
    text-align: center;
    /*line-height: 135px;*/
    color: #ffffff;
    text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 100000;
    /* width: 115px; */
    /* height: 68px; */
    display: block;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

/*#spin[data-lang='AR']:after {*/
/*    content: "دوّر";*/
/*}*/


.ReactModalPortal {
    z-index: 999999999999;
}


.ReactModal__Overlay--after-open {
    background-color: rgba(34, 34, 34, 0.75) !important;
}

.spinWheelText{
    position: relative;
    top: -10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #000;
    z-index: 99999999999999;
    text-align: center;
}


.rotateSpinnerVector{
    transform: translate(-50%, -50%) rotate(3deg) !important;
}