*,
:after,
:before {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: sans-serif;
  line-height: 1.15;
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}
body {
  background-color: #fff;
  color: #212529;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, 'Roboto',
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  margin-top: 0;
}
p {
  margin-bottom: 1rem;
  margin-top: 0;
}
abbr[data-original-title],
abbr[title] {
  border-bottom: 0;
  cursor: help;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}
address {
  font-style: normal;
  line-height: inherit;
}
address,
dl,
ol,
ul {
  margin-bottom: 1rem;
}
dl,
ol,
ul {
  margin-top: 0;
}
ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  background-color: transparent;
  color: #007bff;
  text-decoration: none;
}
a:hover {
  color: #0056b3;
  text-decoration: underline;
}
a:not([href]),
a:not([href]):hover {
  color: inherit;
  text-decoration: none;
}
code,
kbd,
pre,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
    Courier New, monospace;
  font-size: 1em;
}
pre {
  -ms-overflow-style: scrollbar;
  margin-bottom: 1rem;
  margin-top: 0;
  overflow: auto;
}
figure {
  margin: 0 0 1rem;
}
img {
  border-style: none;
}
img,
svg {
  vertical-align: middle;
}
svg {
  overflow: hidden;
}
table {
  border-collapse: collapse;
}
caption {
  caption-side: bottom;
  color: #6c757d;
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
  text-align: left;
}
th {
  text-align: inherit;
}
label {
  display: inline-block;
  margin-bottom: 0.5rem;
}
button {
  border-radius: 0;
}
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[role="button"] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
textarea {
  overflow: auto;
  resize: vertical;
}
fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}
legend {
  color: inherit;
  display: block;
  font-size: 1.5rem;
  line-height: inherit;
  margin-bottom: 0.5rem;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  width: 100%;
}
progress {
  vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: none;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
output {
  display: inline-block;
}
summary {
  cursor: pointer;
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none !important;
}
a {
  color: #00b0e1;
}
::-webkit-resizer {
  display: none;
}
::placeholder {
  color: #b9b9b9;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #b9b9b9;
}
::-ms-input-placeholder {
  color: #b9b9b9;
}
::-webkit-scrollbar {
  width: 1vmin;
}
::-webkit-scrollbar-track {
  background: #00000000;
}
::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 0.2vmin;
}
::-webkit-scrollbar-thumb:hover {
  background: #1a1a1a;
}
::-webkit-color-swatch-wrapper {
  border-radius: 0.5vmin;
  padding: 0;
}
::-webkit-color-swatch {
  border: 0;
  border-radius: 0;
  border-radius: 0.5vmin;
}
::-moz-color-swatch,
::-moz-focus-inner {
  border: 0;
  border-radius: 0.5vmin;
}
::-moz-focus-inner {
  border-radius: 0.5vmin;
  padding: 0;
}
input {
  -webkit-appearance: none;
}
body,
html {
  -webkit-font-smoothing: antialiased;
  font-family: 'Roboto';
  font-size: 1vmin;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  padding: 0;
  touch-action: none;
}
hr {
  border: 0;
  border-top: 0.2vmin solid rgba(0, 0, 0, 0.1);
  height: 1vmin;
  width: 100%;
}
h1 {
  font-size: 3.5vmin;
  text-align: center;
}
h1,
h2 {
  font-family: 'Roboto';
  font-weight: 700;
}
h2 {
  text-align: left;
}
h2,
label,
p {
  font-size: 2vmin;
}
label,
p {
  font-family: 'Roboto';
  font-weight: 400;
  margin: 1vmin;
  text-align: center;
}
input {
  outline: none;
}
#hud {
  opacity: 1;
  transition: opacity 0s;
}
#hud.hide {
  opacity: 0;
}
#buttons button,
#connecting-text,
#full-connecting-text,
#game-over-killer,
#game-over-stats,
#game-over-title,
#profile-screen-achievements-title,
#profile-screen-description,
#profile-screen-profile-name,
#profile-screen-profile-star-counter > div,
#profile-screen-statistics > div > div {
  text-shadow: -0.3vmin -0.3vmin 0 #000, 0 -0.3vmin 0 #000,
    0.3vmin -0.3vmin 0 #000, 0.3vmin 0 0 #000, 0.3vmin 0.3vmin 0 #000,
    0 0.3vmin 0 #000, -0.3vmin 0.3vmin 0 #000, -0.3vmin 0 0 #000;
}
#game-over-killer,
#game-over-stats,
#game-over-title {
  color: #fff;
  font-family: 'Roboto';
  font-weight: 700;
  height: 10vmin;
  margin-left: 0;
  margin-right: 0;
  width: 50vmin;
}
#continue-button,
#game-over-killer,
#game-over-stats,
#game-over-title {
  font-size: 2.5vmin;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}
#continue-button {
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  font-weight: bolder;
  margin-top: 25vmin;
  padding: 0.25vmin 1vmin;
  transition: top 1s, background-color 0.2s !important;
}
#continue-button:hover {
  background-color: #e6e6e6;
}
#continue-button,
#game-over > p {
  top: 50vh;
  transition: top 1s;
}
#game-over.hide > #continue-button,
#game-over.hide > p {
  top: -50vmin;
  transition: top 0.5s;
}
#game-over {
  opacity: 1;
  transition: opacity 2s;
}
#game-over.hide {
  opacity: 0;
  transition: opacity 1s;
}
#overlay-canvas {
  opacity: 1;
  top: 0;
  transition: top 1s, opacity 2s;
}
#overlay-canvas.hide {
  opacity: 0;
  top: -100vmin;
  transition: top 0.5s, opacity 1s;
}
#game-over-title {
  font-size: 6vmin;
  margin-top: -40vmin;
}
#game-over-killer {
  margin-top: -32vmin;
}
#game-over-stats {
  margin-top: 6vmin;
}
button {
  background-color: #fff;
  border: none;
  border-radius: 0.5vmin;
  color: #000;
  font-family: 'Roboto';
  font-size: 2vmin;
  font-weight: 700;
  outline: none;
  padding: 0.3vmin 4vmin;
  transition: background-color 0.2s ease;
}
textarea {
  padding: 0.2vmin;
  resize: none;
}
textarea,
textarea:focus {
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  outline: none !important;
}
button:hover {
  background-color: #e6e6e6;
}
button:focus {
  outline: none;
}
.hidden {
  display: none !important;
}
#achievement-canvas,
#darkness-canvas,
#game-canvas,
#hud-canvas,
#overlay-canvas,
#ui-canvas {
  height: 100%;
  position: absolute;
  width: 100%;
}
#overlay-canvas {
  pointer-events: none;
}
.achievement {
  height: 16.66vmin;
  margin: 1vmin;
  width: 50vmin;
}
#background {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  opacity: 1;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.6s ease;
}
#background.hide {
  opacity: 0;
}
#left-buttons,
#top-buttons {
  flex-direction: column;
}
#left-buttons,
#right-buttons,
#top-buttons {
  align-items: center;
  display: flex;
  position: fixed;
}
#right-buttons {
  flex-direction: row;
}
#top-buttons {
  left: 100%;
  top: 0;
  transform: translateY(0) translateX(-100%);
  -ms-transform: translateY(0) translateX(-100%);
  -webkit-transform: translateY(0) translateX(-100%);
}
#right-buttons {
  left: 100%;
  top: 100%;
  transform: translateY(-100%) translateX(-100%);
  -ms-transform: translateY(-100%) translateX(-100%);
  -webkit-transform: translateY(-100%) translateX(-100%);
}
#left-buttons {
  left: 0;
  top: 100%;
  transform: translateY(-100%) translateX(0);
  -ms-transform: translateY(-100%) translateX(0);
  -webkit-transform: translateY(-100%) translateX(0);
}
#buttons button {
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 3vmin;
  font-weight: bolder;
  height: 5vmin;
  margin: 0.5vmin;
  padding-left: 1vmin;
  padding-right: 1vmin;
  text-align: center;
  white-space: nowrap;
  width: auto;
}
#buttons button:hover {
  box-shadow: inset 0 0 0 10em hsla(0, 0%, 100%, 0.3), 0 0 0 0.4vmin #000;
}
.button-shadow {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.5vmin;
  bottom: 0;
  height: 2.5vmin;
  left: 0;
  margin: 0.5vmin;
  padding: 0;
  position: absolute;
  right: 0;
  width: auto;
}
#button-account,
#button-achievements,
#button-discord,
#button-fandom,
#button-edit,
#button-reddit,
#button-settings {
  max-width: 5vmin;
  padding: 0 !important;
  text-align: center;
  width: 5vmin;
}
.tooltip.right {
  left: 0;
  text-align: left;
  transition: opacity 0.2s, left 0.2s;
}
.tooltip.left {
  right: 0;
  text-align: right;
  transition: opacity 0.2s, right 0.2s;
}
.tooltip.top {
  margin-bottom: 0;
  text-align: center;
  transition: opacity 0.2s, margin-bottom 0.2s;
}
.tooltip.bottom {
  margin-top: 0;
  text-align: center;
  transition: opacity 0.2s, margin-top 0.2s;
}
.tooltip.bottom.higher {
  margin-top: -2;
}
.tooltip {
  background-color: #000;
  border-radius: 0.5vmin;
  color: #fff;
  font-size: 2vmin;
  opacity: 0;
  padding: 0 0.5vmin;
  pointer-events: none;
  position: absolute;
  width: max-content;
  z-index: 1;
}
.tooltip.relative {
  position: absolute;
  transform: translateX(-50%);
}
.relative-tooltip-container {
  position: relative;
}
.tooltip-trigger:hover .tooltip {
  opacity: 1;
}
.tooltip-trigger:hover .tooltip.left {
  right: 7vmin;
}
.tooltip-trigger:hover .tooltip.right {
  left: 7vmin;
}
.tooltip-trigger:hover .tooltip.top {
  margin-bottom: 1vmin;
}
.tooltip-trigger:hover .tooltip.bottom {
  margin-top: 1vmin;
}
.tooltip-trigger:hover .tooltip.bottom.higher {
  margin-top: -3.6vmin;
}
#button-account img,
#button-achievements img,
#button-discord img,
#button-fandom img,
#button-edit img,
#button-reddit img,
#button-settings img {
  display: block;
  height: 5vmin;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 5vmin;
}
#button-settings {
  background-color: #888;
}
#button-account {
  background-color: #0092c3;
}
#button-feedback {
  background-color: #b58eff;
}
#button-bugs {
  background-color: #fdcdac;
}
#button-reddit {
  background-color: #ff4500;
}
#button-discord {
  background-color: #5865f2;
}
#button-fandom {
  background-color: #fa015a;
}
#button-edit {
  background-color: #00b0e1;
}
#button-achievements {
  background-color: #ffe449;
}
#left-buttons :first-child > div.button-shadow {
  bottom: 6vmin;
}
#respawn-text {
  align-items: center;
  color: #fff;
  font-family: 'Roboto';
  font-size: 2vmin;
  font-weight: 700;
  height: 5vmin;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 9vmin;
  transition: opacity 0.5s;
  width: 100%;
}
#play-menu-wrapper,
#respawn-text {
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
#play-menu-wrapper {
  position: fixed;
  top: 50%;
}
#play-menu.hide {
  opacity: 0;
  pointer-events: none;
}
#play-menu {
  align-items: center;
  background-color: #fff;
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  display: flex;
  flex-direction: row;
  opacity: 1;
  padding: 0.3vmin;
  text-align: center;
  transition: opacity 0.5s, top 0.5s;
}
#play-menu p {
  margin-bottom: 0;
}
#play-menu button,
#play-menu input,
#play-menu select {
  border: none;
  font-family: 'Roboto';
  font-size: 3vmin;
  font-weight: 700;
  height: 5vmin;
  max-height: 5vmin;
  outline: none;
  padding: 0;
  text-align: left;
}
#play-menu input {
  background-color: rgba(255, 0, 0, 0);
  padding-left: 1vmin;
}
#play-menu select {
  border-radius: 0.5vmin;
  height: 5vmin;
}
#play-menu button,
#play-menu select {
  background-color: #38b764;
  color: #fff;
  padding-left: 0.5vmin;
  padding-right: 0.5vmin;
}
#play-menu button {
  margin-left: 0.5vmin;
}
#play-menu input {
  width: 30vmin;
}
#play-menu button:hover {
  background-color: #48f083;
}
#play-menu-wrapper {
  opacity: 1;
  top: 55vh;
  transition: opacity 2s, top 1s;
}
#play-menu-wrapper.hide {
  opacity: 0;
  top: -10vmin;
  transition: opacity 1s, top 0.5s;
}
#connecting-text,
#full-connecting-text {
  color: #fff;
  font-family: 'Roboto';
  font-size: 6vmin;
  font-weight: 700;
  height: 13vmin;
  left: 50%;
  opacity: 1;
  position: absolute;
  text-align: center;
  top: 4.5vmin;
  transform: translateY(-50%) translateX(-50%);
  transition: opacity 1s, top 1s;
  width: 40vmin;
  z-index: -1;
}
#full-connecting-text {
  font-size: 10vmin;
  height: auto;
  left: 50vw;
  position: fixed;
  top: 50vh;
  width: 100vw;
  z-index: 0;
}
#connecting-text.hide,
#full-connecting-text.hide {
  opacity: 0;
  transition: opacity 0.5s, top 0.5s;
}
#full-connecting-text.hide {
  top: -5vh;
}
#title {
  font-size: 15vmin;
  top: 1vmin;
}
#subtitle,
#title {
  -webkit-text-stroke-width: 0.3vmin;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  align-items: center;
  color: #fff;
  font-family: 'Roboto';
  font-weight: bold;
  height: 5vmin;
  left: 50%;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
#subtitle {
  font-size: 4vmin;
  top: 10vmin;
  transition: opacity 0.5s, top 0.5s;
}
#changelog.hide,
#subtitle.hide {
  opacity: 0;
}
#account-text,
#changelog,
#debug-mode {
  height: 50vmin;
  left: 1vmin;
  position: fixed;
  top: 1vmin;
  transition: opacity 0.5s, top 0.5s;
  width: 35vw;
}
#account-text,
#changelog,
#changelog > p,
#debug-mode,
#debug-mode > p {
  color: #fff;
  font-family: 'Roboto';
  font-size: 2vmin;
  font-weight: 700;
  text-align: left;
}
#debug-mode {
  font-size: 3vmin;
  line-height: 1min;
  top: 17vmin;
}
#debug-mode.hide {
  display: none !important;
}
#account-text,
#changelog,
#debug-mode,
#respawn-text,
#server-select-dropdown-visual,
#tank-editor-subtitle,
#tank-editor-title {
  text-shadow: -0.2vmin -0.2vmin 0 #000, 0 -0.2vmin 0 #000,
    0.2vmin -0.2vmin 0 #000, 0.2vmin 0 0 #000, 0.2vmin 0.2vmin 0 #000,
    0 0.2vmin 0 #000, -0.2vmin 0.2vmin 0 #000, -0.2vmin 0 0 #000;
}
#buttons,
#changelog,
#connecting-text,
#debug-mode,
#full-connecting-text,
#game-over-killer,
#game-over-stats,
#game-over-title,
#leaderboard td,
#play-menu button,
#subtitle,
#tank-editor-dropdown,
#tank-editor-title,
#title {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#chat {
  color: #fff;
  display: flex;
  position: fixed;
  right: 10px;
  top: 210px;
}
#chat button,
#chat input {
  background-color: #0f0f0fc0;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 18px;
  padding: 3px;
  text-align: left;
  user-select: none;
  width: 200px;
}
#chat button {
  font-size: 0;
  height: 50px;
  width: 50px;
}
#chat button > img {
  height: inherit;
  width: inherit;
}
#server-select-dropdown {
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: 'Roboto';
  font-size: 3vmin;
  font-size: 2vmin;
  font-weight: 700;
  max-height: 5vmin;
  opacity: 0;
  outline: none;
  padding: 0;
  text-align: center;
}
#server-select-dropdown,
#server-select-dropdown-visual {
  height: 5vmin;
  left: 50%;
  position: absolute;
  top: -7vmin;
  transform: translateX(-50%);
  width: 39vmin;
}
#server-select-dropdown-visual {
  background-color: silver;
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  pointer-events: none;
  transition: background-color 0.3s;
}
#server-select-dropdown-visual-text {
  align-items: center;
  color: #fff;
  display: flex;
  font-family: 'Roboto';
  font-size: 2vmin;
  font-weight: 700;
  height: 5vmin;
  justify-content: center;
  left: 50%;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  width: 39vmin;
}
#server-select-dropdown-visual-shadow {
  background-color: #a2a2a2;
  border-radius: 0.5vmin;
  content: "";
  height: 2.5vmin;
  left: 50%;
  position: absolute;
  top: 2.5vmin;
  transform: translateX(-50%);
  transition: background-color 0.3s;
  width: 39vmin;
}
#server-select {
  left: 50%;
  position: absolute;
  top: 0;
  transition: top 0.2s;
}
#server-select.high {
  top: -7vmin;
}
#server-select-title {
  -webkit-text-stroke-width: 0.3vmin;
  paint-order: stroke fill;
  -webkit-text-stroke-color: #000;
  align-items: center;
  color: #fff;
  font-family: 'Roboto';
  font-size: 5.5vmin;
  font-weight: bold;
  height: 5vmin;
  pointer-events: none;
  text-align: center;
  top: -19vmin;
}
#server-select-canvas,
#server-select-title {
  left: 50%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
}
#server-select-canvas {
  height: 13vmin;
  top: -8vmin;
  width: 40vmin;
  z-index: 1;
}
#signed-in-star-counter {
  position: absolute;
  right: 0;
  text-align: right;
  top: 4vmin;
  transition: opacity 2s;
  width: max-content;
}
#signed-in-star-counter.hide {
  opacity: 0;
  transition: opacity 0s;
}
#signed-in-star-counter > div {
  display: inline;
}
#signed-in-star-counter > img {
  height: 4vmin;
  transform: translateY(-0.4vmin);
  width: 4vmin;
}
.collapse-button {
  box-shadow: 0 0 0 0.4vmin #000;
  height: 3vmin;
  margin-left: 1vmin;
  padding: 0;
  transform: translateY(-0.1vmin);
  width: 3vmin;
}
.collapse-button > div {
  font-size: 3vmin;
  height: 3vmin;
  line-height: 3vmin;
}
#captcha {
  display: flex;
  justify-content: center;
  opacity: 1;
  position: absolute;
  transform-origin: top;
  transition: opacity 0.5s;
  width: 100%;
}
#captcha.hide {
  opacity: 0;
  pointer-events: none;
}
#tank-editor-menu {
  opacity: 1;
  transition: opacity 0.5s;
}
#tank-editor-menu.hide {
  opacity: 0;
  pointer-events: none;
}
#tank-editor-menu.hide > .tank-editor-left {
  left: -50%;
  transition: left 0.5s;
}
#tank-editor-menu.hide > .tank-editor-right {
  right: -50%;
  transition: right 0.5s;
}
#tank-editor-title {
  font-size: 4vmin;
}
#tank-editor-subtitle,
#tank-editor-title {
  color: #fff;
  font-family: 'Roboto';
  font-weight: 700;
  padding: 1vmin, 1vmin;
  text-align: left;
  top: 1vmin;
}
#tank-editor-subtitle {
  font-size: 2.5vmin;
}
.tank-editor-color {
  background-color: #000 !important;
  height: 3vmin;
  margin-left: 1vmin;
  padding: 0 !important;
  transform: translateY(1vmin);
  width: 3vmin;
}
.tank-editor-left,
.tank-editor-right {
  background-color: hsla(0, 0%, 6%, 0.5);
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  overflow: auto;
  padding: 1vmin;
  position: fixed;
  top: 0.5vmin;
}
.tank-editor-left {
  left: 0.5vmin;
  max-height: 93vmin;
  transition: left 0.2s;
}
.tank-editor-right {
  max-height: 99vmin;
  right: 0.5vmin;
  transition: right 0.2s;
}
.tank-editor-button,
.tank-editor-input,
.tank-editor-input-large,
.tank-editor-select {
  padding: 1vmin, 1vmin;
}
.tank-editor-button {
  background-color: #202020;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 1.8vmin;
  font-weight: 400;
  height: auto;
  margin: 1vmin 0.5vmin 0.5vmin;
  padding-left: 1vmin;
  padding-right: 1vmin;
  text-align: center;
  white-space: nowrap;
  width: auto;
}
.tank-editor-button:hover {
  background-color: #313131;
}
.tank-editor-color,
.tank-editor-input,
.tank-editor-input-large,
.tank-editor-select {
  word-wrap: break-word;
  background-color: #0f0f0fc0;
  border: none;
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 1.5vmin;
  font-weight: 400;
  outline: none;
  padding: 0.25vmin;
  text-align: left;
}
.tank-editor-input-large {
  height: 20vmin;
  overflow-x: hidden;
  position: absolute;
  width: 40vmin;
}
.tank-editor-input {
  width: 8vmin;
}
.tank-editor-input.wide {
  width: 20vmin;
}
.tank-editor-dropdown {
  background-color: #0f0f0fc0;
  border: none;
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  font-family: 'Roboto';
  height: 3vmin;
  max-height: 3vmin;
  outline: none;
  padding: 0 0.5vmin;
  text-align: left;
}
#tank-editor-text,
.tank-editor-dropdown {
  color: #fff;
  font-size: 2vmin;
}
#tank-editor-text {
  margin: 1vmin;
}
.tank-editor-left > #tank-editor-subtitle,
.tank-editor-left > #tank-editor-text,
.tank-editor-left > #tank-editor-title {
  left: 2vmin;
  text-align: left;
}
.tank-editor-right > #tank-editor-subtitle,
.tank-editor-right > #tank-editor-text,
.tank-editor-right > #tank-editor-title {
  right: 2vmin;
  text-align: right;
}
.tank-editor-left > .tank-editor-input,
.tank-editor-left > .tank-editor-input-large,
.tank-editor-left > .tank-editor-select {
  left: 1vmin;
}
.tank-editor-right > .tank-editor-input,
.tank-editor-right > .tank-editor-input-large,
.tank-editor-right > .tank-editor-select {
  right: 1vmin;
}
.tank-editor-left > .tank-editor-button {
  float: left;
}
.tank-editor-right > .tank-editor-button {
  float: right;
}
.tank-editor-collapsible {
  background-color: #202020;
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 2.5vmin;
  font-weight: 400;
  height: auto;
  margin: 0.3vmin 0.3vmin 0.6vmin;
  padding-left: 1vmin;
  padding-right: 1vmin;
  text-align: left;
  white-space: nowrap;
  width: auto;
}
.tank-editor-collapsible.active,
.tank-editor-collapsible:hover {
  background-color: #464646;
}
.tank-editor-collapsible:after {
  color: #fff;
  content: "\02795";
  font-family: 'Roboto';
  font-size: 2.5vmin;
  right: 0;
}
.active:after {
  content: "\2796";
}
.tank-editor-collapsible.small {
  font-size: 1.5vmin;
  margin-top: 0.5vmin;
  max-width: fit-content;
}
.tank-editor-collapsible.small:after {
  font-size: 1.5vmin;
}
.tank-editor-collapsible-content {
  display: none;
  flex-direction: column;
}
.tank-editor-collapsible-element {
  background-color: #202020;
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 1.8vmin;
  font-weight: 400;
  height: auto;
  margin: 0.6vmin;
  padding-left: 0.5vmin;
  padding-right: 0.5vmin;
  text-align: left;
  transition: box-shadow 0.2s;
  white-space: nowrap;
  width: fit-content;
}
.tank-editor-collapsible-element:hover {
  background-color: #353535;
}
.tank-editor-collapsible-element.selected {
  background-color: #4e4e4e;
  box-shadow: 0 0 0 0.4vmin #fff;
}
.tank-editor-collapsible-element.small {
  font-size: 1.5vmin;
}
#tank-editor-tooltip {
  background-color: #000;
  border-radius: 0.5vmin;
  color: #fff;
  font-size: 1.5vmin;
  left: 50%;
  max-width: 50vmin;
  padding: 1vmin;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translate(-50%, 5vmin);
  transition: opacity 0.2s, left 0.2s, transform 0.2s;
  transition: opacity 0.2s, transform 0.2s;
  width: 30vmin;
  z-index: 1;
}
#tank-editor-tooltip.hide {
  opacity: 0;
  transform: translate(-50%, 7vmin);
}
.large-input {
  font-size: 2vmin !important;
  height: auto !important;
  width: 30vmin !important;
}
.modal {
  height: 0;
  padding: 1vmin;
  position: fixed;
  width: 0;
  z-index: 2;
}
.modal,
.modal:before {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.modal:before {
  background-color: rgba(0, 0, 0, 0.5);
  content: "";
  display: inline-block;
  height: 120vh;
  pointer-events: inherit;
  position: absolute;
  transition: background-color 0.5s;
  width: 120vw;
}
.modal.hide:before {
  background-color: transparent;
  pointer-events: none;
}
.modal > div {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-weight: 700;
  left: 50%;
  opacity: 1;
  padding: 2vmin 3vmin;
  position: fixed;
  text-align: center;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transition: top 0.5s, opacity 0.5s;
}
.modal.hide > div {
  opacity: 0;
  pointer-events: none;
  top: -100%;
}
.modal > div * {
  margin-bottom: 0.5vmin;
  margin-top: 0.5vmin;
}
.modal > div button {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 2vmin;
  font-size: 1.8vmin;
  font-weight: 700;
  height: auto;
  margin-left: 1vmin;
  margin-right: 1vmin;
  padding-left: 1vmin;
  padding-right: 1vmin;
  text-align: center;
  white-space: nowrap;
  width: auto;
}
.modal > div button:hover {
  background-color: rgba(32, 32, 32, 0.5);
}
.modal > div input,
.modal > div textarea {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.5vmin;
  border-style: none;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
  font-family: 'Roboto';
  font-size: 1.5vmin;
  font-weight: 400;
  padding: 0.5vmin;
  transition: box-shadow 0.5s;
}
.modal > div input.error,
.modal > div textarea.error {
  box-shadow: 0 0 0 0.4vmin #f04f54;
}
.modal > div textarea {
  height: 20vmin;
  width: 40vmin;
}
.modal > div input {
  height: 2vmin;
  width: 40vmin;
}
.modal > div hr {
  border-top: 0.2vmin solid #fff;
}
.switch {
  display: inline-block;
  height: 4vmin;
  position: relative;
  width: 8vmin;
}
.switch input {
  height: 0;
  opacity: 0;
  width: 0;
}
.switch-button {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4vmin;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}
.switch-button:before {
  background-color: #fff;
  border-radius: 50%;
  bottom: 0.5vmin;
  content: "";
  height: 2vmin;
  left: 0.5vmin;
  position: absolute;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform -ms-transform 0.4s 0.4s;
  width: 2vmin;
}
input:checked + .switch-button {
  background-color: #38b764;
}
input:checked + .switch-button:before {
  -webkit-transform: translateX(4vmin);
  -ms-transform: translateX(4vmin);
  transform: translateX(5vmin);
}
.slider {
  display: flex;
  flex-direction: column;
  margin: 2vmin;
}
.slide,
.slider {
  width: auto !important;
}
.slide {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4vmin !important;
  box-shadow: none !important;
  height: 3vmin !important;
  outline: none;
}
.slide::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  height: 2vmin;
  width: 2vmin;
}
.slide::-moz-range-thumb {
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  height: 2vmin;
  width: 2vmin;
}
.loading-sign {
  display: inline-block;
  height: 8vmin;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  opacity: 1;
  overflow: hidden;
  padding: 0;
  position: relative;
  transform: scale(1);
  transition: height 0.5s, opacity 0.5s;
  width: 8vmin;
}
.loading-sign.hide {
  height: 0;
  opacity: 0;
}
.loading-sign div {
  animation: loading-sign 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border: 0.8vmin solid transparent;
  border-radius: 50%;
  border-top-color: #fff;
  box-sizing: border-box;
  display: block;
  height: 6.4vmin;
  margin: 0.8vmin;
  position: absolute;
  width: 6.4vmin;
}
.loading-sign div:first-child {
  animation-delay: -0.45s;
}
.loading-sign div:nth-child(2) {
  animation-delay: -0.3s;
}
.loading-sign div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes loading-sign {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
.keybind > label,
.slide > label {
  white-space: nowrap;
}
.keybind > button.changing {
  background-color: rgba(62 62 62, 0.5);
  box-shadow: 0 0 0 0.4vmin #fff;
}
#account-text {
  font-size: 3vmin;
  height: 1vmin;
  left: auto;
  position: absolute;
  right: 7vmin;
  text-align: right;
  top: 0.5vmin;
  width: fit-content;
}
#not-signed-in-text,
#signed-in-text {
  opacity: 1;
  position: absolute;
  right: 0;
  text-align: right;
  transition: opacity 0.3s;
  width: max-content;
}
#not-signed-in-text.hide,
#signed-in-text.hide {
  opacity: 0;
  pointer-events: none;
}
#ads {
  z-index: 1;
}
.ad {
  opacity: 1;
  pointer-events: all;
  position: absolute;
  transition: opacity 1s;
}
.ad.hide {
  opacity: 0;
  pointer-events: none;
}
.ad-bottom {
  bottom: 10vmin;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom;
}
.ad-right {
  right: 1vmin;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: right;
}
.ad-left {
  left: 1vmin;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left;
}
#profile-screen-profile {
  display: flex;
}
#profile-screen-profile > div {
  margin-top: 0.85vmin;
}
#profile-screen-profile-icon-wrapper {
  height: 15vmin;
  margin: 1vmin;
  position: relative;
  width: 15vmin;
}
#profile-screen-profile-icon {
  border-radius: 50%;
  box-shadow: 0 0 0 0.3vmin #000;
  height: 15vmin;
  width: 15vmin;
}
#profile-screen-profile-icon.clickable {
  cursor: pointer;
  transition: filter 0.2s;
}
#profile-screen-profile-icon.clickable:hover {
  filter: brightness(0.5);
}
#profile-screen-profile-icon + div {
  color: #fff;
  font-size: 4vmin;
  font-weight: 700;
  height: 15vmin;
  line-height: 15vmin;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 0;
  transition: opacity 0.2s;
  user-select: none;
  width: 15vmin;
}
#profile-screen-profile-icon.clickable:hover + div {
  opacity: 1;
}
#profile-screen-profile-name {
  font-size: 6vmin;
  margin-left: 0.5vmin;
}
#profile-screen-profile-star-counter {
  margin-top: -1.2vmin;
}
#profile-screen-achievements-title,
#profile-screen-description,
#profile-screen-profile-name,
#profile-screen-profile-star-counter > div,
#profile-screen-statistics {
  color: #fff;
  font-family: 'Roboto';
  font-weight: 700;
  text-align: left;
}
#profile-screen-profile-star-counter > img {
  transform: translateY(-1.1vmin);
  width: 5.5vmin;
}
#profile-screen-profile-star-counter > div {
  display: inline;
  font-size: 3.5vmin;
}
#profile-screen-description {
  font-size: 2.5vmin;
  margin-left: 1vmin;
  margin-right: 1vmin;
  white-space: pre-wrap;
}
.description-mention {
  color: #00b0e1;
}
.description-mention:hover {
  cursor: pointer;
  text-decoration: underline;
}
#profile-screen-scroll {
  height: 100%;
  max-height: 100vh;
  overflow: scroll;
  overflow-x: hidden;
  padding-left: 1vmin;
  width: 100%;
}
#profile-screen-scroll > hr {
  border-radius: 0.5vmin;
  border-top: 0.3vmin solid #fff;
  box-shadow: 0 0 0 0.3vmin #000;
  height: 0;
  margin-bottom: 1vmin;
  margin-top: 1vmin;
  width: calc(100% - 2vmin);
}
#profile-screen-statistics {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
#profile-screen-statistics > div > :first-child {
  font-size: 3vmin;
}
#profile-screen-statistics > div > :last-child {
  font-size: 2vmin;
}
#profile-screen-statistics > div {
  margin-left: 1vmin;
  margin-right: 1vmin;
}
#profile-screen-achievements-title {
  font-size: 4vmin;
  margin-left: 1vmin;
}
#profile-screen-achievements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  overflow: hidden;
}
#profile-screen-achievements.collapsed {
  max-height: 0;
}
#profile-buttons {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  height: 0;
  margin-left: 48.5vw;
  width: 50vw;
}
#profile-buttons > button {
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  font-size: 2.5vmin;
  height: 4vmin;
  margin: 1vmin;
  padding: 0.25vmin 1vmin;
}
#profile-screen-search {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  text-align: center;
  width: 100%;
}
#profile-screen-search-bar {
  background-color: #00000075;
  border-radius: 0.4vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  height: 4vmin;
  margin: 1vmin;
  width: fit-content;
}
#profile-screen-search-input {
  background-color: transparent;
  border: none;
  color: #fff;
  font-family: 'Roboto';
  font-size: 2.5vmin;
  font-weight: 700;
  height: 4vmin;
  padding: 0 0 0 1vmin;
  vertical-align: bottom;
  width: 30vmin;
}
#profile-screen-search-button {
  box-shadow: 0 0 0 0.4vmin #000;
  height: 4vmin;
  padding: 0;
  text-align: center;
  width: 4vmin;
}
#profile-screen-search-button > img {
  width: 3vmin;
}
#profile-screen-search-content {
  background-color: rgba(0, 0, 0, 0.79);
  border-radius: 0.5vmin;
  color: #fff;
  font-size: 2.5vmin;
  font-weight: 700;
  opacity: 1;
  position: relative;
  text-align: center;
  transition: opacity 0.2s;
  width: 30vmin;
}
#profile-screen-search-content > hr {
  border-radius: 0.15vmin;
  border-top: 0.3vmin solid #fff;
  color: #fff;
  height: 0;
  margin: 0 0 0 1vmin;
  opacity: 0.5;
  transition: height 0.2s;
  width: calc(100% - 2vmin);
}
.profile-screen-search-result {
  cursor: pointer;
  display: flex;
  font-weight: 400;
  height: 8vmin;
  padding: 1vmin;
  transition: height 0.2s;
}
.profile-screen-search-result > * {
  pointer-events: none;
}
#profile-screen-search-content.hide {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
#profile-screen-search-content.hide > .profile-screen-search-result,
#profile-screen-search-content.hide > hr {
  height: 0;
}
.profile-screen-search-result > .icon {
  border-radius: 50%;
  height: 6vmin;
  width: 6vmin;
}
.profile-screen-search-result > div > .result-name {
  font-size: 2.5vmin;
  height: 3.8vmin;
  line-height: 3.8vmin;
  margin-left: 1vmin;
  margin-top: -0.2vmin;
  text-align: left;
  white-space: nowrap;
  width: 21vmin;
}
.profile-screen-search-result > div > .result-stars {
  display: flex;
  margin-left: 1vmin;
  margin-top: -0.5vmin;
}
.profile-screen-search-result > div > .result-stars > img {
  height: 2.3vmin;
  margin-top: 0.2vmin;
  width: 2.3vmin;
}
.profile-screen-search-result > div > .result-stars > div {
  font-size: 2vmin;
  margin-left: 0.5vmin;
}
#edit-icon-preview {
  border-radius: 50%;
  height: 15vmin;
  width: 15vmin;
}
#edit-icon-wrapper {
  display: flex;
}
#edit-icon-tabs {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  display: flex;
  justify-content: space-evenly;
  margin-top: 0;
  width: 50vw;
}
#edit-icon-tabs > div {
  border-radius: 0.5vmin;
  color: #cfcfcf;
  cursor: pointer;
  font-size: 2.5vmin;
  margin: 0 0.75vmin;
  padding-left: 0.75vmin;
  padding-right: 0.75vmin;
  transition: box-shadow 0.2s, background-color 0.2s;
  user-select: none;
}
#edit-icon-tabs > div.selected {
  background-color: #474747;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
}
#edit-icon-tabs > div:hover {
  background-color: #5f5f5f;
  box-shadow: 0 0 0 0.4vmin #000;
  color: #fff;
}
#edit-icon-tab-content {
  height: 40vh;
  margin: 0;
  width: 50vw;
}
#edit-icon-tab-content > div {
  height: inherit;
  margin: 0;
  overflow: scroll;
  overflow-x: clip;
  padding: 1vmin;
}
#edit-icon-tab-container {
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  margin-left: 3vmin;
}
.edit-icon-tab-title {
  font-size: 3vmin;
  text-align: left;
}
.edit-icon-tab-title.disabled {
  color: #9a9a9a;
}
.edit-icon-tab-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
  width: auto;
}
.edit-icon-tab-item {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  cursor: pointer;
  height: 9.8vmin;
  margin: 1vmin !important;
  transition: background-color 0.2s, box-shadow 0.2s;
  width: 9.8vmin;
}
.edit-icon-tab-list.disabled > .edit-icon-tab-item {
  filter: brightness(0.5) grayscale(0.5);
}
.edit-icon-tab-list.disabled {
  pointer-events: none;
}
.edit-icon-tab-list.disabled:after {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.5vmin;
  color: #fff;
  content: attr(data-text);
  display: block;
  font-size: 4vmin;
  height: 100%;
  left: 0;
  line-height: 8vmin;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.edit-icon-tab-item:hover {
  background-color: rgba(37, 37, 37, 0.5);
}
.edit-icon-tab-item.selected {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 0.4vmin #fff;
  cursor: default;
}
.edit-icon-tab-item > canvas {
  border-radius: 0.5vmin;
  height: 9.8vmin;
  margin: 0;
  width: 9.8vmin;
}
#edit-icon-attributes-scroll {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.5vmin;
  box-shadow: 0 0 0 0.4vmin #000;
  height: calc(40vh - 12vmin);
  margin: 0;
  overflow: scroll;
  overflow-x: clip;
  width: 20vmin;
}
#edit-icon-attributes-scroll > .slider > label {
  text-align: left;
  white-space: nowrap;
}