body {
  background:#000;
  overflow:hidden;
  cursor:default;
  width: 100%;
  height: 100%;
}
#overlays {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.37);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 100;
}
#overlaysContent {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
  overflow: visible;
  transform-origin: center 40px;
}
#canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
}
#megaholder {
  position: absolute;
  z-index: 160;
  top: 0px;
  right: 0px;
}
#megaphone {
 /* position: absolute; */
  float:right;
  /*top: 20px;
  right: -7px;
  */
  width: 342px;
  height: 200px;
  background: url(../img/megaphone_bg2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  transition: 0.5s;
  text-align: center;
  margin-right: -350px;
}
.mega-message {
  width: 210px;
  height: 160px;
  margin-top: 48px;
  font-size: 17px;
  margin-left: -53px;
  background-color: #e5c18a;
  text-align: center;
  color: black;
  padding: 7px;
  box-shadow: 0px 0px 0.02em #4caf50;
  position: relative;
  opacity: 0.7;
}
.mega-message::-moz-placeholder {
  color: #937c57;
  opacity: 1;
}
.mega-message:-ms-input-placeholder {
  color: #937c57;
}
.mega-message::-webkit-input-placeholder {
  color: #937c57;
}
#megaphone_text {
  margin-top: 36px;
  margin-left: 150px;
  height: 150px;
  color: black;
  width: 146px;
  white-space: pre-wrap;
  word-wrap: break-word;
  position: absolute;
  overflow: hidden;
}
@media all and (max-width: 909px) {
  #megaholder {
    transform-origin: right top;
    transform: scale(0.5);
  }
}
#megaholder.touch-device {
  transform-origin: right top;
  transform: scale(0.5);
}
#megaphone_input {
    width: 424px;
    height: 245px;
    background: url(../img/megaphone_bg2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    transition: 0.5s;
    text-align: center;
    text-transform: none;
}
.megaphone-btn-shout {
  display: inline-block;
  height: 38px;
  letter-spacing: 0.13em;
  margin-top: 10px;
  font-size: 19px;
  line-height: 1.42857143;
  color: white;
  width: 100%;
  text-transform: uppercase;
  /* background-color: #222328; */
  background-color: #5592e3;
  background-image: none;
  border: 0px solid #222328;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  width: 50%;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .4);
}
.hscrY {
  color: white;
  -webkit-box-shadow:  0 0 2px 1px #3f434e inset;
  -moz-box-shadow:  0 0 2px 1px #2e3138 inset;
  box-shadow:  0 0 2px 1px #2e3138 inset;
  border:  2px solid #313b4c;
  width:  98px;
  border-radius:  10px;
  /*
  background-color:  #bd9419;
  */
  /*background-color: #dd8709;
  */
  background-color: #e17232;
}
.hscrB {
  background-color: #306357;
  color:  white;
  -webkit-box-shadow:  0 0 2px 1px #3f434e inset;
  -moz-box-shadow:  0 0 2px 1px #2e3138 inset;
  box-shadow:  0 0 2px 1px #2e3138 inset;
  border:  2px solid #313b4c;
  border-radius:  10px;
}
.hscrG {
  color: white;
  -webkit-box-shadow:  0 0 2px 1px #3f434e inset;
  -moz-box-shadow:  0 0 2px 1px #2e3138 inset;
  box-shadow:  0 0 2px 1px #2e3138 inset;
  border:  2px solid #313b4c;
  border-radius:  10px;
  background-color:  #39547b;
}
#invisibleOverlay {
  display: none;
  position: absolute;
  width: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 400;
}
#advert {
  display: none;
  position: absolute;
  width: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 400;
  background: url(../img/bg_sidebar.gif) 0% 0% repeat scroll rgba(9, 13, 23, 0.059804);
}
#advertDialogs {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#advertDialog1 {
  position: relative;
  width: 970px;
  height: 250px;
  background: rgb(28, 32, 33);
  border: 1px solid black;
  box-sizing: content-box;
  box-shadow: 0px 0px 2px #777373;
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: center;
}
#advertDialog2 {
  position: relative;
  width: 900px;
  height: 260px;
  background: #232c31a8;
  /*background: linear-gradient(to bottom,#466757ad 0,#444141ad 50%,#444141a6 51%,#4b4c4ba1 100%);*/
  /*background: linear-gradient(to bottom,#2e345f 0%,rgb(117, 95, 64) 50%,rgb(119, 96, 63) 51%,#1e2a65 100%);*/
  border: 1px solid #171f2599;
  box-sizing: content-box;
  box-shadow: 0 0 2px #458aff;
  margin: 0 auto;
  margin-top: 5px;
  text-align: center;
}
#scorebox {
  position: absolute;
  height: 550px;
  width: 80%;
  max-width: 350px;
  top: 50%;
  left: 50%;
  background: #607D8B;
  background: linear-gradient(to bottom, #466757 0%,rgb(68, 65, 65) 50%,rgb(68, 65, 65) 51%,rgb(75, 76, 75) 100%); 
  border: 1px solid #069bff;
  transform: translate(-50%, -50%);
}
#stats {
  position: relative;
  width: 350px;
  height: 581px;
  padding: 0 0 300px;
  overflow: hidden;
}
#advertContinue,
#statsContinue {
  position: static;
  width: 90%;
  max-width: 300px;
  margin: 10px auto;
  text-align: center;
}
#advertContinue {
  /*
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  */
  font-size: 45px;
  width: 93% !important;
  max-width: 970px !important;
}
#zoomItem {
  margin: 0 auto;
  margin-top: 15px;
  border: 2px solid #002c40;
  min-width: 150px;
  max-width: 100%;
  height: 100%;
  max-height: 200px;
  transition: all .5s ease 0s;
}
/*
#zoomItem:hover {
  opacity: 1;
  transform: scale(1.15);
  transition: all .3s ease 0s;
}
*/
.featured-yt {
  background-color: #525765;
  padding: 5px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 7px 2px #3f434e inset;
  -moz-box-shadow: 0 0 7px 2px #2e3138 inset;
  box-shadow: 0 0 7px 2px #2e3138 inset;
  margin: 0 auto;
  margin-top: 15px;
  width: 90%;
  min-width: 150px;
  max-width: 300px;
  text-align: center;
}
#featuredVideo {
  width: 100%;
}
#featuredDescription {
  color: gold;
  font-size: 14px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  margin-top: 10px;
}
.featured-btn {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  margin: 0px;
  font-weight: bold;
  color: #888;
  background: rgba(0,0,0,0);
  border-radius: 5px;
}
#featuredBtnPrev, #featuredBtnNext {
  padding: 5px 10px;
  margin: 0px 2px;
}
.featured-btn:hover {
  background: rgba(0,0,0,0.1);
}
.featured-btn:active {
  background: rgba(0,0,0,0.15);
}
.featured-btn.selected {
  background: rgba(255,255,255,0.1);
}
.dashboard {
  /*display:none;*/
 /* width: 100%;
  box-shadow: 0px 0px 2px #777373;
  background-color: #5c5f67;
  padding: 20px;
  */
}
.ranking {
  margin-top:5px;
}
.memberType {
  margin-bottom:5px;
}
#feat-vid-desc:hover {
    opacity: 1;
    transform: scale(1.55);
    transition: all .3s ease 0s;
}
.width-50 {
  width:50%;
}
.width-33 {
  width:33.33333333%;
}
.width-auto {
  width: auto !important;
}
.dash-tab-settings {
  /*
  background: #767735!important;
  border: 1px solid #ad8b24;
  */
  width:50%;
  box-shadow: 0px 0px 2px #777373;
  -webkit-box-shadow: 0 0 7px 2px #3f434e inset;
  -moz-box-shadow: 0 0 7px 2px #2e3138 inset;
  box-shadow: 0 0 7px 2px #2e3138 inset;
}
.dash-tab {
  padding:0px;
  margin-bottom: 5px !important;
  /*-moz-box-shadow: 0 0 20px 0px #2e3138 inset; 
  box-shadow: 0 0 20px 0px #2e3138 inset;*/
}
.dash-coin {
  position: absolute; 
  z-index: 105;
  margin-top: 12px; 
  margin-left: 5px; 
  width: 27px; 
  margin-left: -2px; 
}
.dash-coin-2 {
  position: absolute;
  z-index: 105;
  margin-top: -1px;
  margin-left: 5px;
  width: 40px;
}
.dash-coin-bg {
  overflow: hidden;
  border: 1px #de7d00 solid!important;
  text-shadow: 0px 2px 2px #FEFF00!important;
  /* border-radius: 5px; */
  background: linear-gradient(to bottom,
  #fac70b 50%,
  #F5C807 50%)!important;
  /* -webkit-box-shadow: 0px 0px 15px 0px #f5c807; */
  -moz-box-shadow: 0px 0px 30px 0px #f5c807!important;
  box-shadow: 0px 0px 5px 0px #f5c207!important;
  height: 30px!important;
  top: 5px!important;
  width: 96%!important;
  border-radius: 7px!important;
}
.innerDashboard {
  width: 100%;
  box-shadow: 0px 0px 2px #777373;
  /*background-color: #525765;*/
  background-color: rgba(82, 87, 101,0.5)!important;
  padding: 15px;
  /*height:300px;*/
}
.innerBoxDashboard {
    box-shadow: 0px 0px 2px #777373;
    background-color: #525765;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    height: 55px;
    -webkit-box-shadow: 0 0 7px 2px #3f434e inset;
    -moz-box-shadow: 0 0 7px 2px #2e3138 inset;
    box-shadow: 0 0 7px 2px #2e3138 inset;
}
.lower-dashboard-box {
  box-shadow: 0px 0px 2px #777373;
  background-color: #525765;
  padding: 10px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 7px 2px #3f434e inset;
  -moz-box-shadow: 0 0 7px 2px #2e3138 inset;
  box-shadow: 0 0 7px 2px #2e3138 inset;
  margin-bottom:10px;
}
.bottom-dashboard-box {
  width: 100%; 
  height: 28px;
  display:flex;
}
.innerLeft {
  width:25%;
  float:left;
}
.innerRight {
  width:65%;
  float:right;
}
.xp-label {
  position:absolute;
  margin-top: -7px;
}
.user-level-wrapper {
  font-size: 25px;
  color: white;
  margin-top: -7px;
}
.user-level {
  background-color: #389ace;
  text-align: center;
  border: 2px solid #474b56;
  border-radius: 4px;
  padding: 5px;
  background: linear-gradient(to bottom,
  #5592e3 50%,
  #4985d6 50%);
}
.user-settings {
  padding:5px 5px; 
}
.settings-green label {
  color: #75dd92;
}
.settings-gold label {
  color: #FFEB3B;
}
.settings-orange label {
  color: #FFAD3B;
}
#userSettings label > input[type="checkbox"]:disabled ~ span {
  opacity: 0.3;
}
.hr-grey {
  height: 5px;
  border: 0;
  box-shadow: 0 10px 10px -10px #2e3138 inset;
}
.captcha-reg {
  margin:0 auto;
  transform:scale(0.89);
  -webkit-transform:scale(0.89);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}
.buyCoins {
  border-radius: 5px;
  margin-top: 8px;
  margin-left: 10px;
  color: #fff;
  height: 32px;
  border: 1px #f9ff00 solid;
  text-shadow: 0px 2px 2px #000000;
  background: linear-gradient(to bottom, #FAE40B 50%, #F5C807 50%);
  -webkit-box-shadow: 0px 0px 30px 0px #f5c807;
  -moz-box-shadow: 0px 0px 30px 0px #f5c807;
  box-shadow: 0px 0px 30px 0px #f5c807;
  /* padding: 5px; */
}
.mobileNav {
  display:none;
}
.mobileNav button {
  margin: 2px 0px;
}
.shop-h1-mobile {
  width: 70%;
  margin: 0px auto;
  border: 3px #FEFF00 solid;
  padding: 0px;
  border-radius: 5px;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  text-align: center;
  background: linear-gradient(to bottom, #FAE40B 50%, #F5C807 50%);
  -webkit-box-shadow: 0px 0px 30px 0px #f5c807;
  -moz-box-shadow: 0px 0px 30px 0px #f5c807;
  box-shadow: 0px 0px 30px 0px #f5c807;
  margin-bottom: 5px;
  font-weight: bold;
  color: #FF9800;
}
.shop-h1-mob {
  display:none;
}
.agma-logo {
  position: absolute;
  top: -92px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 190px;
  z-index: 130;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
}
.agma-corona-simulator {
  width: 600px !important;
}
.agma_corona-simulator {
  width: 90px !important;
}
.main-menu {
  margin-top: 112px;
}
.logo_holder{
  position: relative;
  display:block;
  width:190px;
  height: 82px;
  text-align:center;
  margin: 0px auto;
  background: ;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
}
.logo_holder{
  background-position: -190px 0;
  
}
.logo_holder:hover,
.logo_holder:focus{
  background-position: 10px 0;
  /*change speed to see in slow motion*/
  transition: all 1s;
}
.logo_holder::after{
  content:'';
  position: absolute;
  pointer-events: none;
  top:0; left:0; right:0; bottom: 0;
  background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit; 
  -webkit-mask: url(../img/agmalogo_a_flash.png) center;
  mask: url('#mask-firefox');
}
@media (max-width: 1200px) {
  #coinsDash {
    font-size: 18px; 
    margin-top: 9px; 
    margin-left: 50px;
  }
  .stng {
    margin-left: 8.33333333%;
    width: 83.33333333%;
  }
  .stng-row {
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex;
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 909px) {
  .infoName {
    font-size:30px !important;
  }
  .infoReq {
    font-size:17px !important;
  }
  .mobileNav {
    display:block;
  }
  .main-menu {
    margin-top: 60px;
  }
  .agma-logo {
    width: 95px;
    top: -46px;
  }
  .agma-corona-simulator {
    width: 362px !important;
  }
  .agma_corona-simulator {
    width: 50px !important;
  }
}
@media screen and (max-width: 767px) {
  .shop-h1-mob {
    display:block;
  }
  .shop-topboxes {
    display:none !important;
  }
  .shop-h1-mobile {
    display:block;
  }
}
@media (max-width: 476px) {
  .purchase-pp-mobile {
    display:none;
  }
  .reset-pass-button {
    font-size:12px !important;
  }
  #reset-instructions {
    font-size: 12px !important;
  }
  .skin-container {
    width: 106px !important;
    max-width: 106px !important;
  }
  .skin-container img {
    width: 96px !important;
    height: 96px !important;
  }
  .skin-container h4 {
    font-size: 16px !important;
  }
  .skin-container p {
    font-size: 12px !important;
  }
  .skin-container button {
    min-width: 90px !important;
    font-size: 13px !important;
    padding: 5px !important;
    margin-bottom: 5px !important;
  }
  .skin-container button.skinuse-btn {
    margin-bottom: 10px !important;
  }
  .skin-container.selected button.skinuse-btn {
    margin-bottom: 7px !important;
  }
  .skin-container .skinupload-btn {
    width: 96px !important;
    height: 96px !important;
    left: 5px !important;
  }
  .skin-container .skinname-input {
    font-size: 16px !important;
    width: 100px !important;
  }
  .skin-container input.skinsharedpublic-checkbox + label {
    font-size: 12px !important;
  }
  .shop-h1-mob {
    display:block;
  }
  .shop-topboxes {
    display:none !important;
  }
  .shop-h1-mobile {
    display:block;
  }
  .user-level-wrapper {
    font-size:16px;
    color: white;
    margin-top: -7px;
  }
  .xpBarTop {
    margin-left: 5px !important;
  }
  .cTopBar {
    margin-left: 5px !important;
  }
  .dcTopBar {
    display:none;
  }
  .cTopBar .progress-bar-coins {
    padding: 0px !important;
  }
}
.buyCoins:hover {
  background: linear-gradient(to bottom, #faa50b 50%, #f59307 50%);
}
.row-shadow {
  box-shadow: 0px 0px 2px #777373;
  /*background-color: #454954;
  */
  background-color: rgba(82, 87, 101,0.5)!important;
  padding: 5px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 0px #3f434e inset;
  -moz-box-shadow: 0 0 1px 0px #2e3138 inset;
  box-shadow: 0 0 2px 0px #2e3138;
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
}
.coinsDashboard {
    position: absolute;
    margin-left: 58px;
    font-weight: bold;
    margin-top: 2px;
    z-index: 105;
    font-size: 28px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    overflow: visible;
}
.timePlayed {
  text-align:left;
}
/* Progressbar */

.meter {
    height: 23px;
    position: relative;
    margin: 60px 0 20px 0;
    -moz-border-radius: 25px;
    padding: 10px;
   /* -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
  */
}
.meter > span {
    display: block;
    margin-top: 3px;
    margin-left: 3px;
    height: 70%;
    /* -webkit-border-top-right-radius: 8px; */
    /* -webkit-border-bottom-right-radius: 8px; */
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    /* border-top-right-radius: 8px; */
    /* border-bottom-right-radius: 8px; */
    /* -webkit-border-top-left-radius: 20px; */
    /* -webkit-border-bottom-left-radius: 20px; */
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    /* border-top-left-radius: 20px; */
    /* border-bottom-left-radius: 20px; */
    background-color: rgb(43, 72, 194);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43, 154, 194)), color-stop(1, rgb(84, 162, 240)) );
    background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
    -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    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;
}
.nostripes > span > span, .nostripes > span:after {
    -webkit-animation: none;
    -moz-animation: none;
    background-image: none;
}
(index):79
.meter > span:after, .animate > span > span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
    background-image: -moz-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: 105;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}
.goldText {
   color: #fffe12;
   text-shadow: 0px 0px 10px #c7920d;
   /*background: transparent url(../img/particles.gif);*/
}
.goldBar {
  border: 3px #FEFF00 solid;
  text-shadow: 0px 2px 2px #FEFF00;
  border-radius:5px;
  background: linear-gradient(to bottom, #FAE40B 50%, #F5C807 50%);
  -webkit-box-shadow: 0px 0px 30px 0px #f5c807;
  -moz-box-shadow: 0px 0px 30px 0px #f5c807;
  box-shadow: 0px 0px 30px 0px #f5c807;
  margin-bottom:5px;
}
.goldBar.shine {
  overflow: hidden;
}
.goldBar::after {
  content: "";
  position: absolute;
  top: -200px;
  left: -400px;
  width: 300px;
  height: 300px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: rotate(30deg);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
}
.goldBar.shine::after {
  opacity: 1;
  visibility: visible;
  top: -50px;
  left: 400px;
  transition-property: left, top, opacity;
  transition-duration: 2s, 2s, 0.5s;
  transition-timing-function: ease;
}
.modBar {
  margin-bottom: 5px;
  border: 3px #46e24c solid;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgb(38, 211, 45) 50%, #28ca2f 50%);
  -webkit-box-shadow: 0px 0px 30px 0px #27f507;
  -moz-box-shadow: 0px 0px 30px 0px #f5c807;
  box-shadow: 0px 0px 30px 0px #32f507;
}
.adminBar {
  margin-bottom: 5px;
  border: 3px #a93f41 solid;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgb(211, 38, 38) 50%, #cf2525 50%);
  -webkit-box-shadow: 0px 0px 30px 0px #d32626;
  -moz-box-shadow: 0px 0px 30px 0px #f5c807;
  box-shadow: 0px 0px 30px 0px #cf2525;
}
.username {
  box-shadow: 0px 0px 2px #777373;
  text-align: center;
  background-color: #454954;
  color: white;
  font-size: 25px;
  margin-top: -5px;
  text-shadow: rgb(224, 224, 224) 1px 1px 0px;
  /* background-color: rgb(85, 146, 227); */
  text-shadow: rgba(0, 0, 0, 0.2) 2px 6px 5px, rgba(255, 255, 255, 0.4) 0px -4px 30px;
  position: relative;
}
#upgradeNowButton {
    display: block;
  font-size: 14px;
  color: #75FF92;
  width: 360px;
  height: 114px;
  margin: 10px auto;
  background-image: url(../img/upgradeNow2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  transition: 0.2s;
}
#upgradeNowButton:hover {
  background-image: url(../img/upgradeNow2_hover.png);
}
.minionDescription {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#minionUi {
  display: none;
  position: fixed;
  top: 0px;
  width: 290px;
  left: 50%;
  border: 2px solid rgb(116, 119, 189);
  z-index: 140;
  height: 53px;
  background-color: rgba(20,20,20, 0.5);
  box-sizing: border-box;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  pointer-events: none;
  border-radius: 0px 0px 6px 6px;
}
#startMinionButton, #toggleHideMinionUi {
  pointer-events: auto;
}
#minionUi.minimized {
  visibility: hidden;
}
#minionUi.minimized #toggleHideMinionUi{
  visibility: visible;
}
@media all and (max-width: 909px) {
  #minionUi {
    width: 128px;
    transform: translate(-50%, 0%) scale(0.7);
    transform-origin: center top;
  }
  #minionText {
    display: none;
  }
}
#minionUi.touch-device {
  top: 3px;
  width: 128px;
  transform: translate(-50%, 0%) scale(0.7);
  transform-origin: center top;
  background-color: transparent;
  border: none;
}
#minionUi.touch-device #minionText {
  display: none;
}

/* Start purchase coins 2 */
.coinContainer {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  position: absolute;
  border: 5px solid #511d00;
  background-color: #fdc500;
  border-radius: 10px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.titleContainer {
  padding: 0px;
  border-radius: 15px;
  font-family:  Helvetica, sans-serif;
  position: absolute;
  width: 600px;
  height: 65px;
  overflow: visible;
  border: 5px solid #532d00;
  color: #ff3d00;
  text-shadow: -1px 0 #755500, 0 1px #755500, 1px 0 #755500, 0 -1px #755500;
  left: 0;
  display: block;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top:-70px;
  margin-top:0px;
  border-bottom-left-radius: 68px;
  border-bottom-right-radius: 68px;
  font-size: 42px;
  font-weight:bold;
  text-align: center;
  background-color:  #ffbb00;
  vertical-align: middle;
  text-transform: uppercase;
  z-index: 200;
}
.insideContainer {
  border-radius: 15px;
  width: 95%;
  height: 453px;
  position: relative;
  margin: 0 auto;
  background: #4f3900; /* Old browsers */
  background: -moz-linear-gradient(left,  #4f3900 0%, #7c5800 50%, #4f3900 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #4f3900 0%,#7c5800 50%,#4f3900 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #4f3900 0%,#7c5800 50%,#4f3900 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f3900', endColorstr='#4f3900',GradientType=1 ); /* IE6-9 */
  -webkit-box-shadow: inset -7px 10px 5px 0px rgba(0,0,0,0.6);
  -moz-box-shadow: inset -7px 10px 5px 0px rgba(0,0,0,0.6);
  box-shadow: inset -7px 10px 5px 0px rgba(0,0,0,0.6);
  padding: 20px 0 20px 20px;
}
.insidePanel {
  position: relative;
  display: inline-block;
  width: calc(20% - 13px);
  height: 360px;
  border: 3px solid #ffbb00;
  border-radius: 20px;
  margin: 5px 3px;
  box-shadow: 10px 10px 5px #000000;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a37400+0,9b7700+100 */
  background: #a37400; /* Old browsers */
  background: -moz-linear-gradient(left,  #a37400 0%, #9b7700 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, #dea20d 0%,#826917 100%);
  background: radial-gradient(ellipse at center, rgb(253, 197, 0) 0%,rgb(136, 103, 18) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a37400', endColorstr='#9b7700',GradientType=1 ); /* IE6-9 */
  cursor: pointer;
}
.subHeading2 {
  display: inline-block;
  width: 100%;
  margin: 5px auto;
  padding: 0px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  white-space: pre;
}
.textleft {
  text-align:left !important;
}
.imageItem {
  display: block;
  height: 80px;
  width: auto;
  max-width: 90%;
  margin: 5px auto;
}
.pricebtn {
  width: 90%;
  margin: 15px auto;
  font-size: 18px;
  font-weight: bold;
  border-radius: 20px;
  text-align: center;
  background: rgb(210,255,82);
  background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -webkit-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%);
  background: linear-gradient(to bottom, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 );
  border: 2px solid black;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.circleButton {
  width: 96px;
  height: 96px;
  border: 5px solid yellow;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, 55%);
  margin: 0px;
  border-radius: 50%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bf8900+46,ce9800+56,cca335+100 */
  background: #bf8900; /* Old browsers */
  background: -moz-linear-gradient(top,  #bf8900 46%, #ce9800 56%, #cca335 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #bf8900 46%,#ce9800 56%,#cca335 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #bf8900 46%,#ce9800 56%,#cca335 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf8900', endColorstr='#cca335',GradientType=0 ); /* IE6-9 */
}
.circleButtonSelected {
  text-align: center;
  color: #d0ae00;
  text-shadow: -1px 0 #0e300e, 0 1px #0e300e, 1px 0 #0e300e, 0 -1px #0e300e;
  font-size: 70px;
  background: rgb(210,255,82);
  background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -webkit-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%);
  background: linear-gradient(to bottom, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 );
  box-shadow: 0 0 52px yellow;
  border: 3px solid black;
}
.buyButton2 {
  max-width: 115px;
  margin: 0px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 20px;
  text-align: center;
  background: #d2ff52;
  background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  background: -webkit-linear-gradient(top,#03A9F4 0%,#2196F3 100%);
  background: linear-gradient(to bottom,#03A9F4 0%,#2196F3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 );
  border: 4px solid #002953;
  z-index: 400;
  left: 0;
  top: 0;
  padding: 5px;
  box-shadow: 0px 0px 30px 0px #f5ac07;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  transition: all .5s ease 0s;
  outline: none;
}
.buyButton2:hover {
  transform: scale(1.15);
  transition: all .3s ease 0s;
}
.goldB {
  border-radius: 5px;
  background: linear-gradient(to bottom, #FAE40B 50%, #F5C807 50%);
  -webkit-box-shadow: 0px 0px 30px 0px #f5c807;
  -moz-box-shadow: 0px 0px 30px 0px #f5c807;
  box-shadow: 0px 0px 30px 0px #f5c807;
}
.darkText {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
}
.glowText {
  text-shadow: 0 0 17px #fffd02;
}

/*
.top{
  position: absolute;
  width: 100%;
  height: 42px;
}
*/
.topLeft{
  position: absolute;
  width: 42px;
  height: 42px;
  top:0;
  left: 0;
  background-image: url("../img/addcoins/top_left.jpg");
}
.topMiddle{
  position: absolute;
  top:0;
  left:42px;
  height: 42px;
  /* Firefox */
  width: -moz-calc(100% - 82px);
  /* WebKit */
  width: -webkit-calc(100% - 82px);
  /* Opera */
  width: -o-calc(100% - 82px);
  /* Standard */
  width: calc(100% - 82px);
  background-image: url("../img/addcoins/top.jpg");
  background-repeat: repeat-x;
}

.topRight{
  position: absolute;
  width: 42px;
  height: 42px;
  top:0;
  right: 0;
  background-image: url("../img/addcoins/top_right.jpg");
}
.middle{
  position:absolute;
  left:0px;
  top:42px;
  width:100%;

  /* Firefox */
  height: -moz-calc(100% - 82px);
  /* WebKit */
  height: -webkit-calc(100% - 82px);
  /* Opera */
  height: -o-calc(100% - 82px);
  /* Standard */
  height: calc(100% - 82px);


}
.middleLeft{
  position: absolute;
  left:0;
  top:0;
  width: 42px;
  height: 100%;
  background-image: url("../img/addcoins/left.jpg");
  background-repeat: repeat-y;
}

.middleCenter{
  padding:0px;
  position: absolute;
  left:42px;
  top:0;
  background-color: #fec601;
  /* Firefox */
  width: -moz-calc(100% - 80px);
  /* WebKit */
  width: -webkit-calc(100% - 80px);
  /* Opera */
  width: -o-calc(100% - 80px);
  /* Standard */
  width: calc(100% - 80px);


  height: 100% ;

}

.middleRight{
  position: absolute;
  right:0;
  top:0;
  width: 42px;
  height: 100%;
  background-image: url("../img/addcoins/right.jpg");
  background-repeat: repeat-y;
}
/*
.bottom{
  position: absolute;
  left:0;
  bottom:0;
  width: 100%;
  height: 42px;
}
*/
.bottomLeft{
  position: absolute;
  width: 42px;
  height: 42px;
  top:0;
  left: 0;
  background-image: url("../img/addcoins/bottom_left.jpg");
}
.bottomMiddle{
  position: absolute;
  bottom:0;
  left:42px;
  height: 42px;
  /* Firefox */
  width: -moz-calc(100% - 82px);
  /* WebKit */
  width: -webkit-calc(100% - 82px);
  /* Opera */
  width: -o-calc(100% - 82px);
  /* Standard */
  width: calc(100% - 82px);
  background-image: url("../img/addcoins/bottom.jpg");
  background-repeat: repeat-x;
}

.bottomRight{
  position: absolute;
  width: 42px;
  height: 42px;
  bottom:0;
  right: 0;
  background-image: url("../img/addcoins/bottom_right.jpg");
}

.btnCloseCoins {
  font-weight: bold;
  cursor: pointer;
  z-index: 170;
  position: absolute;
  right: -50px;
  top:-50px;
  width: 50px;
  height: 50px;
  background: #f56e6e;
  background-image: -webkit-linear-gradient(top, #f56e6e, #e6103b);
  background-image: -moz-linear-gradient(top, #f56e6e, #e6103b);
  background-image: -ms-linear-gradient(top, #f56e6e, #e6103b);
  background-image: -o-linear-gradient(top, #f56e6e, #e6103b);
  background-image: linear-gradient(to bottom, #f56e6e, #e6103b);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  text-shadow: 1px 2px 3px #666666;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: sans-serif;
  color: #240724;
  font-size: 24px;
  padding: 0px;
  border: solid #ffcc00 9px;
  text-decoration: none;
  text-align: center;
}

.btnCloseCoins:hover {
  background: #fc3c46;
  background-image: -webkit-linear-gradient(top, #fc3c46, #ff000d);
  background-image: -moz-linear-gradient(top, #fc3c46, #ff000d);
  background-image: -ms-linear-gradient(top, #fc3c46, #ff000d);
  background-image: -o-linear-gradient(top, #fc3c46, #ff000d);
  background-image: linear-gradient(to bottom, #fc3c46, #ff000d);
  text-decoration: none;
}
/* End purchase coins 2 */
#canvasWheelHolder {
  max-width:400px;
  margin:0 auto;
}
.wheel-marker {
  position:relative;
  background-image: url(../img/marker.png);
  width: 44px;
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  height: 48px;
  left: 0.5%;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: -50px;
}
.remainSpins {
  font-size:14px;
}
.spin-wheel-text {
  border-radius: 6px;
  color: #fff;
  background-color: #191818;
  width: 100%;
  font-size: 1.25em;
  border: 2px solid #dadada;
  border-radius: 7px;
  height: 60px;
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed;
  min-width: 250px;
  float: right;
}
.spin-wheel-btn {
  width:100%;
  max-width: 200px;
  border-radius: 6px;
  color: #fff;
  background: -moz-linear-gradient(top,
  #2cdd1c 0%,
  #37db34 44%,
  #29f25e 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top,
  #2cdd1c 0%,
  #37db34 44%,
  #29f25e 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,
  #2cdd1c 0%,
  #37db34 44%,
  #29f25e 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  font-size: 2em;
  border-style: solid;
  border-color: #000000;
  height: 60px;
}
.add-spins-btn {
  border-radius: 6px;
  color: #fff;
  font-size: 1.45em;
  border-style: solid;
  border-color: #000000;
  background: #3b679e;
  /* Old browsers */
  background: -webkit-linear-gradient(top,
  #3b679e 0%,
  #2b88d9 50%,
  #207cca 51%,
  #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,
  #3b679e 0%,
  #2b88d9 50%,
  #207cca 51%,
  #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  height: 42px;
  width:100%;
  max-width: 200px;
}
.quiz-panel {
  padding: 10px; 
  background: #414d63; 
  box-shadow: 0px 0px 2px #777373; 
  border: 1px solid #2f2f2f;
  color:white;
}
.quiz-bg {
  background-color: #272e3a;
  padding:10px;
}
#black-friday-btn:hover {
  content: url(../img/black_friday/button_black_friday_hover.png);
  transform: scale(1.10);
  transition: all .3s ease 0s;
}
.skin-sale-btn {
  transition: all .3s ease 0s;
}
.skin-sale-btn:hover {
  transform: scale(1.1);
}
#halloween-btn:hover {
  transform: scale(1.05);
}
#halloween-btn {
  transition: all .3s ease 0s;
}
#halloween_gift_inner {
  display: flex; 
  width: 35%; 
  margin: 0 auto;
}
#halloweenUsernameGift {
  width: 70%;
  text-align: center;
  margin: 0 auto;
  background-color: #a7a7a7;
  height: 30px;
  margin-bottom: -15px;
  margin-right: 3px;
  margin-left: 38px;
}
#halloweenGiftFriend {
  box-shadow: inset 0 34px 0 -15px #565380;
  background-color: #575c6b;
  border: 1px solid #212226;
  color: #8cff07;
  width: 30px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none; 
  opacity: .85; 
  height: 30px;
}
#offer_contain {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 auto;
  position: relative;
  max-width: 1180px;
}
#offer_bg {
  /*max-width: 100%;
  max-height: 100vh;*/
  z-index: 100;
  width: 100%;
}
#btn_a {
  position: absolute;
  z-index: 105;
  width: 30%;
  top: 23%;
  left: 12%;
  transition: all .3s ease 0s;
  cursor: pointer;
}
#btn_b {
  position: absolute;
  z-index: 105;
  width: 40%;
  top: 23%;
  left: 50%;
  transition: all .3s ease 0s;
  cursor: pointer;
}
#btn_c {
  position: absolute;
  z-index: 105;
  width: 40%;
  top: 58%;
  left: 31%;
  transition: all .3s ease 0s;
  cursor: pointer;
}
#btn_a:hover {
  transform: scale(1.15);
}
#btn_b:hover {
  transform: scale(1.15);
}
#btn_c:hover {
  transform: scale(1.15);
}
#saleIcon {
  transition: all .5s ease 0s;
}
#saleIcon:hover {
  transform: scale(1.15);
  transition: all .3s ease 0s;
}
.shop-content {
  background: linear-gradient(to bottom,
  rgb(46,
  49,
  56) 0%,
  rgb(32,
  26,
  42) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88',
  endColorstr='#3f4c6b',
  GradientType=0);
  border: 3px solid #393348;
  /*border-radius: 10%;*/
  margin-bottom: 20px;
  height: 580px;
}
.shop_header {
  font-size: 19px;
    margin: 0 auto;
    /*max-width: 500px;*/
    border-radius: 19px 19px 0px 0px;
    margin-top: 10px;
    padding: 7px;
    text-align: center;
    color: #FFEB3B;
    background-color: rgb(120, 120, 120);
    /* */
    background: linear-gradient(to bottom, rgb(119, 112, 88) 0%,rgb(130, 127, 45) 50%,rgb(121, 115, 46) 51%,rgb(95, 90, 29) 100%);
    text-shadow: rgb(3, 3, 3) 4px 4px 4px;
    box-shadow: 0px 0px 0.02em #000000;
    margin-bottom: 10px;
    border-style: solid;
}
.faded2 {
  opacity: 0.14;
}
/*
.white_shopdesc {
  color: #5d4339;
  font-size: 0.8em;
  margin: 0;
  display: block;
}
*/
.low-margin {
   margin-bottom: -18px;
}
#menuabilities img.checkmark {
  display: none;
  position: absolute;
  margin: -12px 0px 0px -10px;
}
#menuabilities li.has-ability img.checkmark {
  display: block;
}

/* Skins Shop */
#menugold ul li a {
  padding: 10px;
}
.skin-data {
  position: relative;
  width: 100%;
  height: 490px;
  padding: 10px;
  margin: 0px 0px 5px;
  overflow-x: hidden;
  overflow-y: auto;
}
.skin-data table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0px 20px;
  margin-top: -15px;
  width:100%;
}
.skin-data table tr {
  background-color: #4D4950;
  text-align: left;
}
.skin-subcategory {
  font-size: 19px;
  width:100%;
  max-width: 560px;
  padding: 7px;
  margin: 0px;
  color: gold;
  text-align: center;
  background-color: #787878;
  text-shadow: 4px 4px 4px #000;
  box-shadow: 0px 0px 0.02em #787878;
  border: 3px solid #373737;
}
.skin-container {
  display: inline-block;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 140px;
  max-width: 140px;
  word-wrap: break-word;
  overflow: hidden;
  box-sizing: border-box;
}
.skin-container img {
  display: inline-block;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0px 0px 2px #000;
  width: 128px;
  height: 128px;
  margin: 10px 0px 0px;
  opacity: 1;
}
.skin-container h4 {
  color: #eee;
  margin: 8px 5px;
  opacity: 1;
}
.skin-container p {
  font-size: 13px;
  color: #b5b9c0;
  text-shadow: 1px 1px 2px #000;
  margin-left: 3px;
  margin-right: 3px;
}
.skin-container button {
  min-width: 120px;
  margin: 5px 0px 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.skin-container .skin-tag {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: absolute;
  margin: 0px;
}
.skin-container .skin-tag-yt {
  background-image: url('../img/ytskin_label.png');
  width: 32px;
  height: 32px;
  left: 8px;
  top: 4px;
}
.skin-container .skin-tag-star {
  background-image: url('../img/gold-star.png');
  width: 20px;
  height: 20px;
  left: 32px;
  top: 2px;
}
.skin-container.faded img,
.skin-container.faded h4 {
  opacity: 0.1;
}
.skin-container.selected {
  /*
  background-color: #008FC4;
  border-radius: 10px;
  border: 3px solid #337ab7;
  */
  /*
  background-color: #448;
  border-radius: 10px;
  border: 3px solid #4af;
  box-shadow: inset 0px 0px 210px 0px #4bf;
  */
  background: radial-gradient(#46a 0%, #4bf 100%);
  border-radius: 10px;
  border: 3px solid #4af;
}
.skin-container.selected img {
  margin: 7px 0px 0px;
}
.skin-container.selected h4 {
  margin: 8px 2px;
}
.skin-container.selected p {
  margin-left: 0px;
  margin-right: 0px;
}
.skin-container.selected button.skinuse-btn {
  margin: 5px 0px 7px;
}
.skin-container.selected .skin-tag {
  margin: -3px 0px 0px -3px;
}
.skin-container.custom-slot h4 {
  color: #f0ad4e;
}
.skin-container p.skinsharedpublic {
  color: #f0ad4e;
  text-shadow: none;
}
.skin-container p .rejected-control {
  color:#d9534f;
}
.skin-container p.skinchangelocked {
  color:#d9534f;
}
.skin-container p.skinsharedpublic.private-skin {
  display: none;
}
.skin-container input.skinsharedpublic-checkbox + label {
  font-size: 13px;
}
.skin-container input.skinsharedpublic-checkbox:checked + label {
  color: #f0ad4e;
}
.skin-container .checkbox label::before {
  background-color: rgba(255,255,255,0);
}
.skin-container .skinname-input {
  font-size: 18px;
  text-align: center;
  background: rgba(0,0,0,0.3);
  width: 134px;
  height: 30px;
  padding: 0px 2px;
  margin: 3px;
}
.skin-container .skinupload-btn {
  position: absolute;
  width: 128px;
  height: 128px;
  top: 11px;
  left: 6px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  color: #f0ad4e;
  text-shadow: 1px 1px #000;
}
.skin-container .skinupload-btn:focus {
  outline: none;
}
.skin-container .skinupload-btn:hover {
  background-color: rgba(0,0,0,0.3);
}
.skin-container .skinupload-btn > span {
  display: none;
}
.skin-container .skinupload-btn:hover > span,
.skin-container.noskin .skinupload-btn > span {
  display: inline;
}
.skin-container.drag-over .skinupload-btn {
  background-color: rgba(255,255,255,0.3);
}
.skin-container.is-uploading .skinupload-btn {
  display: none;
}
.skin-container.saved-mode .edit-control,
.skin-container.edit-mode .saved-control,
.skin-container.approved-mode .nonapproved-control,
.skin-container.nonapproved-mode .approved-control,
.skin-container.pending-mode .rejected-control,
.skin-container.rejected-mode .pending-control,
.skin-container.enabled-mode .disabled-control,
.skin-container.disabled-mode .enabled-control {
  display: none;
}
.publicskins-nav-bar {
  text-align: left;
}
.publicskins-nav-btn {
  margin: 2px;
  min-width: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
/* End Skins Shop */

/* Wearables Shop */
.wearable-container {
  box-sizing: border-box;
  display: inline-block;
  max-width: 180px;
  padding: 0px;
  width: 100%;
  margin-right: 5px;
  margin-bottom: 5px;
}
.wearable-container img {
  margin: 5px 0px 0px;
}
.wearable-container h3 {
  margin-left: -3px;
  margin-right: -3px;
}
.wearable-container button {
  /*min-width: 150px;*/
  width:50%;
  /*margin: 0px 2px 5px;*/
  border-radius:1px;
}
.wearable-try-btn {
  border: 1px #1e6f71 solid;
  background: linear-gradient(to bottom,#42659b 50%,#345b95 50%);
  box-shadow: 0 0px 15px 0 #2b567c;
}
.wearable-try-btn:hover {
  background: linear-gradient(to bottom,#2e589b 50%,#24539d 50%);
}
.wearable-buy-btn {
  border: 1px #ff8900 solid;
  background: linear-gradient(to bottom,#faa80b 50%,#fa8c0b 50%);
}
.wearable-buy-btn:hover {
  background: linear-gradient(to bottom,#c18a21 50%,#bf8414 50%);
}
.wearable-container .wearable-div {
  position: relative;
  float: left;
  clear: left;
  max-width: 300px;
  height:272px;
  width: 100%;
  background: #373737;
  box-shadow: 0px 0px 0.02em #000000;
  /*background: linear-gradient(to bottom, rgb(82, 143, 227) 0%,rgb(165, 207, 225) 50%,rgb(128, 189, 218) 51%,rgb(190, 176, 54) 100%);*/
  /*border-radius: 20px;*/
  background: linear-gradient(to bottom,#232b41 0%,#3278b5 50%,rgb(50, 125, 178) 51%,#232b41 100%);
  /*border: 1px solid #f0ad4e;*/
  border: 1px solid #2e6591;
  box-shadow: 0 0px 7px #0d142f;
}
.wear-common {
  background: linear-gradient(to bottom,#1a331e 0,#299739 50%,#299539 51%,#234125 100%) !important;
  border: 1px solid #202532 !important;
  box-shadow: 0 0 7px #0d142f !important;
}
.wear-rare {
  background: linear-gradient(to bottom,#1a2133 0,#7e4eee 50%,#7d4eed 51%,#232b41 100%) !important;
  border: 1px solid #46429c !important;
  box-shadow: 0 0 7px #0d142f !important;
}
.wear-legend {
  background: linear-gradient(to bottom,#845754 0,#e9ac4e 50%,#e2a74d 51%,#6b5838 100%) !important;
  border: 1px solid #664d31 !important;
  box-shadow: 0 0 7px #0d142f !important;
}
.wearable-container.selected .wearable-div {
  /*
  background: #008FC4;
  border-radius: 10px;
  border: 3px solid #337ab7;
  */
  /*
  background-color: #fff;
  border-radius: 10px;
  border: 3px solid #b8f;
  box-shadow: inset 0px 0px 300px 0px #24f;
  */
  background: radial-gradient(#46a 0%, #4bf 100%);
  border-radius: 10px;
  border: 3px solid #4af;
}
.wearable-container .wearable-div p {
  font-size: 13px;
  color: #ddd;
  text-shadow: 1px 1px 2px #000;
  margin-left: 2px;
  margin-right: 2px;
}
.wearable-container.selected img {
  margin: 3px 0px 0px;
}
.wearable-container.selected h3 {
  margin-left: -5px;
  margin-right: -5px;
}
.wearable-container.selected button {
  margin-bottom: 3px;
}
.wearable-container.selected .wearable-try-btn {
  margin-bottom: 5px;
}
.wearable-container.selected .wearable-div p {
  margin-left: 0px;
  margin-right: 0px;
}
.shop-wearable-description {
  /*float: right;*/
  min-width: 100px;
  width: calc(100% - 326px);
  padding: 8px 0px;
}
@media (max-width: 991px) {
  .shop-wearable-description {
    font-size: 12px;
    padding: 4px 0px;
    margin: 0px;
  }
}
@media (max-width: 549px) {
  .shop-wearable-description {
    display: none;
  }
}
/* End Wearables Shop */

.mega-name {
  width: 140px;
  position: absolute;
  top: 173px;
  left: 50px;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  word-wrap: break-word;
  text-align: center;
  white-space: pre-wrap;
  max-height: 60px;
  overflow: hidden;
}
.mega-name.gold {
  color: #FFD700;
  /*background: transparent url(../img/particles.gif);*/
}
.mega-name.black {
  color: #000;
  text-shadow: -1px -1px 0 #777, 1px -1px 0 #777, -1px 1px 0 #777, 1px 1px 0 #777;
}

#cellExampleShop,
#cellMegaDialog,
#cellMegaWidget {
  position: relative;
  top: 0px;
  left: -26px;
  height: 240px;
  width: 240px;
}
#cellExampleShop {
  transform: scale(0.85);
  margin-top: -15px;
  margin-bottom: -42px;
}
#cellMegaDialog {
  transform: scale(0.85);
}
#cellMegaWidget {
  transform: scale(0.85);
  top: -26px;
}
#cellExampleShop .skin-example,
#cellMegaDialog .skin-example,
#cellMegaWidget .skin-example {
  position: absolute;
  top: 71px;
  left: 71px;
  height: 96px;
  width: 96px;
  box-sizing: content-box;
  border-radius: 50%;
  box-shadow: 0px 0px 3px #000;
  border: 1px solid rgba(0,0,0,0.25);
  /*background-color: #505050;*/
  background-image: none;
  background-repeat: no-repeat;
  background-position: -1px -1px;
  background-size: 98px 98px;
}
#cellExampleShop .wear-example,
#cellMegaDialog .wear-example,
#cellMegaWidget .wear-example {
  display: none;
  position: absolute;
  top: 48px;
  left: 48px;
  height: 144px;
  width: 144px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#cellExampleShop .wear-example.center,
#cellMegaDialog .wear-example.center,
#cellMegaWidget .wear-example.center {
  top: 48px;
  left: 48px;
}
#cellExampleShop .wear-example.top,
#cellMegaDialog .wear-example.top,
#cellMegaWidget .wear-example.top {
  top: 0px;
  left: 48px;
}
#cellExampleShop .wear-example.bottom,
#cellMegaDialog .wear-example.bottom,
#cellMegaWidget .wear-example.bottom {
  top: 96px;
  left: 48px;
}
#cellExampleShop .wear-example.left,
#cellMegaDialog .wear-example.left,
#cellMegaWidget .wear-example.left {
  top: 48px;
  left: 0px;
}
#cellExampleShop .wear-example.right,
#cellMegaDialog .wear-example.right,
#cellMegaWidget .wear-example.right {
  top: 48px;
  left: 96px;
}
#cellExampleShop .wear-example.max,
#cellMegaDialog .wear-example.max,
#cellMegaWidget .wear-example.max {
  top: 0px;
  left: 0px;
  height: 240px;
  width: 240px;
}
#cellExampleShop .skin-example.faded,
#cellExampleShop .wear-example.faded {
  opacity: 0.1;
}

.fa.fa-wrench {
    margin-top: 6px;
}

#captchaOut {
  width: 420px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
  position: fixed;
  z-index: 501;
  top: 40%;
  left: 50%;
  padding: 10px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#captchaOut h2 {
    text-align: center;
    color:black;
}
#captchaOut #captchaIn {
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    width: 304px;
}
.btn-circle {
    width: 50px;
    height: 50px;
    line-height: 48px;
    text-align: center;
    color: #FFF;
    border-radius: 50%;
    border: 2px solid blue;
    cursor: pointer;
    -webkit-transition: 200ms;
    transition: 200ms
}
.frndsBtn { /* old */
  margin: 0 auto;
  text-align: center;
  box-shadow: inset 0px -3px 30px 0px #fae40b;
  border: 2px solid #fae40b;
  color: #FFEB3B;
  border-radius: 4px;
  font-size: 15px;
  background-color:#2e3138;
  box-shadow: inset 0px -3px 30px 0px #4CAF50;
  border: 2px solid #4bb161;
}
.rspwnBtn {
  border-radius: 4px;
  color: #fff;
  /*background-color: #2e3138;*/
  font-size: 15px; 
 /* border: 0px solid transparent; 
  height: 38px;*/
  float:right;
  /*
  box-shadow: inset 0px -3px 7px 0px #4CAF50;
  border: 1px solid #0b0e07;*/
  background-color:#2e3138;
  box-shadow: inset 0px -3px 30px 0px #4CAF50;
  border: 2px solid #4bb161;
}
.logoutBtn {
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  /*border: 0px solid transparent; 
  height: 38px;*/
  float:left;
  /*
  background-color: #2e3138; 
  box-shadow: inset 0px -3px 7px 0px #F44336;
  border: 1px solid #0b0e07;
  */
  background-color: rgb(46, 49, 56);
  box-shadow: inset 0px -3px 25px 0px #eb2d1f;
  border: 2px solid #d4382c;
}
.referral-h1 {
   margin: 0 auto;
   margin-bottom: -28px;
   text-align: center;
   margin-top: 9px;
   color: #f5c377;
   line-height: 1.5;
   text-shadow: 1px 1px 6px #000,
   1px 1px 6px #000;
   text-transform: uppercase;
}
.referral-h5 {
  width: 100%;
  margin: 0 auto;
  background-color: #e6e2e2;
  padding: 10px;
  border: 1px solid black;
  color: #000000;
  line-height: 1.5;
  /* text-shadow: 1px 1px 6px #000, 1px 1px 6px #000; */
  text-transform: none;
  font-size:13px;
}
.friends-vis2 {
  font-size: 17px;
  position: absolute;
  margin-left: -137px;
  margin-top: 9px;
  color: red;
  cursor: pointer;
}
.friends-visibility {
  display: none;
  text-align: center; 
  margin: 0 auto; 
  font-size: 12px; 
  color: #8cff07;
}
.tab-radius {
  border-radius: 7px!important;
}
#btnFriends {
  transition: color 200ms;
  position: absolute;
  top: 10px;
  right: 220px;
  background: #373737;
  padding: 7px;
  z-index: 135;
  opacity: 0.7;
}
@media all and (max-width: 909px) {
  #btnFriends {
    transform: scale(0.7);
    transform-origin: right top;
  }
}
#btnFriends.touch-device {
  transform: scale(0.7);
  transform-origin: right top;
  opacity: 0.5;
}
#btnFriends:hover {
  color: #eee;
  opacity: 1;
}
#friendDialog {
  transition: 200ms;
  position: absolute;
  width: 0px;
  height: 0px;
  top: 52px;
  right: 260px;
  background: rgb(51, 51, 51);
  border: 2px solid #e37955;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(39, 39, 39);
  z-index: 150;
  opacity: 0.97;
  transform-origin: right top;
}
#friendDialog.shown {
  transition: 300ms;
  width: 290px;
  height: 415px;
}
#friendDialog.shown.actives {
  transition: 0ms;
}
@media all and (max-width: 909px) {
  #friendDialog {
    transform: scale(0.7);
  }
}
#friendDialog.touch-device {
  transform: scale(0.7);
}
#friendHeader {
  text-transform: uppercase;
  color: #ffeb32;
  border-bottom: 2px solid #e37955;
  margin: 0;
  padding: 13px 15px;
  font-weight: bold;
  font-size: 15px;
  background-color: rgb(51, 51, 51);
  text-align: center;
}
#friendFooter {
  position: absolute;
  width: 100%;
  bottom: 0px;
  text-transform: uppercase;
  color: #ffeb32;
  border-top: 2px solid #e37955;
  margin: 0;
  padding: 13px 15px;
  font-weight: normal;
  font-size: 15px;
  background-color: rgb(51, 51, 51);
  text-align: center;
}
#friendAddInputContainer {
  max-width: calc(100% - 66px);
}
#friendAddInputContainer small {
  color: #c3c3c3;
  white-space: nowrap;
}
#friendAddInput {
  text-align: center;
  height: 39px;
  width: 100%;
  padding: 10px;
  line-height: 1.42857143;
  background-color: #222328;
  background-image: none;
  border: 0px solid #222328;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#friendAddInput:focus {
  outline: 0;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 2px #406299;
          box-shadow: 0 0 0 2px #406299;
}
#friendResizer {
  position: absolute;
  width: 10px;
  height: 10px;
  right: -2px;
  bottom: -2px;
  background: #f3e030;
  border-radius: 4px;
  cursor: se-resize;
}
#friendDialog .nav-tabs {
  border-width: 3px 0px 0px 0px;
}
#friendDialog .nav-tabs > li > a {
  border-radius: 4px 4px 0px 0px;
  border: 0px;
  text-align: left;
  white-space: nowrap;
  font-size: 14px;
  color: rgb(217, 217, 217);
  text-shadow: rgb(46, 46, 46) 0px 4px 5px;
}
#friendDialog .nav-tabs > li > a:hover {
  background: #1f222b;
}
#friendDialog .nav-tabs > li.active > a {
  background: #444;
}
#friendRequestsBell.red{
  color: red;
}
.friend-list {
  display:none;
  font-size: 13px;
  width: 100%;
  margin: 0px;
  position: absolute;
  max-height: calc(100% - 186px);
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #444;
}
@media (max-width: 476px) {
  .friend-list {
    max-height: calc(100% - 166px);
  }
}
.friend-list.active {
  display: block;
}
.friend-list .friend {
  position: relative;
  display: block;
  background: #373737;
  box-shadow: 0px 0px 0.02em #000000;
  margin-bottom: 5px;
  border-bottom: solid 1px rgba(0,0,0,.1);
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  vertical-align: middle;
}
.friend-list .friend .state {
  float: left;
  margin-top: 4px;
  margin-right: 11px;
  color: gray;
  font-size: 12px;
  font-family: sans-serif;
  font-style: italic;
}
.friend-list .friend .state.online {
  color: limegreen;
}
.friend-list .friend .name.online {
  cursor: pointer;
  text-decoration: underline;
}
.friend-list .friend .name.online:hover {
  color: #eee;
}
.friend-list .friend .server {
  color: gray;
  float: right;
  margin-left: 5px;
  margin-right: 65px;
}
.friend-list .friend .info {
  color: gray;
  font-size: 11px;
  font-style: italic;
  margin-left: 10px;
  margin-right: 65px;
}
.btn-friends {
  border-radius: 3px;
  display:inline-block;
  cursor:pointer;
  text-decoration:none;
  color: #fff;
  position: absolute;
  padding: 4px;
  opacity: 0.85;
}
.btn-friends:hover {
  opacity: 1;
}
.btn-friends:active:hover {
  opacity: 0.8;
  background-color: #474747;
  box-shadow: none;
}
.btn-friends.add {
  box-shadow: inset 0px 34px 0px -15px #565380;
  background-color: #575c6b;
  border: 1px solid #212226;
  color: #8cff07;
  width: 60px;
  height: 35px;
  right: 13px;
  bottom: 15px;
}
.btn-friends.acceptall,
.btn-friends.accept,
.btn-friends.remove {
  box-shadow: inset 0px 34px 0px -15px #575757;
  background-color: #606060;
  border: 1px solid #303030;
  font-size: 12px;
  padding: 0px;
  width: 54px;
  height: 24px;
  top: 5px;
}
.btn-friends.acceptall {
  color: #66ff07;
  width: 72px;
  height: 24px;
  top: 8px;
  right: 14px;
}
.btn-friends.accept {
  color: #66ff07;
  right: 62px;
}
.btn-friends.remove {
  color: #ff4000;
  right: 4px;
}
#friendRequestsInfo {
  position: absolute;
  font-size: 16px;
  color: #ddd;
  left: 15px;
}
#friendRequestsInfo:hover {
  color: #fff;
}
.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #555;
  border: 1px solid black;
}
.scroll::-webkit-scrollbar {
  width: 18px;
  background-color: #272424;
  border: 1px solid black;
}
.scroll::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgb(78, 109, 122);
  border-radius: 4px;
  border: 1px solid black;
  padding: 7px;
  box-shadow: 0px 0px 0.02em #000000;
}
.minion.scroll::-webkit-scrollbar-thumb {
  background-color: rgb(150, 185, 65);
}
.friend-list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #555;
  border: 1px solid black;
}
.friend-list::-webkit-scrollbar {
  width: 18px;
  background-color: #272424;
  border: 1px solid black;
}
.friend-list::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #9fa2a7;
  border-radius: 4px;
  border: 1px solid black;
  padding: 7px;
  box-shadow: 0px 0px 0.02em #000000;
}
.skin-data::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #555;
  border: 1px solid black;
}
.skin-data::-webkit-scrollbar {
  width: 18px;
  background-color: #272424;
  border: 1px solid black;
}
.skin-data::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #9fa2a7;
  border-radius: 4px;
  border: 1px solid black;
  padding: 7px;
  box-shadow: 0px 0px 0.02em #000000;
}
.  {
  font-size:12px; 
  font-weight:normal; 
  font-style:italic; 
  color:#898; 
  text-align:left;
}
.settings-dialog {
    bottom: 44px;
    left: 48px;
    position: absolute;
    z-index: 150;
    width: 0;
    height: 0;
    background: rgb(51, 51, 51);
    border: 2px solid rgb(227, 121, 85);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgb(39, 39, 39);
    -webkit-transition: 200ms;
    transition: 200ms;
    border-width: 0
}
.settings-dialog.shown {
    width: 350px;
    height: 441px;
    border-width: 2px;
    border-color: rgb(227, 121, 85);
    transition: 300ms;
}

.settings-dialog > h2 {
    text-transform: uppercase;
    color: #FFF;
    border-top: 2px solid rgb(227, 121, 85);
    border-bottom: 2px solid rgb(227, 121, 85);
    margin: 0;
    padding: 13px 15px;
    font-weight: bold;
    font-size: 14px;
    background: rgb(72, 72, 72);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5)
}
.settings-dialog > h2:first-child {
    border-top: 0;
    margin-top: 0
}
.settings-row {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgb(41, 41, 41);
    height: 40px;
    width: 100%;
    display: table
}
.settings-row > li {
    border-right: 1px solid rgb(41, 41, 41);
    height: 40px;
    width: 100px;
    display: table-cell;
    position: relative;
    cursor: pointer;
    overflow: hidden
}
.settings-dialog > .settings {
    margin: 8px;
    border: 1px solid rgb(41, 41, 41);
    overflow: hidden;
    border-radius: 3px;
    background: rgb(72, 72, 72);
}
.settings-dialog > .settings-more {
  text-align: center;
  padding: 5px;
  margin-bottom: 0px;
  margin-top: -7px;
}
.settings-dialog > .settings > .settings-row:last-child {
    border-bottom: 0
}
.settings-row > li > input[type="checkbox"] {
    top: -999px;
    left: -999px;
    position: absolute;
}
.settings-row > li > input[type="checkbox"]:checked ~ label {
  color: #000;
  background-color: rgb(88, 209, 114);   
  transition: 300ms;
}
.settings-row > li > input[type="checkbox"]:disabled ~ label {
  color: #666;
  background: rgb(72, 72, 72);
}
.settings-row > li > label {
    width: 100%;
    height: 40px;
    line-height: 42px;
    text-align: center;
    display: block;
    color: #FFF;
    -webkit-transition: 200ms;
    transition: 200ms;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07)
}
.settings-row > li:last-child {
    border: 0
}
@media all and (max-width: 909px) {
  .settings-dialog {
    bottom: 40px;
    left: 44px;
    transform: scale(0.7);
    transform-origin: bottom left;
  }
}
.settings-dialog.touch-device {
  bottom: 40px;
  left: 44px;
  transform: scale(0.7);
  transform-origin: bottom left;
  max-height: calc((100% - 40px) / 0.7);
}
.settings-dialog.touch-device.shown {
  height: 434px;
}
.settings-dialog.touch-device > h2 {
  padding-top: 10px;
  padding-bottom: 8px;
}
.settings-dialog.touch-device > .settings {
  margin: 4px;
}
.settings-dialog.touch-device > .settings-more {
  margin-bottom: 3px;
  margin-top: -1px;
}
.settings-dialog.touch-device .settings-row,
.settings-dialog.touch-device .settings-row > li {
  height: 30px;
}
.settings-dialog.touch-device .settings-row > li > label {
  height: 30px;
  line-height: 32px;
}
.btn-circle.no-border {
    border: 0
}
.btn-circle.settings {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 145;
    font-size: 14px;
    border-color: rgb(227, 121, 85);
    transition: 300ms;
    background-color: #e37955;
}
.btn-circle.settings.ingame {
    border-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 5px;
    height: 30px;
    width: 34px;
    line-height: 37px
}
.btn-circle.colors {
    position: absolute;
    bottom: 70px;
    left: 10px;
    z-index: 145;
    font-size: 21px
}
.btn-circle.menui {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 145;
    font-size: 21px;
    color: rgb(51, 51, 51);
    border-color: rgb(51, 51, 51)!important;
    background: rgba(255, 255, 255, .2)
}
.btn-circle:hover {
    background: rgba(255, 255, 255, .2)
}
.color-dialog {
    height: 50px;
    width: 0;
    left: 70px;
    /*display: none;
    position: absolute;*/
    bottom: 70px;
    overflow: hidden;
    -webkit-transition: 400ms;
    transition: 400ms;
}
.color-dialog > .color {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #F00;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4); /*Darker smoother color*/ 
    /*box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);*/
    /*border: 1px solid rgb(41, 41, 41);*/
    float: left;
    margin-right: 4px;
    /*cursor: pointer*/
}
#mega_color_selection > .color {
  cursor: pointer;
}
#mega_color_selection > .color:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
}
#mega_color_selection > .color.selected {
  box-shadow: inset 0 0 0 25px rgba(0, 0, 0, 0.3)
}
.color-dialog > .color.orange {
    background: rgb(255, 112, 67)
}
.color-dialog > .color.turquoise {
    background: rgb(37, 165, 153)
}
.color-dialog > .color.sienna {
    background: rgb(255, 112, 67)
}
.color-dialog > .color.purple {
    background: rgb(171, 71, 188)
}
.color-dialog > .color.pink {
    background: rgb(236, 64, 122)
}
.color-dialog > .color.orange {
    background: rgb(247, 151, 29)
}
.color-dialog > .color.green {
    background: rgb(138, 194, 73)
}
.color-dialog > .color.blue {
    background: rgb(6, 187, 211)
}
.color-dialog > .color.red {
    background: rgb(239, 84, 85)
}
.profbutton {
  cursor: pointer;
  position: absolute;
  margin-left: -495px;
  margin-top: 55px;
  background-size: contain !important;
  width: 100px;
  height: 100px;
  display: -webkit-inline-box;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
  -webkit-transition: width 1s,height 1s;
  -moz-transition: width 1s,height 1s;
  -o-transition: width 1s,height 1s;
  transition: width 1s,height 1s;
  border-radius: 100px;
  /* margin: 8px; */
}
.tooltip1 {
  display:none;
  position:absolute;
  border:1px solid #333;
  background-color:rgba(22, 22, 22, 0.9);
  /*border-radius:5px;*/
  box-shadow: 0px 0px 2px #777373 inset;
  padding:10px;
  color:#e2e2e2;
  font-size:12px Arial;
  z-index:2000;
  /*width:300px*/
  min-width: 150px;
  white-space: pre-wrap;
}
.tooltip1-header {
  padding: 5px;
  width: 100%;
  background: rgba(144, 75, 57, 0.5);
  font-size: 16px;
  color: #f5e138;
  white-space: pre-wrap;
}

#chtbox {
  -webkit-transition: opacity .4s ease-in-out;
  -moz-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
  background: #444;
  color: #fff;
  height: 30px;
  text-indent: 6px;
  padding: 4px;
  width: 400px;
  opacity: 0.5;
  font-size: 14px;
  z-index: 120;
  bottom: 10px;
  position: absolute;
  border: 0;
  outline: 0;
  left: 46px;
  border-radius: 1px;
}
#chtbox:focus {
  opacity: 1;
}
#chtbox::-moz-placeholder {
  color: #888;
  opacity: 1;
}
#chtbox:-ms-input-placeholder {
  color: #888;
}
#chtbox::-webkit-input-placeholder {
  color: #888;
}

.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0.3;
  z-index: 0!important;
}
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#curser {
  display: inline-block;
  position: absolute;
  padding: 0px 15px;
  z-index: 1500;
  background: rgba(0,0,0,0.8);
  color: #999;
  font-family: Ubuntu, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  top: 0px;
  left: 0px;
  width: 100%;
  white-space: pre-wrap;
}
#emojiBtn {
  position: absolute;
  z-index: 120;
  bottom: 10px;
  left: 448px;
  height: 30px;
  width: 30px;
  background: rgba(68,68,68,0.5);
  border-radius: 1px;
}
#emojiBtn > img {
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0.75;
  pointer-events: none;
}
#emojiBtn:hover {
  background: rgba(68,68,68,0.8);
  cursor: pointer;
}
#emojiBtn:hover > img {
  opacity: 1;
}
#emojiBtn:active:hover {
  background: rgba(0,0,128,0.5);
}
#emojiBtn:active:hover > img {
  top: 6px;
  left: 6px;
}
.commands-btn {
    position: absolute;
    z-index: 120;
    bottom: 10px;
    left: 480px;
    height: 30px;
    width: 30px;
    background: rgba(68,68,68,0.5);
    border-radius: 1px;
}
.commands-btn > img {
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0.75;
    pointer-events: none;
}
.commands-btn:hover {
  background: rgba(68,68,68,0.8);
  cursor: pointer;
}
.commands-btn:hover > img {
  opacity: 1;
}
.commands-btn:active:hover {
  background: rgba(0,0,128,0.5);
}
.commands-btn:active:hover > img {
  top: 6px;
  left: 6px;
}
.commands-dropdown {
  display: none;
  position: absolute;
  z-index: 155;
  bottom: 40px;
  left: 448px;
  background: rgb(46 49 56 / 0.7);
  min-width: 240px;
  height: 240px;
  max-height: calc(100% - 40px);
  overflow-y: scroll;
  box-shadow: 0px 0px 0px 1px rgba(96,96,96,0.5);
  border-radius: 2px;padding: 10px;
}
.commands-header {
    font-size: 16px;
    font-weight: bold;
    color: #14ff14;
}
.commands-body {
  text-align: left;
}
.commands-desc {
  color: #6bde75;
  padding-right: 30px;
}
.commands-cmd {
  padding-right: 50px;
}
.commands-font {
  color: #f0f;
}
#emojiDropdown {
  position: absolute;
  z-index: 155;
  bottom: 40px;
  left: 448px;
  background: rgba(128,128,128,0.7);
  min-width: 240px;
  height: 240px;
  max-height: calc(100% - 40px);
  overflow-y: scroll;
  box-shadow: 0px 0px 0px 1px rgba(96,96,96,0.5);
  border-radius: 2px;
}
#emojiDropdown .emo-img {
  width: 20px;
  height: 20px;
  pointer-events: none;
  background-image: url(../emotes/emojisheet.png);
  background-repeat: no-repeat;
  background-position: 20px 20px;
}
#emojiDropdown .emo-svg {
  width: 28px;
  height: 28px;
  pointer-events: none;
  background: transparent;
}
#emojiDropdown td {
  padding: 5px;
}
#emojiDropdown td:hover {
  background: rgba(0,0,0,0.2);
  cursor: pointer;
}
#emojiDropdown td:active:hover {
  background: rgba(0,0,128,0.5);
  padding: 6px 4px 4px 6px;
}
#chtDim {
  position: absolute;
  z-index: 120;
  bottom: 44px;
  left: 10px;
  height: 22px;
  width: 22px;
  padding: 3px 4px;
  margin: 0px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 2px;
  color: #000;
  background: #ed4;
  opacity: 0.8;
}
#chtDim:hover {
  opacity: 1;
}
#chtTabs {
  display: -webkit-flex; /* Safari */
  display: flex;
  position: absolute;
  z-index: 120;
  bottom: 44px;
  left: 36px;
  height: 22px;
  max-width: calc(50% - 162px);
}
@media all and (max-width: 1200px) {
  #chtTabs {
    max-width: 438px;
  }
}
.chat-tab {
  height: 22px;
  min-width: 15px;
  padding: 0px 4px;
  margin: 0px 4px 0px 0px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 2px;
  color: #000;
  background: #555;
  opacity: 0.65;
}
.chat-tab:hover,
.chat-tab:active {
  opacity: 0.85;
}
.chat-tab:active:hover {
  opacity: 0.75;
}
.chat-tab.semi-selected {
  background: #7CD98F;
  opacity: 0.75;
}
.chat-tab.selected {
  background: #30cc30;
  opacity: 0.9;
}
.chat-tab.selected:hover,
.chat-tab.semi-selected:hover {
  opacity: 1;
}
.chat-tab.selected:active:hover,
.chat-tab.semi-selected:active:hover {
  opacity: 0.8;
}
.chat-tab.blink {
  color: #fff;
  background: #c22;
  -webkit-animation: blinker 1s linear infinite;
  -moz-animation: blinker 1s linear infinite;
  animation: blinker 1s linear infinite;
}
@-webkit-keyframes blinker {
  50% { opacity: 0; }
}
@-moz-keyframes blinker {
  50% { opacity: 0; }
}
@keyframes blinker {
  50% { opacity: 0; }
}
#minimap {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 25;
  pointer-events: none;
  border-radius: 2px;
}
#chtCanvas {
  position: absolute;
  bottom: 72px;
  left: 10px;
  z-index: 15;
}
.progress-bar-challenge {
  background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(26 94 195)), to(rgb(48 166 253))); 
  color: white; 
  font-weight: bold; 
  font-size: 16px; 
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
  line-height: 25px;
    float: left;
    width: 0;
    height: 100%;
    text-align: center;
    background-color: #337ab7;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.challenge-header-old {
  color: #fdde00; 
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
  background-color: #42465066; padding: 5px;
  box-shadow: 0 0 7px 2px #2c2f38 inset; 
  text-align: center;
}
.challenge-header {
    color: #fdde00;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    background-color: #42465066;
    padding: 5px;
    /*box-shadow: 0 0 7px 2px #2c2f38 inset;*/
    text-align: center;
    border: 3px #007bff47 solid;
    text-shadow: 0px 2px 2px #000000;
    border-radius: 5px;
    background: linear-gradient(to bottom, #17315b70 50%, #1144636b 50%);
}
#challengeInfoBox.slide-box.collapsed {
  border-left:none;
  border-radius: 0px 9px 9px 0px;
  min-width:38px;
}
#challengeInfoBox.slide-box {
    min-width: 290px;
    padding: 6px 12px 8px;
    transform: scale(0.766429);
    top: 105.455px;
    border: 2px solid rgba(0, 163, 255, 0.5);
    border-radius: 3px;
    line-height:1.5;
}
#challengeInfoBox.slide-box:not(.collapsed) {
  max-width: none;
}
#leaderboard {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  pointer-events: none;
  border-radius: 2px;
}
.slide-box {
  position: absolute;
  top: 105px;
  left: 10px;
  z-index: 20;
  max-width: 220px;
  min-height: 38px;
  padding: 0px;
  background: rgba(0,0,0,0.5);
  font: 16px Ubuntu;
  box-sizing: border-box;
  border-radius: 9px;
  border: 2px solid rgba(255,0,0,0.5);
  overflow: hidden;
  pointer-events: none;
  transform-origin: 0px 0px;
  margin-left: -240px;
  visibility: hidden;
  transition: 0.4s margin-left ease-in, 0.4s visibility ease-in, 0.2s width ease, 0.2s min-width ease, 0.2s max-width ease, 0.2s left ease;
}
.slide-box.visible {
  margin-left: 0px;
  visibility: visible;
  transition: 0.4s margin-left ease-out, 0.4s visibility ease-out, 0.2s width ease, 0.2s min-width ease, 0.2s max-width ease, 0.2s left ease;
}
.slide-box.collapsed {
  max-width: 38px;
  height: 38px;
  border-radius: 0px 9px 9px 0px;
  border-left: none;
  left: 0px;
  transition: 0.4s margin-left ease-out, 0.4s visibility ease-out, 0.2s width ease-out, 0.2s min-width ease-out, 0.2s max-width ease-out;
}
.slide-box .text-content p {
  margin: 0px;
  padding: 0px;
  color: #fff;
  white-space: pre;
}
.slide-box .box-controls {
  pointer-events: auto;
}
.slide-box .collapse-btn {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 4px;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  background-color: transparent;
}
.slide-box .collapse-btn:hover {
  background-color: rgba(80,80,80,0.3);
}
.slide-box .collapse-btn:active:hover {
  background-color: rgba(80,80,80,0.6);
}
.slide-box.collapsed .collapse-btn {
  width: 36px;
  padding-left: 6px;
  border-radius: 0px 6px 6px 0px;
  border-left: none;
}
@media all and (max-width: 909px) {
  .slide-box {
    top: 80px;
  }
}
.slide-box.touch-device {
  top: 80px;
}
.slide-box.touch-device {
  background: rgba(0,0,0,0.3);
}
.slide-box.touch-device .text-content p,
.slide-box.touch-device .collapse-btn,
.slide-box.touch-device #infection-text {
  text-shadow: 1px 1px rgba(0,0,0,0.25);
}
.slide-box.touch-device .collapse-btn:hover {
  background-color: transparent;
}
#infection_remain_zombie {
  position: absolute;
  width: 200px;
  left: 220px;
  transform-origin: -210px 0px;
  text-align: center;
  color: white;
  padding: 4px;
  border-color: #989bdd;
  margin-left: -450px;
}
#infection_remain_zombie.visible {
  margin-left: 0px;
}
.zombieRemain {
  width: calc(50% - 4px);
  height: 24px;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
#zombieRemain1, #zombieRemain2 {
  outline: none;
}
#infoBox {
  min-width: 140px;
  padding: 6px 12px 8px;
}
#infoBox.collapsed {
  min-width: 38px;
}
#infoContent p {
  padding: 1px 0px;
}
#infoContent p:first-child {
  padding-right: 34px;
}
.partyKickBtn {
    color: #ff2525;
    /*background: #ffffaabf;*/
    background: unset;
    width: 20px;
    height: 16px;
    padding: 0;
    line-height: 1px;
    border: 0px solid #020107;
    /*border-radius: 10px;*/
    float: right;
    margin-top: 1px;
    pointer-events: auto;
    cursor: pointer;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
#partyBox {
  width: 200px;
  font: 16px Ubuntu;
  border-color: rgba(255,170,0,0.5);
  padding: 6px 3px 10px;
}
#partyBox.collapsed {
  width: 38px;
}
#partyContent p {
  padding: 1px 0px;
}
#partyContent p:first-child {
  margin-right: 34px;
  text-align: center;
  color: #ffa;
}
#partyCollapse {
  color: #ffa;
}
#partyButtons {
  position: relative;
  width: 196px;
  height: 32px;
  margin: 5px -3px -10px;
}
#partyAccept, #partyDecline {
  position: absolute;
  bottom: 5px;
  width: 90px;
  height: 24px;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  outline: none;
  margin: 0px;
}
#partyAccept {
  left: 5px;
}
#partyDecline {
  right: 5px;
}
#gamemodeBox {
  min-width: 200px;
  font: 14px Ubuntu;
  border-color: rgba(119,119,255,0.5);
  padding: 7px 13px 7px 0px;
}
#gamemodeBox.collapsed {
  min-width: 38px;
}
#gamemodeContent p {
  padding: 2px 0px;
  text-align: right;
  clear: both;
  color: #ffa;
}
#gamemodeContent p .col-left {
  display: inline-block;
  min-width: 100px;
  padding-left: 13px;
  text-align: left;
  float: left;
  color: #fff;
}
#gamemodeCollapse {
  color: #fa4;
}
#game-tips {
  background-color: rgba(39, 39, 39, 0.6)!important;
  margin-top: 6px; 
  border-radius: 5px 5px 2px 2px; 
  padding: 10px; 
  text-align: center; 
}
#brGameContainer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 30;
  pointer-events: none;
  transform-origin: center top;
}
#brGame {
  position: absolute;
  width: 200px;
  height: 44px;
  bottom: 204px;
  right: 0px;
}
.br-game-element {
  position: absolute;
  height: 20px;
  bottom: 0px;
  border-radius: 8px;
  background-color: rgba(0,0,0,0.7);
}
#brPlayers {
  width: 56px;
  left: 2px;
}
#brTimer {
  width: 72px;
  left: 64px;
}
#brKills {
  width: 56px;
  left: 142px;
}
#brExtra {
  width: 196px;
  left: 2px;
  bottom: 24px;
}
.br-game-img {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 0px;
  background: center no-repeat;
  background-size: 16px 16px;
}
#brPlayersImg {
  background-image: url('../img/game_players.png');
}
#brKillsImg {
  background-image: url('../img/game_kills.png');
}
.br-game-value {
  position: absolute;
  width: calc(100% - 22px);
  left: 22px;
  text-align: center;
  white-space: pre;
  color: #fff;
}
.br-game-value.red,
.br-game-value .red {
  color: #f44;
}
.br-game-value.orange,
.br-game-value .orange {
  color: #fa4;
}
#brGameContainer.no-minimap #brGame {
  bottom: 0px;
}
#brGameContainer.touch-device {
  top: 10px;
}
#brGameContainer.touch-device #brGame {
  top: 180px;
}
#brGameContainer.touch-device.no-leaderboard #brGame {
  top: 0px;
}
#brGameContainer.touch-device .br-game-element {
  top: 0px;
  background-color: rgba(0,0,0,0.5);
}
#brGameContainer.touch-device #brExtra {
  top: 24px;
}
#infGameContainer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 30;
  pointer-events: none;
  transform-origin: center top;
}
#infBar {
  position: absolute;
  width: 200px;
  height: 14px;
  bottom: 206px;
  right: 0px;
  box-sizing: border-box;
  /*border: 1px solid #222;*/
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0,0,0,0.9);
}
#infBarProgress {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  transition: width 0.15s linear;
}
#infBarColor {
  width: 200px;
  height: 16px;
  position: absolute;
  top: -1px;
  left: 0px;
  background: #fa0;
  background: linear-gradient(to right, #f00 0%, #fa0 50%, #fa0 100%);
}
#infGameContainer.no-minimap #infBar {
  bottom: 0px;
}
#infGameContainer.touch-device {
  top: 10px;
}
#infGameContainer.touch-device #infBar {
  top: 166px;
  background: rgba(0,0,0,0.5);
}
#infGameContainer.touch-device.no-leaderboard #infBar {
  top: 0px;
}
.uiElement {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 28px;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    z-index: 95;
}
.infoClose {
  opacity: 0.75;
}
.infoCloseX {
  color: white; border: 2px solid black; 
  margin-left: 45px; 
  background-color: red; 
  width: 119px; 
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#infoHolderParty {
  display:none;
  max-width: 300px;
  position: absolute;
  top: 40%;
  left: 25%;
}
#infoHolderInventory {
    display:none;
    background-color: rgb(0 0 0 / 50%);
    width: 60%;
    max-width: 650px;
    position: absolute;
    margin: 0px auto;
    border: 1px solid black;
    left: 0;
    right: 0;
    bottom: 100px;
}
#infoHolderBots {
  display:none;
  background-color: rgb(0 0 0 / 50%);
  width: 60%;max-width: 650px;
  position: absolute;
  margin: 0px auto;
  border: 1px solid black;
  left: 0;
  right: 0;
  top: 75px;
}
#infoHolderFriends {
  display: none;
  background-color: rgb(0 0 0 / 50%);
  width: 30%;
  max-width: 400px;
  position: absolute;
  margin: 0px auto;
  border: 1px solid black;
  right: 220px;
  top: 75px;
}
#infoHolderRegister {
  display:none;
  max-width: 350px;
  position: absolute;
  top: 15px;
  left: calc(7% + 50px);
  }
#infoHolderFriendlist {
  display:none;
  max-width: 250px;
  position: absolute;
  bottom: 60px;
  right: 178px;
}
#infoHolderFriendlist2 {
  display:none;
  max-width: 210px;
  position: absolute;
  bottom: 270px;
  right: 5px;
}
.infoName {
    font-size: 50px;
}
.infoDesc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}
.infoReq {
    font-size: 25px;
}
#inventory2 {
  display: -webkit-flex;
  display: flex;
  position: absolute;
  z-index: 35;
  left: calc(50% + 0.1px);
  bottom: 45px;
  transform: translateX(-50%);
  margin: 0px auto;
}
#inventory1 {
  display: -webkit-flex; /* Safari */
  display: flex;
  position: absolute;
  z-index: 35;
  left: calc(50% + 0.1px);  /* add 0.1px is needed to force inventory images to use subpixel anti-aliasing on chrome */
  bottom: 8px;
  transform: translateX(-50%);
  margin: 0 auto;
}
@media all and (max-width: 909px) {
  #inventory2 {
    transform-origin: center bottom;
    transform: translateX(-50%) translateY(10px) scale(0.7);
  }
  #inventory1 {
    transform-origin: center bottom;
    transform: translateX(-50%) scale(0.7);
  }
}
#inventory2.touch-device {
  transform-origin: center bottom;
  transform: translateX(-50%) translateY(10px) scale(0.7);
}
#inventory1.touch-device {
  transform-origin: center bottom;
  transform: translateX(-50%) scale(0.7);
}
.inventory-box {
  position: relative;
  transition: 0.05s width ease, 0.05s height ease, 0.05s background-size ease, 0.05s opacity ease, 0.05s margin ease;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: rgba(76,86,239,0.6) center no-repeat;
  background-size: 30px 30px;
  box-sizing: border-box;
  border: 2px solid rgba(26,32,77,0.7);
  border-radius: 8px;
  opacity: 0.8;
  margin: 0px;
  z-index: 35;
}
.inventory-box.highlight {
  border: 3px solid #4f4;
  border-radius: 5px;
}
.inventory-box.highlight::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(68,255,68,0.2);
}
.inventory-box > p {
  transition: 0.05s padding ease, 0.05s font-size ease;
  text-align: right;
  padding: 12px 0px 0px;
  margin: 0px;
  color: #ffa;
  font-family: Ubuntu, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-shadow: -1px -1px #333, 1px -1px #333, -1px 1px #333, 1px 1px #333;
}
.inventory-box:hover,
.inventory-box.hover {
  width: 40px;
  height: 40px;
  background-size: 34px 34px;
  opacity: 1;
  margin: -2px;
  z-index: 40;
}
.inventory-box:hover > p,
.inventory-box.hover > p {
  padding: 14px 0px 0px;
  font-size: 20px;
}
.inventory-box:active,
.inventory-box.active {
  opacity: 0.4;
}
.inventory-box:active:hover,
.inventory-box.active.hover {
  opacity: 0.6;
}
.inventory-box.large-box {
  width: 50px;
  background-size: 42px 12px;
}
.inventory-box.large-box:hover,
.inventory-box.large-box.hover {
  width: 54px;
  background-size: 46px 14px;
}
.inventory-box.large-box.vertical {
  background-size: 12px 42px;
}
.inventory-box.large-box.vertical:hover,
.inventory-box.large-box.vertical.hover {
  background-size: 14px 46px;
}
#invRecombine {
  background-image: url('../img/inv_recombine2.png');
}
#invSpeed {
  background-image: url('../img/inv_speed2.png');
}
#invGrowth {
  background-image: url('../img/inv_growth2.png');
}
#invSpawnVirus {
  background-image: url('../img/inv_virus4.png');
}
#invSpawnMothercell {
  background-image: url('../img/inv_mothercell4.png');
}
#invSpawnPortal {
  background-image: url('../img/inv_portal2.png');
}
#invSpawnGoldOre {
  background-image: url('../img/inv_goldore2.png');
}
#invWall {
  background-image: url('../img/inv_wall2.png');
}
#invWall::before {  /* load vertical wall image at the same time as horizontal wall image (to avoid image download delays on toggle orientation in inventory) */
  content: '';
  background-image: url('../img/inv_wall_vertical2.png');
  visibility: hidden;
}
#invWall.vertical {
  background-image: url('../img/inv_wall_vertical2.png');
}
#invFreeze {
  background-image: url('../img/inv_freeze2.png');
}
#invAntiFreeze {
  background-image: url('../img/inv_anti_freeze2.png');
}
#invAntiRecombine {
  background-image: url('../img/inv_anti_recombine2.png');
}
#invFrozenVirus {
  background-image: url('../img/inv_frozen_virus2.png');
}
#inv360Shot {
  background-image: url('../img/inv_360shot2.png');
  background-size: cover;
}
#invCloak {
  background-image: url('../img/inv_cloak2.png');
  background-size: cover;
}
#invShield {
  background-image: url('../img/inv_shield4.png');
}
.activatedInv {
  border: 3px #FEFF00 solid;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 30px 0px #f5c807;
  -moz-box-shadow: 0px 0px 30px 0px #f5c807;
  box-shadow: 0px 0px 30px 0px #f5c807;
}
.touch-btn {
  position: absolute;
  width: 128px;
  height: 128px;
  right: 0px;
  bottom: 25px;
  z-index: 50;
  border-radius: 50%;
  overflow: hidden;
}
#touchSplitBtn {
  transform: translateX(-50%);
}
#touchEjectBtn {
  transform: translateY(-85%);
}
#touchEjectLockBtn {
  transform-origin: right bottom;
  transform: translate(-100%,-100%) scale(0.5);
}
#touchFreezeBtn {
  transform-origin: right bottom;
  transform: translate(0%,-35%) scale(0.5)
}
.touch-btn.left-side {
  left: 0px;
}
#touchSplitBtn.left-side {
  transform: translateX(50%);
}
#touchEjectBtn.left-side {
  transform: translateY(-85%);
}
#touchEjectLockBtn.left-side {
  transform-origin: left bottom;
  transform: translate(100%,-100%) scale(0.5);
}
#touchFreezeBtn.left-side {
  transform-origin: left bottom;
  transform: translate(0%,-35%) scale(0.5)
}
.touch-btn-img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
  opacity: 0.5;
  transform-origin: center center;
  transition: all ease 0.05s;
}
.touch-btn.active .touch-btn-img {
  background: rgba(153,153,153,0.2);
  opacity: 0.7;
  transform-origin: center center;
  transform: scale(1.01);
  transition: all ease 0s;
}
.touch-btn.active #touchEjectLockImg,
.touch-btn.active #touchFreezeImg {
  background: rgba(153,153,153,0.3);
  opacity: 0.8;
}
#touchPad, #touchPadThumb {
  display: none;
  position: absolute;
  z-index: 60;
  pointer-events: none;
  background: #777777;
  border-radius: 50%;
  overflow: hidden;
}
#touchPad {
  width: 100px;
  height: 100px;
  opacity: 0.3;
}
#touchPadThumb {
  width: 50px;
  height: 50px;
  opacity: 0.5;
}
.contextmenu {
  position: absolute;
  min-width: 100px;
  max-width: 300px;
  white-space: nowrap;
  background: #333333e0;
  border: 1px solid #3c3a3a;
  box-shadow: 0px 0px 1px 0px #444;
  z-index: 165;
  border-radius: 5px;
}
.contextmenu > ul {
  margin: 2px 0px;
  padding: 0px;
  list-style-type: none;
  overflow: hidden;
  pointer-events: none;
}
.contextmenu-item {
  margin: 0px;
  padding: 5px;
  pointer-events: auto;
}
.contextmenu-item.enabled.hover {
  background: rgba(255,255,255,0.2);
}
.contextmenu-item .context-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 2px 0px 0px 4px;
  opacity: 0.2;
  pointer-events: none;
  background-image: url(../img/contexticons4.png);
  background-repeat: no-repeat;
  background-position: 32px 0px;
  transform-origin: left top;
  transform: scale(0.5);
}
.contextmenu-item.enabled .context-icon {
  opacity: 1;
}
.contextmenu-item > p {
  margin: 0px 5px 0px 32px;
  /*color: #bfbfbf;*/
  color: #d4d4d4;
  font-size: 14px;
  opacity: 0.2;
  white-space: pre;
  pointer-events: none;
}
.contextmenu-item.enabled > p {
  opacity: 1;
  text-shadow: 0px 0px 3px #000;
}
.contextmenu-item.context-has-submenu .context-float-right {
  float: right;
  margin: 3px -5px 3px 30px;
}
.contextmenu hr {
  margin: 5px 0px;
  border-color: #666;
}
@media all and (max-width: 909px) {
  .contextmenu .contextmenu-item {
    padding: 3px 5px;
  }
  .contextmenu .contextmenu-item .context-icon {
    margin-top: 1px;
  }
  .contextmenu .contextmenu-item > p {
    font-size: 12px;
  }
  .contextmenu hr {
    margin: 3px 0px;
  }
}
.contextmenu.touch-device {
  max-height: 100%;
  overflow: auto;
}
.contextmenu.touch-device .contextmenu-item {
  padding: 3px 5px;
}
.contextmenu.touch-device .contextmenu-item .context-icon {
  margin-top: 1px;
}
.contextmenu.touch-device .contextmenu-item > p {
  font-size: 12px;
}
.contextmenu.touch-device hr {
  margin: 3px 0px;
}
.contextmenu.compact > ul {
  margin: 1px 0px;
}
.contextmenu.compact .contextmenu-item {
  padding: 1px 5px;
}
.contextmenu.compact .contextmenu-item .context-icon {
  margin-top: 1px;
}
.contextmenu.compact .contextmenu-item > p {
  font-size: 12px;
}
.contextmenu.compact hr {
  margin: 1px 0px;
}
#contextPlayerCell {
  position: absolute;
  top: -9px;
  left: -8px;
  height: 50px;
  width: 50px;
  pointer-events: none;
}
#contextPlayerSkin {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 20px;
  height: 20px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  background-color: #333;
  background-image: none;
  background-repeat: no-repeat;
  background-position: -1px -1px;
  background-size: 22px 22px;
  opacity: 1;
}
.context-player-wear {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  width: 30px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.context-player-wear.center {
  top: 10px;
  left: 10px;
}
.context-player-wear.top {
  top: 0px;
  left: 10px;
}
.context-player-wear.bottom {
  top: 20px;
  left: 10px;
}
.context-player-wear.left {
  top: 10px;
  left: 0px;
}
.context-player-wear.right {
  top: 10px;
  left: 20px;
}
.context-player-wear.max {
  top: 0px;
  left: 0px;
  height: 50px;
  width: 50px;
}
#contextPlayerName {
  display: inline-block;
  color: #808080;
  font-size: 13px;
  text-shadow: 0px 0px 3px #000;
  opacity: 1;
}
#contextPlayerName.gold {
  color: #F4CF17;
  /*background-image: url(../img/particles.gif);*/
}
#contextPlayerName.black {
  color: #000;
  text-shadow: 0px 0px 5px #999;
}
#contextPartyInvite .context-icon {
  background-position: 0px 0px;
}
#contextFriendAdd .context-icon {
  background-position: -32px 0px;
}
#contextUserProfile .context-icon {
  background-position: -64px 0px;
}
#contextPrivateMessage .context-icon {
  background-position: -96px 0px;
}
#contextMute .context-icon {
  background-position: -128px 0px;
}
#contextSpectate .context-icon {
  background-position: -160px 0px;
}
#contextModerate .context-icon{
  background-position:-384px 0px;
}
#contextPartyMessage .context-icon {
  background-position: -192px 0px;
}
#contextPartyLeave .context-icon {
  background-position: -224px 0px;
}
#contextUnmute .context-icon {
  background-position: -256px 0px;
}
#contextSettings .context-icon {
  background-position: -288px 0px;
}
#contextEmotes .context-icon {
  background-position: 0px 0px;
}
#contextScreenshot .context-icon {
  background-position: -320px 0px;
}
.context-icon.context-icon-checked {
  background-position: -352px 0px;
}
label {
  font-weight: normal;
}
#settingPage1 input:checked + span {
  color: #df901c;
}
.touch-setting {
  display: none;
}
#chtScrollbar {
  display: none;
  position: absolute;
  bottom: 72px;
  left: 10px;
  width: 12px;
  height: 24px;
  z-index: 115;
  overflow: hidden;
  background: rgba(0,0,0,0.1);
  box-sizing: border-box;
  border: 1px solid #666;
  border-radius: 3px;
}
#chtScrollbarThumb {
  position: absolute;
  width: 10px;
  height: 22px;
  bottom: 0px;
  margin: 0px;
  background-color: #fc7200;
  opacity: 0.75;
  border-radius: 1px;
}
#chtScrollbarThumb:hover {
  opacity: 0.85;
}
#chtScrollbarThumb:active {
  opacity: 1;
}
#chtContent.scrollbar > #chtScrollbar {
  display: block;
}
#chtContent.scrollbar > #chtCanvas {
  left: 25px;
}
#chat.dimmed #chtScrollbar,
#chat.dimmed #chtCanvas {
  opacity: 0.4;
}
#chat.dimmed #chtDim {
  background: rgba(85,85,85,0.5);
}
#settingsBtn {
  border-color: rgb(227, 121, 85);
  transition: 300ms;
  background-color: #e37955;
  color: black;
  height: 30px;
  width: 34px;
  bottom: 10px;
  left: 10px;
  font-size: 14px;
  transition: 0ms;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}
@media all and (max-width: 1288px) {
  #chtbox {
    width: 300px;
  }
  #emojiBtn {
    left: 348px;
  }
  .commands-btn{
    left: 379px;
  }
  #emojiDropdown, #commandsDropdown {
    left: 348px;
  }
}
@media all and (max-width: 1088px) {
  #chtbox {
    width: 200px;
  }
  #emojiBtn {
    left: 248px;
  }
  .commands-btn {
    left: 278px;
  }
  #emojiDropdown, #commandsDropdown {
    left: 248px;
  }
}
@media all and (max-width: 909px) {
  #chtScrollbar {
    bottom: 58px;
  }
  #chtCanvas {
    bottom: 58px;
  }
  #chtbox {
    padding: 0px;
    width: 115px;
    height: 26px;
    font-size: 11px;
    left: 42px;
  }
  #emojiBtn {
    left: 159px;
    height: 26px;
    width: 26px;
  }
  .commands-btn {
    left: 185px;
    height: 26px;
    width: 26px;
  }
  #emojiBtn > img, .commands-btn > img  {
    top: 3px;
    left: 3px;
  }
  #emojiBtn:active:hover > img, .commands-btn:active:hover > img{
    top: 4px;
    left: 4px;
  }
  #emojiDropdown, #commandsDropdown {
    left: 159px;
    bottom: 36px;
  }
  @media all and (max-width: 420px) {
    #emojiDropdown, #commandsDropdown {
      left: calc(100% - (420px - 159px));
    }
  }
  #chtDim {
    font-size: 10px;
    height: 14px;
    width: 14px;
    padding: 1px 2px;
    bottom: 40px;
  }
  #chtTabs {
    left: 26px;
    font-size: 10px;
    height: 14px;
    bottom: 40px;
  }
  .chat-tab {
    height: 14px;
    margin: 0px 2px 0px 0px;
  }
  #settingsBtn {
    height: 26px;
    width: 30px;
    font-size: 11px;
  }
}
#chat.touch-device #chtScrollbar {
  bottom: 58px;
}
#chat.touch-device #chtCanvas {
  bottom: 58px;
}
#chat.touch-device #chtbox {
  padding: 0px;
  width: 115px;
  height: 26px;
  font-size: 11px;
  left: 42px;
  border-radius: 4px;
}
#chat.touch-device #emojiBtn {
  left: 156px;
  height: 26px;
  width: 26px;
}
#chat.touch-device .commands-btn {
  left: 181px;
  height: 26px;
  width: 26px;
}
#chat.touch-device #emojiBtn > img {
  top: 3px;
  left: 3px;
}
#chat.touch-device #emojiDropdown,#chat.touch-device #commandsDropdown {
  left: 159px;
  bottom: 36px;
}
@media all and (max-width: 420px) {
  #chat.touch-device #emojiDropdown, #chat.touch-device #commandsDropdown {
    left: calc(100% - (420px - 159px));
  }
}
#chat.touch-device #chtDim {
  font-size: 10px;
  height: 14px;
  width: 14px;
  padding: 1px 2px;
  bottom: 40px;
}
#chat.touch-device #chtTabs {
  left: 26px;
  font-size: 10px;
  height: 14px;
  bottom: 40px;
}
#chat.touch-device .chat-tab {
  height: 14px;
  margin: 0px 2px 0px 0px;
}
#settingsBtn.touch-device {
  height: 26px;
  width: 30px;
  font-size: 11px;
}
.shopitem-highlight {
  -webkit-animation: shopitem_highlight 1.2s linear;
  animation: shopitem_highlight 1.2s linear;
}
@-webkit-keyframes shopitem_highlight {
  0% {box-shadow: 0 0 16px 8px #ffe; border-color: #ffe;}
  33% {box-shadow: 0 0 16px 8px #ffe; border-color: #ffe;}
  66% {box-shadow: 0 0 6px 3px #51cbee; border-color: #51cbee;}
  100% {box-shadow: none; border-color: none;}
}
@keyframes shopitem_highlight {
  0% {box-shadow: 0 0 16px 8px #ffe; border-color: #ffe;}
  33% {box-shadow: 0 0 16px 8px #ffe; border-color: #ffe;}
  66% {box-shadow: 0 0 6px 3px #51cbee; border-color: #51cbee;}
  100% {box-shadow: none; border-color: none;}
}

.buy-pay-btns {
  margin:1px; 
  background-color:#999;
  color: black;
  border-color: #ccc;
}
.shop-leftbox {
  margin: 0 auto;
  padding: 5px;
  background: #373737;
  margin: 10px 0px;
  box-shadow: 0px 0px 0.02em #000000;
}
.btn-leftbox:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.close-top-r {
  position: absolute; 
  top: 2px; 
  right: -1px;
}
.watch-advert {
  background: linear-gradient(to bottom, #1b4563 0%,#13464b 100%);
  padding: 10px 5px;
  box-shadow: 0px 0px 0.02em #000000;
  margin: 20px 0px 10px;
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #fff;
}
.watch-ad-btn {
  width: 100%;
  max-width: 200px;
  border-radius: 6px;
  color: #fff;
  background: -moz-linear-gradient(top, #2cdd1c 0%, #37db34 44%, #29f25e 100%);
  background: -webkit-linear-gradient(top, #2cdd1c 0%, #37db34 44%, #29f25e 100%);
  background: linear-gradient(to bottom, #2cdd1c 0%, #37db34 44%, #29f25e 100%);
  font-size: 2em;
  border-style: solid;
  border-color: #000000;
  height: 60px;
}
.sweet-alert.swal-title-red h2 {color: #DD4444;}
.sweet-alert.swal-title-green h2 {color: #44DD44;}
.sweet-alert.swal-title-orange h2 {color: #FFAA44;}
.sweet-alert.swal-title-yellow h2 {color: #DDDD44;}
.sweet-alert.swal-title-white h2 {color: white;}
.sweet-alert.swal-title-gold h2 {color: gold;}
.setting-tabs {
  overflow: hidden;
  margin: 0px 5px 10px;
}
.setting-tablink {
  background-color: #2e3138;
  color: #777;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  width: 33%;
  height: 30px;
  border-radius: 15px;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.setting-tablink:hover {
  background-color: #32363d;
  color: #999;
}
.setting-tablink.active {
  background-color: #df8500;
  color: #fff;
}
.setting-tabcontent {
  display: none;
}
.hotkey-row {
  font-size: 14px;
  margin: 0px 0px 10px;
  white-space: nowrap;
}
.hotkey-col {
  width: 50%;
  padding: 0px 5px;
  margin: 0px;
  float: left;
}
.hotkey-paragraph {
  font-size: 16px;
  color: #ddd;
  padding: 0px;
  margin: 0px -5px;
}
.hotkey-input {
  background-color: #df901c;
  color: #fff;
  cursor: pointer;
  text-align: center;
  min-width: 40px;
  max-width: 60px;
  height: 18px;
  line-height: 18px;
  vertical-align: middle;
  border-radius: 9px;
  right: 5px;
  position: absolute;
  display: inline-block;
  padding: 0px 5px;
  overflow: hidden;
  opacity: 1;
}
.hotkey-input:hover {
  background-color: #f1a02d;
}
.hotkey-input.selected {
  background-color: #ff4;
  color: #444;
}
.hotkey-input.invalid {
  background-color: #f00;
  color: #fff;
}
.hotkey-input.updated {
  opacity: 0.7;
}
.hotkey-input.hotkey-unchangeable {
  background-color: #df901c;
}
.hotkey-input.hotkey-unchangeable:hover {
  cursor: default;
}
.reset-pass-inputfield {
  width: 50%;
  min-width: 130px;
  margin: 5px auto;
  display: block;
  height: 38px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #fff;
  background-color: #222328;
  background-image: none;
  border: 0px solid #222328;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.reset-pass-inputfield::-moz-placeholder {
  color: #777;
  opacity: 1;
}
.reset-pass-inputfield:-ms-input-placeholder {
  color: #777;
}
.reset-pass-inputfield::-webkit-input-placeholder {
  color: #777;
}
.reset-pass-button {
  display: inline-block;
  height: 38px;
  width: 50%;
  min-width: 130px;
  letter-spacing: 0.05em;
  font-size: 19px;
  line-height: 1.42857143;
  text-transform: uppercase;
  background-image: none;
  border: 0px solid #222328;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.hiscores-button {
  padding: 5px;
  margin: 0px;
}
.hiscores-button p {
  margin: 0px auto;
  text-align: center;
  background-color: #565656;
  border: 2px solid #a4b7c0;
  border-radius: 4px;
  color: #ddd;
  height: 26px;
  width: 100%;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.hiscores-button:hover p {
  color: #fff;
}
.footer.tos {
  text-align:center; 
  margin:15px 0px 0px;
  width:100%;
  display:flex;
  font-size:12px;
  padding:0px;
}
.social-img {
  width: 38px;
  margin: 0px 1px;
  border-radius: 5px;
  opacity: 0.9;
}
.forum-img {
  width: 48px;
  border-radius: 0px;
}
.social-img:hover {
  opacity: 1;
}
.innerBoxDashboard2 {
  margin-top: 2px;
  width: 100%;
  max-width: 600px;
  height: 100px;
  opacity: 0.95;
  float: left;
  padding: 10px;
  margin-left: -20px;
  pointer-events: none;
  position: relative;
  z-index: 100;
}
@media all and (max-width: 909px) {
  .innerBoxDashboard2 {
    transform-origin: left top;
    transform: scale(0.7);
  }
}
.innerBoxDashboard2.touch-device {
  transform-origin: left top;
  transform: scale(0.7);
}
#fpsBox {
  position: absolute;
  left: 203px;
  top: 6px;
  color: #ddd;
  white-space: nowrap;
  font-size: 12px;
  background-color: rgba(0,0,0,0.65);
  border-radius: 2px;
  z-index: 5;
  pointer-events: none;
}
@media all and (max-width: 909px) {
  #fpsBox {
    left: 142px;
    top: 5px;
    transform: scale(0.7);
    transform-origin: left top;
  }
}
#fpsBox.touch-device {
  left: 142px;
  top: 5px;
  background-color: rgba(0,0,0,0.5);
  transform: scale(0.7);
  transform-origin: left top;
}
#respawnTouch {
  position: absolute;
  left: 150px;
  top: 7px;
  color: #ddd;
  white-space: nowrap;
  font-size: 12px;
  background-color: rgba(55,55,55,0.5);
  border-radius: 2px;
  z-index: 55;
}
#respawnTouch:active:hover {
  background-color: rgba(55,55,55,0.7);
}
#respawnTouch.fpsShow {
  left: 206px;
}
@media (max-width: 549px) {
  #fpsBox,
  #fpsBox.touch-device {
    left: 26%;
  }
  #respawnTouch {
    left: 27%;
  }
  #respawnTouch.fpsShow {
    left: calc(26% + 63px);
  }
  #emojiDropdown .emo-svg {
    width: 18px !important;
    height: 18px !important;
  }
  #commandsDropdown {
    font-size: 10px !important;
  }
}
#fpsBox table {
  border-collapse: separate;
  padding: 2px 5px;
}
#fpsBox td {
  vertical-align: baseline;
}
#adWrapper728x90 {
  position: relative;
  width: 728px;
  height: 90px;
  top: 10px;
  left: 50%;
  /*margin-bottom: 10px;*/
  transform-origin: center top;
  transform: translate(-50%,0%);
}
#adWrapper728x90_2 {
  position: absolute;
  width: 728px;
  height: 90px;
  bottom: 0px;
  left: 50%;
  transform-origin: center bottom;
  transform: translate(-50%,0%);
}
#adWrapper160x600 {
  position: absolute;
  width: 160px;
  height: 600px;
  top: 70px;
  left: calc(100% + 10px);
  transform-origin: left 200px;
}
#adWrapper300x250 {
  position: relative;
  max-width: 375px;
  height: 250px;
  top: 0px;
  left: 0px;
  margin: 30px auto 0px;
  text-align: center;
  overflow: hidden;
}

.how-to-play {
  width: 15%;
    height: 95px;
    position: absolute;
    position: absolute;
    top: 74px;
    right: 27px;
    transition: all .4s ease 0s;
    opacity: 0.9;
    background-color: #414d6399;
    color: #f6922d;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #e17232;
    border: 0px solid #222328;
    border-radius: 4px;
    webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

#nick {
  background-color: #282934;
}


.playgame
{
  display: inline-block;
  height: 38px;
  /*
  padding: 10px 20px;
  padding-bottom:20px;
  */
  width: 48%; 
  float: left;
  letter-spacing:0.13em;
  margin-top:10px;
  font-size: 19px;
  line-height: 1.42857143;
  /*color: #75FF92;*/
  color: #FFEB3B;
  text-transform: uppercase;
  /*background-color: #222328;*/
  /*background-color: #5592e3;*/
  background-color: #e25e13;
  background-image: none;
  border: 0px solid #222328;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.playgame2 {
    display: inline-block;
    height: 38px;
    width: 50%;
    letter-spacing: 0.13em;
    font-size: 19px;
    line-height: 1.42857143;
    color: #FFEB3B;
    text-transform: uppercase;
    background-color: #e25e13;
    background-image: none;
    border: 0px solid #222328;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.spec2 {
      display: inline-block;
    height: 38px;
    width: 48%;
    background-color: #e17232;
    border: 0px solid #222328;
    border-radius: 4px;
    webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
 .spec
}
{
  display: inline-block;
  height: 38px;
  width: 48%; 
  float:right;
  padding: 10px 20px;
  padding-bottom:20px;
  letter-spacing:0.13em;
  margin-top:10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #f7ff6d;
  text-transform: uppercase;
  /*background-color: #e37955;*/
  background-color: #e17232;
  background-image: none;
  border: 0px solid #222328;
  border-radius: 4px;
   webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#aCustomBack {
  color: #dd7;
}
#aCustomBack:hover {
  color: #ff9;
}
#customBackModal input[type="checkbox"] + span {
  color: #888;
}
#customBackModal input[type="checkbox"]:checked + span {
  color: #df901c;
}
#customBackContainer {
  display: inline-block;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 256px;
  max-width: 256px;
  word-wrap: break-word;
  overflow: hidden;
  box-sizing: content-box;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0px 0px 2px #000;
  background-color: transparent;
}
#customBackImgHolder {
  display: inline-block;
  position: relative;
  width: 256px;
  height: 256px;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  border: none;
  opacity: 0.5;
  background-color: transparent;
  background-image: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#customBackBtn {
  position: absolute;
  width: 256px;
  height: 256px;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  overflow: hidden;
  color: #f0ad4e;
  text-shadow: 1px 1px #000;
  background-color: transparent;
}
#customBackContainer:hover {
  background-color: rgba(0,0,0,0.1);
}
#customBackBtn:focus {
  outline: none;
}
#customBackBtn:hover {
  background-color: rgba(0,0,0,0.3);
}
#customBackBtn > span {
  display: none;
}
#customBackBtn:hover > span,
#customBackContainer.nocustomback #customBackBtn > span {
  display: inline;
}
#customBackContainer.drag-over #customBackBtn {
  background-color: rgba(255,255,255,0.3);
}
#customBackContainer.is-uploading #customBackBtn {
  display: none;
}
#customBackRemove {
  display: inline-block;
  position: absolute;
  bottom: -1px;
  right: -29px;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  color: #eee;
  background-color: rgba(255,255,255,0.1);
  cursor: pointer;
  text-align: center;
  padding: 6px;
}
#customBackRemove:hover {
  background-color: rgba(255,255,255,0.15);
}
#customBackRemove:active:hover {
  color: #fff;
  background-color: rgba(255,255,255,0.2);
}
#fullscreenBtn {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: rgba(119,119,119,0.5);
  text-align: center;
  margin: 0px;
  padding: 0px;
  box-sizing: content-box;
  border-radius: 2px;
  opacity: 0.5;
  cursor: pointer;
  z-index: 100;
}
#fullscreenBtn:active:hover {
  opacity: 0.7;
}
#fullscreenImg {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 64px;
  height: 64px;
  pointer-events: none;
  background-image: url(../img/fullscreen.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  transform-origin: left top;
  transform: scale(0.25);
}
#fullscreenBtn.inFullscreen #fullscreenImg {
  background-position: -64px 0px;
}
.zoom-btn {
  position: absolute;
  top: 47px;
  left: 7px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 45;
}
#zoomBtnMinus {
  left: 40px;
}
#zoomBtnPlus {
  left: 66px;
}
.zoom-btn-ui {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #777;
  text-align: center;
  margin: 0px;
  padding: 3px 0px;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #666;
  opacity: 0.5;
}
.zoom-btn:active:hover .zoom-btn-ui,
.zoom-btn.active .zoom-btn-ui {
  opacity: 0.7;
}
#btnToggleQ {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0%);
  padding: 5px 10px;
  background-color: rgba(119,119,119,0.5);
  color: #eee;
  font-size: 12px;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0.5;
  z-index: 32;
  white-space: nowrap;
}
#btnToggleQ:active:hover,
#btnToggleQ.active {
  opacity: 0.7;
}