.roulette-main{
    display: flex;
    justify-content: center; /* horizontally center */
    align-items: center; /* vertically center */
}
.close-button{
    background: #b3b3b6;
    border-top: 0px!important;
}
.r-number:nth-child(1) {
    transform: rotateZ(9.72972973deg);
}
.r-number:nth-child(2) {
    transform: rotateZ(19.45945946deg);
}
.r-number:nth-child(3) {
    transform: rotateZ(29.18918919deg);
}
.r-number:nth-child(4) {
    transform: rotateZ(38.91891892deg);
}
.r-number:nth-child(5) {
    transform: rotateZ(48.64864865deg);
}
.r-number:nth-child(6) {
    transform: rotateZ(58.37837838deg);
}
.r-number:nth-child(7) {
    transform: rotateZ(68.10810811deg);
}
.r-number:nth-child(8) {
    transform: rotateZ(77.83783784deg);
}
.r-number:nth-child(9) {
    transform: rotateZ(87.56756757deg);
}
.r-number:nth-child(10) {
    transform: rotateZ(97.2972973deg);
}
.r-number:nth-child(11) {
    transform: rotateZ(107.02702703deg);
}
.r-number:nth-child(12) {
    transform: rotateZ(116.75675676deg);
}
.r-number:nth-child(13) {
    transform: rotateZ(126.48648649deg);
}
.r-number:nth-child(14) {
    transform: rotateZ(136.21621622deg);
}
.r-number:nth-child(15) {
    transform: rotateZ(145.94594595deg);
}
.r-number:nth-child(16) {
    transform: rotateZ(155.67567568deg);
}
.r-number:nth-child(17) {
    transform: rotateZ(165.40540541deg);
}
.r-number:nth-child(18) {
    transform: rotateZ(175.13513514deg);
}
.r-number:nth-child(19) {
    transform: rotateZ(184.86486486deg);
}
.r-number:nth-child(20) {
    transform: rotateZ(194.59459459deg);
}
.r-number:nth-child(21) {
    transform: rotateZ(204.32432432deg);
}
.r-number:nth-child(22) {
    transform: rotateZ(214.05405405deg);
}
.r-number:nth-child(23) {
    transform: rotateZ(223.78378378deg);
}
.r-number:nth-child(24) {
    transform: rotateZ(233.51351351deg);
}
.r-number:nth-child(25) {
    transform: rotateZ(243.24324324deg);
}
.r-number:nth-child(26) {
    transform: rotateZ(252.97297297deg);
}
.r-number:nth-child(27) {
    transform: rotateZ(262.7027027deg);
}
.r-number:nth-child(28) {
    transform: rotateZ(272.43243243deg);
}
.r-number:nth-child(29) {
    transform: rotateZ(282.16216216deg);
}
.r-number:nth-child(30) {
    transform: rotateZ(291.89189189deg);
}
.r-number:nth-child(31) {
    transform: rotateZ(301.62162162deg);
}
.r-number:nth-child(32) {
    transform: rotateZ(311.35135135deg);
}
.r-number:nth-child(33) {
    transform: rotateZ(321.08108108deg);
}
.r-number:nth-child(34) {
    transform: rotateZ(330.81081081deg);
}
.r-number:nth-child(35) {
    transform: rotateZ(340.54054054deg);
}
.r-number:nth-child(36) {
    transform: rotateZ(350.27027027deg);
}
.roulette-main {
    width: 374px;
    margin: 0 auto;
}
.r-plate {
    background-color: gray;
    width: 350px;
    height: 350px;
    margin: 12px;
    border-radius: 50%;
    position: relative;
    -webkit-animation: rotate 24s infinite linear;
    animation: rotate 24s infinite linear;
}
.r-plate:after,
.r-plate:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
}
.r-plate:after {
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    border: 6px solid gold;
    box-shadow: inset 0px 0px 0px 2px #b39700, 0px 0px 0px 2px #ffeb80;
}
.r-plate:before {
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid silver;
    box-shadow: inset 0px 0px 0px 2px #808080;
    top: 12%;
    left: 12%;
    right: 12%;
    bottom: 12%;
    /*z-index: 1;*/
}
.r-number {
    width: 32px;
    height: 175px;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 0;
    left: calc(50% - (32px / 2));
    transform-origin: 50% 100%;
    background-color: transparent;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 175px solid black;
    box-sizing: border-box;
}
.r-number:nth-child(odd) {
    border-top-color: red;
}
.r-number:nth-child(37) {
    border-top-color: green;
}
.r-pit {
    color: #fff;
    padding-top: 12px;
    width: 32px;
    display: inline-block;
    font-size: 12px;
    transform: scale(1, 1.8);
    position: absolute;
    top: -175px;
    left: -16px;
}
.r-inner {
    display: block;
    height: 350px;
    width: 350px;
    position: relative;
}
.r-inner:after,
.r-inner:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
}
.r-inner:after {

    /*top: 24%;*/
    /*right: 24%;*/
    /*bottom: 24%;*/
    /*left: 24%;*/
    top: 13%;
    right: 13%;
    bottom: 13%;
    left: 13%;
    /* background-color: #4d4d4d; */
    border: 3px solid #808080;
}
.r-inner:before {
    top: 24%;
    bottom: 21%;
    left: 24%;
    right: 22%;
    content: "";
    color: #fff;
    font-size: 60px;
    border-radius: 0;
}
.r-inner[data-spinto="1"]:before {
    transform: rotateZ(-2602deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="2"]:before {
    transform: rotateZ(-2774deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="3"]:before {
    transform: rotateZ(-2850deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="4"]:before {
    transform: rotateZ(-2793deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="5"]:before {
    transform: rotateZ(-2642deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="6"]:before {
    transform: rotateZ(-2734deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="7"]:before {
    transform: rotateZ(-2526deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="8"]:before {
    transform: rotateZ(-2673deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="9"]:before {
    transform: rotateZ(-2564deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="10"]:before {
    transform: rotateZ(-2652deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="11"]:before {
    transform: rotateZ(-2693deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="12"]:before {
    transform: rotateZ(-2868deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="13"]:before {
    transform: rotateZ(-2714deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="14"]:before {
    transform: rotateZ(-2582deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="15"]:before {
    transform: rotateZ(-2813deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="16"]:before {
    transform: rotateZ(-2622deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="17"]:before {
    transform: rotateZ(-2755deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="18"]:before {
    transform: rotateZ(-2545deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="19"]:before {
    transform: rotateZ(-2803deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="20"]:before {
    transform: rotateZ(-2592deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="21"]:before {
    transform: rotateZ(-2784deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="22"]:before {
    transform: rotateZ(-2554deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="23"]:before {
    transform: rotateZ(-2662deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="24"]:before {
    transform: rotateZ(-2632deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="25"]:before {
    transform: rotateZ(-2764deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="26"]:before {
    transform: rotateZ(-2840deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="27"]:before {
    transform: rotateZ(-2724deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="28"]:before {
    transform: rotateZ(-2877deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="29"]:before {
    transform: rotateZ(-2535deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="30"]:before {
    transform: rotateZ(-2684deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="31"]:before {
    transform: rotateZ(-2573deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="32"]:before {
    transform: rotateZ(-2822deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="33"]:before {
    transform: rotateZ(-2612deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="34"]:before {
    transform: rotateZ(-2745deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="35"]:before {
    transform: rotateZ(-2499deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="36"]:before {
    transform: rotateZ(-2703deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner[data-spinto="0"]:before {
    transform: rotateZ(-2831deg);
    transition: transform 9s ease-out;
    content: "\2022";
}
.r-inner.rest:before {
    transition: top 0.5s ease-in, right 0.5s ease-in, bottom 0.5s ease-in, left 0.5s ease-in;
    top: 25%;
    right: 25%;
    bottom: 24%;
    left: 25%;
}

.r-number-border{
    border: 2px solid yellow;
    border-radius: 21px;
    padding: 1px;
}

.winning-number{
    border: 2px solid #04ff04;
    color:#fff;
}
.action_container{
    display: flex;
}

@media only screen and (max-width: 1182px) {
    .new-bg-height{
        height: 400px !important;
    }
    .roulette-main{
        margin: unset;
        padding-top: 30px;
    }
}
@media only screen and (max-width: 768px) {
    .new-bg-height{
        height: 400px !important;

    }
}
@media only screen and (max-width: 691px) {
    .new-bg-height{
        height: 600px !important;
    }
    .action_container{
        display: grid;
    }
    .win-container{
        margin-top: 10px;
    }
}
@media only screen and (max-width: 599px) {
    .new-bg-height{
        height: 700px !important;
    }
}
@media screen and (max-width: 768px) {
    .d-md-block {
        display: block !important;
    }
}


@media only screen and (max-width: 600px) {
    tfoot{
        display: flex;
    }
}