*{
	outline:none;
}
body button{
  outline: 0px !important;
}
{
    font-family: arial;
    user-select: none;
}
.swal2-show{
      box-shadow: 1px 2px 8px 3px #e8dfcf;
}
.cot{
      width: 170px;
    background-image: url(../../../../assets/images/games/moneywheel/cot.gif);
    background-size: 100% 100%;
    height: 170px;
    position: absolute;
    /* top: 200px; */
    bottom: 201px;
    right: 0px;
}
.cot_urax{
      width: 170px;
    background-image: url(../../../../assets/images/games/moneywheel/urax.jpg);
    background-size: 100% 100%;
    height: 170px;
    position: absolute;
    /* top: 200px; */
    bottom: 201px;
    right: 0px;
    display: none;
}
.cot_kardacox{
    width: 230px;
    background-image: url(../../../../assets/images/games/moneywheel/kardacox.jpg);
    background-size: 100% 100%;
    height: 230px;
    position: absolute;
    /* top: 200px; */
    bottom: 201px;
    right: 154px;
    display: none;
    z-index: 222222222222222222;
}
/*notification*/
.notification{
    width: 0px;
    height: 45px;
    background: #FFDD00;
    position: absolute;
    top: 170px;
    left: 10px;
    box-shadow: 0px 0px 16px 3px lightgreen;
    opacity: 0;
    text-align: center;
    line-height: 45px;
    font-family: Tahoma;

}
/*notification*/

.ss-grabbed {
     user-select: none;
     -o-user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
}
.not_bar>span{
  color: white;
  padding-right: 5px;
}
.datas{
  float: right;
}
.cancel{
    width: 30px;
    position: absolute;
    float: left;
    height: 30px;
    cursor: pointer;
    right: 0px;
    bottom: 110px;
}

.not_bar>div{
 color: white;
 padding-right: 5px;
 display: inline-block;
}

.datas{
 float: right;
 padding-right: 5px;
}

/* Sets the background image for the wheel */
td.the_wheel
{
    background-position: top;
    background-repeat: no-repeat;
}
.not_bar{
  color: gold;
  text-align: left;
  font-size: 14px;
}
.swal2-title{
  font-size: 1.2em !important;
}
/*slaq*/
.arrow{
  transform: rotate(90deg);
  margin: 0 auto;
  cursor: pointer;
  width: 25px;
  position: absolute;
  top: 40px;
  left: 300px;

}

/*slaq*/



/*LOADIN PLUGIN*/
.meter_top{
  width: 100%;
  height: 100%;
    background-color: black;
      z-index: 9999999999999;
      position: fixed;
      text-align: center;
}
.meter_background{
  width: 66%;
  height: 100%;
  text-align: center;
}
.meter { 
  height: 20px;  /* Can be anything */
  position: relative;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  margin-left: 50%;
  margin-top: 50px;
  z-index: 999999999999;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
  display: block;
  height: 100%;
  width: 1%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@keyframes expandWidth {
   0% { width: 0; }
   100% { width: auto; }
}
.meter > span:after, .animate > span > span {
  animation: move 2s linear infinite;
}

/*LOADIN PLUGIN*/



.double-border {
  float: left;
  border: 4px solid #c0bb37;
  background-color:rgba(118, 111, 26, 0.7);
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 2px solid ;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}
.firsth{
  border-color:  #c0bb37;
  background-color:rgba(118, 111, 26, 0.7);
}
.first:before{
  border-color:#ACA732;
}
.first:hover>.center_span{
-webkit-box-shadow: 0px 0px 5px 1px rgba(192,187,55,1);
-moz-box-shadow: 0px 0px 5px 1px rgba(192,187,55,1);
box-shadow: 0px 0px 5px 1px rgba(192,187,55,1);
}
.second{
  border-color:  #47a1cf; 
  background-color:rgba(36, 90, 117, 0.7);  
}
.second:before{
  border-color:  #47a1cf;  
}
.second:hover>.center_span{
-webkit-box-shadow: 0px 0px 5px 1px rgba(71,162,207,1);
-moz-box-shadow: 0px 0px 5px 1px rgba(71,162,207,1);
box-shadow: 0px 0px 5px 1px rgba(71,162,207,1);  
}
.third{
  border-color: #9F66C5;
  background-color:rgba(102, 66, 116, 0.7);
}
.third:before{
  border-color: #9F66C5;  
}
.third:hover>.center_span{
  -webkit-box-shadow: 0px 0px 5px 1px rgba(159,102,197,1);
-moz-box-shadow: 0px 0px 5px 1px rgba(159,102,197,1);
box-shadow: 0px 0px 5px 1px rgba(159,102,197,1);
}
.fourth{
  border-color:#7AB341;
  background-color:rgba(57, 106, 19, 0.7);  
}
.fourth:before{
  border-color:#7AB341;  
}
.fourth:hover>.center_span{
  -webkit-box-shadow: 0px 0px 5px 1px rgba(122,179,65,1);
-moz-box-shadow: 0px 0px 5px 1px rgba(122,179,65,1);
box-shadow: 0px 0px 5px 1px rgba(122,179,65,1);
}
.fifth{
  border-color:#FE9714;
  background-color:rgba(117, 76, 17, 0.7);    
}
.fifth:before{
  border-color:#FE9714;  
}
.fifth:hover>.center_span{
  -webkit-box-shadow: 0px 0px 5px 1px rgba(254,153,20,1);
-moz-box-shadow: 0px 0px 5px 1px rgba(254,153,20,1);
box-shadow: 0px 0px 5px 1px rgba(254,153,20,1);
}
.sixth{
  border-color: #FE3F56;
  background-color: rgba(119, 33, 41, 0.7);
}
.sixth:before{
   border-color: #FE3F56; 
}
.sixth:hover .center_span{
  -webkit-box-shadow: 0px 0px 5px 1px rgba(254,63,85,1);
-moz-box-shadow: 0px 0px 5px 1px rgba(254,63,85,1);
box-shadow: 0px 0px 5px 1px rgba(254,63,85,1);
}
/* Do some css reset on selected elements */
h1, p
{
    margin: 0;
}
div.power_controls
{
    margin-right:70px;
}
div.html5_logo
{
    margin-left:70px;
}
/* Styles for the power selection controls */
table.power
{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}
table.power th
{
    background-color: white;
    cursor: default;
}
td.pw1
{
    background-color: #6fe8f0;
}
td.pw2
{
    background-color: #86ef6f;
}
td.pw3
{
    background-color: #ef6f6f;
}
/* Style applied to the spin button once a power has been selected */
.clickable
{
    cursor: pointer;
}
/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}
.button {
  padding: 15px 25px;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
  opacity: 0.5;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  position: absolute;
  right: 155px;

}
.button:hover {
  background-color: #3e8e41;
}

.center_stav_second{
   width: 540px;
   height: 150px;
   margin: auto;
   overflow: auto;
   perspective: 1200px;
   position: absolute;
   padding-left: 10px;
}

html, body{
  height:100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  #background-image: url(../../../../assets/images/games/moneywheel/psbck.jpg);
      background-position: center;
}
.btn_spin{
    position: absolute;
    z-index: 1;
    right: 30px;
    bottom: 0px;
    height: 64px;
}
.div_img{
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    height: 150px;
    perspective: 1200px;
    background-color: rgba(0, 0, 0, 0.5);
}
#center_stav div{
  -webkit-transform: rotateX(30deg);
  margin: 4px;
  cursor: pointer;
  transition: all 0.5s ease;
  margin-bottom: -4px;
  text-align: center; 
  width: 160px;
  height: 64px;
}
.center_span{
  display:block;
  width: 30px;
  height: 30px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: black;
  border-radius: 50%; 
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  clear: left;
}
.center_fishka{
  position: absolute;
  font-weight: bold;
  width: auto;
  min-width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: green;
  color: white;
  left: 10px;
  bottom: 24px;
  display: none;
}
.span_text{
  color: white;
  margin: auto;
  font-size: 12px;
  display: block;
  clear: left;
  position: relative;
}
#center_stav div:hover{
   transform:none;
}
#center_stav{
    width: 540px;
    height: 150px;
    margin: auto;
    overflow: auto;
    perspective: 1200px;
    position: absolute;
    padding-left: 10px;
}

#canvasContainer {
    position: relative;
    width: 300px;
}
#canvas {
    z-index: 1;
}
.chips{
    width: 380px;
    height: 105px;
    transition: 0.5s ease;
    position: absolute;
    margin-top: 40px;
    right: 10px;
}

.chips_set{
    width: 47px;
    height: 31px;
    background: url(../../../../assets/images/games/moneywheel/chips.png) 0 -59px;
    text-align: center;
    background-size: 153px;
    padding-top: 15px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50%;
    cursor: pointer;
    float: left;
    transition: all 0.5s ease;
    background-repeat: no-repeat;
}
.chips_set:hover{
    box-shadow: 0px 0px 8px 5px rgba(204,182,38,1);
}
.chips_select1{
   box-shadow: 0px 0px 8px 5px rgba(204,182,38,1);
}
.chips_select2{
   box-shadow: 0px 0px 8px 5px rgba(128,128,128,1);
}
.chips_select3{
  box-shadow: 0px 0px 8px 5px rgba(250,0,0,1);
}
.chips_select4{
  box-shadow: 0px 0px 8px 5px rgba(13,171,2,1);
}
.chips_select5{
  box-shadow: 0px 0px 8px 5px rgba(255,255,255,1);
}
.chips_select6{
  box-shadow: 0px 0px 8px 5px rgba(32,76,250,1);
}
.chip2{
    background-position: -53px -1px;
    margin-left: 8px;
    margin-top: -13px;
}
.chip2:hover{
  box-shadow: 0px 0px 8px 5px rgba(128,128,128,1);
}
.chip3{
    background-position: -53px -58px;
    margin-left: 8px;
    margin-top: -30px;
}
.chip3:hover{
  box-shadow: 0px 0px 8px 5px rgba(250,0,0,1);
}
.chip4{
    background-position: -106px -58px;
    margin-left: 8px;
    margin-top: -30px;
}
.chip4:hover{
    box-shadow: 0px 0px 8px 5px rgba(13,171,2,1);
}
.chip5{ 
    background-position: -106px -1px;
    margin-top: -13px;
    margin-left: 8px;
    font-size: 13px;
}
.chip5:hover{
    box-shadow: 0px 0px 8px 5px rgba(255,255,255,1);
}
.chip6{
  background-position:-0.5px -1px;
  margin-left: 8px;
  margin-top: 1px;
  font-size: 13px;
}
.chip6:hover{
  box-shadow: 0px 0px 8px 5px rgba(32,76,250,1);
}
.logo{
  background-image: url(../../../../assets/images/games/moneywheel/wheel_logo.png);
  background-repeat: no-repeat;
  background-position: center 213px;
  background-size: 233px;
}
body{
  left: 0;
  top: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(../../../../assets/images/games/moneywheel/basic_pointer.png), url(../../../../assets/images/games/moneywheel/psbck.jpg);
  background-size: auto auto, 100% 100%
}
.balance_bar{
    width: 295px;
    height: 100px;
    top:40px ;
    text-align: center;
    position: absolute !important;
    transition: 0.5s;
    background-color: rgba(1, 0, 0, 0.84);
}
.balances{
  position: absolute;
  top: 0;
  right: 0;
}
.balance{
    width: 110px;
    height: 35px;
    float: right;
    margin-top: 6px;
    margin-right: 8px;
    color: white;
    font-size: 13px;
    text-align: center;
    border: 1px solid #4e4f51;
    border-top-left-radius: 20px 20px;
    border-bottom-left-radius:20px 20px;
    border-bottom-right-radius:20px 20px;
    border-top-right-radius: 20px 20px; 
    background-color: rgba(0, 0, 0, 0.5);
}

.close{
  display: none;
}
.tools{
    position: absolute;
    left: 0px;
    top: 5px;
}
.tools>img{
  position:relative;
 width: 25px;
 margin-left: 15px;
 cursor:pointer ;
}
@media screen and (max-width: 900px){
  #center_stav{
    display: none ;
  }
  #center_stav > div{
    width: 130px;
  }
  .chips{
    width: 340px;
    left: 20%;
  }
  .balance{
    width: 76px;
    font-size: 12px;
  }
  .logo{
    margin-top: -38px;
  }
  .button{
    right: 10px;
    bottom: 20px;
  }
  .cancel{
    position: absolute;
    right: 20px;
    bottom: 90px;
  }
  .close{
    width: 30px;
    height: 30px;
    display: block;
    cursor:pointer;
}
  .cot {
    width: 100px;
    background-image: url(../../../../assets/images/games/moneywheel/cot.gif);
    background-size: 100% 100%;
    height: 98px;
    position: static;
    margin-top: -341px;
}
.cot_urax{
      width: 100px;
    background-image: url(../../../../assets/images/games/moneywheel/urax.jpg);
    background-size: 100% 100%;
    height: 98px;
    position: static;
    margin-top: -341px;
}
.cot_kardacox{
   display: none!important;
}

}
@media screen and (min-width: 900px){
#center_stav{
  width: 550px !important;
  }

}
@media screen and (max-width: 700px){
.logo {
    margin-top: -62px;
}
}
@media screen and (max-width: 500px){

.rotate{
  width: 100%;
  height: 100vh;
  background: black;
  z-index: 22222222222;
  position: absolute;
  background-image: url(../../../../assets/images/games/moneywheel/rotate.png);
  background-position: center;
  background-repeat: no-repeat;
      background-size: 80%;
}
.rotate h3{
    z-index: 22222222;
    color: white;
    font-size: 21px;
    text-align: center;
    position: relative;
    /* top: 476px; */
    display: block!important;
}

}