:root {
  --side-pad: 12px;
}
* {
  font-family: 'Roboto Condensed', arial, sans-serif;
  font-size: 16px;
}
html,
body {
  background: #80af49;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  html,
  body {
    font-size: 14px;
    position: fixed;
  }
}
html,
body,
canvas {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
input {
  -webkit-user-select: initial;
     -moz-user-select: initial;
      -ms-user-select: initial;
          user-select: initial;
}
a:link {
  color: lawngreen;
}
a:visited {
  color: lawngreen;
}
a:hover {
  color: #51a500;
}
a:active {
  color: #51a500;
}
.user-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: inherit;
}
.ui-spinner {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.25);
  /* Light grey */
  border-radius: 50%;
  border-top: 3px solid #ffffff;
  /* Blue */
  display: inline-block;
  height: 1em;
  width: 1em;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .ui-spinner {
    font-size: 8px;
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar {
  width: 12px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  ::-webkit-scrollbar {
    width: 10px;
  }
}
::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
#start-menu-wrapper {
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  line-height: 20px;
  position: absolute;
  top: 0;
  width: 100%;
}
#start-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 124px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-main {
    margin-bottom: 0px;
    height: 100%;
  }
}
.btn-standard {
  border: 0;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
#background {
  background-image: url("../img/main_splash.png");
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
}
#start-overlay {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  position: fixed;
  width: 100%;
}
.start-overlay-darken {
  background-color: rgba(0, 0, 0, 0.75) !important;
}
#start-row-header {
  background-image: url("../img/surviv_logo_full.png");
  background-repeat: no-repeat;
  background-size: 375px;
  background-position: center;
  height: 140px;
  margin: auto;
  margin-bottom: 32px;
  position: relative;
  width: 375px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-row-header {
    background-size: 220px;
    height: 80px;
    width: 220px;
    margin-bottom: 14px;
  }
}
#server-warning {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  bottom: -35px;
  box-sizing: border-box;
  color: red;
  font-size: 18px;
  font-weight: bold;
  height: 30px;
  left: 0px;
  line-height: 30px;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0px;
  text-align: center;
  width: 300px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #server-warning {
    font-size: 12px;
    height: 18px;
    line-height: 20px;
    position: relative;
    top: 82px;
    width: 200px;
  }
}
#start-main-center {
  position: relative;
  width: 960px;
}
@media (min-width: 851px) and (max-height: 768px), (max-width: 1200px) {
  #start-main-center {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-main-center {
    margin-top: 10px;
    width: 636px;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
@media (max-width: 850px) and (max-height: 320px) {
  #start-main-center {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
#start-row-top {
  height: 360px;
  position: relative;
}
.menu-column {
  display: block;
  float: left;
  margin: 10px auto;
}
.menu-block {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  max-height: 325px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .menu-block {
    max-height: initial;
  }
}
#ad-block-left {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  height: 250px;
  margin-right: 30px;
  width: 300px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #ad-block-left {
    margin-right: 18px;
    height: 165px;
    width: 200px;
  }
}
.ad-block-med-rect {
  height: 250px;
  width: 300px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .ad-block-med-rect {
    position: absolute;
    -webkit-transform: scale(0.67);
            transform: scale(0.67);
    -webkit-transform-origin: left top;
            transform-origin: left top;
  }
}
.surviv-shirts {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  height: 250px;
  width: 300px;
}
.surviv-shirts a {
  height: 250px;
  position: absolute;
  width: 300px;
}
.surviv-shirts-en {
  background-image: url("../img/surviv_shirts_en.png");
}
.surviv-shirts-de {
  background-image: url("../img/surviv_shirts_de.png");
}
.adblock-plea {
  display: none;
  height: 250px;
  width: 300px;
}
.adblock-plea span {
  color: gold;
  display: block;
  font-size: 24px;
  font-weight: bold;
  line-height: 28px;
  padding: 64px 24px;
  text-align: center;
}
.ui-stats-adblock {
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  height: 250px;
  width: 300px;
}
.ad-block-leaderboard-bottom {
  left: 0;
  margin-left: auto;
  margin-right: auto;
  pointer-events: auto;
  position: absolute;
  right: 0;
  text-align: center;
}
@media (max-width: 1100px) {
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1100px) and (max-height: 720px) {
  .ad-block-leaderboard-bottom {
    right: auto;
  }
}
/**
 * social-share-block
 */
#social-share-block {
  margin-right: 30px;
  margin-top: 10px;
  padding: 4px;
  padding-top: 10px;
  width: 300px;
}
.btn-social-wrapper {
  width: 100%;
  text-align: center;
}
.btn-social {
  display: inline-block;
  background-size: 40px;
  height: 42px;
  width: 40px;
  margin: auto;
  margin-left: 6px;
  margin-right: 6px;
  box-sizing: border-box;
  font-size: large;
  text-align: center;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
}
.btn-twitter {
  background-image: url(../img/icon_twitter.png);
  background-color: #1da1f2;
  box-shadow: inset 0 -4px #1a78b2;
}
.btn-facebook {
  background-image: url(../img/icon_facebook.png);
  background-color: #3b579d;
  box-shadow: inset 0 -4px #253763;
}
.btn-reddit {
  background-image: url(../img/icon_reddit.png);
  background-color: #b0502c;
  box-shadow: inset 0 -4px #982900;
}
.btn-discord {
  background-image: url(../img/icon_discord_sm.png);
  background-color: #7289da;
  box-shadow: inset 0 -4px #46558a;
}
.btn-instagram {
  background-image: url(../img/icon_instagram.png);
  background-color: #d93175;
  box-shadow: inset 0 -4px #9b2354;
}
.btn-darken:hover,
.btn-darken:active {
  color: inherit;
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
  transition: all 0.25s ease;
}
.btn-darken-alt:hover,
.btn-darken-alt:active {
  color: inherit;
  opacity: 0.75;
  transition: all 0.25s ease;
}
#social-share-wrapper {
  margin-top: 8px;
  height: 18px;
  width: 100%;
  text-align: center;
}
.social-share-item {
  display: inline-flex;
  vertical-align: bottom;
}
#start-menu {
  padding: 20px;
  width: 300px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-menu {
    height: 216px;
    padding: 10px;
    width: 200px;
  }
}
#btn-help {
  background: #7a7a7a;
  border-bottom: 2px solid #3e3e3e;
  box-shadow: inset 0 -2px #3e3e3e;
  display: inline-block;
  color: white;
  font-size: 16px;
  height: 40px;
  line-height: 36px;
  margin: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  width: 100%;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #btn-help {
    box-shadow: none;
    font-size: 12px;
    height: 28px;
    line-height: 26px;
  }
}
.display-help {
  overflow-y: auto;
}
#start-help {
  display: none;
}
#start-help > h1 {
  margin-top: 30px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-help > h1 {
    margin-top: 12px;
  }
}
#start-help > p {
  margin: 6px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-help > p {
    margin: 2px;
    font-size: 11px;
    line-height: 16px;
  }
}
#start-help span.help-action {
  font-weight: normal;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-help span.help-action {
    font-size: 11px;
  }
}
#start-help span.help-control {
  font-weight: bold;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-help span.help-control {
    font-size: 11px;
  }
}
.menu-option {
  border: 0px;
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  height: 40px;
  line-height: 38px;
  margin-bottom: 8px;
  text-align: center;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .menu-option {
    font-size: 12px;
    line-height: 26px;
    height: 28px;
    margin-bottom: 6px;
  }
}
.player-name-input {
  background-color: white;
  color: black;
  font-size: 16px;
  font-weight: bold;
  padding: 0px;
  text-align: center;
  cursor: initial;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .player-name-input {
    font-size: 16px;
  }
}
.menu-option:focus,
.menu-option.focus {
  box-shadow: 0 0 1px 1px #83af50;
}
#server-select-main {
  background-color: transparent;
}
.btns-double-row {
  display: flex;
}
.btns-double-row > a {
  display: inline-block;
}
.btns-double-row > a:not(:last-child) {
  margin-right: 4px;
}
.btn-green {
  background: #83af50;
  border-bottom: 2px solid #5b7a38;
  box-shadow: inset 0 -2px #5b7a38;
  color: white;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-green {
    background: #9850af;
    border-bottom: 2px solid #683679;
    box-shadow: none;
    font-size: 12px;
  }
}
.btn-green div {
  margin-top: 6px;
}
.btn-brown {
  background: #8f5827;
  border-bottom: 2px solid #563619;
  box-shadow: inset 0 -2px #563619;
  color: white;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-brown {
    background: #8f5827;
    border-bottom: 2px solid #563619;
    box-shadow: none;
    font-size: 12px;
  }
}
.btn-brown div {
  margin-top: 6px;
}
.btn-special-mode {
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-special-mode {
    background-position: 0px 2px;
    background-size: 22px;
    box-shadow: none;
    height: 28px;
  }
}
.btn-potato-mode {
  -webkit-animation-name: potatoPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/loot/loot-throwable-potato.svg);
  border-bottom: 4px solid #563619!important;
  box-shadow: inset 0 -2px #563619 !important;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-potato-mode {
    background-position: 0px 2px;
    background-size: 22px;
    border-bottom: 2px solid #563619!important;
    box-shadow: none;
    height: 28px;
  }
}
.btn-team-queue-potato-mode {
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/loot/loot-throwable-potato.svg);
  text-indent: 18px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-team-queue-potato-mode {
    background-position: 0px 2px;
    background-size: 22px;
    text-indent: 14px;
  }
}
.btn-flare-mode {
  -webkit-animation-name: flarePulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/loot/loot-weapon-flare-gun.svg);
  border-bottom: 4px solid #853500!important;
  box-shadow: inset 0 -2px #853500 !important;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-flare-mode {
    background-position: 0px 2px;
    background-size: 22px;
    border-bottom: 2px solid #853500!important;
    box-shadow: none;
    height: 28px;
  }
}
.btn-team-queue-flare-mode {
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/loot/loot-weapon-flare-gun.svg);
  text-indent: 18px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-team-queue-flare-mode {
    background-position: 0px 2px;
    background-size: 22px;
    text-indent: 14px;
  }
}
.btn-woods-mode {
  -webkit-animation-name: woodsPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/player-king-woods.svg);
  border-bottom: 4px solid #696726!important;
  box-shadow: inset 0 -2px #696726 !important;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-woods-mode {
    background-position: 0px 2px;
    background-size: 22px;
    border-bottom: 2px solid #696726!important;
    box-shadow: none;
    height: 28px;
  }
}
.btn-team-queue-woods-mode {
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/player-king-woods.svg);
  text-indent: 18px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-team-queue-woods-mode {
    background-position: 0px 2px;
    background-size: 22px;
    text-indent: 14px;
  }
}
.btn-woods-spring-mode {
  -webkit-animation-name: woodsSpringPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/player-king-woods.svg);
  border-bottom: 4px solid #138500!important;
  box-shadow: inset 0 -2px #138500 !important;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-woods-spring-mode {
    background-position: 0px 2px;
    background-size: 22px;
    border-bottom: 2px solid #138500!important;
    box-shadow: none;
    height: 28px;
  }
}
.btn-team-queue-woods-spring-mode {
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/player-king-woods.svg);
  text-indent: 18px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-team-queue-woods-spring-mode {
    background-position: 0px 2px;
    background-size: 22px;
    text-indent: 14px;
  }
}
.btn-halloween-mode {
  -webkit-animation-name: bloodPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/pumpkin-play.svg);
  border-bottom: 4px solid #2d0000!important;
  box-shadow: inset 0 -2px #2d0000 !important;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-halloween-mode {
    background-position: 0px 2px;
    background-size: 22px;
    border-bottom: 2px solid #2d0000!important;
    box-shadow: none;
    height: 28px;
  }
}
.btn-faction-mode {
  -webkit-animation-name: factionPulse;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/star.svg);
  border-bottom: 4px solid #00448a;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-faction-mode {
    background-position: 0px 2px;
    background-size: 22px;
    border-bottom: 2px solid #00448a;
    box-shadow: none;
    height: 28px;
  }
}
.btn-team-queue-faction-mode {
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/star.svg);
  text-indent: 18px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-team-queue-faction-mode {
    background-position: 0px 2px;
    background-size: 22px;
    text-indent: 14px;
  }
}
.btn-savannah-mode {
  -webkit-animation-name: savannahPulse;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/player-the-hunted.svg);
  border-bottom: 4px solid #947c1c;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-savannah-mode {
    background-position: 0px 2px;
    background-size: 22px;
    border-bottom: 2px solid #947c1c;
    box-shadow: none;
    height: 28px;
  }
}
.btn-team-queue-savannah-mode {
  background-repeat: no-repeat;
  background-size: 35px;
  background-image: url(../img/gui/player-the-hunted.svg);
  text-indent: 18px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-team-queue-savannah-mode {
    background-position: 0px 2px;
    background-size: 22px;
    text-indent: 14px;
  }
}
.btn-custom-mode-main {
  text-indent: 18px;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-custom-mode-main {
    background-position: 0px 2px;
    background-size: 22px;
    box-shadow: none;
    height: 28px;
    text-indent: 14px;
  }
}
.btn-custom-mode-main {
  text-indent: 18px;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-custom-mode-main {
    background-position: 0px 2px;
    background-size: 22px;
    box-shadow: none;
    height: 28px;
    text-indent: 14px;
  }
}
.btn-custom-mode-no-indent {
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-size: 35px;
  height: 41px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-custom-mode-no-indent {
    background-position: 0px 2px;
    background-size: 22px;
    box-shadow: none;
    height: 28px;
  }
}
.btn-custom-mode-select {
  background-repeat: no-repeat;
  background-size: 35px;
  text-indent: 18px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-custom-mode-select {
    background-position: 0px 2px;
    background-size: 22px;
    text-indent: 14px;
  }
}
.play-button-container {
  position: relative;
}
.play-loading-outer {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  opacity: 0.0;
  pointer-events: none;
}
.play-loading-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.play-loading-spinner {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  border-top: 3px solid #ffffff;
  height: 32px;
  width: 32px;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#player-options {
  display: flex;
}
#player-options > input {
  margin-right: 4px;
}
.player-options-btn {
  display: inline-block;
}
#btn-customize {
  background: #1e90ff;
  background-image: url(../img/emotes/surviv.svg);
  background-position: 8px 5px;
  background-repeat: no-repeat;
  background-size: 28px;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  color: white;
  cursor: pointer;
  font-size: 16px;
  height: 40px;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  width: 20%;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #btn-customize {
    background-position: center;
    background-size: 20px;
    box-shadow: none;
    height: 30px;
    width: 22%;
  }
}
.btn-team-option {
  background: #50afab;
  border-bottom: 2px solid #387c79;
  box-shadow: inset 0 -2px #387c79;
  color: white;
  cursor: pointer;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-team-option {
    border-bottom: none;
  }
}
#btn-team-leave {
  background: #7a7a7a;
  border-bottom: 2px solid #3e3e3e;
  bottom: -32px;
  box-shadow: inset 0 -2px #3e3e3e;
  color: white;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  right: 14px;
  top: 20px;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: top right;
          transform-origin: top right;
  width: 140px;
}
@media (max-height: 800px) {
  #btn-team-leave {
    font-size: 16px;
    right: 14px;
    top: 20px;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: top right;
            transform-origin: top right;
    width: 140px;
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #btn-team-leave {
    box-shadow: none;
    font-size: 14px;
    line-height: 28px;
    right: 0px;
    top: 0px;
    width: 124px;
  }
}
#team-menu {
  display: none;
  height: 325px;
  padding: 12px;
  position: relative;
  width: 625px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-menu {
    height: 230px;
    width: 418px;
  }
}
#team-menu-columns {
  height: 225px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-menu-columns {
    margin-top: -4px;
  }
}
#team-menu-connecting {
  display: none;
  margin-top: 120px;
  text-align: center;
  width: 100%;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-menu-connecting {
    margin-top: 64px;
  }
}
.team-menu-connecting-text {
  font-size: 18px;
}
.team-menu-block {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  max-height: 350px;
}
#team-menu-members {
  float: left;
  padding: 12px 0px;
  width: 320px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-menu-members {
    width: 220px;
  }
}
.team-menu-member {
  display: flex;
}
.team-menu-member > .icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 6px;
  height: 36px;
  margin: 2px 4px 0px 4px;
  width: 36px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .team-menu-member > .icon {
    height: 28px;
    width: 28px;
  }
}
.team-menu-member > .icon-leader {
  background-image: url(../img/gui/crown.svg);
}
.team-menu-member > .icon-kick {
  background-image: url(../img/gui/close.svg);
  background-position: 49%;
  background-size: 65%;
  opacity: 1.0;
  cursor: pointer;
}
.team-menu-member > .icon-kick:hover {
  color: inherit;
  -webkit-filter: brightness(60%);
  filter: brightness(60%);
}
.team-menu-member > .icon-in-game {
  background-image: url(../img/gui/player-gui.svg);
  background-size: 85%;
  -webkit-animation: msgStartWaitingPulse 3s ease-out infinite;
          animation: msgStartWaitingPulse 3s ease-out infinite;
}
.team-menu-member > .icon-submit-name-change {
  background-image: url(../img/gui/submit.svg);
  background-size: 75%;
  cursor: pointer;
}
.team-menu-member > .icon-submit-name-change:hover {
  color: inherit;
  -webkit-filter: brightness(60%);
  filter: brightness(60%);
}
.name {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: initial;
  flex: 1;
  padding: 10px 12px;
  width: 230px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .name {
    padding: 4px;
    width: 130px;
  }
}
.name-text {
  color: white;
  font-size: 18px;
  line-height: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .name-text {
    font-size: 16px;
  }
}
.name-self {
  color: #00ff00;
  cursor: pointer;
  font-weight: bold;
}
.name-self:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.name-self-input {
  background-color: white;
  color: black;
  font-weight: bold;
  padding: 0px;
  text-align: center;
  cursor: initial;
}
.name-in-game {
  color: rgba(255, 255, 255, 0.33);
}
#team-link-row {
  display: block;
  margin: 0px auto;
  width: 60%;
}
#team-code-row {
  display: block;
  margin: 2px auto 0px auto;
  width: 60%;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-code-row {
    margin-top: initial;
  }
}
#team-code-text {
  font-size: 18px;
  color: white;
  font-weight: bold;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-code-text {
    font-size: 12px;
  }
}
#invite-code-text {
  color: white;
  font-size: 16px;
  font-weight: normal;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #invite-code-text {
    font-size: 12px;
    margin-top: initial;
  }
}
#msg-wait-reason {
  -webkit-animation: msgStartWaitingPulse 3s ease-out infinite;
          animation: msgStartWaitingPulse 3s ease-out infinite;
  display: none;
  font-size: 14px;
  margin: auto;
  margin-top: 8px;
  text-align: center;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #msg-wait-reason {
    margin-top: 0px;
  }
}
@-webkit-keyframes msgStartWaitingPulse {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes msgStartWaitingPulse {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/**
 * team-mobile-link
 */
#team-mobile-link {
  display: none;
  height: 250px;
  padding: 12px;
  width: 625px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-mobile-link {
    width: 418px;
    height: 186px;
    padding: 12px;
  }
}
.team-mobile-link-text {
  font-size: 24px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 52px;
  text-align: center;
  width: 100%;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .team-mobile-link-text {
    font-size: 16px;
    margin-top: 24px;
  }
}
#team-mobile-link-desc {
  display: block;
}
#team-mobile-link-warning {
  display: none;
  color: red;
  font-weight: bold;
}
#team-link-input {
  cursor: initial;
  margin: auto;
  width: 75%;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-link-input {
    width: 100%;
  }
}
#team-menu-options {
  float: right;
  width: 280px;
  padding: 12px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #team-menu-options {
    float: right;
    padding: 12px 0px;
    width: 170px;
  }
}
#btn-team-mobile-link-join {
  width: 150px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
#btn-team-mobile-link-leave {
  background: #7a7a7a;
  border-bottom: 2px solid #3e3e3e;
  bottom: 40px;
  box-shadow: inset 0 -2px #3e3e3e;
  color: white;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  right: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  width: 190px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #btn-team-mobile-link-leave {
    background: #7a7a7a;
    border-bottom: none;
    bottom: initial;
    cursor: pointer;
    font-size: 12px;
    line-height: 28px;
    margin: auto;
    position: initial;
  }
}
/**
 * start-top-right
 */
#start-top-right {
  color: #FFF;
  position: absolute;
  right: 0px;
  top: 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 2;
}
@media (max-height: 700px) {
  #start-top-right {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    -webkit-transform-origin: top right;
            transform-origin: top right;
  }
}
.ui-modal-keybind {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  z-index: 4;
  background-color: rgba(0, 0, 0, 0.4);
}
.ui-modal-keybind-content {
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  position: fixed;
  width: unset !important;
}
#ui-modal-keybind-header {
  background-color: #547033;
}
#ui-modal-keybind-header > h2 {
  font-weight: bold;
}
#ui-modal-keybind-footer {
  background-color: #547033;
  color: white;
  height: 60px;
  display: flex;
  justify-content: space-between;
}
#ui-modal-keybind-footer > .btn-game-menu {
  display: inline-block;
  background: #7a7a7a;
  border-bottom: 2px solid #3e3e3e;
  box-shadow: inset 0 -2px #3e3e3e;
  margin-top: 10px;
  margin-right: 12px;
}
#ui-modal-keybind-footer > .btn-game-menu:last-child {
  margin-right: 0px;
}
#ui-modal-keybind-body {
  background-color: #83af50;
  color: black;
}
#ui-modal-keybind-list {
  background-color: rgba(0, 0, 0, 0.5);
  width: 512px;
  height: 420px;
  overflow-y: scroll;
  pointer-events: all;
  padding: 12px;
  box-sizing: border-box;
  color: white;
}
#ui-modal-keybind-list > .ui-keybind-container > .btn-game-menu {
  width: 50%;
}
#ui-modal-keybind-list > .ui-keybind-container > .btn-keybind-display {
  width: 50%;
  text-indent: 22px;
}
#ui-modal-keybind-share {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 12px;
  margin-top: 12px;
  box-sizing: border-box;
  color: white;
}
#ui-modal-keybind-share > .ui-modal-keybind-share-row {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
#ui-modal-keybind-share > .ui-modal-keybind-share-row > .ui-modal-keybind-share-elem {
  flex: 0 0 auto;
}
#keybind-warning {
  color: red;
  display: none;
  font-weight: bold;
  padding-top: 8px;
  text-align: center;
}
.keybind-share-paste-text {
  width: 100%;
}
.ui-keybind-container {
  display: flex;
}
.ui-keybind-container > .btn-keybind-desc {
  font-size: 14px;
  width: 55%;
}
.ui-keybind-container > .btn-keybind-desc-selected {
  font-size: 14px;
  width: 55%;
  -webkit-animation: pulseKeybind 1.25s linear infinite;
          animation: pulseKeybind 1.25s linear infinite;
}
.ui-keybind-container > .btn-keybind-display {
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  width: 45%;
}
@-webkit-keyframes pulseKeybind {
  0% {
    background-color: #000000;
  }
  50% {
    background-color: #50afab;
  }
  100% {
    background-color: #000000;
  }
}
@keyframes pulseKeybind {
  0% {
    background-color: #000000;
  }
  50% {
    background-color: #50afab;
  }
  100% {
    background-color: #000000;
  }
}
#keybind-link-text {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
}
#keybind-link {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 175px;
  white-space: nowrap;
}
#keybind-copy {
  top: -10px;
  float: right;
}
#keybind-code-input {
  flex: 3 0;
  width: unset;
  margin: 0;
  margin-right: 12px;
  cursor: initial;
}
#btn-keybind-code-load {
  flex: 1 0;
  width: unset;
  margin: 0;
}
/**
 * modal-name-change
 */
.modal-account {
  background-color: rgba(0, 0, 0, 0.75);
}
.modal-account > .modal-content {
  text-decoration: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}
.modal-account > .modal-content > .modal-header-name {
  background-color: teal;
}
.modal-account > .modal-content > .modal-body-name {
  background-color: #141414;
}
.modal-account > .modal-content > .modal-footer-name {
  background-color: teal;
}
.modal-account > .modal-content > .modal-header-reset-stats,
.modal-account > .modal-content .modal-header-delete {
  background-color: #474747;
}
.modal-account > .modal-content > .modal-body-reset-stats,
.modal-account > .modal-content .modal-body-delete {
  background-color: #2a2a2a;
}
.modal-account > .modal-content > .modal-footer-reset-stats,
.modal-account > .modal-content .modal-footer-delete {
  background-color: #474747;
}
.modal-account > .modal-content > .modal-footer > .finish {
  color: gold;
  font-size: 24px;
  text-align: center;
}
.modal-account > .modal-content > .modal-footer > .finish:hover,
.modal-account > .modal-content > .modal-footer > .finish:focus {
  color: #c8a900;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 1px 1px 1px black;
}
#modal-header-account-avatar {
  background-color: #007171;
}
#modal-body-account-avatar {
  background-color: darkcyan;
}
#modal-footer-account-avatar {
  background-color: #007171;
  padding: 20px;
  text-align: center;
}
#modal-footer-account-avatar > span {
  font-size: 28px;
}
#modal-account-avatar {
  z-index: 4;
}
#modal-account-avatar > .modal-content {
  width: 800px;
}
#modal-account-avatar-list {
  background-color: rgba(0, 0, 0, 0.5);
  width: 544px;
  height: 420px;
  overflow-y: scroll;
}
#customize-account-avatars {
  z-index: 3;
  display: block;
  position: absolute;
  top: 48%;
  right: 105px;
}
#customize-account-avatars > .ui-emote-parent {
  opacity: 1.0 !important;
}
#customize-account-avatar {
  position: relative;
  right: 15px;
  top: 30px;
}
#customize-account-avatar > .ui-emote-auto-icon {
  width: 42px;
  height: 208px;
  background-repeat: no-repeat;
  background-size: 42px;
  background-position: left 50% top 0px;
}
#customize-account-avatar > .ui-emote-auto-trash {
  z-index: 1;
  position: absolute;
  top: 60px;
  left: 56px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 24px;
  background-image: url(../img/gui/trash.svg);
  cursor: pointer;
}
#customize-account-avatar > .ui-emote-avatar-player {
  background-image: url(../img/gui/player-gui.svg);
}
#customize-account-avatar > .ui-emote-bg-circle-outer {
  width: 172px;
  height: 172px;
  background-size: 172px;
  background-image: url(../img/gui/ping-part-circle-auto-outer.svg);
}
#customize-account-avatar > .ui-emote-bg-circle {
  width: 128px;
  height: 128px;
  background-size: 128px;
  background-image: url(../img/gui/ping-part-circle-auto.svg);
}
#customize-account-avatar > .ui-emote-hl {
  width: 128px;
  height: 128px;
  background-size: 128px;
  background-image: url(../img/gui/ping-part-circle-auto-highlight.svg);
}
#customize-account-avatar > .customize-item-image {
  z-index: 1;
  position: absolute;
  background-repeat: no-repeat;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: none;
}
#modal-account-name-change {
  z-index: 4;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #modal-account-name-change .player-name-input {
    height: 32px;
  }
}
#modal-account-name-desc {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 2px black;
  width: 100%;
}
#modal-account-reset-stats,
#modal-account-delete {
  z-index: 4;
}
#modal-account-reset-stats-desc,
#modal-account-delete-desc {
  font-size: 22px;
  margin: 8px;
  text-align: center;
  width: 100%;
}
#modal-account-reset-stats-desc-2,
#modal-account-delete-desc-2 {
  font-size: 18px;
  margin: 8px;
  text-align: center;
  width: 100%;
}
#modal-body-warning {
  display: none;
  background: rgba(0, 0, 0, 0.35);
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 18px;
  padding: 6px 0;
  text-align: center;
  width: 100%;
}
#modal-create-account {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 4;
}
#modal-create-account a {
  text-decoration: underline;
  color: black;
  font-weight: bold;
}
#modal-create-account .modal-content {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  left: 50%;
  text-decoration: none;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #modal-create-account .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
}
#modal-create-account .modal-header {
  background-color: teal;
}
#modal-create-account .modal-body {
  background-color: #141414;
}
#modal-create-account .modal-body p {
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  margin: 4px;
  text-align: center;
  text-shadow: 1px 1px 1px black;
  width: 100%;
}
#modal-create-account .modal-body .account-buttons {
  width: 232px;
}
#modal-create-account .modal-body-text {
  padding-top: 16px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #modal-create-account .modal-body .menu-option {
    height: 32px;
  }
}
#modal-create-account .modal-footer {
  background-color: teal;
}
#modal-create-account .modal-footer > .close-footer {
  color: white;
  font-size: 24px;
  text-align: center;
}
#modal-create-account .modal-footer > .close-footer:hover,
#modal-create-account .modal-footer > .close-footer:focus {
  color: #c8a900;
  cursor: pointer;
  text-decoration: none;
}
#modal-screen-block {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 4;
}
#modal-item-confirm {
  /*z-index: 4;*/
}
#modal-item-confirm a {
  text-decoration: underline;
  color: black;
  font-weight: bold;
}
#modal-item-confirm .modal-content {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  left: 50%;
  text-decoration: none;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #modal-item-confirm .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
}
#modal-item-confirm .modal-header {
  background-color: #365317;
}
#modal-item-confirm .modal-header > .close-corner {
  position: absolute;
  right: 12px;
}
#modal-item-confirm .modal-header > h2 {
  font-size: 24px;
  text-align: center;
}
#modal-item-confirm .modal-body {
  background-color: #568623;
}
#modal-item-confirm .modal-body p {
  bottom: initial;
  font-size: 20px;
  line-height: 18px;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px black;
  top: 4px;
  width: 100%;
}
#modal-item-confirm .modal-body > #modal-item-confirm-image-outer {
  background-color: rgba(0, 0, 0, 0.35);
  border: 6px solid #00ff00;
  box-sizing: content-box;
  margin: auto;
  height: 160px;
  width: 160px;
}
#modal-item-confirm .modal-body > #modal-item-confirm-image-outer > #modal-item-confirm-image-inner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 132px;
  height: 100%;
  width: 100%;
}
#modal-item-confirm .modal-body .account-buttons {
  width: 232px;
}
#modal-item-confirm .modal-footer {
  background-color: #365317;
}
#modal-item-confirm .modal-footer > .close-footer {
  color: white;
  font-size: 24px;
  text-align: center;
}
#modal-item-confirm .modal-footer > .close-footer:hover,
#modal-item-confirm .modal-footer > .close-footer:focus {
  color: #c8a900;
  cursor: pointer;
  text-decoration: none;
}
#modal-item-confirm-image-outer {
  background-color: rgba(0, 0, 0, 0.35);
  border: 6px solid #00ff00;
  box-sizing: content-box;
  margin: auto;
  height: 160px;
  width: 160px;
}
#modal-item-confirm-image-inner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 132px;
  height: 100%;
  width: 100%;
}
/**
 * mobile styling
 */
#modal-mobile-account > .modal-content {
  right: 0px;
  bottom: 0px;
  height: 100%;
  -webkit-animation-name: slideInRight;
  -webkit-animation-duration: 0.2s;
  animation-name: slideInRight;
  animation-duration: 0.2s;
}
#modal-mobile-account > .modal-content > #modal-mobile-account-body {
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  height: 100%;
  padding: 12px;
}
#modal-mobile-account > .modal-content > #modal-mobile-account-body > .account-buttons-wrapper {
  right: initial;
  top: initial;
}
#modal-mobile-account > .modal-content > #modal-mobile-account-body .menu-option {
  font-size: 16px;
  height: 32px;
  line-height: 30px;
  margin-bottom: 8px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .login-button-name > .icon {
    height: 18px !important;
    width: 18px !important;
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .login-button-name > .icon::after {
    height: 20px !important;
  }
}
.account-buttons-wrapper {
  z-index: 1;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .account-buttons-wrapper {
    background-color: transparent !important;
    margin: auto !important;
    width: 60% !important;
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #modal-account-avatar > .modal-content {
    top: 48%;
    left: 50%;
    width: 1024px;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.55);
            transform: translateY(-50%) translateX(-50%) scale(0.55);
  }
}
@media (max-width: 850px) and (max-height: 320px) {
  #modal-account-avatar > .modal-content {
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.45);
            transform: translateY(-50%) translateX(-50%) scale(0.45);
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #customize-account-avatar {
    right: 124px;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-leaderboard-stats-link {
    background-size: 22px !important;
    box-shadow: inset 0 -1px #1871c8 !important;
    display: inline-block;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 0px;
    margin-right: 12px;
    padding-right: 20px;
    width: 124px;
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-player-stats-link {
    background-size: 22px !important;
  }
}
/**
 * account-block
 */
.account-block {
  position: absolute;
  right: 0px;
  width: 232px;
}
.account-login-block {
  display: block;
}
.account-details-top-bg {
  border-top: 72px solid rgba(0, 0, 0, 0.75);
  border-left: 36px solid transparent;
  height: 0px;
  position: absolute;
  right: 0px;
  width: 246px;
}
.account-details-top-buttons {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 6px 14px 6px 14px;
  position: relative;
  right: var(--side-pad);
  top: 75px;
  width: 100%;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .account-details-top-buttons {
    padding: 2px 10px 2px 10px;
    top: 70px;
  }
}
.account-details-top-buttons > .account-details-link-out {
  background-image: url(../img/gui/link.svg);
  background-color: #1e90ff;
  background-position: 97%;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
}
.account-details-top-buttons > .account-details-button-loadout {
  background-image: url(../img/emotes/surviv.svg);
  background-color: #1e90ff;
  background-position: 96%;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
}
.account-details-top-buttons > .account-details-button-wrapper {
  background-repeat: no-repeat;
  background-size: 28px;
  color: white !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .account-details-top-buttons > .account-details-button-wrapper {
    height: 36px;
    line-height: 36px;
  }
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .account-details-top-buttons > .account-details-button-wrapper > .account-details-button > .account-link > span {
    font-size: 20px;
  }
}
.account-details-bottom {
  position: absolute;
  right: 0px;
  top: 72px;
  width: 200px;
}
.account-details-bottom-bg {
  border-top: 40px solid rgba(0, 0, 0, 0.45);
  border-left: 20px solid transparent;
  height: 0px;
  position: absolute;
  right: 0px;
  width: 100%;
}
.account-details-bottom-buttons {
  position: absolute;
  right: 178px;
  text-align: right;
  top: 10px;
  width: 100%;
}
.account-details-bottom-buttons .account-details-button {
  cursor: pointer;
  display: inline;
  font-size: 24px;
  margin-right: 10px;
}
.account-details-bottom-buttons .account-details-button a {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}
.account-details-bottom-buttons .account-details-button a:link {
  color: #e1e1e1;
}
.account-details-bottom-buttons .account-details-button a:visited {
  color: #e1e1e1;
}
.account-details-bottom-buttons .account-details-button a:hover {
  color: rgba(225, 225, 225, 0.75);
}
.account-details-bottom-buttons .account-details-button a:active {
  color: rgba(225, 225, 225, 0.75);
}
.account-details-bottom-buttons .account-details-currency {
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -2px;
  background-size: 26px;
  display: inline;
  font-size: 20px;
  font-weight: bold;
  height: 30px;
  margin-right: 10px;
  padding-left: 26px;
  width: 30px;
}
.account-details-bottom-buttons .account-details-currency-bucks {
  background-image: url(../img/gui/star-blue.svg);
}
.account-details-bottom-buttons .account-details-currency-coins {
  background-image: url(../img/gui/star-red.svg);
}
.account-details-guest {
  cursor: pointer;
}
.account-stat-links {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  margin-left: auto;
  margin-top: 12px;
  position: relative;
  width: 100%;
}
.btn-leaderboard-stats-link {
  background-image: url(../img/gui/link.svg);
  background-position: 97%;
  background-repeat: no-repeat;
  background-size: 28px;
  background-color: #1e90ff;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  color: white !important;
}
.btn-player-stats-link {
  background-image: url(../img/gui/link.svg);
  background-position: 97%;
  background-repeat: no-repeat;
  background-size: 28px;
  background-color: #1e90ff;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  color: white !important;
}
.account-buttons-wrapper {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  right: 12px;
  top: 75px;
  position: relative;
  width: 100%;
}
.account-login-buttons {
  display: none;
}
.account-login-desc {
  padding-top: 18px;
}
.account-login-desc > p {
  margin: auto;
  text-align: center;
}
.account-link-desc {
  margin: 12px 0px;
  padding-top: 18px;
}
.account-link-desc > p {
  margin: auto;
  text-align: center;
}
.account-buttons-settings {
  display: none;
}
.account-buttons-link-account {
  display: none;
}
.account-buttons {
  padding: 18px;
  margin: auto;
  position: relative;
  text-align: center;
}
.account-buttons > div {
  position: relative;
}
.account-buttons > .menu-option:first-child {
  margin-top: 0px;
}
.account-buttons > .menu-option:last-child {
  margin-bottom: 0px;
}
.login-button-name {
  margin-left: 36px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}
.login-button-name > .icon {
  background-size: cover;
  height: 24px;
  left: 8px;
  position: absolute;
  top: 6px;
  width: 24px;
}
.login-button-name > .icon::after {
  content: '';
  width: 0;
  height: 28px;
  position: absolute;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  top: -2px;
  left: 135%;
}
.btn-login-facebook {
  background-color: #3b579d;
  border-bottom: 2px solid #253763;
  box-shadow: inset 0 -2px #253763;
}
.btn-login-facebook > .login-button-name > .icon {
  background-image: url(../img/icon_facebook_reverse.png);
}
.btn-login-google {
  background: #ea4335;
  border-bottom: 2px solid #af3228;
  box-shadow: inset 0 -2px #af3228;
}
.btn-login-google > .login-button-name > .icon {
  background-image: url(../img/icon_google.png);
}
.btn-login-twitch {
  background-color: #6441a4;
  border-bottom: 2px solid #3f2868;
  box-shadow: inset 0 -2px #3f2868;
}
.btn-login-twitch > .login-button-name > .icon {
  background-image: url(../img/icon_twitch.png);
}
.btn-login-discord {
  background-color: #7289DA;
  border-bottom: 2px solid #53639e;
  box-shadow: inset 0 -2px #53639e;
}
.btn-login-discord > .login-button-name > .icon {
  background-image: url(../img/icon_discord.png);
}
.btn-login-linked {
  background-image: url('../img/gui/checked.svg');
  background-position-x: 60%;
  background-position-y: 50%;
  background-repeat: no-repeat;
  background-size: 22px;
  color: inherit;
  cursor: default;
  -webkit-filter: brightness(80%) !important;
  filter: brightness(80%) !important;
}
.account-block {
  display: block;
}
.account-overview {
  display: flex;
}
.account-block-arrow::after {
  border-color: transparent transparent rgba(0, 0, 0, 0.5) transparent;
  border-style: solid;
  border-width: 6px;
  bottom: 100%;
  content: " ";
  left: 8%;
  position: absolute;
}
.btn-account-turq {
  background-color: #50afab;
  border-bottom: 2px solid #387c79;
  box-shadow: inset 0 -2px #387c79;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-account-grey {
  background-color: #7a7a7a;
  border-bottom: 2px solid #3e3e3e;
  box-shadow: inset 0 -2px #3e3e3e;
  margin-top: 24px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-account-disabled {
  cursor: default;
  -webkit-filter: brightness(60%) !important;
  filter: brightness(60%) !important;
}
.account-details-user {
  cursor: pointer;
  display: flex;
}
.account-details-block {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  position: absolute;
  right: var(--side-pad);
  top: var(--side-pad);
  width: 100%;
}
.account-details {
  display: flex;
  height: 40px;
  padding: 6px;
  width: 100%;
}
.account-avatar {
  background-image: url(../img/gui/player-gui.svg);
  background-color: rgba(0, 0, 0, 0.25);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  border: 2px solid rgba(0, 255, 0, 0);
  border-radius: 3px;
  box-sizing: border-box;
  line-height: 0px;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account-avatar-hover:hover {
  -webkit-transition: border 100ms ease-out;
  -moz-transition: border 100ms ease-out;
  -o-transition: border 100ms ease-out;
  border: 2px solid #00ff00;
}
.account-loading-container {
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 4px;
}
.account-loading {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  border-top: 3px solid #ffffff;
  height: 16px;
  width: 16px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.pulsating-circle {
  display: none;
  position: relative;
  left: 24px;
  top: 0px;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 24px;
  height: 24px;
}
.pulsating-circle:before {
  content: '';
  position: relative;
  display: block;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  margin-left: -50%;
  margin-top: -50%;
  border-radius: 45px;
  background-color: white;
  -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
          animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
          animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
.account-alert-main {
  position: absolute;
  right: 6px;
  top: 4px;
  width: 24px;
  height: 24px;
}
.account-alert-cat {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 24px;
  height: 24px;
}
.account-alert {
  display: none;
  z-index: 1;
}
.account-alert:before {
  content: '';
  position: relative;
  display: block;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  margin-left: -50%;
  margin-top: -50%;
  border-radius: 45px;
  background-color: white;
  -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
          animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.account-alert:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
          animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
.account-alert-orange:before {
  background-color: #ff9000 !important;
}
.account-alert-orange:after {
  background-color: rgba(255, 144, 0, 0.5);
}
.account-alert-red:before {
  background-color: red !important;
}
.account-alert-red:after {
  background-color: rgba(255, 0, 0, 0.5);
}
@-webkit-keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
            transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}
@keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
            transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
.account-name {
  font-size: 16px;
  line-height: 20px;
  margin-left: 8px;
  margin-top: 10px;
  width: 100%;
}
.account-name-user {
  font-size: 18px;
}
.account-details-stats {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  padding: 4px;
  position: relative;
  margin-left: auto;
  margin-top: 12px;
  width: 100%;
}
.account-player-stats-overview {
  width: 80%;
}
.account-player-stats-overview th {
  color: gold;
  font-size: 16px;
  font-weight: normal;
  padding-bottom: 0px;
  padding-top: 4px;
  text-align: center;
}
.account-player-stats-overview td {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 4px;
  padding-top: 2px;
  text-align: center;
}
/**
 * start-top-center
 */
#start-top-left-lower {
  position: absolute;
  left: 14px;
  bottom: 90px;
  -webkit-transform: translateX(-50%) scale(0.9);
          transform: translateX(-50%) scale(0.9);
  z-index: 1;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #start-top-left-lower {
    display: none;
  }
}
#mobile-announce {
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
#mobile-app-icon {
  background-image: url(../img/icon_app.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 12px;
  box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
  height: 72px;
  position: absolute;
  left: -4px;
  width: 72px;
  z-index: 1;
}
#mobile-announce-text {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  color: #ffe400;
  font-size: 22px;
  font-weight: bold;
  height: 52px;
  left: 56px;
  line-height: 28px;
  padding-bottom: 6px;
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 6px;
  position: relative;
  text-align: center;
  text-shadow: 2px 2px black;
  top: 6px;
  max-width: 60%;
}
.mobile-announce-tooltip .tooltiptext {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  color: #fff;
  left: 100%;
  margin-left: -60px;
  opacity: 0.9;
  padding: 5px 0;
  position: absolute;
  text-align: center;
  bottom: 120%;
  visibility: hidden;
  width: 210px;
  z-index: 1;
}
.mobile-announce-tooltip .tooltiptext > span {
  color: #ffe400;
  font-weight: bold;
}
.mobile-announce-tooltip .tooltiptext::after {
  border-color: black transparent transparent transparent;
  border-style: solid;
  border-width: 5px;
  bottom: 100%;
  content: " ";
  left: 10%;
  bottom: -10px;
  position: absolute;
}
.mobile-announce-tooltip:hover .tooltiptext {
  visibility: visible;
}
.btn-cookie-settings {
  display: none;
}
#view-cookie-policy {
  cursor: pointer;
}
.cc-window {
  opacity: 1;
  transition: opacity 1s ease;
}
.cc-window.cc-invisible {
  opacity: 0;
}
/* only animate ifhas class 'cc-animate' */
.cc-animate.cc-revoke {
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
}
.cc-animate.cc-revoke.cc-top {
  -webkit-transform: translateY(-2em);
          transform: translateY(-2em);
}
.cc-animate.cc-revoke.cc-bottom {
  -webkit-transform: translateY(2em);
          transform: translateY(2em);
}
.cc-animate.cc-revoke.cc-active.cc-top {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.cc-animate.cc-revoke.cc-active.cc-bottom {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.cc-revoke:hover {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.cc-grower {
  /* Initially we don't want any height, and we want the contents to be hidden */
  max-height: 0;
  overflow: hidden;
  /* Set our transitions up. */
  transition: max-height 1s;
}
/* the popup window */
.cc-window,
.cc-revoke {
  position: fixed;
  overflow: hidden;
  box-sizing: border-box;
  /* exclude padding when dealing with width */
  font-family: Helvetica, Calibri, Arial, sans-serif;
  font-size: 16px;
  /* by setting the base font here, we can size the rest of the popup using CSS `em` */
  line-height: 1.5em;
  display: flex;
  flex-wrap: nowrap;
  /* the following are random unjustified styles - just because - should probably be removed */
  z-index: 9999;
}
.cc-window.cc-static {
  position: static;
}
/* 2 basic types of window - floating / banner */
.cc-window.cc-floating {
  padding: 2em;
  max-width: 24em;
  /* 1em == 16px therefore 24em == 384px */
  flex-direction: column;
}
.cc-window.cc-banner {
  padding: 1em 1.8em;
  width: 100%;
  flex-direction: row;
}
.cc-revoke {
  padding: .5em;
}
.cc-revoke:hover {
  text-decoration: underline;
}
.cc-header {
  font-size: 18px;
  font-weight: bold;
}
/* clickable things */
.cc-btn,
.cc-link,
.cc-close,
.cc-revoke {
  cursor: pointer;
}
.cc-link {
  opacity: .8;
  display: inline-block;
  padding: .2em;
  text-decoration: underline;
}
.cc-link:hover {
  opacity: 1;
}
.cc-link:active,
.cc-link:visited {
  color: initial;
}
.cc-btn {
  display: block;
  padding: .4em .8em;
  font-size: 0.9em;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  text-align: center;
  white-space: nowrap;
}
.cc-banner .cc-btn:last-child {
  min-width: 140px;
}
.cc-highlight .cc-btn:first-child {
  background-color: transparent;
  border-color: transparent;
}
.cc-highlight .cc-btn:first-child:hover,
.cc-highlight .cc-btn:first-child:focus {
  background-color: transparent;
  text-decoration: underline;
}
.cc-close {
  display: block;
  position: absolute;
  top: .5em;
  right: .5em;
  font-size: 1.6em;
  opacity: .9;
  /* seeing as this contains text and not an image, the element taller than it is wide (because it is text) */
  /*  - we want it to be a square, because it's acting as an icon */
  /*  - setting the line height normalises the height */
  line-height: .75;
}
.cc-close:hover,
.cc-close:focus {
  opacity: 1;
}
/* This file should contain CSS that modifies the popup layout. */
/* By layout, we mean the physical position of the elements on the popup window, and the margin / padding around those elements. */
.cc-revoke.cc-top {
  top: 0;
  left: 3em;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
}
.cc-revoke.cc-bottom {
  bottom: 0;
  left: 3em;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
}
.cc-revoke.cc-left {
  left: 3em;
  right: unset;
}
.cc-revoke.cc-right {
  right: 3em;
  left: unset;
}
/**************************************** FLOATING ****************************************/
/* these classes position the floating element */
.cc-top {
  top: 1em;
}
.cc-left {
  left: 1em;
}
.cc-right {
  right: 1em;
}
.cc-bottom {
  bottom: 1em;
}
/* links that are direct decendants should be displayed as block */
.cc-floating > .cc-link {
  margin-bottom: 1em;
}
.cc-floating .cc-message {
  display: block;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 1em;
}
.cc-window.cc-floating .cc-compliance {
  flex: 1 0 auto;
}
/**************************************** BANNER ****************************************/
.cc-window.cc-banner {
  align-items: center;
}
.cc-banner.cc-top {
  left: 0;
  right: 0;
  top: 0;
}
.cc-banner.cc-bottom {
  left: 0;
  right: 0;
  bottom: 0;
}
.cc-banner .cc-message {
  flex: 1;
}
/* COMPLIANCE BOX */
.cc-compliance {
  display: flex;
  align-items: center;
  align-content: space-between;
}
.cc-compliance > .cc-btn {
  flex: 1;
}
.cc-btn + .cc-btn {
  margin-left: .5em;
}
@media print {
  .cc-window,
  .cc-revoke {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .cc-btn {
    white-space: normal;
  }
}
/* dimensions for 'iPhone6 Plus' and lower */
@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
  .cc-window.cc-top {
    top: 0;
  }
  .cc-window.cc-bottom {
    bottom: 0;
  }
  .cc-window.cc-banner,
  .cc-window.cc-right,
  .cc-window.cc-left {
    left: 0;
    right: 0;
  }
  .cc-window.cc-banner {
    flex-direction: column;
  }
  .cc-window.cc-banner .cc-compliance {
    flex: 1;
  }
  .cc-window.cc-floating {
    max-width: none;
  }
  .cc-window .cc-message {
    margin-bottom: 1em;
  }
  .cc-window.cc-banner {
    align-items: unset;
  }
}
/* iPhone 6 */
/* iPhone 6 plus */
/* iPhone 5 & 5S */
/* iPhone 2G - 4S */
/* Classic */
.cc-floating.cc-theme-classic {
  padding: 1.2em;
  border-radius: 5px;
}
.cc-floating.cc-type-info.cc-theme-classic .cc-compliance {
  text-align: center;
  display: inline;
  flex: none;
}
.cc-theme-classic .cc-btn {
  border-radius: 5px;
}
.cc-theme-classic .cc-btn:last-child {
  min-width: 140px;
}
.cc-floating.cc-type-info.cc-theme-classic .cc-btn {
  display: inline-block;
}
@-webkit-keyframes woodsSpringPulse {
  from {
    background-color: #17a500;
    -webkit-box-shadow: 0 0 9px #17a500;
  }
  50% {
    background-color: #21e700;
    -webkit-box-shadow: 0 0 18px #21e700;
  }
  to {
    background-color: #17a500;
    -webkit-box-shadow: 0 0 9px #17a500;
  }
}
.btn-mode-potato {
  -webkit-animation-name: potato-pulse;
  background-image: url(../img/loot/loot-throwable-potato.svg);
  border-bottom: 4px solid #563619!important;
  box-shadow: inset 0 -2px #563619 !important;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-mode-potato {
    border-bottom: 2px solid #563619!important;
  }
}
@-webkit-keyframes potato-pulse {
  from {
    background-color: #8f5827;
    -webkit-box-shadow: 0 0 9px #8f5827;
  }
  50% {
    background-color: #bc712e;
    -webkit-box-shadow: 0 0 18px #bc712e;
  }
  to {
    background-color: #8f5827;
    -webkit-box-shadow: 0 0 9px #8f5827;
  }
}
.btn-mode-desert {
  -webkit-animation-name: desert-pulse;
  border-bottom: 4px solid #853500!important;
  box-shadow: inset 0 -2px #853500 !important;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-mode-desert {
    border-bottom: 2px solid #853500!important;
  }
}
@-webkit-keyframes desert-pulse {
  from {
    background-color: #d45500;
    -webkit-box-shadow: 0 0 9px #d45500;
  }
  50% {
    background-color: #ff5c00;
    -webkit-box-shadow: 0 0 18px #ff5c00;
  }
  to {
    background-color: #d45500;
    -webkit-box-shadow: 0 0 9px #d45500;
  }
}
.btn-mode-woods {
  -webkit-animation-name: woods-pulse;
  border-bottom: 4px solid #696726!important;
  box-shadow: inset 0 -2px #696726 !important;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-mode-woods {
    border-bottom: 2px solid #696726!important;
  }
}
@-webkit-keyframes woods-pulse {
  from {
    background-color: #908d2d;
    -webkit-box-shadow: 0 0 9px #908d2d;
  }
  50% {
    background-color: #cbc526;
    -webkit-box-shadow: 0 0 18px #cbc526;
  }
  to {
    background-color: #908d2d;
    -webkit-box-shadow: 0 0 9px #908d2d;
  }
}
.btn-mode-faction {
  -webkit-animation-name: faction-pulse;
  -webkit-animation-duration: 4s;
  border-bottom: 4px solid #00448a;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-mode-faction {
    border-bottom: 2px solid #00448a;
  }
}
@-webkit-keyframes faction-pulse {
  from {
    background-color: #007eff;
    border-bottom-color: #00448a;
    -webkit-box-shadow: 0 0 9px #007eff;
  }
  50% {
    background-color: #cc0000;
    border-bottom-color: #8d0000;
    -webkit-box-shadow: 0 0 18px #cc0000;
  }
  to {
    background-color: #007eff;
    border-bottom-color: #00448a;
    -webkit-box-shadow: 0 0 9px #007eff;
  }
}
.btn-mode-savannah {
  -webkit-animation-name: savannah-pulse;
  border-bottom: 4px solid #947c1c;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-mode-savannah {
    border-bottom: 2px solid #947c1c;
  }
}
@-webkit-keyframes savannah-pulse {
  from {
    background-color: #c7a726;
    -webkit-box-shadow: 0 0 9px #c7a726;
  }
  50% {
    background-color: #fbd10b;
    -webkit-box-shadow: 0 0 18px #fbd10b;
  }
  to {
    background-color: #c7a726;
    -webkit-box-shadow: 0 0 9px #c7a726;
  }
}
.btn-mode-halloween {
  -webkit-animation-name: bloodPulse;
  border-bottom: 4px solid #2d0000;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-mode-halloween {
    border-bottom: 2px solid #2d0000;
  }
}
@-webkit-keyframes bloodPulse {
  from {
    background-color: #500000;
    -webkit-box-shadow: 0 0 9px #500000;
  }
  50% {
    background-color: #750000;
    -webkit-box-shadow: 0 0 18px #750000;
  }
  to {
    background-color: #500000;
    -webkit-box-shadow: 0 0 9px #500000;
  }
}
.btn-mode-cobalt {
  -webkit-animation-name: cobaltPulse;
  border-bottom: 4px solid #1d252e;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-mode-cobalt {
    border-bottom: 2px solid #1d252e;
  }
}
@-webkit-keyframes cobaltPulse {
  from {
    background-color: #2e3742;
    -webkit-box-shadow: 0 0 9px #2e3742;
  }
  50% {
    background-color: #4d5a68;
    -webkit-box-shadow: 0 0 18px #4d5a68;
  }
  to {
    background-color: #2e3742;
    -webkit-box-shadow: 0 0 9px #2e3742;
  }
}
#btns-quick-start {
  display: flex;
}
#btns-quick-start > a {
  display: inline-block;
}
#btns-quick-start > a:not(:last-child) {
  margin-right: 4px;
}
.team-menu-option {
  height: 40px;
  margin-bottom: 8px;
  border-radius: 5px;
  box-sizing: border-box;
}
.team-menu-options-buttons {
  display: flex;
}
.team-menu-options-buttons > a:not(:last-child) {
  margin-right: 4px;
}
#btn-start-team {
  display: block;
}
#team-desc {
  font-size: 14px;
  display: inline-block;
  margin-bottom: 10px;
  text-align: center;
  width: 85%;
}
#team-desc-text {
  display: inline;
  font-size: 16px;
  cursor: pointer;
}
#team-desc-text span#invite-link-text {
  color: white;
  font-size: 16px;
  font-weight: normal;
}
#team-desc-text span {
  color: white;
  font-size: 18px;
  font-weight: bold;
}
.copy-item {
  display: inline-block;
  position: relative;
  top: 8px;
  height: 32px;
  width: 32px;
  border: none;
  background-color: transparent;
  background-size: 32px;
  background-image: url(../img/gui/copy.svg);
  cursor: pointer;
}
.copy-toast {
  opacity: 0;
  position: fixed;
  top: 0px;
  left: 0px;
  font-size: 18px;
  color: lawngreen;
}
.hide-item {
  display: inline-block;
  position: relative;
  top: 4px;
  height: 24px;
  width: 24px;
  border: none;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 20px;
  background-image: url(../img/gui/eye.svg);
  cursor: pointer;
  margin-left: 4px;
}
/* End remove */
.server-select {
  height: 42px;
  padding: 0px 4px;
  text-align-last: center;
}
.server-select optgroup {
  color: black;
  background-color: white;
}
.server-select option {
  opacity: 0.5;
  color: black;
  height: 24px;
  width: 100px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  background-color: white;
}
.btn-disabled {
  cursor: default !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.btn-disabled:hover {
  color: #ffffff !important;
}
.btn-opaque {
  opacity: 0.5;
}
.btn-hollow {
  text-align: center;
  color: white;
  line-height: 36px;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid;
  border-color: white;
  cursor: pointer;
  flex: 1;
}
.btn-hollow-selected {
  border: 2px solid !important;
  border-color: #00ff00 !important;
  background-color: rgba(0, 0, 0, 0.35);
}
/**
 * right-column
 */
.right-column-toggle {
  background-repeat: no-repeat;
  background-size: 28px;
  cursor: pointer;
  height: 28px;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 28px;
  z-index: 3;
}
.news-toggle {
  background-image: url(../img/gui/news.svg);
}
.news-toggle > .account-alert {
  height: 18px;
  position: absolute;
  right: -2px;
  top: -4px;
  width: 18px;
}
.pass-toggle {
  background-image: url(../img/gui/pass.svg);
}
#pass-wrapper {
  display: none;
}
#news-wrapper {
  display: block;
}
/**
 * news-block
 */
#news-block {
  width: 300px;
  height: 323px;
  margin-left: 30px;
  padding: 20px;
  overflow-y: auto;
}
.news-header {
  display: block;
  margin: 0px;
  font-size: 20px;
  color: gold;
}
.news-date {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: grey;
}
.news-paragraph {
  display: block;
  margin-top: 6px;
}
.news-paragraph > .highlight {
  font-weight: bold;
  color: gold;
}
.news-paragraph > .redacted {
  font-weight: bold;
  color: red;
}
.news-image {
  margin: auto;
  width: 100%;
}
#btn-changelog {
  display: inline-block;
  width: 100%;
  height: 40px;
  margin: auto;
  color: white;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #7a7a7a;
  border-bottom: 2px solid #3e3e3e;
  box-shadow: inset 0 -2px #3e3e3e;
  line-height: 36px;
}
/**
 * pass-block
 */
.pass-column {
  height: 323px;
  margin-left: 30px;
  position: absolute;
  width: 300px;
}
#pass-loading {
  z-index: 1;
}
#pass-loading-spinner {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 12px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  border-top: 12px solid #ffffff;
  height: 48px;
  margin: auto;
  margin-top: 130px;
  width: 48px;
  transition: opacity 0.2s ease-in-out;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#pass-block {
  padding: 20px;
  z-index: -1;
}
#pass-name {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  height: 20px;
  padding: 8px;
  padding-left: 12px;
}
#pass-name > span {
  font-size: 16px;
  font-weight: bold;
}
#pass-progress {
  color: #dcdcdc;
  font-weight: bold;
  height: 114px;
  position: relative;
  top: 10px;
}
#pass-progress-level {
  background-image: url(../img/pass/pass-level-bg.svg);
  background-repeat: no-repeat;
  background-size: 72px;
  color: #ffd800;
  font-size: 36px;
  height: 72px;
  left: -6px;
  padding-top: 26px;
  position: relative;
  text-align: center;
  width: 72px;
  z-index: 1;
}
#pass-progress-bar {
  background: rgba(0, 0, 0, 0.75);
  height: 48px;
  left: 48px;
  padding: 4px;
  position: absolute;
  top: 8px;
  width: 94px;
}
#pass-progress-bar-fill {
  background: rgba(222, 255, 0, 0.75);
  height: 100%;
  width: 0%;
}
#pass-progress-xp {
  position: relative;
  text-align: center;
  top: 4px;
}
#pass-progress-xp > span {
  font-size: 14px;
}
#pass-progress-unlock-wrapper {
  background-image: url(../img/pass/pass-unlock-bg.svg);
  background-repeat: no-repeat;
  background-size: 128px;
  border-radius: 100%;
  height: 128px;
  position: absolute;
  right: -6px;
  top: -30px;
  width: 128px;
  z-index: 1;
}
#pass-progress-unlock {
  height: 100px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scaleX(-1) rotate(225deg);
          transform: translate(-50%, -50%) scaleX(-1) rotate(225deg);
  width: 100px;
  z-index: 2;
}
#pass-progress-unlock-image {
  background-repeat: no-repeat;
  background-size: 100px;
  height: 100%;
  width: 100%;
}
#pass-progress-unlock-type-wrapper {
  background-image: url(../img/pass/pass-unlock-type-bg.svg);
  background-repeat: no-repeat;
  background-size: 44px;
  height: 44px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 44px;
  z-index: 2;
}
#pass-progress-unlock-type-border {
  height: 24px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 24px;
  z-index: 2;
}
#pass-progress-unlock-type-image {
  background-repeat: no-repeat;
  background-size: 24px;
  height: 100%;
  width: 100%;
}
#pass-progress-unlock-overlay {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 3;
}
#pass-quest-wrapper {
  color: #dcdcdc;
  font-weight: bold;
  position: relative;
  top: 0px;
}
#pass-locked {
  display: none;
  position: relative;
  top: 60px;
}
#btn-pass-locked {
  background-color: #1e90ff;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  color: white;
  font-weight: normal;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  left: 50%;
  line-height: 20px;
  padding: 10px 10px;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 75%;
}
.pass-quest {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  padding: 8px;
  padding-bottom: 4px;
  position: relative;
  margin-bottom: 12px;
  min-height: 49px;
}
.pass-quest-timer {
  background-image: url(../img/gui/timer.svg);
  background-position: 6px;
  background-repeat: no-repeat;
  background-size: 28px;
  display: none;
  height: 28px;
  line-height: 30px;
  margin-top: 8px;
  opacity: 0.75;
  text-indent: 42px;
}
.pass-quest-refresh-prompt {
  display: none;
}
.pass-quest-refresh-prompt-text {
  left: 4px;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 150px;
}
.btn-pass-quest-refresh {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  border-radius: 6px;
  cursor: pointer;
  height: 28px;
  padding: 4px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 28px;
}
.btn-pass-quest-refresh:hover,
.btn-pass-quest-refresh:active {
  color: inherit;
  -webkit-filter: brightness(50%);
  filter: brightness(50%);
  transition: all 0.25s ease;
}
.pass-quest-refresh-confirm {
  background-image: url(../img/gui/checked.svg);
  border: 3px solid #00ff00;
  right: 60px;
}
.pass-quest-refresh-cancel {
  background-image: url(../img/gui/close.svg);
  border: 3px solid red;
  right: 10px;
}
.pass-quest-desc {
  line-height: 22px;
  margin: 0px 0px 6px 4px;
  min-height: 20px;
}
.pass-quest-desc-icon {
  background-repeat: no-repeat;
  background-size: 20px;
  text-indent: 24px;
}
.pass-quest-xp {
  color: #808080;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  text-align: center;
  top: 2px;
  right: 30px;
}
.pass-quest-refresh {
  background-image: url(../img/gui/reload.svg);
  background-repeat: no-repeat;
  background-size: 18px;
  cursor: pointer;
  height: 18px;
  position: absolute;
  right: 4px;
  top: 2px;
  width: 18px;
}
.pass-quest-refresh-disabled {
  opacity: 0.25 !important;
  pointer-events: none;
  cursor: initial;
}
.pass-quest-bar {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  display: inline-block;
  height: 8px;
  padding: 4px;
  width: 64%;
}
.pass-quest-bar-fill {
  background: rgba(142, 185, 0, 0.75);
  height: 100%;
  overflow: inherit !important;
  width: 0%;
}
.pass-quest-counter {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 31%;
}
.pass-quest-counter-current {
  font-size: 14px;
}
.pass-quest-counter-goal {
  font-size: 14px;
}
.pass-quest-spinner-container {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pass-quest-spinner {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  border-top: 3px solid #ffffff;
  display: none;
  height: 24px;
  width: 24px;
  transition: opacity 0.2s ease-in-out;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.pass-bg-pulse {
  -webkit-animation: pass-bg-pulse 3s alternate infinite;
}
@-webkit-keyframes pass-bg-pulse {
  0% {
    box-shadow: inset 0px 0px 5px 2px rgba(196, 255, 0, 0.5), 0px 0px 10px 2px rgba(156, 192, 35, 0.3);
  }
  100% {
    box-shadow: inset 0px 0px 5px 5px rgba(208, 236, 117, 0.75), 0px 0px 15px 5px #c3ff00;
  }
}
.pass-unlock-pulse {
  -webkit-animation: pass-unlock-pulse 1s alternate 1;
}
@-webkit-keyframes pass-unlock-pulse {
  0% {
    box-shadow: inset 0px 0px 10px 2px rgba(255, 216, 0, 0.5), 0px 0px 20px 2px rgba(192, 161, 35, 0.3);
  }
  75% {
    box-shadow: inset 0px 0px 20px 10px rgba(236, 215, 117, 0.75), 0px 0px 40px 10px #ffd800;
  }
  100% {
    box-shadow: inset 0px 0px 10px 2px rgba(255, 216, 0, 0.5), 0px 0px 20px 2px rgba(192, 161, 35, 0.3);
  }
}
.pass-text-pulse {
  -webkit-animation: pass-text-pulse 3s alternate infinite;
}
@-webkit-keyframes pass-text-pulse {
  0% {
    color: #93ad3e;
  }
  100% {
    color: #93ad3e;
    font-size: 24px;
    font-weight: bold;
    right: 16px;
    text-shadow: 2px 2px #000000;
    top: 22px;
  }
}
.pass-fade-out {
  -webkit-animation: pass-fade-out 1s;
}
@-webkit-keyframes pass-fade-out {
  0% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
/* Tooltip text */
#pass-unlock-tooltip {
  background-color: rgba(0, 0, 0, 0.95);
  border-radius: 6px;
  color: #fff;
  display: none;
  min-width: 180px;
  padding: 5px 5px;
  position: absolute;
  right: -18px;
  text-align: center;
  top: -14px;
  white-space: nowrap;
  z-index: 4;
}
.tooltip-pass-title {
  font-size: 16px;
  font-weight: normal;
  padding: 4px;
  text-transform: capitalize;
}
.tooltip-pass-desc {
  color: yellow;
  font-size: 24px;
  font-weight: bold;
  line-height: 24px;
  padding: 4px 8px 8px 8px;
  text-transform: capitalize;
}
#pass-unlock-tooltip::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.95) transparent transparent transparent;
}
/**
 * start-top-left
 */
#start-top-left {
  position: absolute;
  color: #FFF;
  top: var(--side-pad);
  left: var(--side-pad);
}
@media (max-height: 720px) {
  #start-top-left-desktop {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
}
#start-top-left > div {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
#start-top-left > img {
  position: absolute;
  bottom: 12px;
  left: 0px;
  width: 30px;
}
#featured-streamers {
  visibility: hidden;
}
.streaming-header {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  height: 28px;
  line-height: 30px;
  margin-right: 20px;
  padding: 4px;
  padding-left: 12px;
  max-width: 500px;
}
#streaming-header-title {
  color: white;
  display: inline-flex;
  font-size: 24px;
  font-weight: bold;
}
#streaming-icon {
  background-image: url(../img/icon_twitch.png);
  background-repeat: no-repeat;
  background-size: 42px;
  bottom: 12px;
  display: inline-block;
  height: 44px;
  left: initial;
  margin-bottom: -26px;
  margin-left: 6px;
  margin-right: 6px;
  position: relative;
  width: 44px;
}
#featured-streamer-template {
  display: none;
}
.featured-streamer {
  display: block;
  margin-top: 8px;
}
.streamer-tooltip .tooltiptext {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  color: #fff;
  opacity: 0.9;
  padding: 5px 0;
  position: absolute;
  text-align: center;
  bottom: -54px;
  visibility: hidden;
  width: 210px;
  z-index: 1;
}
.streamer-tooltip .tooltiptext span {
  color: #ffe400;
  font-weight: bold;
}
.streamer-tooltip:hover .tooltiptext {
  visibility: visible;
}
.btn-streamer {
  background-size: 34px;
  background-repeat: no-repeat;
  background-position: 4px 3px;
  box-sizing: border-box;
  color: gold !important;
  display: inline-block;
  font-size: 20px;
  height: 40px;
  line-height: 24px;
  margin: auto;
  position: relative;
  text-align: left;
  text-indent: 48px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  width: 250px;
}
.btn-streamer > span {
  bottom: -4px;
  color: white;
  font-size: 16px;
  left: 0px;
  position: absolute;
}
.language-select-wrap {
  border-radius: 3px;
  bottom: 50px;
  color: #FFFFFF;
  display: block;
  font-size: 10px;
  overflow: hidden;
  position: absolute;
}
.language-select-wrap:after {
  content: "\25B2";
  padding: 12px 8px;
  position: absolute;
  right: 10px;
  top: -8px;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}
.language-select {
  display: inline-flex;
  background-color: transparent;
  color: white;
  font-weight: bold;
  height: 24px;
  margin-bottom: 6px;
  margin-right: 36px;
  padding-left: 32px;
  border: none;
  border-radius: 5px;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-image: url(../img/gui/globe.svg);
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.language-select option {
  opacity: 0.5;
  color: black;
  height: 24px;
  width: 100px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
}
/**
 * start-bottom-left
 */
#start-bottom-left {
  position: absolute;
  color: #FFF;
  bottom: var(--side-pad);
  left: var(--side-pad);
}
#btn-more {
  display: inline-block;
  width: 150px;
  height: 42px;
  margin: auto;
  color: white;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #83af50;
  box-shadow: inset 0 -4px #5b7a38;
  line-height: 40px;
}
/**
 * start-bottom-middle
 */
#start-bottom-middle {
  bottom: var(--side-pad);
  color: #FFF;
  position: absolute;
  left: var(--side-pad);
  -webkit-transform: none;
          transform: none;
}
#start-bottom-middle > a {
  display: block;
  color: white;
  text-decoration: none;
}
.start-bottom-middle-tablet {
  left: var(--side-pad) !important;
  bottom: 80px !important;
  -webkit-transform: none !important;
          transform: none !important;
}
.start-bottom-middle-tablet > a {
  display: block !important;
}
input [type="image"]:focus {
  border: none;
  outline: 1px solid transparent;
  border-style: none;
}
*:focus {
  outline: 1px solid transparent;
  border-style: none;
}
/**
 * start-bottom-right
 */
#start-bottom-right {
  position: absolute;
  color: #FFF;
  bottom: var(--side-pad);
  right: var(--side-pad);
}
@media (max-height: 720px) {
  #start-bottom-right {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
}
.btn-start-option {
  vertical-align: bottom;
  margin-right: 8px;
  margin-bottom: 0px;
  width: 48px;
  height: 42px;
  display: inline-block;
  background-repeat: no-repeat;
  background-color: #7a7a7a;
  box-shadow: inset 0 -4px #3e3e3e;
}
@media (max-height: 768px) {
  .btn-start-option {
    margin-right: 2px;
  }
}
.btn-keybind {
  background-image: url(../img/gui/keyboard.svg);
  background-size: 44px;
  background-position: 2px -3px;
}
.btn-settings {
  background-image: url(../img/gui/cog.svg);
  background-size: 44px;
  background-position: 2px -3px;
}
#btn-start-fullscreen {
  background-image: url(../img/gui/minimize.svg);
  background-size: 34px;
  background-position: 7px 2px;
}
.btn-start-mute {
  background-size: 44px;
  background-position: 2px -3px;
}
.audio-on-icon {
  background-image: url(../img/gui/audio-on.svg);
}
.audio-off-icon {
  background-image: url(../img/gui/audio-off.svg);
}
.locked-on-icon {
  background-image: url(../img/gui/lock.svg);
}
.locked-off-icon {
  background-image: 'none';
}
.unlocked-on-icon {
  background-image: url(../img/gui/unlock.svg);
}
/* Begin remove */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}
.modal .highlight {
  font-size: inherit;
  font-weight: bold;
  color: gold;
}
.modal-content {
  position: fixed;
  width: 400px;
}
#modal-notification {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-notification .modal-body {
  background-color: #83af50;
}
#modal-notification a {
  font-size: 16px;
  text-decoration: underline;
  color: black;
  font-weight: bold;
}
#modal-notification .modal-body-text {
  font-size: 16px;
}
#modal-notification > .modal-content {
  text-decoration: none;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 50%;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}
#modal-settings {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}
#modal-settings .modal-content {
  right: 50px;
  bottom: 0;
  -webkit-animation-name: slideIn;
          animation-name: slideIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}
#modal-settings .modal-settings-checkbox-text {
  overflow-wrap: break-word;
}
#modal-settings > .modal-content > .modal-body > #settings-links {
  margin-left: auto;
  margin-right: auto;
  margin-top: 28px;
  text-align: center;
}
#modal-settings > .modal-content > .modal-body > #settings-links > a {
  color: white;
  text-decoration: none;
}
#modal-settings > .modal-content > .modal-body > #settings-links > .footer-after::after {
  content: '\B7';
  margin: 0 10px;
  color: #83af50;
}
#modal-refresh {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
}
#modal-refresh a {
  text-decoration: underline;
  color: black;
  font-weight: bold;
}
#modal-refresh .modal-content {
  text-decoration: none;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 50%;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}
#modal-refresh .modal-header {
  background-color: blueviolet;
}
#modal-refresh .modal-body p {
  font-size: 16px;
}
#modal-refresh .modal-footer {
  background-color: blueviolet;
}
#modal-refresh .modal-footer .close-footer {
  font-size: 18px;
}
#modal-cookie-settings {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 2;
}
#modal-cookie-settings a {
  font-size: 16px;
  color: grey;
  font-weight: bold;
}
#modal-cookie-settings > .modal-content {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  bottom: 50%;
  left: 50%;
  text-decoration: none;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 50%;
}
#modal-cookie-settings > .modal-content > .modal-body > .modal-body-text {
  font-size: 16px;
}
#modal-cookie-settings > .modal-content > .modal-footer > .close > .btn-cookies-close {
  background-color: #8bed4f;
  border-radius: 5px;
  color: black;
  height: 40px;
  line-height: 40px;
  margin: auto;
  width: 140px;
}
/* modal-customize */
#modal-customize {
  overflow: hidden;
  z-index: 4;
}
.ad-block-loadouts-left {
  height: 600px;
  left: 10%;
  pointer-events: auto;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 300px;
}
@media (max-width: 1600px) {
  .ad-block-loadouts-left {
    left: 158px;
  }
}
@media (max-width: 960px) {
  .ad-block-loadouts-left {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
}
#customize-emote-wheel {
  display: block;
  position: absolute;
  right: 50%;
  top: 32%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
}
#customize-emote-middle .ui-emote-image {
  width: 24px !important;
  height: 24px !important;
  background-size: 24px !important;
  background-image: none !important;
}
.modal-disabled {
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  position: absolute;
  width: 100%;
  z-index: 4;
}
.modal-disabled > .modal-disabled-message {
  color: white;
  font-size: 36px;
  font-weight: bold;
  line-height: 36px;
  margin-top: 104px;
  text-align: center;
}
#modal-customize-body {
  background-color: #83af50;
  color: black;
  height: auto;
}
#modal-customize-item-header {
  padding-bottom: 16px;
  padding-top: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#modal-customize-item-name {
  color: white;
  cursor: pointer;
  display: inline;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
}
#modal-customize-item-rarity {
  color: #c5c5c5;
  display: inline;
  font-size: 24px;
  font-weight: bold;
  padding-left: 6px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
#modal-customize-loading-container {
  bottom: 6px;
  float: right;
  margin: auto;
  padding: 0px;
  position: relative;
  right: 0px;
}
#modal-customize-loading {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  border-top: 3px solid #ffffff;
  height: 24px;
  width: 24px;
  transition: opacity 0.2s ease-in-out;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#modal-content-right-emote .ui-emote-parent {
  opacity: 1.0 !important;
}
#modal-content-right-emote .ui-emote-parent > .customize-item-image {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 64px;
  height: 64px;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 64px;
  z-index: 1;
}
#customize-emote-autos {
  bottom: 0px;
  display: block;
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
}
#customize-emote-autos .ui-emote-auto-icon {
  width: 42px;
  height: 208px;
  background-repeat: no-repeat;
  background-size: 42px;
  background-position: left 50% top 0px;
}
#customize-emote-autos .ui-emote-auto-trash {
  background-repeat: no-repeat;
  background-size: 24px;
  background-image: url(../img/gui/trash.svg);
  cursor: pointer;
  height: 24px;
  left: 56px;
  position: absolute;
  top: 60px;
  width: 24px;
  z-index: 3;
}
#customize-emote-autos .ui-emote-auto-chicken {
  background-image: url(../img/gui/chicken.svg);
}
#customize-emote-autos .ui-emote-auto-skull {
  background-image: url(../img/gui/skull.svg);
}
#customize-emote-autos .ui-emote-bg-circle-outer {
  width: 172px;
  height: 172px;
  background-size: 172px;
  background-image: url(../img/gui/ping-part-circle-auto-outer.svg);
}
#customize-emote-autos .ui-emote-bg-circle {
  width: 128px;
  height: 128px;
  background-size: 128px;
  background-image: url(../img/gui/ping-part-circle-auto.svg);
}
#customize-emote-autos .ui-emote-hl {
  width: 128px;
  height: 128px;
  background-size: 128px;
  background-image: url(../img/gui/ping-part-circle-auto-highlight.svg);
}
#customize-emote-win {
  bottom: 100px;
  position: relative;
  right: 80px;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
#customize-emote-death {
  bottom: 100px;
  position: relative;
  right: -80px;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.customize-col {
  z-index: 3;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
}
.customize-col-small {
  width: 80px;
  height: 80px;
}
.customize-col-large {
  width: 96px;
  height: 96px;
}
.ui-emote-top .customize-col {
  margin-top: -78px;
}
.ui-emote-right .customize-col {
  margin-left: 78px;
}
.ui-emote-bottom .customize-col {
  margin-top: 78px;
}
.ui-emote-left .customize-col {
  margin-left: -78px;
}
#modal-customize-list {
  background-color: rgba(0, 0, 0, 0.3);
  height: 362px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  width: 100%;
}
.customize-list-item {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: inline-block;
  height: 96px;
  margin-left: 8px;
  margin-top: 8px;
  position: relative;
  width: 96px;
}
.customize-list-item-unlocked {
  opacity: 0.8;
}
.customize-list-item-locked {
  background-repeat: no-repeat;
  background-image: url(../img/gui/lock.svg);
  background-size: 24px;
  background-position: 71px 68px;
  opacity: 0.4;
}
.customize-list-item:hover {
  opacity: 1.0;
  transition: all 0.1s ease;
}
.customize-list-item-selected {
  opacity: 1.0;
  border: 5px solid #00ff00;
  box-sizing: border-box;
}
.customize-list-item > .customize-item-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 64px;
  height: 100%;
  width: 100%;
}
#customize-crosshair-selected {
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  height: 192px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  width: 192px;
}
.customize-crosshair-image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  height: 192px;
  width: 192px;
}
#customize-crosshair-sliders {
  margin: 16px;
}
#customize-crosshair-sliders p {
  color: white;
  display: inline-block;
  margin-top: 8px;
  overflow-wrap: break-word;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
  width: 25%;
}
.crosshair-hex-outer {
  text-align: center;
}
.crosshair-hex-outer > span {
  font-size: 20px;
  margin-right: 4px;
}
#color-picker-hex {
  border: 2px solid darkgreen;
  border-radius: 2px;
}
#color-picker-hex:focus {
  border: 2px solid #4bc800;
}
#color-picker {
  margin-bottom: 8px;
  margin-top: 8px;
  text-align: center;
}
.crosshair-slider-container {
  margin-bottom: 12px;
  width: 100%;
}
.crosshair-slider {
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  height: 4px;
  opacity: 0.7;
  outline: none;
  transition: opacity .2s;
  width: 70%;
  -webkit-transition: .2s;
}
.crosshair-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #000000;
  border-radius: 50%;
  cursor: pointer;
  height: 25px;
  width: 25px;
}
.crosshair-slider::-moz-range-thumb {
  background: #000000;
  border-radius: 50%;
  cursor: pointer;
  height: 25px;
  width: 25px;
}
.crosshair-slider:hover {
  opacity: 1;
}
.color-checkbox-container > input[type=checkbox] {
  cursor: pointer;
  height: 18px;
  margin-left: 8px;
  -webkit-transform: scale(2);
          transform: scale(2);
  width: 18px;
}
.color-slider:hover {
  opacity: 1;
}
.color-picker,
.color-picker::before,
.color-picker::after,
.color-picker *,
.color-picker *::before,
.color-picker *::after {
  box-sizing: border-box;
}
.color-picker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
.color-picker-container {
  background: #000;
  color: #000;
  padding: 1px;
  box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.5);
  width: calc(11.5em + 3px);
  /* TODO */
}
.color-picker-container *,
.color-picker-container *::before,
.color-picker-container *::after {
  border-color: inherit;
}
.color-picker-container::after {
  content: "";
  display: table;
  clear: both;
}
.color-picker i {
  font: inherit;
  font-size: 12px;
  /* measure the color control size by measuring the text size */
}
.color-picker-h {
  position: relative;
  width: 1.5em;
  height: 10em;
  float: right;
  cursor: ns-resize;
  background: transparent url('color-picker-h.png') no-repeat 50% 50%;
  background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  background-size: 100% 100%;
  overflow: hidden;
}
.color-picker-h i {
  position: absolute;
  top: -0.25em;
  right: 0;
  left: 0;
  z-index: 3;
  display: block;
  height: .5em;
}
.color-picker-h i::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border: .25em solid;
  border-color: inherit;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.color-picker-sv {
  position: relative;
  width: 10em;
  height: 10em;
  float: left;
  margin-right: 1px;
  background: transparent url('color-picker-sv.png') no-repeat 50% 50%;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  background-size: 100% 100%;
  cursor: pointer;
}
.color-picker-sv i {
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  z-index: 3;
  display: block;
  width: .8em;
  height: .8em;
}
.color-picker-sv i::before,
.color-picker-sv i::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border: 1px solid;
  border-color: inherit;
  border-radius: 100%;
}
.color-picker-sv i::before {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  border-color: #fff;
}
.color-picker-h,
.color-picker-sv {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
.color-picker.static {
  display: inline-block !important;
  position: static !important;
  top: 0 !important;
  left: 0 !important;
}
.color-code {
  display: block;
  float: left;
  width: 100%;
  height: 2em;
  margin: 1px 0 0;
  padding: 0 .5em;
  background: #ffa;
  border: 0;
  font: normal normal 13px/2em Helmet, FreeSans, Sans-Serif;
  color: #000;
  box-sizing: border-box;
  clear: both;
}
.color-code:invalid {
  color: #f00;
}
#modal-customize-cat-title {
  color: white;
  font-size: 32px;
  left: 18px;
  position: absolute;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
  top: 12px;
}
#modal-customize-sort-wrap {
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 10px;
  overflow: hidden;
  position: absolute;
  right: 56px;
  top: 10px;
}
@media (max-height: 768px) {
  #modal-customize-sort-wrap {
    bottom: 50px;
    display: block;
    position: absolute;
  }
}
#modal-customize-sort-wrap:after {
  content: "\25BC";
  padding: 12px 8px;
  position: absolute;
  right: 10px;
  top: -8px;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}
#modal-customize-sort {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 20px;
  height: 28px;
  margin-right: 16px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}
#modal-customize-sort > option {
  opacity: 0.5;
  color: black;
  height: 24px;
  width: 100px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
}
#customize-sort-subcat {
  display: none;
}
#modal-customize-sort option {
  opacity: 0.5;
  color: black;
  height: 24px;
  width: 100px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
}
#modal-customize-close {
  position: absolute;
  right: 12px;
  top: 0px;
}
#modal-customize-close span.close-corner {
  margin-top: 10px;
  margin-right: -4px;
  width: 28px;
  height: 28px;
  color: white;
  float: right;
  font-size: 48px;
  font-weight: normal;
  background-repeat: no-repeat;
  background-image: url('../img/gui/close.svg');
  background-size: 28px;
}
#modal-customize-header {
  background-color: #547033;
  color: white;
  height: 122px;
}
#modal-customize-cat-standalone {
  margin-left: 30px;
}
#modal-customize-cat-standalone:before {
  border-bottom: solid 72px rgba(0, 0, 0, 0.5);
  content: '';
  cursor: default;
  margin-left: -20px;
  position: absolute;
  width: 8px;
}
.modal-customize-cat {
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: inline-block;
  height: 72px;
  margin-left: 4px;
  margin-top: 44px;
  position: relative;
  width: 70px;
}
.modal-customize-cat-image {
  background-repeat: no-repeat;
  background-size: 56px;
  height: 56px;
  margin: auto;
  opacity: 0.4;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 56px;
}
.modal-customize-cat-connect {
  background: #a3c082;
  bottom: -16px;
  height: 8px;
  margin: auto;
  opacity: 0.0;
  position: relative;
  width: 70px;
}
.modal-customize-cat-selected {
  background: #82ad51 !important;
}
.modal-customize-cat-image-selected {
  opacity: 1.0;
}
.modal-customize-cat-connect-selected {
  opacity: 1.0;
}
#modal-customize-header h2 {
  font-weight: bold;
}
#modal-customize-footer {
  background-color: #547033;
  color: white;
  height: 56px;
}
#modal-customize-item-source {
  color: #ffdb7b;
  font-size: 24px;
  font-style: normal;
  line-height: 28px;
}
#modal-customize-item-lore {
  color: #d2ff7b;
  font-size: 18px;
  font-style: italic;
  line-height: 28px;
}
#modal-customize-item-source {
  color: #ffdb7b;
  font-size: 24px;
  font-style: normal;
  line-height: 28px;
}
#modal-customize-item-lore {
  color: #d2ff7b;
  font-size: 18px;
  font-style: italic;
  line-height: 28px;
}
#modal-customize-unlocks {
  bottom: -60px;
  left: 0px;
  pointer-events: all;
  position: fixed;
  width: 578px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  #modal-customize-unlocks {
    bottom: 0px;
    left: 600px;
  }
}
.btn-social-unlock {
  position: relative;
  top: 8px;
  padding-left: 12px;
  padding-right: 40px;
  text-decoration: none;
  font-weight: normal;
  color: white;
  background-repeat: no-repeat;
  background-size: 36px;
  background-position: right 2px bottom 4px;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .btn-social-unlock {
    background-size: 24px;
    padding-right: 32px;
  }
}
.btn-social-unlocked {
  background-image: url(../img/gui/checked.svg);
  opacity: 0.5;
}
#btn-facebook-like-unlock {
  color: white;
}
#btn-twitter-follow-unlock {
  color: white;
}
#btn-instagram-follow-unlock {
  color: white;
}
#btn-delete-items {
  background-color: #333333;
  box-shadow: inset 0 -4px #111111;
  color: white;
}
.customize-social-unlock {
  display: none;
}
#customize-delete-items {
  display: inline-block;
}
.customize-social-tooltip {
  position: relative;
  margin-right: 8px;
}
.customize-social-tooltip .tooltiptext {
  background-color: black;
  bottom: 100%;
  border-radius: 6px;
  color: #fff;
  left: 50%;
  opacity: 0.9;
  padding: 5px;
  position: absolute;
  text-align: center;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 175px;
  visibility: hidden;
  z-index: 1;
}
.customize-social-tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.customize-social-tooltip:hover .tooltiptext {
  visibility: visible;
}
#modal-customize-wrapper {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  height: 600px;
  left: 52%;
  pointer-events: none;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 940px;
}
@media (max-width: 1600px) {
  #modal-customize-wrapper {
    left: 800px;
  }
}
@media (max-width: 1300px) {
  #modal-customize-wrapper {
    left: 740px;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.9);
            transform: translateY(-50%) translateX(-50%) scale(0.9);
  }
}
@media (max-width: 1200px) {
  #modal-customize-wrapper {
    left: 667px;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.75);
            transform: translateY(-50%) translateX(-50%) scale(0.75);
  }
}
@media (max-width: 960px) {
  #modal-customize-wrapper {
    left: 604px;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.75);
            transform: translateY(-50%) translateX(-50%) scale(0.75);
  }
}
@media (max-height: 650px) {
  #modal-customize-wrapper {
    top: 0px;
    -webkit-transform: translateX(-50%) scale(0.75);
            transform: translateX(-50%) scale(0.75);
  }
}
.modal-content-shadow {
  box-shadow: 10px 10px 8px 0px rgba(0, 0, 0, 0.75);
}
#modal-content-left {
  display: inline-block;
  left: 0px;
  pointer-events: initial;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 578px;
}
.modal-content-right {
  background: #83af50;
  border: 6px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  bottom: 0px;
  display: none;
  pointer-events: initial;
  position: fixed;
  right: 0px;
  width: 330px;
}
.modal-content-right > .modal-spacer {
  height: 100%;
  left: -24px;
  pointer-events: initial;
  position: absolute;
  width: 32px;
}
#modal-content-right-crosshair {
  height: 546px;
}
#modal-content-right-emote {
  height: 464px;
}
#modal-customize .modal-customize-text {
  margin-left: 8px;
  width: 320px;
  overflow-wrap: break-word;
}
/* The Close Button */
.close-corner {
  margin-top: 14px;
  margin-right: -8px;
  width: 32px;
  height: 32px;
  color: white;
  float: right;
  font-size: 48px;
  font-weight: normal;
  background-repeat: no-repeat;
  background-image: url('../img/gui/close.svg');
  background-size: 24px;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: 2px 16px;
  background-color: #3e3e3e;
  color: white;
  border-radius: 5px 5px 0px 0px;
}
.modal-header > h2 {
  font-size: 18px;
  font-weight: normal;
}
.modal-body {
  padding: 16px 16px;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
}
.modal-body p {
  display: inline-block;
  position: relative;
  bottom: 4px;
  font-size: 14px;
}
.modal-body input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
.modal-footer {
  padding: 2px 16px;
  background-color: #3e3e3e;
  color: white;
}
.modal-footer-round {
  border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
}
.close-footer {
  text-align: center;
  font-size: 18px;
}
/* sliders */
.slider-container {
  width: 100%;
  margin-bottom: 12px;
}
.slider-container-indented {
  width: 341px;
  margin-left: 24px;
}
.slider-container p {
  margin-bottom: 0px;
  overflow-wrap: break-word;
}
/* audio sliders */
.slider {
  -webkit-appearance: none;
  cursor: inherit;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #387c79;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #50afab;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #50afab;
  cursor: pointer;
}
.slider:hover {
  opacity: 1;
}
/* Add Animation */
@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Hide mobile-only elements */
#start-rotate-reminder,
#team-mobile-link,
#modal-hamburger,
#btn-hamburger,
#mobile-settings-front,
#language-select-mobile-wrapper {
  display: none;
}
@media (max-width: 850px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3), (max-width: 900px) and (min-resolution: 3dppx) {
  .team-menu-option {
    height: 28px;
    margin-bottom: 8px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-sizing: border-box;
  }
  .server-select {
    height: 28px;
    padding: 0px 4px;
    text-align-last: center;
  }
  .server-select optgroup {
    color: black;
    background-color: white;
  }
  .server-select option {
    opacity: 0.5;
    color: black;
    height: 28px;
    width: 100px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    background-color: white;
  }
  #team-menu-options-queue {
    /*display: inline;*/
  }
  .team-menu-options-buttons {
    display: flex;
  }
  .team-menu-options-buttons a {
    /*display: inline;*/
  }
  .team-menu-options-buttons a:not(:last-child) {
    margin-right: 4px;
  }
  #btn-start-team {
    display: block;
  }
  .btn-disabled {
    cursor: default !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }
  .btn-disabled:hover {
    color: #ffffff !important;
  }
  .btn-opaque {
    opacity: 0.5;
  }
  .btn-hollow {
    text-align: center;
    color: white;
    line-height: 24px;
    font-size: 12px;
    background-color: transparent;
    border: 2px solid;
    border-color: white;
    cursor: pointer;
    flex: 1;
  }
  .btn-hollow-selected {
    border: 2px solid !important;
    border-color: #00ff00 !important;
    background-color: rgba(0, 0, 0, 0.35);
  }
  #team-desc {
    font-size: 14px;
    display: inline-block;
    margin-bottom: 0px;
    margin-top: -12px;
    text-align: left;
    width: 100%;
  }
  #team-desc-text {
    display: inline;
    font-size: 16px;
    cursor: pointer;
  }
  #team-desc-text span#invite-link-text {
    color: white;
    font-size: 14px;
    font-weight: normal;
  }
  #team-desc-text span {
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
  #team-copy-url {
    display: inline-block;
    position: relative;
    top: 12px;
    height: 30px;
    width: 30px;
    border: none;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 24px;
    background-image: url(../img/gui/copy.svg);
    cursor: pointer;
  }
  .copy-toast {
    opacity: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    font-size: 18px;
    color: lawngreen;
  }
  .hide-item {
    display: inline-block;
    position: relative;
    top: 4px;
    height: 20px;
    width: 20px;
    border: none;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 16px;
    background-image: url(../img/gui/eye.svg);
    cursor: pointer;
    margin-left: 4px;
  }
  /**
 * news-block
 */
  #news-block {
    width: 200px;
    height: 230px;
    margin-left: 18px;
    padding: 14px;
    overflow-y: auto;
  }
  .news-header {
    display: block;
    margin: 0px;
    font-size: 18px;
    color: gold;
  }
  .news-date {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: grey;
  }
  .news-paragraph {
    display: block;
    margin-top: 3px;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 16px;
  }
  .news-paragraph > .highlight {
    font-weight: bold;
    color: gold;
  }
  .news-paragraph > .redacted {
    font-weight: bold;
    color: red;
  }
  #news-block #btn-changelog {
    display: inline-block;
    width: 100%;
    height: 40px;
    margin: auto;
    color: white;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #7a7a7a;
    border-bottom: 2px solid #3e3e3e;
    line-height: 36px;
  }
  /**
 * social-share-block
 */
  #social-share-block {
    width: 200px;
    padding: 12px 12px 6px 12px;
    margin-left: 18px;
    margin-top: 16px;
  }
  .btn-social-wrapper {
    width: 100%;
    text-align: center;
  }
  .btn-social {
    display: inline-block;
    background-size: 44px;
    height: 46px;
    width: 44px;
    margin: auto;
    margin-left: 8px;
    margin-right: 8px;
    box-sizing: border-box;
    font-size: large;
    text-align: center;
    border: 0;
    cursor: pointer;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
  }
  .btn-twitter {
    background-image: url(../img/icon_twitter.png);
    background-color: #1da1f2;
    box-shadow: inset 0 -4px #1a78b2;
  }
  .btn-facebook {
    background-image: url(../img/icon_facebook.png);
    background-color: #3b579d;
    box-shadow: inset 0 -4px #253763;
  }
  .btn-reddit {
    background-image: url(../img/icon_reddit.png);
    background-color: #b0502c;
    box-shadow: inset 0 -4px #982900;
  }
  .btn-discord {
    background-image: url(../img/icon_discord_sm.png);
    background-color: #7289da;
    box-shadow: inset 0 -4px #46558a;
  }
  .btn-darken:hover,
  .btn-darken:active {
    color: inherit;
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
    transition: all 0.25s ease;
  }
  #social-share-wrapper {
    margin-top: 8px;
    height: 18px;
    width: 100%;
    text-align: center;
  }
  .social-share-item {
    display: inline-flex;
    vertical-align: bottom;
  }
  /**
 * right-column
 */
  #pass-unlock-tooltip {
    right: -44px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .right-column-toggle {
    right: 12px;
    top: 14px;
    -webkit-transform: scale(0.67);
            transform: scale(0.67);
    -webkit-transform-origin: top right;
            transform-origin: top right;
  }
  /**
 * pass-block
 */
  .pass-column {
    margin-left: 18px;
    -webkit-transform: scale(0.67);
            transform: scale(0.67);
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
  #btn-pass-locked {
    font-size: 18px;
  }
  /**
 * start-top-left
 */
  #start-top-left {
    position: absolute;
    color: #FFF;
    top: 9.6px;
    left: 12px;
    z-index: 1;
  }
  .icon-hamburger {
    height: 36px;
    width: 36px;
    background-image: url(../img/gui/hamburger.svg);
    background-size: 36px;
    background-repeat: no-repeat;
  }
  /**
 * start-top-center
 */
  #start-top-center {
    position: absolute;
    color: #FFF;
    top: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 1;
  }
  .language-select-wrap {
    font-size: 10px;
    display: inline-flex;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    bottom: initial;
  }
  .language-select {
    display: inline-flex;
    background-color: transparent;
    color: white;
    font-size: 14px;
    width: 300px;
    height: 24px;
    margin-bottom: 10px;
    margin-right: 36px;
    padding-left: 32px;
    border: none;
    border-radius: 5px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-image: url(../img/gui/globe.svg);
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }
  .language-select option {
    opacity: 0.5;
    color: black;
    height: 24px;
    width: 100px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 5px;
  }
  .language-select-wrap:after {
    display: none;
  }
  /**
 * start-top-right
 */
  #start-top-right {
    position: absolute;
    color: #FFF;
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-transform-origin: top right;
            transform-origin: top right;
  }
  /**
 * start-bottom-left
 */
  #start-bottom-left {
    position: absolute;
    color: #FFF;
    bottom: 12px;
    left: 12px;
  }
  #btn-more {
    display: inline-block;
    width: 150px;
    height: 42px;
    margin: auto;
    color: white;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #83af50;
    line-height: 40px;
  }
  /**
 * start-bottom-right
 */
  #start-bottom-right {
    position: absolute;
    color: #FFF;
    top: 12px;
    right: 12px;
  }
  .btn-start-option {
    vertical-align: bottom;
    margin-right: 2px;
    width: 36px;
    height: 32px;
    display: inline-block;
    background-repeat: no-repeat;
    background-color: #7a7a7a;
    box-shadow: inset 0 -2px #3e3e3e;
  }
  .btn-settings {
    background-image: url(../img/gui/cog.svg);
    background-size: 32px;
    background-position: center;
  }
  #btn-start-fullscreen {
    background-image: url(../img/gui/minimize.svg);
    background-size: 34px;
    background-position: 7px 2px;
  }
  .btn-start-mute {
    background-size: 32px;
    background-position: center;
  }
  .audio-on-icon {
    background-image: url(../img/gui/audio-on.svg);
  }
  .audio-off-icon {
    background-image: url(../img/gui/audio-off.svg);
  }
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.2s;
    animation-name: fadeIn;
    animation-duration: 0.2s;
  }
  #modal-notification a {
    text-decoration: underline;
    color: black;
    font-weight: bold;
  }
  #modal-settings {
    background-color: #000000;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
  }
  #modal-settings-body {
    height: 100%;
  }
  #modal-notification {
    background-color: #000000;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.75);
    /* Black w/ opacity */
  }
  /* Modal Content */
  .modal-content {
    position: fixed;
    width: 400px;
  }
  #modal-settings .modal-content {
    right: 0px;
    bottom: 0px;
    height: 100%;
    -webkit-animation-name: slideInRight;
    -webkit-animation-duration: 0.2s;
    animation-name: slideInRight;
    animation-duration: 0.2s;
  }
  #modal-settings .modal-settings-checkbox-text {
    margin: 0px;
    overflow-wrap: break-word;
  }
  .modal-divider {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #modal-hamburger {
    z-index: 2;
  }
  #modal-hamburger .modal-content {
    left: 0px;
    bottom: 0px;
    height: 100%;
    -webkit-animation-name: slideInLeft;
    -webkit-animation-duration: 0.2s;
    animation-name: slideInLeft;
    animation-duration: 0.2s;
  }
  #modal-hamburger-body {
    height: 100%;
  }
  #modal-hamburger-bottom {
    text-align: center;
  }
  #modal-hamburger-bottom a {
    color: white;
    text-decoration: none;
  }
  #modal-hamburger-bottom .footer-after::after {
    content: '\B7';
    margin: 0 10px;
    color: #83af50;
  }
  #modal-hamburger-leaderboards {
    text-align: center;
  }
  #modal-notification .modal-content {
    top: 10%;
    bottom: 65%;
  }
  #modal-refresh .modal-content {
    top: 10%;
    bottom: 65%;
  }
  #modal-cookie-settings > .modal-content {
    bottom: 65%;
    top: 10%;
    width: 90%;
  }
  #modal-cookie-settings > .modal-content > .modal-body > .modal-body-text {
    font-size: 12px;
  }
  #settings-links {
    display: none;
  }
  .slider-container {
    width: 100%;
    margin-bottom: -6px;
  }
  .slider-container-indented {
    width: 341px;
    margin-left: 24px;
  }
  .slider-container p {
    margin-bottom: 0px;
    overflow-wrap: break-word;
  }
  /* audio sliders */
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #387c79;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #50afab;
    cursor: inherit;
  }
  .slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #50afab;
    cursor: inherit;
  }
  .slider:hover {
    opacity: 1;
  }
  /* modal-customize */
  #modal-customize-wrapper {
    height: 400px;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
            transform: translateX(-50%) translateY(-50%) scale(0.75);
  }
  #modal-customize-list {
    height: 220px;
  }
  .modal-content-right {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .close-hamburger {
    position: absolute;
    top: 9.6px;
    left: 12px;
  }
  #close-emotes {
    margin-right: 0px;
    width: 40px;
    height: 40px;
    background-size: 40px;
  }
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .modal-header {
    padding: 2px 16px;
    background-color: #3e3e3e;
    color: white;
    border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
  }
  .modal-header h2 {
    font-size: 18px;
    font-weight: normal;
  }
  .modal-body {
    padding: 16px 16px;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
  }
  #modal-notification .modal-body {
    background-color: #83af50;
  }
  .modal-body p {
    display: inline-block;
    position: relative;
    font-size: 14px;
  }
  .modal-body p.modal-slider-text {
    bottom: 0px;
  }
  .modal-body input[type=checkbox] {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    margin-left: 1px;
  }
  .modal-footer {
    padding: 8px 16px;
    background-color: #3e3e3e;
    color: white;
  }
  .modal-footer-round {
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
  }
  .modal-footer .close-footer {
    font-size: 18px;
    margin: 6px;
    text-align: center;
  }
  /* Add Animation */
  @-webkit-keyframes slideInRight {
    from {
      right: -300px;
      opacity: 0;
    }
    to {
      bottom: 0;
      opacity: 1;
    }
  }
  @keyframes slideInRight {
    from {
      right: -300px;
      opacity: 0;
    }
    to {
      bottom: 0;
      opacity: 1;
    }
  }
  @-webkit-keyframes slideInLeft {
    from {
      left: -300px;
      opacity: 0;
    }
    to {
      bottom: 0;
      opacity: 1;
    }
  }
  @keyframes slideInLeft {
    from {
      left: -300px;
      opacity: 0;
    }
    to {
      bottom: 0;
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  #start-rotate-reminder {
    display: none;
  }
  #start-rotate-reminder > span {
    font-size: 14px;
  }
  /* Hide desktop-only elements */
  #btn-more,
  #ui-leaderboard-wrapper,
  #start-top-left-desktop,
  #social-share-block-wrapper,
  #start-bottom-right,
  #start-bottom-middle,
  #modal-settings-high-res,
  .hide-on-mobile,
  #surviv_banner_728x90-ad-slot {
    display: none !important;
  }
  /* Show mobile-only elements */
  #language-select-mobile-wrapper,
  #mobile-settings-front,
  #btn-hamburger {
    display: block !important;
  }
}
@media (max-width: 850px) and (max-height: 374px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 374px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 374px) {
  #news-block {
    height: 186px;
  }
}
@media (max-width: 850px) and (max-height: 374px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 374px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 374px) {
  .pass-column {
    height: 276px;
  }
}
@media (max-width: 850px) and (max-height: 374px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 374px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 374px) {
  #pass-progress {
    top: 0px;
  }
}
@media (max-width: 850px) and (max-height: 374px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 374px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 374px) {
  #pass-progress-bar {
    width: 110px;
  }
}
@media (max-width: 850px) and (max-height: 374px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 374px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 374px) {
  #pass-progress-unlock-wrapper {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
@media (max-width: 850px) and (max-height: 374px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 374px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 374px) {
  #pass-quest-wrapper {
    top: -25px;
  }
}
@media (max-width: 850px) and (max-height: 374px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 374px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 374px) {
  .pass-quest {
    padding-bottom: 0px;
  }
}
@media (max-width: 850px) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (min-resolution: 3dppx) and (max-width: 850px) and (max-height: 320px) {
  #start-top-right {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-transform-origin: top right;
            transform-origin: top right;
  }
}
@media (max-width: 850px) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (min-resolution: 3dppx) and (max-width: 850px) and (max-height: 320px) {
  .modal-divider {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media (max-width: 850px) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (min-resolution: 3dppx) and (max-width: 850px) and (max-height: 320px) {
  .slider-container {
    margin-bottom: 10px;
  }
}
@media (max-width: 850px) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (min-resolution: 3dppx) and (max-width: 850px) and (max-height: 320px) {
  .slider {
    bottom: 10px;
    position: relative;
    width: 260px;
  }
}
@media (max-width: 850px) and (max-height: 375px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 375px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 375px) {
  #modal-customize-wrapper {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
            transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
}
@media (max-width: 850px) and (max-height: 360px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 360px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 360px) {
  #modal-customize-wrapper {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.66);
            transform: translateX(-50%) translateY(-50%) scale(0.66);
  }
}
@media (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-height: 320px), (max-width: 900px) and (min-resolution: 3dppx) and (max-height: 320px) {
  #modal-customize-wrapper {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.6);
            transform: translateX(-50%) translateY(-50%) scale(0.6);
  }
}
@media (max-width: 850px) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (max-width: 850px) and (max-height: 320px), (max-width: 900px) and (min-resolution: 3dppx) and (max-width: 850px) and (max-height: 320px) {
  .modal-body p.slider-text {
    width: 90px;
  }
}
@media (max-width: 850px) and (orientation: portrait), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait), (max-width: 900px) and (min-resolution: 3dppx) and (orientation: portrait) {
  #modal-notification .modal-content {
    top: 20%;
    bottom: 60%;
    width: 85%;
  }
  #modal-refresh .modal-content {
    top: 20%;
    bottom: 60%;
    width: 85%;
  }
  #start-bottom-right {
    top: 8px;
    right: 6px;
  }
  #start-rotate-reminder {
    display: block;
    position: absolute;
    width: 275px;
    height: 36px;
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 10px;
    text-align: center;
  }
  #start-menu-wrapper {
    display: flex;
    align-items: initial;
  }
  #start-main-center {
    margin-top: 90px;
  }
  #server-warning {
    width: 275px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #news-block {
    opacity: 0;
  }
  #start-menu {
    position: absolute;
    width: 275px;
    height: 230px;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #ad-block-left {
    position: absolute;
    width: 275px;
    height: 230px;
    top: 292px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .ad-block-med-rect {
    -webkit-transform: scale(0.92);
            transform: scale(0.92);
  }
  #team-menu {
    position: absolute;
    width: 275px;
    height: 392px;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #team-desc {
    margin-bottom: initial;
    margin-top: -16px;
  }
  #team-desc-text {
    display: inline;
    font-size: 12px;
    cursor: pointer;
  }
  #team-desc-text span#invite-link-text {
    color: white;
    font-size: 12px;
    font-weight: normal;
  }
  #team-desc-text span {
    color: white;
    font-size: 12px;
    font-weight: bold;
  }
  #team-menu-members {
    float: none;
    margin-right: auto;
    height: 180px;
    width: 240px;
  }
  .team-menu-member .name {
    width: 150px;
  }
  #team-menu-options {
    float: none;
  }
  #team-mobile-link {
    position: absolute;
    width: 275px;
    height: 230px;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #btn-team-leave {
    bottom: initial;
    top: 400px;
  }
  #leaderboard-main-title .title-one {
    font-size: 24px;
  }
  #leaderboard-main-select select {
    font-size: 12px;
    padding-left: 0px;
  }
  #modal-settings .modal-content {
    width: 100%;
  }
  #modal-hamburger .modal-content {
    width: 100%;
  }
  #modal-mobile-account .modal-content {
    width: 100%;
  }
  #modal-account-name-change > .modal-content {
    width: 100%;
  }
  #modal-customize-wrapper {
    top: 0px;
    -webkit-transform: translateX(-50%) scale(0.9);
            transform: translateX(-50%) scale(0.9);
    width: 100%;
  }
  #modal-customize-wrapper > .modal-content-right {
    width: 100%;
  }
  #modal-content-right-emote {
    bottom: initial;
    height: 300px;
    left: 50%;
    top: 364px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #customize-emote-wheel {
    top: 50%;
    left: 33%;
    right: initial;
    -webkit-transform: translateX(-50%) scale(0.8);
            transform: translateX(-50%) scale(0.8);
  }
  #customize-emote-autos {
    right: 21%;
    top: 46%;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  #customize-emote-win {
    bottom: 80px;
    right: initial;
  }
  #customize-emote-death {
    bottom: -90px;
    right: initial;
  }
  #modal-content-left {
    top: 0px;
    -webkit-transform: initial;
            transform: initial;
    width: 100%;
  }
  #modal-customize-cat-title {
    font-size: 24px;
  }
  #modal-customize-close > .close {
    background-size: 28px;
    height: 28px;
    margin-top: 8px;
    width: 28px;
  }
  #modal-customize-footer {
    display: none;
  }
  #modal-customize-item-header {
    padding-bottom: 12px;
    padding-top: 4px;
  }
  #modal-customize-item-name {
    font-size: 22px;
  }
  #modal-customize-item-rarity {
    font-size: 18px;
  }
  #modal-customize-list {
    height: 164px;
    margin: auto;
  }
  #modal-account-avatar .modal-content {
    width: 580px;
  }
  #modal-body-account-avatar {
    height: 820px;
  }
  #modal-account-avatar-list {
    margin: auto;
  }
  #customize-account-avatars {
    top: 71%;
    right: 28%;
  }
  #right-column {
    display: none;
  }
  .account-details-top-buttons {
    display: none;
  }
  #modal-create-account > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    width: 100%;
  }
}
@media (max-width: 850px) and (orientation: portrait) and (min-height: 668px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) and (min-height: 668px), (max-width: 900px) and (min-resolution: 3dppx) and (orientation: portrait) and (min-height: 668px) {
  #start-main-center {
    margin-top: 36px;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
}
@media (max-width: 850px) and (orientation: portrait) and (max-height: 667px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) and (max-height: 667px), (max-width: 900px) and (min-resolution: 3dppx) and (orientation: portrait) and (max-height: 667px) {
  #start-row-header {
    background-size: 170px;
    width: 170px;
    height: 72px;
  }
  #start-main-center {
    margin-top: 36px;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  #server-warning {
    top: 72px;
  }
  #start-row-top {
    margin-top: 0px;
  }
  #start-menu {
    top: 42px;
  }
  #start-top-right {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-transform-origin: top right;
            transform-origin: top right;
  }
  #team-mobile-link {
    top: 42px;
  }
  #ad-block-left {
    top: 266px;
    -webkit-transform: translateX(-50%) scale(0.9);
            transform: translateX(-50%) scale(0.9);
  }
}
@media (max-width: 850px) and (orientation: portrait) and (max-height: 667px) and (min-height: 569px) and (max-width: 360px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) and (max-height: 667px) and (min-height: 569px) and (max-width: 360px), (max-width: 900px) and (min-resolution: 3dppx) and (orientation: portrait) and (max-height: 667px) and (min-height: 569px) and (max-width: 360px) {
  #start-main-center {
    margin-top: -24px;
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  #start-top-right {
    bottom: 52px;
    top: initial;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
  #start-bottom-right-wrapper {
    display: none;
  }
  #leaderboard-main-title {
    display: none;
  }
  #mobile-settings-front {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
  }
}
@media (max-width: 850px) and (orientation: portrait) and (max-height: 568px) and (max-width: 375px), (max-width: 900px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) and (max-height: 568px) and (max-width: 375px), (max-width: 900px) and (min-resolution: 3dppx) and (orientation: portrait) and (max-height: 568px) and (max-width: 375px) {
  #start-main-center {
    margin-top: -36px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  #start-top-right {
    bottom: 48px;
    top: initial;
    -webkit-transform: scale(0.63);
            transform: scale(0.63);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
  #start-bottom-right-wrapper {
    display: none;
  }
  #leaderboard-main-title {
    display: none;
  }
  #mobile-settings-front {
    -webkit-transform: scale(0.67);
            transform: scale(0.67);
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
  }
  #modal-customize-list {
    height: 110px;
  }
  #modal-content-right-emote {
    height: 280px;
    top: 310px;
  }
}