.roulette #backwall {
    position: absolute;
    width: 100%;
    height: 60%;
    top: 0;
    background-image: linear-gradient(to bottom, #3a1013, #61191d, #5c1a1b, #0f0e0d);
}

.roulette #curtains {
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

.roulette #logo {
    top: 2%;
    right: 2%;
    z-index: 0;
}
.roulette #floor {
    position: absolute;
    width: 100%;
    height: 40%;
    top: 60%;
    /*background-image: linear-gradient(to bottom, #3a1013, #61191d, #321919, #000000);*/
    background: black;
}

.roulette #gameArea {
    perspective: 1000px;
}

.roulette #tipsContainer {
    position: absolute;
    top: 2%;
    left: 30%;
}

.roulette #baizeColor {
    background-image: linear-gradient(to bottom, #062101, #3c8178, #295953, #062101);
}

.roulette #staff{
    top: 7.6%;
    width: 30vw;
    height: 20vh;
    left: calc(50% - 15vw);
}

.roulette #tabletop {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 90%;
    height: 100%;
    transform: rotateX(53deg);
    border-radius: 10% 10% 10% 10%; /* Create the rounded shape */
    border: 25px solid #1e1b1b;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Optional shadow for effect */
    overflow: hidden;
}

.roulette #tablelimits {
    top: 90%;
    left: 10%;
}

.roulette #roundInfo {
    top: 70%;
    Right: 5%;
}

.roulette #spinResult {
    position: absolute;
    width: 100%;
    height: 5vh;
    top: -5vh;
    left: 0;
    z-index: 3;
}

.roulette #winIndicator {
    position: absolute;
    height: 120%;
    width: 120%;
    z-index: 2;
}

.roulette .spinblack {
    background: #000;
}

.roulette .spinred {
    background: #951C12;
}

.roulette .spingreen {
    background: #53B563;
}

#rouletteWheelDiv {
    position: absolute;
    top: 20%;
    left: 3%;
    width: 28vw;
    height: calc(28vw * 350/500);
    z-index: 2;
}

.roulette #rouletteWheel{
    position: absolute;
    top: -13.2%;
    left: 10.71%;
    width: 78.57%;
    height: 22vw;
    z-index: 1;
    transform: rotateX(53deg);
}

.roulette #NewWheelBase {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}

.roulette #NewWheelSpinner{
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.roulette #outerWheel{
    position: absolute;
    left: 0%;
    width: 100%;
}

.roulette #wheelcontainer{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
}

.roulette #wheelballcontainer{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height:100%;
    z-index: 2;
}

.roulette #wheelShineContainer{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
}

.roulette #NewWheelShine {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.roulette #ballcontainer{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    transform: scale(0.55);
    z-index: 2;
}

.roulette #ball{
    position: absolute;
    transform: scale(2);
}


.roulette #roulettePositions{
    position: absolute;
    top: 30%;
    left: 30%;
    height: 50%;
    width: 60%;
}

#woodBase {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#shinyWoodBase {
    height: 100%;
    width: 100%;
}


/*Numbers*/

.roulette #roulettePositions #position0{
    width: calc((100%/14) + 0.5vh);
    height: calc((100%/4*3) + 0.5vh);
    border: .5vh solid white;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    color: yellow;
    font-size: 5vh;
    background: #53B563;
}

.roulette .to36, .column{
    width: calc((100%/14) + 0.5vh );
    height: calc((100%/4) + 0.5vh );
    border: .5vh solid white;
    font-size: 3vh;
    color: white;
    line-height: 3.5vh;
}


.roulette .rLayout{
    position: absolute;
    text-align: center;
    font-weight: bolder;
}

.roulette #roulettePositions #position1{
    background: #951C12;
    top: calc(100%/4*2);
    left: calc(100%/14);
}

.roulette #roulettePositions #position2{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14);
}

.roulette #roulettePositions #position3{
    background: #951C12;
    left: calc(100%/14);
}

.roulette #roulettePositions #position4{
    background: #000000;
    top: calc(100%/4*2);
    left: calc(100%/14*2);
}

.roulette #roulettePositions #position5{
    background: #951C12;
    top: calc(100%/4);
    left: calc(100%/14*2);
}

.roulette #roulettePositions #position6{
    background: #000000;
    left: calc(100%/14*2);
}

.roulette #roulettePositions #position7{
    background: #951C12;
    top: calc(100%/4*2);
    left: calc(100%/14*3);
}

.roulette #roulettePositions #position8{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14*3);
}

.roulette #roulettePositions #position9{
    background: #951C12;
    left: calc(100%/14*3);
}

.roulette #roulettePositions #position10{
    background: #000000;
    top: calc(100%/4*2);
    left: calc(100%/14*4);
}

.roulette #roulettePositions #position11{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14*4);
}

.roulette #roulettePositions #position12{
    background: #951C12;
    left: calc(100%/14*4);
}

.roulette #roulettePositions #position13{
    background: #000000;
    top: calc(100%/4*2);
    left: calc(100%/14*5);
}

.roulette #roulettePositions #position14{
    background: #951C12;
    top: calc(100%/4);
    left: calc(100%/14*5);
}

.roulette #roulettePositions #position15{
    background: #000000;
    left: calc(100%/14*5);
}

.roulette #roulettePositions #position16{
    background: #951C12;
    top: calc(100%/4*2);
    left: calc(100%/14*6);
}

.roulette #roulettePositions #position17{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14*6);
}

.roulette #roulettePositions #position18{
    background: #951C12;
    left: calc(100%/14*6);
}

.roulette #roulettePositions #position19{
    background: #951C12;
    top: calc(100%/4*2);
    left: calc(100%/14*7);
}

.roulette #roulettePositions #position20{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14*7);
}

.roulette #roulettePositions #position21{
    background: #951C12;
    left: calc(100%/14*7);
}

.roulette #roulettePositions #position22{
    background: #000000;
    top: calc(100%/4*2);
    left: calc(100%/14*8);
}

.roulette #roulettePositions #position23{
    background: #951C12;
    top: calc(100%/4);
    left: calc(100%/14*8);
}

.roulette #roulettePositions #position24{
    background: #000000;
    left: calc(100%/14*8);
}

.roulette #roulettePositions #position25{
    background: #951C12;
    top: calc(100%/4*2);
    left: calc(100%/14*9);
}

.roulette #roulettePositions #position26{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14*9);
}

.roulette #roulettePositions #position27{
    background: #951C12;
    left: calc(100%/14*9);
}

.roulette #roulettePositions #position28{
    background: #000000;
    top: calc(100%/4*2);
    left: calc(100%/14*10);
}

.roulette #roulettePositions #position29{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14*10);
}

.roulette #roulettePositions #position30{
    background: #951C12;
    left: calc(100%/14*10);
}

.roulette #roulettePositions #position31{
    background: #000000;
    top: calc(100%/4*2);
    left: calc(100%/14*11);
}

.roulette #roulettePositions #position32{
    background: #951C12;
    top: calc(100%/4);
    left: calc(100%/14*11);
}

.roulette #roulettePositions #position33{
    background: #000000;
    left: calc(100%/14*11);
}

.roulette #roulettePositions #position34{
    background: #951C12;
    top: calc(100%/4*2);
    left: calc(100%/14*12);
}

.roulette #roulettePositions #position35{
    background: #000000;
    top: calc(100%/4);
    left: calc(100%/14*12);
}

.roulette #roulettePositions #position36{
    background: #951C12;
    left: calc(100%/14*12);
}

/* Columns */
.roulette .column {
    font-size: 2vh;
}

.roulette #roulettePositions #position37{
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    border-right: .5vh solid white;
    top: calc(100%/4*2);
    left: calc(100%/14*13);
    border-top-right-radius: 30%;
    border-bottom-right-radius: 30%;
}

.roulette #roulettePositions #position38{
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    border-right: .5vh solid white;
    top: calc(100%/4);
    left: calc(100%/14*13);
    border-top-right-radius: 30%;
    border-bottom-right-radius: 30%;
}

.roulette #roulettePositions #position39{
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    border-right: .5vh solid white;
    border-top: .5vh solid white;
    left: calc(100%/14*13);
    border-top-right-radius: 30%;
    border-bottom-right-radius: 30%;
}

/*thirds*/
.roulette .third {
    width: calc(100%/14*4);
    height: calc(100%/8);
    top: calc(100%/4*3);
    color: white;
    font-size: 2vh;
}

.roulette #roulettePositions #position40{
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    left: calc(100%/14);
}

.roulette #roulettePositions #position41{
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    left: calc(100%/14*5);
}

.roulette #roulettePositions #position42{
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    border-right: .5vh solid white;
    left: calc(100%/14*9);
    width: calc((100%/14*4) + 0.5vh);
}

/*outside bets */

.roulette .outside {
    width: calc(100%/14*2);
    height: calc(100%/8);
    top: calc(100%/4*3.5);
    color: white;
    font-size: 2vh;
}

.roulette #roulettePositions #position43 {
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    left: calc(100%/14);
    border-bottom-left-radius: 1vh;
}

.roulette #roulettePositions #position44 {
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    border-right: .5vh solid white;
    left: calc(100%/14*11);
    border-bottom-right-radius: 1vh;
    width: calc((100%/14*2) + 0.5vh);
}

.roulette #roulettePositions #position45 {
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    left: calc(100%/14*3);
}

.roulette #roulettePositions #position46 {
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    left: calc(100%/14*9);
}

.roulette #roulettePositions #position47 {
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    left: calc(100%/14*5);
}

.roulette #roulettePositions #position48 {
    border-bottom: .5vh solid white;
    border-left: .5vh solid white;
    left: calc(100%/14*7);
}

/* streets */

.roulette .street {
    width: calc(100%/14/2);
    height: calc(100%/4/4);
    /*top: calc(100%/4/8* -1);*/
    top: calc(100%/4*2.875 );
}

.roulette #roulettePositions #position49 {
    left: calc(100%/14*1.25);
}

.roulette #roulettePositions #position50 {
    left: calc(100%/14*2.25);
}

.roulette #roulettePositions #position51 {
    left: calc(100%/14*3.25);
}

.roulette #roulettePositions #position52 {
    left: calc(100%/14*4.25);
}

.roulette #roulettePositions #position53 {
    left: calc(100%/14*5.25);
}

.roulette #roulettePositions #position54 {
    left: calc(100%/14*6.25);
}

.roulette #roulettePositions #position55 {
    left: calc(100%/14*7.25);
}

.roulette #roulettePositions #position56 {
    left: calc(100%/14*8.25);
}

.roulette #roulettePositions #position57 {
    left: calc(100%/14*9.25);
}

.roulette #roulettePositions #position58 {
    left: calc(100%/14*10.25);
}

.roulette #roulettePositions #position59 {
    left: calc(100%/14*11.25);
}

.roulette #roulettePositions #position60 {
    left: calc(100%/14*12.25);
}

.roulette #roulettePositions #position61 {
    left: calc(100%/14*1.75);
}

.roulette #roulettePositions #position62 {
    left: calc(100%/14*2.75);
}

.roulette #roulettePositions #position63 {
    left: calc(100%/14*3.75);
}

.roulette #roulettePositions #position64 {
    left: calc(100%/14*4.75);
}

.roulette #roulettePositions #position65 {
    left: calc(100%/14*5.75);
}

.roulette #roulettePositions #position66 {
    left: calc(100%/14*6.75);
}

.roulette #roulettePositions #position67 {
    left: calc(100%/14*7.75);
}

.roulette #roulettePositions #position68 {
    left: calc(100%/14*8.75);
}

.roulette #roulettePositions #position69 {
    left: calc(100%/14*9.75);
}

.roulette #roulettePositions #position70 {
    left: calc(100%/14*10.75);
}

.roulette #roulettePositions #position71 {
    left: calc(100%/14*11.75);
}


/* horizontal splits */

.roulette .hsplit {
    width: calc(100%/14/2);
    height: calc(100%/4/4);
}

.roulette #roulettePositions #position72 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*1.25);
}

.roulette #roulettePositions #position73 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*1.25);
}

.roulette #roulettePositions #position74 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*2.25);
}

.roulette #roulettePositions #position75 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*2.25);
}

.roulette #roulettePositions #position76 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*3.25);
}

.roulette #roulettePositions #position77 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*3.25);
}

.roulette #roulettePositions #position78 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*4.25);
}

.roulette #roulettePositions #position79 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*4.25);
}

.roulette #roulettePositions #position80 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*5.25);
}

.roulette #roulettePositions #position81 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*5.25);
}

.roulette #roulettePositions #position82 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*6.25);
}

.roulette #roulettePositions #position83 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*6.25);
}

.roulette #roulettePositions #position84 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*7.25);
}

.roulette #roulettePositions #position85 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*7.25);
}

.roulette #roulettePositions #position86 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*8.25);
}

.roulette #roulettePositions #position87 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*8.25);
}

.roulette #roulettePositions #position88 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*9.25);
}

.roulette #roulettePositions #position89 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*9.25);
}

.roulette #roulettePositions #position90 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*10.25);
}

.roulette #roulettePositions #position91 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*10.25);
}

.roulette #roulettePositions #position92 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*11.25);
}

.roulette #roulettePositions #position93 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*11.25);
}

.roulette #roulettePositions #position94 {
    top: calc(100%/4*0.875 );
    left: calc(100%/14*12.25);
}

.roulette #roulettePositions #position95 {
    top: calc(100%/4*1.875 );
    left: calc(100%/14*12.25);
}


/* vertical splits */

.roulette .vsplit {
    width: calc(100%/14/4);
    height: calc(100%/4/2);
}

.roulette #roulettePositions #position96 {
    left: calc(100%/14*0.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position97 {
    left: calc(100%/14*0.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position98 {
    left: calc(100%/14*0.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position99 {
    left: calc(100%/14*1.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position100 {
    left: calc(100%/14*1.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position101 {
    left: calc(100%/14*1.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position102 {
    left: calc(100%/14*2.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position103 {
    left: calc(100%/14*2.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position104 {
    left: calc(100%/14*2.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position105 {
    left: calc(100%/14*3.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position106 {
    left: calc(100%/14*3.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position107 {
    left: calc(100%/14*3.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position108 {
    left: calc(100%/14*4.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position109 {
    left: calc(100%/14*4.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position110 {
    left: calc(100%/14*4.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position111 {
    left: calc(100%/14*5.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position112 {
    left: calc(100%/14*5.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position113 {
    left: calc(100%/14*5.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position114 {
    left: calc(100%/14*6.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position115 {
    left: calc(100%/14*6.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position116 {
    left: calc(100%/14*6.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position117 {
    left: calc(100%/14*7.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position118 {
    left: calc(100%/14*7.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position119 {
    left: calc(100%/14*7.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position120 {
    left: calc(100%/14*8.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position121 {
    left: calc(100%/14*8.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position122 {
    left: calc(100%/14*8.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position123 {
    left: calc(100%/14*9.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position124 {
    left: calc(100%/14*9.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position125 {
    left: calc(100%/14*9.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position126 {
    left: calc(100%/14*10.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position127 {
    left: calc(100%/14*10.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position128 {
    left: calc(100%/14*10.875);
    top: calc(100%/4*0.25);
}

.roulette #roulettePositions #position129 {
    left: calc(100%/14*11.875);
    top: calc(100%/4*2.25);
}

.roulette #roulettePositions #position130 {
    left: calc(100%/14*11.875);
    top: calc(100%/4*1.25);
}

.roulette #roulettePositions #position131 {
    left: calc(100%/14*11.875);
    top: calc(100%/4*0.25);
}

/* Corners */

.roulette .corner {
    width: calc(100%/14/2);
    height: calc(100%/4/4);
}

.roulette #roulettePositions #position132 {
    left: calc(100%/14*0.75);
    top: calc(100%/4*2.875 );
}

.roulette #roulettePositions #position133 {
    left: calc(100%/14*0.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position134 {
    left: calc(100%/14*0.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position135 {
    left: calc(100%/14*1.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position136 {
    left: calc(100%/14*1.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position137 {
    left: calc(100%/14*2.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position138 {
    left: calc(100%/14*2.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position139 {
    left: calc(100%/14*3.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position140 {
    left: calc(100%/14*3.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position141 {
    left: calc(100%/14*4.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position142 {
    left: calc(100%/14*4.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position143 {
    left: calc(100%/14*5.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position144 {
    left: calc(100%/14*5.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position145 {
    left: calc(100%/14*6.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position146 {
    left: calc(100%/14*6.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position147 {
    left: calc(100%/14*7.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position148 {
    left: calc(100%/14*7.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position149 {
    left: calc(100%/14*8.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position150 {
    left: calc(100%/14*8.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position151 {
    left: calc(100%/14*9.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position152 {
    left: calc(100%/14*9.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position153 {
    left: calc(100%/14*10.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position154 {
    left: calc(100%/14*10.75);
    top: calc(100%/4*0.875 );
}

.roulette #roulettePositions #position155 {
    left: calc(100%/14*11.75);
    top: calc(100%/4*1.875 );
}

.roulette #roulettePositions #position156 {
    left: calc(100%/14*11.75);
    top: calc(100%/4*0.875 );
}

.roulette .rLayout2 {
    position: absolute;
}

.roulette #rHistoryDisplay{
    position: absolute;
    width: 52vw;
    height: 4.5vh;
    top: 65vh;
    left: 34vw;
    overflow-x: hidden;
    overflow-y: hidden;
}

.roulette .historyTile {
    height: 100%;
    float: left;
    padding-right: 1px;
}

.roulette #circle{
    pointer-events: none;
}


/*Racetrack*/
.roulette #raceTrack {
    position: absolute;
    top: 5%;
    left: 40%;
    width: 35%;
    height: 20%;
}

.roulette .neighbour {
    position: absolute;
    width: calc(100%/18);
    height: calc(100%/4);
    color: white;
    border: solid;
    border-color: white;
    border-width: 1px;
    font-size: 1.5vh;
}

.roulette #voisins, .roulette #tiers, .roulette #orphelins {
    top: calc(100%/4);
    height: calc(100%/2);
    position: absolute;
    border: solid;
    border-color: white;
    border-width: 1px;
    font-size: 1.5vh;
}

.roulette #voisins {
    left: calc(100%/18);
    width: calc(100%/18 * 7);
 }

.roulette #orphelins{
    left: calc(100%/18 * 8);
    width: calc(100%/18 * 4);
}

.roulette #tiers {
    left: calc(100%/18 * 12);
    width: calc(100%/18 * 5);
}

#neighbour32, #neighbour19, #neighbour21,#neighbour25,#neighbour34, #neighbour27,
#neighbour36, #neighbour30, #neighbour23, #neighbour5, #neighbour16, #neighbour1,
#neighbour14,#neighbour9, #neighbour17, #neighbour7, #neighbour12, #neighbour3, #neighbour18{
    background-color: #951C12;
}

#neighbour15,#neighbour4,#neighbour2,#neighbour17,#neighbour6,#neighbour13,#neighbour11,
#neighbour8,#neighbour10,#neighbour24,#neighbour33,#neighbour20,#neighbour31,#neighbour22,
#neighbour29,#neighbour28,#neighbour35,#neighbour26{
    background-color: black;
}



.roulette #neighbour17{
    left: calc(((100%/18)*8));
    width: calc((100%/18)*2);
}

.roulette #neighbour34{
    left: calc((100%/18)*10);
    top: calc((100%/4)*0)
}

.roulette #neighbour6{
    left: calc((100%/18)*11);
    top: calc((100%/4)*0)
}

.roulette #neighbour27{
    left: calc((100%/18)*12);
    top: calc((100%/4)*0)
}

.roulette #neighbour13{
    left: calc((100%/18)*13);
    top: calc((100%/4)*0)
}

.roulette #neighbour36{
    left: calc((100%/18)*14);
    top: calc((100%/4)*0);
}

.roulette #neighbour11{
    left: calc((100%/18)*15);
    top: calc((100%/4)*0)
}

.roulette #neighbour30{
    left: calc((100%/18)*16);
    top: calc((100%/4)*0)
}

.roulette #neighbour8{
    left: calc((100%/18)*17);
    top: calc((100%/4)*0);
    height: calc(100%/3);
    border-top-right-radius: 80%;
}

.roulette #neighbour23{
    left: calc((100%/18)*17);
    top: calc((100%/3)*1);
    height: calc(100%/3);
}

.roulette #neighbour10{
    left: calc((100%/18)*17);
    top: calc((100%/3)*2);
    height: calc(100%/3);
    border-bottom-right-radius: 80%;
}

.roulette #neighbour5{
    left: calc((100%/18)*16);
    top: calc((100%/4)*3);
}

.roulette #neighbour24{
    left: calc((100%/18)*15);
    top: calc((100%/4)*3);
}

.roulette #neighbour16{
    left: calc((100%/18)*14);
    top: calc((100%/4)*3);
}

.roulette #neighbour33{
    left: calc((100%/18)*13);
    top: calc((100%/4)*3);
}
.roulette #neighbour1{
    left: calc((100%/18)*12);
    top: calc((100%/4)*3);)
}

.roulette #neighbour20{
    left: calc((100%/18)*11);
    top: calc((100%/4)*3);)
}
.roulette #neighbour14{
    left: calc((100%/18)*10);
    top: calc((100%/4)*3);)
}
.roulette #neighbour31{
    left: calc((100%/18)*9);
    top: calc((100%/4)*3);)
}
.roulette #neighbour9{
    left: calc((100%/18)*8);
    top: calc((100%/4)*3);)
}
.roulette #neighbour22{
    left: calc((100%/18)*7);
    top: calc((100%/4)*3);)
}
.roulette #neighbour18{
    left: calc((100%/18)*6);
    top: calc((100%/4)*3);)
}
.roulette #neighbour29{
    left: calc((100%/18)*5);
    top: calc((100%/4)*3);)
}
.roulette #neighbour7{
    left: calc((100%/18)*4);
    top: calc((100%/4)*3);)
}
.roulette #neighbour28{
    left: calc((100%/18)*3);
    top: calc((100%/4)*3);)
}
.roulette #neighbour12{
    left: calc((100%/18)*2);
    top: calc((100%/4)*3);)
}
.roulette #neighbour35{
    left: calc((100%/18)*1);
    top: calc((100%/4)*3);)
}
.roulette #neighbour3{
    left: calc((100%/18)*0);
    top: calc((100%/3)*2);
    height: calc(100%/3);
    border-bottom-left-radius: 80%;
}
.roulette #neighbour26{
    left: calc((100%/18)*0);
    top: calc((100%/3)*1);
    height: calc(100%/3);
}
.roulette #neighbour0 {
    left: calc((100% / 18) * 0);
    top: calc((100% / 4) * 0);
    height: calc(100% / 3);
    border-top-left-radius: 80%;
    background: #53B563;
}
.roulette #neighbour32{
    left: calc(((100%/18)*1));
    width: calc((100%/18)*1);
}
.roulette #neighbour15{
    left: calc(((100%/18)*2));
    width: calc((100%/18)*1);
}
.roulette #neighbour19{
    left: calc(((100%/18)*3));
    width: calc((100%/18)*1);
}
.roulette #neighbour4{
    left: calc(((100%/18)*4));
    width: calc((100%/18)*1);
}
.roulette #neighbour21{
    left: calc(((100%/18)*5));
    width: calc((100%/18)*1);
}
.roulette #neighbour2{
    left: calc(((100%/18)*6));
    width: calc((100%/18)*1);
}
.roulette #neighbour25{
    left: calc(((100%/18)*7));
    width: calc((100%/18)*1);
}

.roulette .chipCont {
    position: absolute;
    height: 6vh;
    width: 6vh;
    top: calc(50% - 3vh);
    left: calc(50% - 3vh);
    zIndex: 300;
    font-size: 1vh;
    z-index: 100;
}

.roulette #statistics {
    position: absolute;
    top: 7vh;
    height: 75%;
    left: 35vw;
    width: 30vw;
    background: rgba(255,255,255,0.95);
    border-radius: 2vh;
    border-color: #ffba5f;
    border-width: 2px;
    border-style: solid;
    z-index: 1001;
}

.roulette #statisticsHeader {
    position: relative;
    top: 1vh;
    left: 0;
    height: 3.5vh;
    width: 100%;
}

.roulette #statsIcon {
    height: 3.5vh;
    width: 3.5vh;
    margin-right: 2vw;
}

.roulette #statsHeaderText {
    color: #898e96;
    text-transform: uppercase;
    font-size: 2vh;
}

.roulette #statisticsSelector {
    position: absolute;
    top: 5vh;
    left: 0;
    height: 8vh;
    width: 100%;
    background: #c7c9cc;
    border-radius: 2vh;

}

.roulette .statisticsSelector {
    width: 100%;
    height: calc(100% / 3);
    border-radius: 2vh;
    color: white;
    font-size: 2vh;
    line-height: calc(8vh/3);
    text-align: center;
    text-transform: uppercase;
}

.roulette .statisticsSelected {
    background: #f5a130;
}

.roulette #statisticsContent {
    position: absolute;
    top: 15vh;
    left: 0;
    width: 100%;
    height: 54vh;
    overflow-y: scroll;
}

.roulette #hotNumbers {
    position: absolute;
    top: 0;
    left: 0;
    width: 3vw;
    flex-direction: column;
}

.roulette #coldNumbers {
    position: absolute;
    top: 0;
    right: 0;
    width: 3vw;
    flex-direction: column;
}

.roulette .hotColdStat {
    width: 100%;
    height: 3vw;
    border: 1px #898e96 solid;
}

.roulette .redHotColdStat {
    color: #eb3534;
}

.roulette .blackHotColdStat {
    color: #2e2a2b;
}

.roulette .greenHotColdStat {
    color: #6a9128;
}

.roulette #hotNumberIcon {
    background: #eb3534;
}

.roulette #coldNumberIcon {
    background: #4681c7;
}

.roulette #hotColdNumbers {
    position: absolute;
    top: 5vh;
    left: calc(50% - (20vw/2));
    width: 20vw;
    height: 20vw;
    border-radius: 100%;
    overflow: hidden;
    background: #a9a9a9;
}

.roulette .hotColdSlice {
    position: absolute;
    top: 2vw;
    width: 1.5vw;
    height: 8vw;
    left: calc(50% - 0.8vw);
    transform-origin: 50% 100%;
}

.roulette .advancedRow {
    width: 100%;
    height: 15%;
    margin-bottom: 2%;
}

.roulette .advancedColumn {
    flex-direction: column;
}

.roulette .advancedPercentage {
    width: 100%;
    height: 50%;
    color: #898e96;
}

.roulette .advancedLabel {
    width: 100%;
    height: 50%;
    border: 1px #898e96 solid;
    text-transform: uppercase;
    background: #bababa;
}

.roulette .dozen {
    width: calc(100% /3);
}

.roulette .callbetstat {
    width: calc(100% /4);
}

.roulette .outsidebetStat {
    width: calc(100% /6);
}

.roulette #zero .advancedLabel{
    background: #8ebc4b;
}

.roulette #dozen2 .advancedLabel, .roulette #column2 .advancedLabel, .roulette #orphelinsStat .advancedLabel, .roulette #zeroCallStat .advancedLabel {
    background: #9da1a4;
}

.roulette .statDiamond {
    width: 50%;
}

.roulette .statTile {
    width: calc(30vw / 12 - 2px);
    height: calc(30vw / 12 - 2px);
    float: left;
    border: 1px #595959 solid;
    margin-bottom: 1vh;
}

.roulette .redStatTile {
    background: #bababa;
    color: #eb3534;
}

.roulette .blackStatTile {
    background: #9da1a4;
    color: white;
}

.roulette .greenStatTile {
    background: #9da1a4;
    color: #6a9128;
}


.roulette #statisticsSampleSize {
    position: absolute;
    top: 70vh;
    left: 0;
    height: 2vh;
    width: 100%;
}

.roulette .statSizeBtn {
    float: left;
    width: calc(100% /5);
    background: #c7c9cc;
    border-radius: 2vh;
    font-size: 1.5vh;
}

.roulette .statSizeBtnSelected {
    background: #f5a130;
}

.roulette #closeStatsBtn {
    position: absolute;
    top: 0;
    right: 0;
    height: 4vh;
    width: 4vh;
}

.ballTarget {
    position: absolute;
    top: 25%;
    left: calc(50% - 0.25vw);
    width: 0.5vw;
    height: 25%;
    transform-origin: 50% 100%;
    text-align: center;
    color: #00FF47;
    font-size: 3vh;
    font-weight: bold;
    z-index: 1;

}

.ballTargetIndicator {
    position: absolute;
    left: calc(0.25vw - 1px);
    background: cornflowerblue;
    height: 2px;
    width: 2px;
    border-radius: 50%;
    box-shadow: 0 0 2px 3px #0ff;
}

.ballTarget0 {
    transform: rotate(1deg);
}

.ballTarget32 {
    transform: rotate(11deg);
}

.ballTarget15 {
    transform: rotate(21deg);
}

.ballTarget19 {
    transform: rotate(31deg);
}

.ballTarget4 {
    transform: rotate(40deg);
}

.ballTarget21 {
    transform: rotate(50deg);
}

.ballTarget2 {
    transform: rotate(60deg);
}

.ballTarget25 {
    transform: rotate(69.5deg);
}

.ballTarget17 {
    transform: rotate(79deg);
}

.ballTarget34 {
    transform: rotate(89deg);
}

.ballTarget6 {
    transform: rotate(98deg);
}

.ballTarget27 {
    transform: rotate(108deg);
}

.ballTarget13 {
    transform: rotate(118deg);
}

.ballTarget36 {
    transform: rotate(127deg);
}

.ballTarget11 {
    transform: rotate(137deg);
}

.ballTarget30 {
    transform: rotate(146.5deg);
}

.ballTarget8 {
    transform: rotate(157deg);
}

.ballTarget23 {
    transform: rotate(167deg);
}

.ballTarget10 {
    transform: rotate(177deg);
}

.ballTarget5 {
    transform: rotate(-174deg);
}

.ballTarget24 {
    transform: rotate(-164deg);
}

.ballTarget16 {
    transform: rotate(-154deg);
}

.ballTarget33 {
    transform: rotate(-144.5deg);
}

.ballTarget1 {
    transform: rotate(-135deg);
}

.ballTarget20 {
    transform: rotate(-125deg);
}

.ballTarget14 {
    transform: rotate(-116deg);
}

.ballTarget31 {
    transform: rotate(-106deg);
}

.ballTarget9 {
    transform: rotate(-96deg);
}

.ballTarget22 {
    transform: rotate(-86deg);
}

.ballTarget18 {
    transform: rotate(-76deg);
}

.ballTarget29 {
    transform: rotate(-66deg);
}

.ballTarget7 {
    transform: rotate(-57deg);
}

.ballTarget28 {
    transform: rotate(-47deg);
}

.ballTarget12 {
    transform: rotate(-37deg);
}

.ballTarget35 {
    transform: rotate(-27.5deg);
}

.ballTarget3 {
    transform: rotate(-18deg);
}

.ballTarget26 {
    transform: rotate(-8deg);
}