.gameContainer {
  width: 100%;
  height: 100%;
  margin-bottom: 0.3%;
  /* display: inline-block; */

}

/* .coinArea {
        width: 15.5%;
        height: auto;
        background-color: rgb(85, 219, 186);
        display: inline-block;
        
    } */
.videoArea {
  width: 70%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.playArea {
  width: 27%;
  height: auto;
  display: inline-block;
  /* margin-left: -5px; */
  vertical-align: top;
}

.rouletteplayArea {
  width: 100%;
  height: auto;
  display: table-row;
  /* margin-left: -5px; */
  vertical-align: top;
}

.countdown {
  width: 100%;
  height: auto;
  /* min-height: 155px;   */
  display: inline-block;
  position: relative;
  /* background-image: url("../images/roulette/roulette-bg.png");
        background-repeat: no-repeat, repeat;
        background-size:contain;
        background-position:top; */

}

.countdownInBox {}

/* countdown Number CSS */

.number {
  font-size: 7vw;
  color: #ffffff;
  /* line-height: 300px; */
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
}

.countdown span {
  position: absolute;
  font-size: 6vw;
  opacity: 1;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* .number span {
    position: absolute;
    opacity: 1; */
/* left: 40%; */
/* display: block;
    width: 100%;
    margin-top: 28%;
  
  
  } */

/* @-webkit-keyframes time {
    
      0%,
      10%,
      100% {
        opacity: 0;
        transform: scale(1);
      }
    
      5% {
        opacity: 0.8;
        transform: scale(1.2);
      }
    }
    
    .num3,
    .num2,
    .num1 {
      color: #FF1643;
    }
    
    .num0 {
      animation: time 20s infinite;
      animation-delay: 20s;
    }
    
    .num1 {
      animation: time 20s infinite;
      animation-delay: 18s;
    }
    
    .num2 {
      animation: time 20s infinite;
      animation-delay: 16s;
    }
    
    .num3 {
      animation: time 20s infinite;
      animation-delay: 14s;
    }
    
    .num4 {
      animation: time 20s infinite;
      animation-delay: 12s;
    }
    
    .num5 {
      animation: time 20s infinite;
      animation-delay: 10s;
    }
    
    .num6 {
      animation: time 20s infinite;
      animation-delay: 8s;
    }
    
    .num7 {
      animation: time 20s infinite;
      animation-delay: 6s;
    }
    
    .num8 {
      animation: time 20s infinite;
      animation-delay: 4s;
    }
    
    .num9 {
      animation: time 20s infinite;
      animation-delay: 2s;
    }
    
    .num10 {
      animation: time 20s infinite;
      animation-delay: 0s;
    } */


/* countdown Number CSS */




.video {
  width: 100%;
  height: auto;
}

.leftButtonBox {

  width: 100%;
  height: auto;
  position: relative;



}

.leftButtonBoxLinkBox {
  width: 35%;
  display: block;
  margin: 0 auto;
}


/* ############# Toast popup ############ */

[class*="toast-pos-"] {
  position: absolute;
  /* padding: 10px; */
  z-index: 999;
  width: 50%;
  height: 69%;
}

.toast-pos-top {
  top: 0;
}

.toast-pos-right {
  right: 0;
}

.toast-pos-bottom {
  bottom: 0;
  position: absolute;
}

.toast-pos-left {
  left: 0;
  position: absolute;
}

.toast {
  display: none;
  padding: 20px;
  /* margin: 20px 0; */
  background-color: red;
  color: #333333;
}

.close-toast {
  float: right;
  text-decoration: none;
  color: #ffffff;
  vertical-align: middle;
}

.coin-active {
  transform: scale(1.4);
  /* padding-bottom: 4%; */
}

.toast-trigger {
  color: #ffffff;
}

.toast {
  /* background: rgba(255,255,255,.5); */
  color: #FFFFFF;
  background-color: black;
  width: 100%;
  height: 100%;
  /* margin-top: 35%; */
}

.toast-trigger {
  display: inline-block;

  /* background: transparent; */
  background-color: black;
  color: #ffffff;

  text-decoration: none;
  transition: ease .2s;
}

.toast-trigger:hover {
  background: black;
  color: white;
}

/* @media screen and (max-width:576px){
        .toast {      
          color: #FFFFFF;
          background-color: black;
          width: 60%;
          height: 240px;      
        }
        
      } 
      @media screen and (min-width:576px){
        
      }
      @media screen and (max-width:768px){
        
      }
      @media screen and (max-width:992px){
        
      }
      @media screen and (max-width:1200px){
        .toast {      
          color: #FFFFFF;
          background-color: black;
          width: 105%;
          height: 400px;      
        }
        
      }
      @media screen and (min-width:1200px){
        .toast {      
          color: #FFFFFF;
          background-color: black;
          width: 105%;
          height: 430px;      
        }
        
      }
    
      @media screen and (min-width:576px){
       
      } */




/* ############# Toast popup END ############ */


/* ############# Tab ############ */



.tab-menu {
  position: relative;
  width: 700px;
  height: auto;
  margin: 0;
}

.tabBox {
  position: relative;
  width: 700px;
  height: auto;
}

a {
  float: left;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.tabTitle {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  font-size: 1.11vw;
  font-weight: 600;
  font-family: 'Anton';
  text-align: center;
  background: #FCB503;
  background: -webkit-linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  background: -moz-linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  background: linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tabInnerContentBox {
  width: 700px;
  height: auto;
  margin-top: 75px;
}





.tabs {
  width: 100%;
  height: 100%;

}

/* tab list item */
.tabs .tabs-list {
  position: absolute;
  z-index: 100;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 10%;
  margin-top: -9px;
}

.tabs .tabs-list2 {
  position: relative;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 10%;
}

.tabs .tabs-list li {
  width: auto;
  float: left;
  margin: 0px;
  margin-right: 2px;
  padding: 5px 10px;
  text-align: center;
  background-color: black;
  /* border-radius:3px; */
}

.tabs .tabs-list li:hover {
  cursor: pointer;
}

.tabs .tabs-list li a {
  text-decoration: none;
  color: white;
  font-size: 1.2vw;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-family: 'Roboto';
  text-align: center;
  background: #FCB503;
  background: -webkit-linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  background: -moz-linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  background: linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tab content section */
.tabs .tab {
  display: none;
  width: 100%;
  height: 90%;
  padding: 2%;
  background-color: rgb(36, 36, 36);
  overflow-y: scroll;
  clear: both;
  position: relative;

}


.tabInboxOutCol {
  display: table;
  width: 100%;
  height: 100%;
}

/* width */
.tab::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.tab::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
.tab::-webkit-scrollbar-thumb {
  background: #FCB503;
}

/* Handle on hover */
.tab::-webkit-scrollbar-thumb:hover {
  background: white;

}



/* When active state */
.active {
  display: block !important;
}

.tabs .tabs-list li.active {
  background-color: rgb(36, 36, 36) !important;
  color: black !important;
}

.active a {
  color: black !important;
}

/* media query */
/* @media screen and (max-width:360px){
      .tabs{
          margin:0;
          width:96%;
      }
      .tabs .tabs-list li{
          width:80px;
      }
    } */

.tabInboxOut {

  display: table-row;
}

.tabInbox {
  display: inline-block;
  position: relative;
  width: 27%;
  height: auto;
  margin: 2%;
}

.tabInimg {
  width: 100%;
  /* height: auto; */
  /* display: table-cell; */
  position: relative;
  /* top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);    */
}

.tabInTitel {

  width: 100%;
  height: auto;
  color: white;
  font-size: 1.5vw;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-family: 'Roboto';
  text-align: center;
  background: #FCB503;
  background: -webkit-linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  background: -moz-linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  background: linear-gradient(to bottom, #FCB503 0%, #E5881B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 10px;


}

.tabInTitel2 {
  width: 100%;
  height: auto;
  color: white;
  font-size: 10px;
  font-weight: 100;
  font-family: 'Roboto';
  text-align: center;


}

/* ############# Tab END ############ */



.loadingBox {

  width: 100%;
  height: auto;
}







.infoContainer {
  width: 100%;
  height: 26%;
  /* height: 30%; */
  /* display: inline-flex; */

}


.staticsArea {
  width: 100%;
  height: 33%;
  display: inline-block;
}

.resultBeadPlate {
  width: 35%;
  height: 100%;
  margin-left: -4px;
  vertical-align: top;
  display: inline-block;
  background-color: #c8c8c8;
}

.resultPatternContainer {
  width: 50%;
  height: 100%;
  margin-left: -4px;
  vertical-align: top;
  display: inline-block;
  background-color: rgb(224, 216, 180);
}

.resultTable {
  width: 8%;
  height: 100%;
  margin-left: -6px;
  vertical-align: top;
  display: inline-block;
  position: relative;

}

.resultPatternBoxone,
.resultPatterncontainer {
  width: 100%;
  height: 50%;
}

.resultPatternBoxtwo,
.resultPatternBoxthree {
  width: 100%;
  height: 50%;

}

.resultPatternBoxthreeinone,
.resultPatternBoxthreeintwo {
  width: 50%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}

.resultPatternBoxthreeintwo {
  margin-left: -4px;
  white-space: normal;
}

.resultPatternBoxthree {
  white-space: nowrap;
}



.bigroad {
  display: table;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.bigroadrow {
  display: table-row;

}

.bigroadcol {
  width: 2.5%;
  height: 16.66%;
  display: table-cell;
  border: 1px solid black;
  position: relative;
}


.bigeyeboy {
  display: table;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.bigeyeboyrow {
  display: table-row;

}

.bigeyeboycol {
  width: 1.25%;
  height: 16.66%;
  display: table-cell;

  position: relative;
}


.smallroad {
  display: table;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.smallroadrow {
  display: table-row;

}

.smallroadcol {
  width: 2.5%;
  height: 16.66%;
  display: table-cell;

  position: relative;
}

.cockroach {
  display: table;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.cockroachrow {
  display: table-row;

}

.cockroachcol {
  width: 2.5%;
  height: 16.66%;
  display: table-cell;

  position: relative;
}


.resultBeadPlateOutBox {
  display: table;
  width: 100%;
  height: 100%;
  border-collapse: collapse;

}

.resultTableInnetBox {
  width: 20.6%;
  height: 50%;
  display: block;
  margin: 0 auto;

}

.resultbeadplateIn {
  display: table-row;
}

.resultbeadplateInbox {
  display: table-cell;
  border: 1px solid black;
  width: 7.14%;
  height: 16.66%;
  position: relative;
}

.resultbeadplateInboximg {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.resultStaticti {
  width: 6%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  position: relative;
}


.resultStaticticol>p {
  color: black;
  font-size: 1.3vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  position: absolute;
}

.resultStatictiOutBox {
  display: table;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  position: relative;
}

.resultStatictirow {
  display: table-row;
}

.resultStaticticol {
  width: 50%;
  height: 20%;
  display: table-cell;
  border: 1px solid black;
  position: relative;
}

.resultStatictiOutBoxContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  /* top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
  background-color: #c8c8c8;



}

/* .resultPatternBoxone>div>div:not(:last-child), .bigeyeboy>div>div:nth-child(odd):not(:last-child), .resultPatternBoxthreeinone>div>div:nth-child(odd):not(:last-child), .resultPatternBoxthreeintwo>div>div:nth-child(odd):not(:last-child) {
        border-right: .1rem solid #c8c8c8;  
         
    } */




/* ###################### */

.bigeyeboy,
.resultPatternBoxthreeinone,
.cockroach {

  border-top: 1px solid #000;
  border-right: 1px solid #000;
}


.bigeyeboy>div>div:nth-child(odd),
.smallroad>div>div:nth-child(odd),
.cockroach>div>div:nth-child(odd) {

  border-left: 1px solid rgb(83, 83, 83);
}

.bigeyeboy>div:nth-child(even),
.smallroad>div:nth-child(even),
.cockroach>div:nth-child(even) {
  border-bottom: 1px solid rgb(83, 83, 83);
}





.coinContainer {
  display: inline-block;
  width: 25%;
  height: 59%;


}

.coinContainerRow {
  display: table-row;


}

.coinContainerCol {
  width: 50%;
  height: auto;
  display: table-cell;
  border: 1px solid black;
  position: relative;

}

.coinContainerRowOut {
  width: 100%;
  /* height: 68%; */
  display: block;
}

.gameContainerOut {
  width: 75%;
  height: 59%;
  display: inline-block;
  margin: -4px;
  vertical-align: top;
}


.footerLeftInfo1 {

  width: 100%;
  height: 97%;
  /* margin-left: 5px;
        margin-bottom: 5px; */
  background-color: #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 25px;
  /* padding: 3px; */
  /* position: absolute; */
  display: block;

}


.leftBoardRedc2 {

  display: block;
  width: 100%;
  height: 25%;
  position: relative;
}


/* .leftBoardBluc2 {
        
        display: table-row;
        width: 100%;
        height: 25%;
        position: relative;   
    
    }   */



/* Coin hover Effects Shine  */

/* Zoom In #1 */
.hover01 figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
}

.hover01 figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

/* Coin hover Effects Shine END */


/* ############### Progress Bar ############# */


.progress {
  /* width: 810px; */
  width: 100%;
  height: 1vw;

  border-radius: 0px;
  /* float: right; */
}

.progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, green 10%, yellow 34%, red 80%);
  /* make it big to eliminate gradient color visible during single progress position */
  background-size: 100% 10000%;
  transition: ease-out 0.8s;
  transition-property: background-position, transform;
  transform-origin: 0;
  transform: scaleX(0);

}

/* ############### Progress Bar END ############# */

/* ########### Glass button ########## */



.glossy-button {
  display: inline-block;
  position: relative;
  background-color: #AAA;
  /* background-image: linear-gradient( 
          hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
          hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
        ); */
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0) 30%,
      hsla(0, 0%, 0%, 0.3) 70%, hsla(0, 0%, 100%, 0.2));
  font-size: 22px;
  font-family: 'Anton';
  font-weight: 200;
  color: white;
  padding: 20px 40px;
  text-shadow:
    0 0 15px hsla(0, 0%, 100%, 0.9),
    /* bloom */
    0 2px 4px hsla(0, 0%, 0%, 0.9);
  /* drop shadow */
  border: none;
  border-radius: 15px;
  margin: 10px;
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.7),
    /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4),
    /* bottom shadow */
    /* multiple light sources yall */
    -8px 8px 5px hsla(0, 0%, 0%, 0.15),
    /* drop shadow 1 */
    5px 18px 10px hsla(0, 0%, 0%, 0.2);
  /* drop shadow 2 */
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

/* highlight */
.glossy-button:before {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 5px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0));
}

.glossy-button--blue {
  background-color: #0061ff;
}

.glossy-button--gold {
  background-color: #EA0;
}

.glossy-button--green {
  background-color: #5cff00;
}

.glossy-button--red {
  background-color: #ff0000;
}

.glossy-button:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4),
    /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4),
    /* bottom shadow */
    /* multiple light sources yall */
    -12px 12px 5px hsla(0, 0%, 0%, 0.15),
    /* drop shadow 1 */
    10px 25px 10px hsla(0, 0%, 0%, 0.2);
  /* drop shadow 2 */
}




/* .glossy-button2 { */
/* display: inline-block;
        position: relative; */


/* font-size: 0.7vw;
    font-family: 'Anton';
    font-weight: 200;
    color: white;
    padding: 0.7vw;
  
    border: none;
    border-radius: 5px; */
/* margin: 0px 3px;  */
/* box-shadow:
      inset 0 -5px 20px hsla(0, 0%, 0%, 0.7),
      inset 0 5px 20px hsla(0, 0%, 100%, 0.4),
  
      -8px 8px 5px hsla(0, 0%, 0%, 0.15),
      5px 18px 10px hsla(0, 0%, 0%, 0.2);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s; */
/* } */

.glossy-button2 {
  font-size: 1vw;
  font-family: 'Roboto';
  font-weight: 600;
  letter-spacing: 2px;
  color: white;
  padding: 0.7vw 4vw;
  border: none;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(89, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 70%);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

/* highlight */
.glossy-button2:before {
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 5px;
  height: 20px;
  border-radius: 7px;

}

.glossy-button2--blue {
  background-color: #0061ff;
}

.glossy-button2--gold {
  background-color: #ffba00;
}

.glossy-button2--green {
  background-color: #5cff00;
}

.glossy-button2--red {
  background-color: #ff0000;
}

.glossy-button2:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4),
    /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4),
    /* bottom shadow */
    /* multiple light sources yall */
    -12px 12px 5px hsla(0, 0%, 0%, 0.15),
    /* drop shadow 1 */
    10px 25px 10px hsla(0, 0%, 0%, 0.2);
  /* drop shadow 2 */
}



.glossy-button3 {
  display: inline-block;
  position: relative;
  /* background-color: #AAA; */
  /* background-image: linear-gradient( 
          hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
          hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
        ); */
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0) 30%,
      hsla(0, 0%, 0%, 0.3) 70%, hsla(0, 0%, 100%, 0.2));
  font-size: 12px;
  font-family: 'Anton';
  font-weight: 200;
  color: white;
  padding: 10px 15px;
  text-shadow:
    0 0 15px hsla(0, 0%, 100%, 0.9),
    /* bloom */
    0 2px 4px hsla(0, 0%, 0%, 0.9);
  /* drop shadow */
  border: none;
  border-radius: 5px;
  margin: 10px 10px;
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.7),
    /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4),
    /* bottom shadow */
    /* multiple light sources yall */
    -8px 8px 5px hsla(0, 0%, 0%, 0.15),
    /* drop shadow 1 */
    5px 18px 10px hsla(0, 0%, 0%, 0.2);
  /* drop shadow 2 */
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

/* highlight */
.glossy-button3:before {
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 5px;
  height: 20px;
  border-radius: 7px;
  background: linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));
}

.glossy-button3--black {
  background-color: #000;
}


.glossy-button3:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4),
    /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4),
    /* bottom shadow */
    /* multiple light sources yall */
    -12px 12px 5px hsla(0, 0%, 0%, 0.15),
    /* drop shadow 1 */
    10px 25px 10px hsla(0, 0%, 0%, 0.2);
  /* drop shadow 2 */
}





/* ########### Glass button END ########## */


@media only screen and (min-width: 1367px) {
  .container {
    width: 1366px;
    height: 768px;
    margin: 0 auto;

  }

  /* .toast-pos-left {
          width: 683px;
          height: 487px;
          left: unset;
      } */
}



/* .rouletteResultBox {
        width: 35%;
        height: auto;    
        display: inline-block;    
    } */
.rouletteResultBox {
  width: 45%;
  height: auto;
  display: inline-block;
  vertical-align: top;
}

/* .rouletteResultBoxOut {
        width: 100%;
        height: auto;     
        display: block;
        text-align: center;
    } */
.rouletteRedNumber {
  font-size: 1.3vw;
  color: white;
  text-align: center;
  border-radius: 50px;
  /* background-color: red; */
  display: table-cell;
  padding: 5%;
  background-image: url("https://storage.googleapis.com/itonecdn/imgWeb/red.png");
  background-repeat: no-repeat, repeat;
  background-size: contain;
  background-position: center;


}

.rouletteGreenNumber {
  width: 33%;
  font-size: 1.3vw;
  color: white;
  text-align: center;
  border-radius: 50px;
  /* background-color: green; */
  display: table-cell;
  padding: 5%;
  background-image: url("https://storage.googleapis.com/itonecdn/imgWeb/green.png");
  background-repeat: no-repeat, repeat;
  background-size: contain;
  background-position: center;


}

.rouletteBlackNumber {
  font-size: 1.3vw;
  color: white;
  text-align: center;
  border-radius: 50px;
  /* background-color: rgb(39, 39, 39); */
  display: table-cell;
  padding: 5%;
  background-image: url("https://storage.googleapis.com/itonecdn/imgWeb/black.png");
  background-repeat: no-repeat, repeat;
  background-size: contain;
  background-position: center;


}

/* .rouletteResultBox2 {
        width: 60%;
        height: auto;    
        display: inline-block;   
        margin-left: -5px;
        vertical-align: top; 
    } */
.rouletteResultBox2 {
  width: 49%;
  height: auto;
  display: inline-block;
  /* margin-left: -5px; */
  vertical-align: top;
}

.rouletteResultBox3 {
  width: 45%;
  height: auto;
  display: inline-block;
  /* margin-left: -5px; */
  vertical-align: top;
}

.rouletteResultRightBox {
  width: 42%;
  height: auto;
  display: inline-block;
}

/* .rouletteResultRightRed {
      font-size: 1.3vw;
      color: white;
      text-align: center;
      border-radius: 50px;
      background: linear-gradient(45deg, rgb(135, 28, 10) 20%, rgb(252, 124, 15) 61%, rgb(253, 121, 20) 100%);
      padding: 0.6vw;
      width: 50%;
      position: relative;
      display: table-cell;
      vertical-align: top;
    
    }
    
    .rouletteResultRightBlack {
      font-size: 1.3vw;
      color: white;
      text-align: center;
      border-radius: 50px;
      background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
      padding: 0.6vw;
      width: 50%;
      position: relative;
      display: table-cell;
      vertical-align: top;
    } */

/* .rouletteResultRightRed {
      font-size: 1.3vw;
      color: white;
      text-align: center;
      font-weight: bold;
      border-radius: 50px; */
/* background: linear-gradient(45deg, rgb(135, 28, 10) 20%, rgb(252, 124, 15) 61%, rgb(253, 121, 20) 100%); */
/* padding: 0.6vw;
      width: 100%;
      position: relative;
      left: 50%;
      display: table-cell;
      vertical-align: top;
      background-image: url('https://storage.googleapis.com/itonecdn/newgameroulette/shaper.png');
      background-size: 100% 100%;
      background-position: top;
    } */

/* .rouletteResultRightBlack {
      font-size: 1.3vw;
      color: white;
      text-align: center;
      font-weight: bold;
      border-radius: 50px; */
/* background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%); */
/* padding: 0.6vw;
      width: 100%;
      position: relative;
      left: 50%;
      display: table-cell;
      vertical-align: top;
      background-image: url('https://storage.googleapis.com/itonecdn/newgameroulette/shaper.png');
      background-size: 100% 100%;
      background-position: top;
    } */

.rouletteResultRightRed {
  font-size: 1.3vw;
  color: white;
  text-align: center;
  font-weight: bold;
  border-radius: 50px;
  /* background: linear-gradient(45deg, rgb(135, 28, 10) 20%, rgb(252, 124, 15) 61%, rgb(253, 121, 20) 100%); */
  /* padding: 0.6vw; */
  width: 2.5vw;
  height: 2.5vw;
  position: relative;
  left: 50%;
  display: table-cell;
  vertical-align: top;
  background-image: url('https://storage.googleapis.com/itonecdn/img/shaper.png');
  background-size: 100% 100%;
  background-position: top;
  line-height: 2.5vw;


}

.rouletteResultRightBlack {
  font-size: 1.3vw;
  color: white;
  text-align: center;
  font-weight: bold;
  border-radius: 50px;
  /* background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%); */
  /* padding: 0.6vw; */
  width: 2.5vw;
  height: 2.5vw;
  position: relative;
  left: 50%;
  display: table-cell;
  vertical-align: top;
  background-image: url('https://storage.googleapis.com/itonecdn/img/shaper.png');
  background-size: 100% 100%;
  background-position: top;
  line-height: 2.5vw;
}

.rouletteResultBoxAllBox {
  position: relative;
  display: inline-block;
  width: 100%;


}



.coin-container,
.roulette-board {
  display: inline-block;
  vertical-align: top;
}

.coin-container {
  width: 25%;
  height: 100%;
}


/* .coin-container div {
        position: absolute;
        width: 130%;
        height: 100%;
        z-index: 3000;
        overflow: hidden;
    } */

.coin-container img {
  width: 30%;
  /* height: 70%; */
  /* margin-top: 3%; */
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.coin-container img:hover {
  transform: scale(1.4);
  /* padding-bottom: 4%; */
}

.roulette-table-mood {
  width: 29%;
  height: 26%;
  display: inline-block;
  margin: 0 auto;
  /* padding-left: 12%; */
}

.roulette-board {
  width: 56%;
  height: 100%;
  position: relative;
  white-space: nowrap;
  margin-left: -4px;
}

.roulette-board--1 {
  width: 87%;
}

#bet-table,
#race-track {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.table-changer {
  visibility: visible !important;
  opacity: 1 !important;
}


#bet-table,
#race-track {
  width: 100%;
  /* height: 90%; */
  /* height: 95%; */
  height: 115%;
  left: -5%;
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

#race-track {
  width: 100%;
  height: 120%;
  top: -14%;
  left: -3%;
  transform: unset;
}

.table-changer {
  visibility: visible !important;
  opacity: 1 !important;
}

.roulette-board--2>div {
  width: 100%;
}

.rou-btn-container>img {
  width: 72%;
  cursor: pointer;
  margin-top: 5%;
}

.roulette-board--2>div:first-child {
  position: relative;
  /* height: 65%; */
  height: 100%;

}

.clear-bet-icon-container {
  height: 35%;
}

.clear-bet-icon-container div {
  padding-left: 11%;
}

.clear-bet-icon-container img {
  width: 38%;
  margin-left: 5%;
  cursor: pointer;
}

/* #watch-timer {
        fill: white !important;
        stroke: white !important;
    } */


g[id$="coin-set"] {
  display: none;
}

g[id$="out_side_paths"],
g[id$="Main_number_paths"],
g[id$="guide-paths"] {
  cursor: pointer;
}

.roulette-presets {
  width: 90%;
  height: 74%;
  display: block;
  margin: 0 auto;
}

.roulette-presets>div {
  width: 100%;
  height: 25%;
  padding-top: 6%;
}

.roulette-presets-btn {
  width: 50%;
  height: 70%;
  display: block;
  margin: 0 auto;
  background-image: url('https://storage.googleapis.com/itonecdn/img/rou_presets_new.png');
  background-size: 100% 100%;
  background-position: top;
  position: relative;
}

.roulette-presets-btn div {
  width: 49.7%;
  float: left;
  height: 100%;
  cursor: pointer;
}

.roulette-presets p {
  color: white;
  font-weight: 700;
  text-align: center;
  font-size: 1vw;
}

.roulette-presets img {
  width: 50%;
  height: 80%;
  display: block;
  margin: 0 auto;
}

.roulette-table-mood {
  /* width: 20%; */
  width: 19%;
  /* height: 26%; */
  height: 100%;
  display: inline-block;
  margin: 0 auto;
  /* padding-left: 12%; */
  margin-left: -20px;
}

.roulette-table-mood img {
  width: 100%;
  display: inline-block;
  /* vertical-align: middle; */
  cursor: pointer;
  transform: scale(.6);
  transition: transform .2s ease-in-out;
}

.roulette-table-mood-active {
  transform: scale(1) !important;
}

.resulte-table {
  /* width: 100%; */
  width: 55%;
  height: 100%;
  display: table;
  margin: 0 auto;
}

.result-row-group {
  display: table-row-group;
}

.result-row-group>div {
  display: table-row;
  color: white;
}

.resulrowGroupOut {
  display: table-row !important;
  color: white !important;
}

/* .resulte-table2 {
      width: 43%;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    
    } */
.resulte-table2 {
  width: 43%;
  height: 100%;
  display: inline;
  vertical-align: middle;

}


/* .result-row-group2 { */
/* display: table-row-group; */
/* display: table-row;
      text-align: center;
    
    }
    
    .result-row-group2>div {
      display: table-row;
    
    } */

.result-row-group2 {
  /* display: table-row-group; */
  display: inline-block;
  text-align: center;
  width: 45%;
  background-image: url('https://storage.googleapis.com/itonecdn/newgameroulette/fire.gif');
  background-size: 100% 100%;
  background-position: top;
}

.result-row-group3 {
  /* display: table-row-group; */
  display: inline-block;
  text-align: center;
  width: 45%;
  background-image: url('https://storage.googleapis.com/itonecdn/newgameroulette/snow.gif');
  background-size: 100% 100%;
  background-position: top;
}


.chartOutBox {
  text-align: center;
  display: table-cell;
}

/* pie chart CSS */



.my-pie-chart {
  /* background: conic-gradient(brown 0.00%, black 0.00% 0.55%, blue 0.55% 6.08%, green 6.08% 13.68%, yellow 13.68% 23.27%, orange 23.27% 40.47%, red 40.47%); */
  background: conic-gradient(orange 23.27% 40.47%, red 40.47%);
  border-radius: 50%;
  width: 3.1vw;
  height: 3.1vw;
}

/* #legenda {
        margin-left: 20px;
        background-color: white;
        padding: 5px;
      } */

.entry {
  display: flex;
  align-items: center;
}

.entry-color {
  height: 10px;
  width: 10px;
}

.entry-text {
  margin-left: 5px;
}

#color-red {
  background-color: red;
}

#color-orange {
  background-color: orange;
}

#color-yellow {
  background-color: yellow;
}

#color-green {
  background-color: green;
}

#color-blue {
  background-color: blue;
}

#color-black {
  background-color: black;
}

#color-brown {
  background-color: brown;
}


/* pie chart CSS END */


.statisticsTitel {
  font-size: 1.4vw;
  width: 100%;
  height: auto;
  margin-top: 1vw;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-weight: 100;
  margin-top: 10px;
  display: table-caption;
  margin-bottom: 5px;
}

.statisticsText {
  font-size: 0.8vw;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-weight: 100;
  display: table;
  margin-bottom: 5px;
}

.footerLeftInfoOutBox {
  display: table;
  width: 100%;
}

.leftIntitel {
  display: table-cell;
  width: 45%;
}

/* .leftGameid {
    font-size: 0.9vw;
    width: 100%;
    height: auto;
    color: white;
    text-align: center !important;
    margin-top: 3%;
    display: table-row;
  } */

.leftGameid {
  font-size: 0.9vw;
  width: 100%;
  height: auto;
  color: white;
  text-align: center !important;
  margin-top: 1vw;
  /* display: table-row; */
}

.footerLeftInfoOutBoxOut {
  display: table-row;
}

/* flame CSS */

.flame {
  width: 150px;
  height: 150px;
  background: linear-gradient(-45deg, red, orange);
  border-radius: 150px 150px 0px 150px;
  transform: rotate(-135deg);
  -webkit-animation: 0.1s flame infinite;
  animation: 0.1s flame infinite;
  filter: blur(10px);
  position: relative;
  box-shadow: 17px 20px 90px #700;
  border: 45px solid black;
  border-left-width: 25px;
  border-top-width: 25px;
}

.flame:after,
.flame:before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  background: linear-gradient(-45deg, red, orange);
  -webkit-animation: 0.2s flame infinite;
  animation: 0.2s flame infinite;
  transform: scale(0.8) rotate(20deg);
  border-radius: 100px 100px 0px 100px;
  top: 20px;
}

.flame:before {
  top: 0;
  -webkit-animation-duration: 0.09s;
  animation-duration: 0.09s;
  transform: scale(0.9) rotate(-15deg) translate(10px, 0px);
}

@-webkit-keyframes flame {
  0% {
    height: 150px;
    width: 150px;
  }

  50% {
    height: 140px;
    width: 140px;
  }

  100% {
    height: 150px;
    width: 150px;
  }
}

@keyframes flame {
  0% {
    height: 150px;
    width: 150px;
  }

  50% {
    height: 140px;
    width: 140px;
  }

  100% {
    height: 150px;
    width: 150px;
  }
}

/* flame CSS */


.demo-notifier {
  position: absolute;
  top: 0;
  width: 100%;
  color: white;
  text-align: center;
  font-size: 1.5vw;
  font-weight: bold;
}

.limit-container {
  width: 100%;
  position: absolute;
  height: 10%;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(2, 2, 2, 0.84);
  /* top: 83%; */
  bottom: 5%;
  color: white;
  transition: all 2s ease-in-out;
}

.limit-container-active {
  visibility: visible;
  opacity: .8;
}

.limit-table {
  width: 100%;
  height: 100%;
  position: relative;
}

.limit-table>h2 {
  width: 32.9%;
  height: 49.5%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  font-size: 1vw;
  font-weight: 400;
  margin-left: -4px;
  margin-bottom: unset;
  line-height: unset;
}

.limit-table>h1 {
  width: 100%;
  text-align: center;
  /* display: inline-block;
      vertical-align: middle; */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5vw;
  font-weight: 400;
  text-transform: uppercase;
}

.roulette-prograss-bar {
  width: 100%;
  height: calc(100vw / 67);
  position: absolute;
  /* top: 93%; */
  bottom: 0;
}

.progress-bar-wrapper {
  /* width: 45%; */
  height: inherit;
  position: relative;
}

#roulette-progress {
  /* height: 70%;
      position: absolute;
      top: 15%;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px; */
  height: 74%;
  position: absolute;
  top: 30%;
  /*border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;*/
}

.roulette-progress-gold {
  /* background-color: #2dc12a; */
  background: linear-gradient(to bottom, #258400 0%, #3fb500 50%, #258400 100%);
  background-size: 40px 40px;
  /* animation: progress-bar-stripes 2s linear infinite; */
  /* background-color: #dafa01; */
  /* background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */
}

.roulette-progress-gold-timer {
  /* border: 2px solid green; */
}

.roulette-progress-red-timer {
  /* border: 2px solid red; */
}

.roulette-progress-red {
  /* background-color: #dc0404; */
  background: linear-gradient(to bottom, #b20303 0%, #ff0000 50%, #b20303 100%);
  /* background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); */
}

#roulette-progress-timer {
  /* width: 6.5%;
      height: 70%;
      position: absolute;
      top: 10%;
      border-radius: 50%;
      z-index: 119;
      transform: translateX(-50%);
      color: white;
      font-weight: bolder;
      text-align: center;
      font-size: 1vw;
      font-family: sans-serif;
      padding-top: .3%; */
  width: 6.5%;
  height: 74%;
  position: absolute;
  top: 30%;
  /* border-radius: 50%;*/
  z-index: 119;
  /* transform: translateX(-50%); */
  color: white;
  font-weight: bolder;
  text-align: center;
  font-size: 1vw;
  font-family: sans-serif;
  /* padding-top: .3%; */
}

.roulette-progress-animate {
  transition: all 1s ease-out;
}

.result-row-group4 {
  display: inline;
}

.statisticsColorBar {
  display: table-cell;
  height: 50px;
  margin: 0 5px;
  padding: o 2px;
  font-size: 1vw;
  width: 10%;
  vertical-align: middle;
  text-align: center;
}

.statisticsOutBox {
  width: 100%;
  display: inline;
}

.statisticsInBox {
  width: 100%;
  display: inline;
  margin-left: 4px;
}

.statisticsDataBox {
  display: inline-block;
  text-align: center;
  font-size: 0.8vw;
  text-shadow: 1px 1px 1px #000000;
  vertical-align: middle;
  margin-left: -4px;
  padding-top: 0.4vw;
  /* padding-bottom: 0.2vw; */

}

.statisticsDataInBox {
  width: 100%;
  display: inline-block;
  /* margin-bottom: 0.4vw; */
  padding: 0.2vw 0;
  font-size: 0.7vw;
}

.statisticsDataInBoxText {
  width: 100%;
  display: inline-block;
  font-size: 0.6vw;
}

@media only screen and (min-width: 1367px) {
  .gameContainer {
    height: 424.92px !important;
  }

  .resulte-table {
    width: 80%;
  }

  .rouletteRedNumber,
  .rouletteGreenNumber,
  .rouletteBlackNumber {
    padding: 4px !important;
  }
}


.trackOutBox {
  display: inline-block;
  width: 45%;
  /* margin-left: -4px; */
  vertical-align: top;
  height: 100%;
  padding-top: 13%;
}

.trackInSepBox {
  /* display: inline;
  text-align: center; */
  width: 100%;
}

.presetOutBox {
  display: inline-block;
  width: 49%;
  /* height: 50%; */
  /* text-align: center; */
  vertical-align: top;
  height: 100%;
  margin-left: -4px;
  padding-left: 4%;
}

.presetBox {
  display: block;
  /* height: 30%; */
  height: 33.33% !important;
  text-align: center;
}

.presetBoxTitel {
  font-size: 0.8vw;
  display: inline-block;
  text-transform: uppercase;
  height: auto;
  text-align: center;
  /* margin-top: 7%; */
  width: 100%;
}

.presetBoxButtonBox {
  /* font-size: 12px; */
  display: block;
  height: auto;
  text-align: center;
}

.presetSave {
  width: 49%;
  display: inline-block;
  font-size: 0.9vw;
  color: white;
  border-radius: 5px;
  border: none;
  padding: 3%;
  cursor: pointer;
  vertical-align: top;
  background: rgb(0, 150, 12);
  background: linear-gradient(90deg, rgba(0, 150, 12, 1) 0%, rgba(15, 219, 0, 0.9920343137254902) 50%, rgba(0, 176, 35, 1) 100%);
}

.presetLoad {
  width: 49%;
  display: inline-block;
  font-size: 0.9vw;
  margin-left: -4px;
  color: white;
  border-radius: 5px;
  border: none;
  padding: 3%;
  cursor: pointer;
  vertical-align: top;
  background: rgb(150, 0, 0);
  background: linear-gradient(90deg, rgba(150, 0, 0, 1) 0%, rgba(219, 88, 0, 0.9920343137254902) 50%, rgba(176, 0, 0, 1) 100%);
}