@font-face {
  font-family: 'Edit Undo BRK';
  src: url(../fonts/edit-undo.brk.ttf);
}
@font-face {
  font-family: 'Amiga Forever';
  src: url(../fonts/amiga4everpro.ttf);
}
:root {
  --side-pad: 12px;
}
* {
  font-family: 'Amiga Forever';
  font-size: 10px;
}
@media (max-width: 850px), (max-width: 900px) {
  html,
  body {
    font-size: 14px;
    position: fixed;
  }
}
body * {
  cursor: url('../img/crosshairs/crosshair000.png'), auto !important;
}
html,
body,
canvas {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
canvas.small-canvas {
  height: 480px;
  width: 400px;
  margin: 0 auto;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}
input {
  -webkit-user-select: initial;
     -moz-user-select: initial;
      -ms-user-select: initial;
          user-select: initial;
}
.user-select-none {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  cursor: inherit;
}
:not(.default-scroll)::-webkit-scrollbar {
  width: 22px;
  height: 10px;
}
:not(.default-scroll)::-webkit-scrollbar-thumb {
  background: #676667;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0px #a0a0a0, inset -2px -2px 0px #a0a0a0;
  width: 22px;
  height: 10px;
}
:not(.default-scroll)::-webkit-scrollbar-thumb:hover {
  background: #676667;
}
:not(.default-scroll)::-webkit-scrollbar-track {
  background: transparent;
  border: 3px solid #000;
  border-top: unset;
  border-bottom: unset;
  border-radius: 0px;
}
/* Buttons */
:not(.default-scroll)::-webkit-scrollbar-button:single-button {
  height: 20px;
  width: 22px;
}
:not(.default-scroll)::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url(../img/ui/buttons/arrow-scroll-up-button.png);
  background-repeat: no-repeat;
}
:not(.default-scroll)::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url(../img/ui/buttons/arrow-scroll-down-button.png);
  background-repeat: no-repeat;
}
#start-menu-wrapper {
  align-items: flex-start;
  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%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#start-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 124px;
}
@media (max-width: 850px), (max-width: 900px) {
  #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;
}
.btn-opaque {
  opacity: 0.5 !important;
}
.btn-disabled {
  opacity: 0.5 !important;
  cursor: initial !important;
  pointer-events: none;
  /*color: rgba(255,255,255,1.0) !important;
    border-color: rgba(255,255,255,1.0) !important;*/
}
.btn-darken:hover,
.btn-darken:active {
  -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;
}
.btn-darkened {
  color: inherit;
  -webkit-filter: brightness(85%);
  filter: brightness(85%);
  transition: all 0.25s ease;
}
.btn-check {
  opacity: 0.5 !important;
  cursor: initial !important;
  pointer-events: none;
  /*color: rgba(255,255,255,1.0) !important;
    border-color: rgba(255,255,255,1.0) !important;*/
  background-size: 15px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: right;
  background-origin: content-box;
  background-image: url(../img/gui/check-icon.svg);
}
#background {
  background-image: url(../img/ui/bg-option_1.png);
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.dpad,
.slider-dpad,
.auto-melee,
.aim-assist,
.quest-progress-notification-active {
  display: none !important;
}
#side-notification-outer-container {
  position: absolute;
  top: 216px;
  left: 0px;
  max-width: 400px;
  width: auto;
  height: auto;
  z-index: 99;
}
#side-notification-outer-container .side-notification-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: right;
  left: -100%;
  min-height: 50px;
  min-width: 250px;
  background-color: rgba(0, 0, 0, 0.75);
}
#side-notification-outer-container .side-notification-container .side-notification-text {
  max-width: 390px;
  padding-left: 15px;
  padding-right: 10px;
  color: white;
  font-family: Amiga Forever;
  font-size: 12px;
  line-height: 18px;
}
#event-modal {
  display: none;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 4;
  background-position: center center;
  background-size: cover;
}
#modal-container {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 44.2%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}
@media (max-width: 960px) {
  #modal-container {
    width: 60%;
  }
}
@media (max-width: 720px) {
  #modal-container {
    width: 65%;
  }
}
.close {
  cursor: pointer;
}
#modal-header {
  position: relative;
  font-style: normal;
  font-weight: bold;
  font-size: 66.2581px;
  line-height: 78px;
  text-align: center;
  color: #FFFFFF;
  text-shadow: 2.65032px 2.65032px 0px #000000, 0px 0px 19.8774px rgba(0, 0, 0, 0.75), 1px 1px 19.8774px rgba(0, 0, 0, 0.75), 0px 2px 19.8774px rgba(0, 0, 0, 0.75);
  margin-bottom: 0;
  margin-top: 1%;
}
@media (max-width: 1600px) {
  #modal-header {
    font-size: 58px;
  }
}
@media (max-width: 1300px) {
  #modal-header {
    font-size: 50px;
  }
}
@media (max-width: 1100px) {
  #modal-header {
    font-size: 42px;
  }
}
@media (max-width: 960px) {
  #modal-header {
    font-size: 34px;
  }
}
@media (max-width: 850px) {
  #modal-header {
    font-size: 28px;
  }
}
@media (max-width: 500px) {
  #modal-header {
    line-height: 58px;
  }
}
#modal-img-1 {
  width: 89.3%;
  text-align: center;
  color: black;
  margin: 0px 5.4%;
  margin-top: -5.5%;
}
@media (max-width: 1300px) {
  #modal-img-1 {
    margin-top: -7%;
  }
}
@media (max-width: 960px) {
  #modal-img-1 {
    margin-top: -9%;
  }
}
@media (max-width: 850px) {
  #modal-img-1 {
    margin-top: -10%;
  }
}
#modal-content {
  margin: -0.6% 5.4%;
  display: flex;
  position: relative;
}
#modal-img-2 {
  width: 31.01%;
  height: 100%;
  text-align: center;
  opacity: 1.0;
  background: black;
}
@media (max-width: 500px) {
  #modal-img-2 {
    margin: auto;
  }
}
#modal-text {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0px 0px 6px 0px;
  margin: 0 0;
  padding: 21px 22px;
  width: 68.99%;
  opacity: 1.0;
}
@media (max-width: 1600px) {
  #modal-text {
    font-size: 14px;
    padding: 21px 20px;
  }
}
@media (max-width: 1300px) {
  #modal-text {
    font-size: 11px;
    line-height: 18px;
  }
}
@media (max-width: 1100px) {
  #modal-text {
    font-size: 10px;
  }
}
@media (max-width: 960px) {
  #modal-text {
    font-size: 9px;
    line-height: 14px;
    padding: 11px 11px;
  }
}
@media (max-width: 850px) {
  #modal-text {
    font-size: 8px;
    line-height: 12px;
    padding: 9px 9px;
  }
}
#modal-btn {
  width: 35.6%;
  height: 4%;
  border: none;
  left: 0;
  right: 0;
  background-color: #1e90ff;
  border-radius: 6px;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  color: #fff;
  font-weight: 400;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  height: 39px;
  line-height: 41px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  margin: 3.4% 32.2%;
}
@media (max-width: 850px) {
  #modal-btn {
    font-size: 12px;
    line-height: 12px;
  }
}
#modal-btn:hover {
  color: inherit;
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
}
#spin-modal,
#reward-modal {
  display: none;
  background: transparent;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 4;
}
#spin-modal .spin-screen,
#reward-modal .spin-screen,
#spin-modal .reward-screen,
#reward-modal .reward-screen {
  display: block;
  background: #141414;
  position: absolute;
  width: 1044.7px;
  height: 470.21px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (max-width: 960px) {
  #spin-modal .spin-screen,
  #reward-modal .spin-screen,
  #spin-modal .reward-screen,
  #reward-modal .reward-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 850px) {
  #spin-modal .spin-screen,
  #reward-modal .spin-screen,
  #spin-modal .reward-screen,
  #reward-modal .reward-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#spin-modal .roulette-inner > img {
  padding: 5px;
  margin: 0 10px;
  margin-top: 4px;
  width: 158px;
  height: 158px;
  height: auto;
  width: 148px;
  flex-shrink: 0;
}
#reward-modal {
  display: none;
}
#reward-modal .reward-title {
  color: #FFFFFF;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
  font-style: normal;
  font-weight: normal;
  font-size: 30.3361px;
  line-height: 36px;
  text-align: center;
  position: relative;
  margin: 16px 0 0 0;
}
#reward-modal .reward-type {
  color: #FFFFFF;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
  font-style: normal;
  font-weight: bold;
  font-size: 68.2562px;
  line-height: 80px;
  text-align: center;
}
#reward-modal .reward-btns {
  display: flex;
  margin: 0px 21%;
  margin-top: 17px;
  justify-content: space-between;
}
#reward-modal .reward-btn-blue {
  background-color: #1e90ff;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  font-style: normal;
  font-weight: bold;
  font-size: 22.7521px;
  width: 291px;
}
#reward-modal .reward-btn-blue.green {
  background-color: #83AF50;
  border-bottom: 2px solid #5B7A38;
  box-shadow: inset 0 -2px #5B7A38;
}
#reward-modal .reward-img {
  margin: 0 auto;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}
#reward-modal .reward-img > div {
  margin-top: 10px;
  height: 225px;
  width: 225px;
  background-repeat: no-repeat;
  background-position: center;
}
#reward-modal .reward-img > div .item-rarity-style {
  width: 31px;
  height: 29px;
}
#reward-modal .reward-item .reward-effect {
  position: absolute;
  background-image: url(../img/gui/loot-spinner-01.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 560px;
  height: 560px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  -webkit-animation: spin 4s linear infinite;
          animation: spin 4s linear infinite;
  z-index: -1;
  top: -20px;
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#modal-bonus-level {
  display: none;
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
#modal-bonus-level .bonus-level-screen {
  position: absolute;
  width: 350px;
  height: 271.45px;
  background: #181818;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border: 5px solid #2EFFCD;
  box-sizing: border-box;
  box-shadow: 0px 0px 25px #2EFFCD, 4px 4px 10px rgba(255, 255, 255, 0.25);
  padding-top: 39px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-bonus-level .bonus-level-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-bonus-level .bonus-level-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-bonus-level .bonus-level-screen .bonus-level-title {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.15em;
  color: #FFFFFF;
  border: 0.25px solid #000000;
  text-shadow: 0px 0px 4px rgba(46, 255, 205, 0.5);
  border: solid #2EFFCD 1px;
  border-right: none;
  border-left: none;
  width: 275px;
  justify-content: center;
  margin: 0 auto;
  padding: 3px 0;
}
#modal-bonus-level .bonus-level-screen .bonus-level-items {
  display: flex;
  align-items: center;
  margin: 0 auto;
  justify-content: center;
  margin: 18px 0;
}
#modal-bonus-level .bonus-level-screen .bonus-level-items .bonus-level-text {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  align-items: center;
  letter-spacing: -0.02em;
  margin-left: 3px;
  width: 185px;
}
#modal-bonus-level .bonus-level-screen .bonus-level-items .bonus-level {
  background-image: url(../img/pass/pass-star-2.svg);
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  font-style: normal;
  font-weight: bold;
  font-size: 26.8081px;
  line-height: 31px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.02em;
  color: #000000;
  justify-content: center;
}
#modal-bonus-level .bonus-level-screen .neon-btn {
  background: #2CDFB4;
  border-bottom: 2px solid #1CBA94;
  box-shadow: inset 0 -2px #1CBA94;
  color: #181818;
  width: 147.61px;
  height: 29.18px;
  font-size: 12.6135px;
  font-weight: bold;
  line-height: 26px;
  margin: 0 auto;
}
#free-gems-modal-notification {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#free-gems-modal-notification a {
  font-size: 16px;
  color: grey;
  font-weight: bold;
}
#free-gems-modal-notification .close-corner {
  background-image: url(../img/gui/close-2.svg);
}
#free-gems-modal-notification .modal-content {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  top: 50%;
  left: 50%;
  text-decoration: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
  min-width: 514px;
}
@media (max-width: 960px) {
  #free-gems-modal-notification .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
    top: 50%;
  }
}
@media (max-width: 850px) {
  #free-gems-modal-notification .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#free-gems-modal-notification .modal-content .modal-header {
  background: linear-gradient(180deg, #C68609 0%, #E5E802 64.69%, #FDFF83 100%);
}
#free-gems-modal-notification .modal-content .modal-header h2 {
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  color: black;
}
#free-gems-modal-notification .modal-content .modal-footer {
  display: flex;
  min-height: 78px;
}
#free-gems-modal-notification .modal-content .modal-body {
  min-width: 514px;
  text-align: center;
  padding: 40px 0px;
  background: #141414;
}
#free-gems-modal-notification .modal-content .modal-body .modal-body-text {
  font-size: 20px;
}
#free-gems-modal-notification .modal-content .modal-body .free-gems-modal-text-container {
  width: 445px;
  margin: 0 auto;
  margin-bottom: 30px;
}
#free-gems-modal-notification .modal-content .modal-body .free-gems-modal-body-text {
  margin: 0px auto 10px auto;
}
#free-gems-modal-notification .modal-content .modal-body .free-gems-modal-amount-container {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  background-color: #3E3E3E;
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 30px;
}
#free-gems-modal-notification .modal-content .modal-body .free-gems-modal-amount-container .free-gems-modal-amount {
  min-width: 200px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 65px;
  padding-left: 35px;
  padding-right: 35px;
  line-height: 65px;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  color: transparent;
  cursor: initial;
  background-image: linear-gradient(177.77deg, rgba(241, 242, 158, 0.81) 16.73%, rgba(228, 232, 75, 0.845393) 23.35%, rgba(244, 244, 209, 0.836292) 26.29%, rgba(206, 210, 0, 0.9) 49.44%, rgba(239, 239, 165, 0.9) 57.53%, rgba(196, 189, 59, 0.9) 65.25%, rgba(203, 184, 20, 0.9) 86.32%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
#free-gems-modal-notification .modal-content .btn-modal-confirm {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 40px;
  min-width: 172px;
  text-align: center;
  margin: auto;
  background: #00FF0A;
  border-radius: 5px;
  border-bottom: 2px solid #00a108;
  box-shadow: inset 0 -2px #00a108;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#free-gems-modal-notification .modal-content .btn-modal-confirm span {
  font-size: 19px;
  line-height: 35px;
  font-weight: bold;
  color: #000000;
}
#crates-modal {
  display: none;
  background: transparent;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 4;
}
#crates-modal .crates-screen {
  display: block;
  background: #141414;
  position: absolute;
  width: 1159.33px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 3% 0;
}
@media (max-width: 1024px) {
  #crates-modal .crates-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
  }
}
@media (max-width: 960px) {
  #crates-modal .crates-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 850px) {
  #crates-modal .crates-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#crates-modal .crates-screen .close-corner {
  margin-top: -40px;
  margin-right: 10px;
}
@media (max-width: 1440px) {
  #crates-modal .crates-screen .close-corner {
    margin-top: -20px;
  }
}
@media (max-width: 960px) {
  #crates-modal .crates-screen .close-corner {
    margin-top: -5px;
    margin-right: 10px;
  }
}
#crates-modal .crates-screen .crates-title {
  color: #FFFFFF;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
  font-style: normal;
  font-weight: bold;
  font-size: 65.9344px;
  line-height: 77px;
  text-align: center;
}
#crates-modal .crates-screen .crates-loot-info {
  color: #FFFFFF;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
  font-style: italic;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-top: 1%;
  margin-bottom: 4%;
}
#crates-modal .crates-screen .crates-container {
  position: relative;
  display: flex;
  margin: 0px 9%;
  justify-content: space-around;
}
#crates-modal .crates-screen .crates-container .crate-display {
  position: relative;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-img {
  background-image: url(../img/gui/loot-crate-01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 237.48px;
  height: 237.48px;
  margin-bottom: 5%;
  position: relative;
  cursor: pointer;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-img .crate-info {
  background-image: url(../img/gui/loot-i-01.svg);
  background-repeat: no-repeat;
  height: 55px;
  width: 55px;
  position: absolute;
  right: -17px;
  bottom: -7px;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-img.blue {
  background-image: url(../img/gui/loot-crate-02.svg);
}
#crates-modal .crates-screen .crates-container .crate-display .crate-img.red {
  background-image: url(../img/gui/loot-crate-03.svg);
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn {
  border-bottom: 2px solid #2A5133;
  box-shadow: inset 0 -2px #2A5133;
  background: #4A734E;
  display: flex;
  justify-content: space-between;
  color: #152C1A;
  padding: 0px 20%;
}
@media (max-width: 850px), (max-width: 900px) {
  #crates-modal .crates-screen .crates-container .crate-display .crate-btn {
    height: 40px;
  }
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn .buy-btn {
  position: absolute;
  right: -21px;
  top: 6px;
  border: solid;
  border: 2px solid #1A3320;
  border-radius: 7px;
  background: linear-gradient(163.51deg, rgba(241, 242, 158, 0.81) 5.59%, rgba(228, 232, 75, 0.845393) 14.44%, rgba(244, 244, 209, 0.836292) 18.37%, rgba(198, 171, 78, 0.862221) 30.98%, rgba(217, 218, 157, 0.888115) 43.57%, rgba(206, 210, 0, 0.9) 49.35%, rgba(239, 239, 165, 0.9) 67.63%, rgba(196, 189, 59, 0.9) 70.5%, rgba(167, 165, 77, 0.856018) 81.7%, rgba(244, 244, 209, 0.836292) 86.72%, rgba(203, 184, 20, 0.9) 98.68%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  margin: 0;
  font-style: normal;
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  text-align: center;
  height: 40%;
  color: #1A3320;
  padding: 0 7px;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn .crate-price {
  margin: 0;
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  line-height: 30px;
  margin-top: 4px;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn .crate-text {
  margin: 0;
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  line-height: 30px;
  margin-top: 4px;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn .crate-gems-icon {
  height: 24px;
  width: 19px;
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 6px;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn.blue {
  color: #096465;
  background: #2FC9CB;
  border-bottom: 2px solid #108B8C;
  box-shadow: inset 0 -2px #108B8C;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn.red {
  color: #690A10;
  background: #EA333D;
  border-bottom: 2px solid #AA1921;
  box-shadow: inset 0 -2px #AA1921;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn.disable {
  color: #323232;
  background: #6D6D6D;
  border-bottom: 2px solid #3F3F3F;
  box-shadow: inset 0 -2px #3F3F3F;
  pointer-events: none;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn .account-loading-container {
  margin: -2px;
}
#crates-modal .crates-screen .crates-container .crate-display .btn-green div {
  margin: 0;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-btn:hover .buy-btn {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
}
#crates-modal .crates-screen .crates-container .crate-display .arrow-box {
  position: absolute;
  background: #000000;
  border: 2px solid #ffffff;
  z-index: 1;
  font-style: normal;
  font-weight: bold;
  font-size: 21.9194px;
  line-height: 26px;
  display: flex;
  align-items: center;
  padding: 1% 3%;
  color: white;
  top: -16px;
  right: -149px;
  white-space: nowrap;
  width: 87%;
}
#crates-modal .crates-screen .crates-container .crate-display .arrow-box:after,
#crates-modal .crates-screen .crates-container .crate-display .arrow-box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
#crates-modal .crates-screen .crates-container .crate-display .arrow-box:after {
  border-color: rgba(0, 0, 0, 0);
  border-top-color: #000000;
  border-width: 15px;
  margin-left: -75px;
  top: 97%;
}
#crates-modal .crates-screen .crates-container .crate-display .arrow-box:before {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ffffff;
  border-width: 17px;
  margin-left: -77px;
}
#crates-modal .crates-screen .crates-container .crate-display .crate-spinner {
  position: absolute;
  height: 500px;
  width: 500px;
  background-image: url(../img/gui/loot-spinner-01.svg);
  background-repeat: no-repeat;
  background-size: 114%;
  background-position: center;
  top: -129px;
  left: -135px;
  -webkit-animation: spin 4s linear infinite;
          animation: spin 4s linear infinite;
  pointer-events: none;
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.limited-crate-timer-container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 15px;
  border-radius: 5px;
}
.limited-crate-timer-container span {
  font-size: 23px;
  font-weight: bold;
  line-height: 27px;
}
div.roulette {
  margin-top: 30px;
}
div.roulette-inner {
  display: flex;
}
div.price-marker {
  height: 208px;
  position: absolute;
  top: 0;
  width: 2px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: orange;
}
div.roulette_container {
  width: 100%;
  height: 207px;
  position: relative;
}
.roulette-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
}
.roulette-overlay:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 100%;
  width: 280px;
  height: 280px;
  box-shadow: 0px 0px 0px 2000px rgba(20, 20, 20, 0.5);
}
.roulette-arrows {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 26%;
  background-repeat: no-repeat;
}
.roulette-top-arrow {
  position: absolute;
  display: flex;
  top: 25%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.roulette-top-arrow-left {
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 0px solid transparent;
  border-top: 41px solid #FFD600;
}
.roulette-top-arrow-right {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 22px solid transparent;
  border-top: 41px solid #FFEA7E;
}
.roulette-bottom-arrow {
  position: absolute;
  display: flex;
  top: 75%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.roulette-bottom-arrow-left {
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 41px solid #FFEA7E;
}
.roulette-bottom-arrow-right {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 41px solid #FFD600;
}
.index-offer-time-left-text {
  position: relative;
  font-size: 14px;
  color: #F2C8F9;
  margin-top: -10px;
  background-color: #1F1E1E;
  padding: 3px 10px 3px 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}
.index-offer-time-left-text #index-offer-time-left {
  font-weight: bold;
}
#iap-modal {
  display: none;
  background: transparent;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 4;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#iap-modal .iap-screen {
  display: block;
  background: #141414d0;
  position: absolute;
  width: 950px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 20px 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 5px;
  border-top-left-radius: 0px;
}
@media (max-width: 960px) {
  #iap-modal .iap-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
    top: 50%;
  }
}
@media (max-width: 850px) {
  #iap-modal .iap-screen {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#iap-modal .iap-screen .close-corner {
  position: fixed;
  right: 14px;
  margin-top: -5px;
}
#iap-modal .iap-screen .iap-container {
  display: flex;
  justify-content: space-evenly;
  margin: 3% 5%;
}
#iap-modal .iap-screen .iap-container .iap-gems {
  height: 420px;
  width: 300px;
  margin-right: 30px;
  position: relative;
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-gems-packs-container {
  position: relative;
  height: 260px;
  width: 100%;
  display: block;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-gems-packs-container .iap-gems-pack {
  background: #1E90FF;
  width: 110px;
  height: 109px;
  margin: 0px 10px 40px 10px;
  border-radius: 5px;
  display: inline-block;
  line-height: 20px;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-gems-packs-container .iap-gems-pack .iap-gems-item-container {
  background: #252525;
  margin: 5px;
  text-align: center;
  height: 70px;
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-gems-packs-container .iap-gems-pack .iap-gems-item-container .iap-currency-container {
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: 7px center;
  background-size: 20%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-gems-packs-container .iap-gems-pack .iap-gems-item-container .iap-currency-container .iap-currency-text {
  margin-left: 22px;
  font-size: 24px;
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-gems-packs-container .iap-gems-pack .iap-price {
  text-align: center;
  font-weight: bold;
  font-size: 23px;
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-gems-packs-container:after {
  display: inline-block;
  width: 100%;
  content: '';
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-rv-container {
  position: relative;
  width: auto;
  height: 70px;
  margin-top: 20px;
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-rv-container #btn-free-gems {
  font-size: 17px;
  position: relative;
  width: 90%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-image: url(../img/icon_video.png);
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) calc(50% - 2px);
  background-size: 9%;
  font-weight: bold;
}
#iap-modal .iap-screen .iap-container .iap-gems .iap-rv-container .iap-free-gems-left {
  color: #E09A15;
  position: relative;
  font-size: 14px;
  top: -8px;
  background-color: #664400;
  padding: 3px 15px 3px 15px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#iap-modal .iap-screen .iap-container .iap-limited-offers {
  background: rgba(58, 58, 58, 0.651);
  height: 420px;
  width: 500px;
  border-radius: 5px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-title-container {
  height: 70px;
  margin: 5px;
  text-align: center;
  padding-top: 10px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-title-container .iap-lto-title {
  font-size: 30px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-title-container .iap-lto-time-left-text {
  position: relative;
  opacity: 1;
  font-size: 14px;
  color: #DFE412;
  margin-top: 5px;
  background-color: #1F1E1E;
  padding: 3px 10px 3px 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-title-container .iap-lto-time-left-text #iap-lto-time-left-number {
  font-weight: bold;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container {
  position: relative;
  height: 300px;
  margin: 5px;
  display: block;
  text-align: center;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack {
  background: #874C90;
  width: 120px;
  height: 305px;
  margin: 0px 10px 10px 10px;
  border-radius: 5px;
  display: inline-block;
  line-height: 20px;
  border-bottom: 2px solid #614066;
  box-shadow: inset 0 -2px #614066;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-discount {
  position: absolute;
  top: 6px;
  margin-left: 6px;
  width: 100px;
  height: 100px;
  z-index: 1;
  color: #AA1313;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  font-weight: bold;
  background-image: url(../img/gui/iap-discount-tag.svg);
  background-repeat: no-repeat;
  background-position: left -30px;
  background-size: 100%;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-sold-container {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-sold {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  display: none;
  background-image: url(../img/iap_got_stamp.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-lto-item-container {
  background: #252525;
  margin: 5px;
  text-align: center;
  height: 250px;
  padding-top: 5px;
  padding-bottom: 5px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-lto-item-container .iap-loadout-items {
  height: 75%;
  width: 90%;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(calc(-50% + 2px), -50%);
          transform: translate(calc(-50% + 2px), -50%);
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-lto-item-container .iap-loadout-items > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-lto-item-container .iap-loadout-items > div .iap-item-img {
  position: relative;
  display: inline-block;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: auto !important;
  width: 66px;
  height: 66px;
  background-size: 66%;
  background-repeat: no-repeat;
  background-position: center;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-lto-item-container span {
  font-weight: bold;
  font-size: 23px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-currency-container {
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 19%;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack .iap-currency-container .iap-currency-text {
  margin-left: 25px;
  font-size: 24px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .item-rarity-style {
  position: absolute;
  width: 15px;
  height: 15px;
  top: -2px;
  left: -2px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .item-rarity-style .item-outfit {
  mask-size: 82%;
  -webkit-mask-size: 82%;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack-big {
  width: 280px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack-big .item-rarity-style {
  top: -4px;
  left: -4px;
}
#iap-modal .iap-screen .iap-container .iap-limited-offers .iap-lto-packs-container .iap-lto-pack-big .iap-currency-container {
  background-size: 8%;
  background-position: 90px center;
}
.iap-currency-text {
  background-image: linear-gradient(177.77deg, rgba(241, 242, 158, 0.81) 16.73%, rgba(228, 232, 75, 0.845393) 23.35%, rgba(244, 244, 209, 0.836292) 26.29%, rgba(206, 210, 0, 0.9) 49.44%, rgba(239, 239, 165, 0.9) 57.53%, rgba(196, 189, 59, 0.9) 65.25%, rgba(203, 184, 20, 0.9) 86.32%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
}
.iap-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#iap-modal-confirm-buy-lto,
#iap-modal-confirm-buy-gems,
#surviv-modal-offerwall-reward,
#iap-modal-successful {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 10;
}
#iap-modal-confirm-buy-lto a,
#iap-modal-confirm-buy-gems a,
#surviv-modal-offerwall-reward a,
#iap-modal-successful a {
  font-size: 16px;
  color: grey;
  font-weight: bold;
}
#iap-modal-confirm-buy-lto > .modal-content,
#iap-modal-confirm-buy-gems > .modal-content,
#surviv-modal-offerwall-reward > .modal-content,
#iap-modal-successful > .modal-content {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  top: 50%;
  left: 50%;
  text-decoration: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
  min-width: 330px;
}
@media (max-width: 960px) {
  #iap-modal-confirm-buy-lto > .modal-content,
  #iap-modal-confirm-buy-gems > .modal-content,
  #surviv-modal-offerwall-reward > .modal-content,
  #iap-modal-successful > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
    top: 50%;
  }
}
@media (max-width: 850px) {
  #iap-modal-confirm-buy-lto > .modal-content,
  #iap-modal-confirm-buy-gems > .modal-content,
  #surviv-modal-offerwall-reward > .modal-content,
  #iap-modal-successful > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#iap-modal-confirm-buy-lto > .modal-content .modal-header > h2,
#iap-modal-confirm-buy-gems > .modal-content .modal-header > h2,
#surviv-modal-offerwall-reward > .modal-content .modal-header > h2,
#iap-modal-successful > .modal-content .modal-header > h2 {
  font-weight: bold;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body,
#surviv-modal-offerwall-reward > .modal-content > .modal-body,
#iap-modal-successful > .modal-content > .modal-body {
  background: #141414;
  text-align: center;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .modal-body-text,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .modal-body-text,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .modal-body-text,
#iap-modal-successful > .modal-content > .modal-body .modal-body-text {
  font-size: 16px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-modal-price-container,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-modal-price-container,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-modal-price-container,
#iap-modal-successful > .modal-content > .modal-body .iap-modal-price-container {
  background: #3E3E3E;
  margin: auto;
  height: auto;
  width: 76%;
  padding: 15px 5px;
  margin-bottom: 10px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-modal-price-container .iap-modal-price,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-modal-price-container .iap-modal-price,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-modal-price-container .iap-modal-price,
#iap-modal-successful > .modal-content > .modal-body .iap-modal-price-container .iap-modal-price {
  font-weight: bold;
  text-align: center;
  color: #F4DB7C;
  font-size: 25px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container,
#iap-modal-successful > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container {
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: calc(50% - 40px) center;
  background-size: 9%;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container .iap-currency-text,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container .iap-currency-text,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container .iap-currency-text,
#iap-modal-successful > .modal-content > .modal-body .iap-modal-price-container .iap-currency-container .iap-currency-text {
  margin-left: 25px;
  font-size: 30px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-items-buying,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-items-buying,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-items-buying,
#iap-modal-successful > .modal-content > .modal-body .iap-items-buying {
  background: #252525;
  margin: auto;
  text-align: center;
  height: auto;
  width: 76%;
  padding: 15px 5px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-items-buying .iap-loadout-items,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-items-buying .iap-loadout-items,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-items-buying .iap-loadout-items,
#iap-modal-successful > .modal-content > .modal-body .iap-items-buying .iap-loadout-items {
  height: 75%;
  width: 90%;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(calc(-50% + 2px));
          transform: translateX(calc(-50% + 2px));
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div,
#iap-modal-successful > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div {
  position: relative;
  max-width: 340px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div .iap-item-img,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div .iap-item-img,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div .iap-item-img,
#iap-modal-successful > .modal-content > .modal-body .iap-items-buying .iap-loadout-items div .iap-item-img {
  position: relative;
  height: 66px;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: auto !important;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-items-buying span,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-items-buying span,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-items-buying span,
#iap-modal-successful > .modal-content > .modal-body .iap-items-buying span {
  font-weight: bold;
  font-size: 23px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-items-buying .iap-currency-container,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-items-buying .iap-currency-container,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-items-buying .iap-currency-container,
#iap-modal-successful > .modal-content > .modal-body .iap-items-buying .iap-currency-container {
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: calc(50% - 40px) center;
  background-size: 9%;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-body .iap-items-buying .iap-currency-container .iap-currency-text,
#iap-modal-confirm-buy-gems > .modal-content > .modal-body .iap-items-buying .iap-currency-container .iap-currency-text,
#surviv-modal-offerwall-reward > .modal-content > .modal-body .iap-items-buying .iap-currency-container .iap-currency-text,
#iap-modal-successful > .modal-content > .modal-body .iap-items-buying .iap-currency-container .iap-currency-text {
  margin-left: 25px;
  font-size: 30px;
}
#iap-modal-confirm-buy-lto > .modal-content > .modal-footer > .close-footer,
#iap-modal-confirm-buy-gems > .modal-content > .modal-footer > .close-footer,
#surviv-modal-offerwall-reward > .modal-content > .modal-footer > .close-footer,
#iap-modal-successful > .modal-content > .modal-footer > .close-footer {
  display: flex;
}
.store-tabs {
  margin-top: -53px;
  position: absolute;
}
.store-tabs span {
  background-color: #252525;
  /* Fallback color */
  background-color: rgba(37, 37, 37, 0.8);
  /* Black w/ opacity */
  padding: 10px 20px 10px 60px;
  font-size: 24px;
  font-weight: bold;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  pointer-events: auto;
  cursor: pointer;
}
.store-tabs #tab-shop {
  background-image: url(../img/shop_icon.svg);
  background-position: 20px;
  background-repeat: no-repeat;
  background-size: 28px;
}
.store-tabs #tab-market-buy {
  background-image: url(../img/gui/gui-market-buy.svg);
  background-position: 20px;
  background-repeat: no-repeat;
  background-size: 28px;
}
.store-tabs #tab-market-sell {
  background-image: url(../img/gui/gui-market-sell.svg);
  background-position: 20px;
  background-repeat: no-repeat;
  background-size: 28px;
}
.store-tab-selected {
  background-color: #000000 !important;
  /* Fallback color */
  background-color: #141414d0 !important;
}
.market-locked-container {
  display: none;
  height: 420px;
  width: 88%;
  margin: 3% auto;
  text-align: center;
  flex-direction: column;
  justify-content: space-evenly;
}
.market-locked-container #market-locked-welcome-text {
  margin: auto;
  font-size: 40px;
  font-weight: bold;
  line-height: 40px;
  opacity: 0.4;
}
.market-locked-container .market-locked-img {
  height: 152px;
  width: 152px;
  opacity: 0.3;
  margin: auto;
  background-image: url(../img/gui/lock.svg);
  background-size: 152px !important;
  background-repeat: no-repeat !important;
}
.market-locked-container #market-unlocks-text {
  margin: auto;
  font-size: 40px;
  line-height: 40px;
  opacity: 0.4;
}
.market-locked-container #market-unlocks-timer {
  margin: auto;
  font-size: 60px;
  line-height: 60px;
  font-weight: bold;
  opacity: 0.4;
}
.market-container {
  display: none;
  height: 420px;
  width: 88%;
  justify-content: space-evenly;
  margin: 3% auto;
  background-color: #3E3E3E;
}
.market-container .market-btns-container {
  width: 25%;
  height: 95%;
  margin: 10px 0px 0px 10px;
  justify-content: space-evenly;
}
.market-container .market-items-list-container {
  display: flex;
  width: 70%;
  height: 100%;
  margin: 0px 15px;
  justify-content: space-evenly;
  background-color: #717171;
}
.market-container .market-items-list-container .market-msg-text {
  font-size: 30px;
  font-weight: bold;
  opacity: 0.4;
}
.market-container .market-items-list-container #market-purchase-progress-container {
  display: none;
  margin: auto;
}
.market-container .market-items-list-container #market-purchase-progress-container .market-loading {
  height: 88px;
  width: 88px;
  margin: auto;
  margin-bottom: 20px;
  -webkit-animation: spin 1.2s linear infinite;
          animation: spin 1.2s linear infinite;
  background-image: url(../img/gui/market-loading.svg);
  background-size: 88px !important;
  background-repeat: no-repeat !important;
}
.market-container .market-items-list-container #market-no-items-available {
  display: none;
  margin: auto;
}
.market-container .market-items-list-container #market-no-items-available .market-no-items-img {
  height: 88px;
  width: 88px;
  opacity: 0.3;
  margin: auto;
  margin-bottom: 20px;
  background-image: url(../img/loading-logo.svg);
  background-size: 88px !important;
  background-repeat: no-repeat !important;
}
.market-container .market-items-list-container #market-items-list {
  height: 95%;
  width: 95%;
  overflow-y: auto;
  margin: auto;
}
.market-filter-btn {
  position: relative;
}
.btn-market-filter-gray {
  display: flex;
  position: absolute;
  width: 100%;
  font-size: 16px;
  color: white;
  background: #555555;
  border-radius: 5px;
  border-bottom: 2px solid #2c2c2c;
  box-shadow: inset 0 -2px #2c2c2c;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  z-index: 5;
}
.btn-market-filter-gray .left-market-btn {
  position: absolute;
  right: 135px;
  margin: 0px 0px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-weight: bold;
  white-space: nowrap;
}
.btn-market-filter-gray .btn-market-divider {
  border-bottom: solid 24px #FFFFFF;
  content: '';
  cursor: default;
  margin-left: 80px;
  position: absolute;
  width: 2px;
  padding: 4px 0px;
}
.btn-market-filter-gray .right-market-btn {
  position: relative;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: calc(100% - 95px) !important;
  padding-left: 15px;
  margin: 0px 0px 0px 10px;
  font-weight: bold;
  text-align: left;
  left: 75px;
  white-space: nowrap;
}
.btn-market-filter-gray .right-market-btn-img {
  padding-left: 40px;
  width: calc(100% - 120px) !important;
  background-size: 25px !important;
  background-repeat: no-repeat !important;
  background-position: 5px 50% !important;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-market-filter-gray {
    font-size: 12px;
  }
}
.market-change-selection {
  display: none;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  max-height: 300px;
  margin-top: 32px;
  padding-bottom: 2px;
  overflow-y: auto;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  z-index: 6;
}
.market-change-selection div {
  width: 45%;
  float: left;
  margin-left: 80px;
  margin-bottom: 5px;
}
.market-change-selection div .right-market-btn {
  width: 100% !important;
  background: #555555;
  border-radius: 5px;
  box-shadow: none !important;
  left: 0px;
}
.market-change-selection div .right-market-btn-img {
  width: calc(100% - 25px) !important;
}
.market-change-selection .btn-market-divider {
  border-left: 2px solid #FFFFFF;
  width: 0px;
  padding: 0px 0px;
  margin-left: 0px;
  height: calc(100% - 32px);
}
.market-filter-section-spacing {
  margin-top: 40px;
}
.market-btn-search-items-container {
  margin-top: 40px;
}
.market-btn-search-items-container #market-btn-search-items {
  font-size: 20px;
  font-weight: bold;
}
.market-btn-search-items-container .market-cooldown-timer-text {
  display: none;
  position: relative;
  font-size: 14px;
  margin-top: -10px;
  background-color: #1F1E1E;
  padding: 3px 10px 3px 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
}
.market-btn-search-items-container #market-search-cooldown-timer {
  font-weight: bold;
}
.market-list-item-container {
  display: flex;
  width: 99%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 10px;
  justify-content: space-evenly;
  background-color: #555555;
}
.market-list-item-container .market-item-info-container {
  height: 90%;
  margin: auto;
  width: 270px;
}
.market-list-item-container .market-item-info-container .market-item-title {
  font-size: 30px;
  font-weight: bold;
  line-height: 40px;
}
.market-list-item-container .market-item-info-container .market-item-stats-container {
  display: inline-block;
  justify-content: left;
  margin: 0 auto 5px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.market-list-item-container .market-item-info-container .market-item-stats-container .market-item-stats-text {
  font-size: 17px;
}
.market-list-item-container .market-item-info-container .market-item-stats-container .market-item-stats-text p {
  display: inline;
  margin: 0px;
  font-size: 17px;
  font-weight: bold;
  color: #FFE400;
  text-shadow: 1.20779px 1.20779px 0px #000000;
}
.market-list-item-container .market-item-info-container .market-item-stats-container .market-stats-second-line-container {
  display: flex;
}
.market-list-item-container .market-item-info-container .market-item-stats-container .market-stats-second-line-container .market-item-stats-text {
  width: 80px;
}
.market-list-item-container .market-item-action-container {
  height: 90%;
  width: 170px;
  margin: auto 10px;
}
.market-list-item-container .market-item-action-container .market-item-action-btn {
  display: flex;
  position: relative;
  height: 45px;
  justify-content: space-evenly;
  margin: auto;
  color: white;
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #1e90ff;
  box-shadow: inset 0 -2px #1871c8;
  border-bottom: 2px solid #1871c8;
  border-radius: 5px;
  cursor: pointer;
}
.market-list-item-container .market-item-action-container .market-item-action-btn .market-btn-price-container {
  height: 50%;
  width: 38%;
  padding: 5px;
  padding-left: 10px;
  margin: auto 0px;
  background: #141414;
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: 17px;
  border-radius: 2.34939px;
}
.market-list-item-container .market-item-action-container .market-item-action-btn .market-btn-price-container .market-btn-price-text {
  margin-left: 15px;
  line-height: 25px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: transparent;
  cursor: initial;
  background-image: linear-gradient(177.77deg, rgba(241, 242, 158, 0.81) 16.73%, rgba(228, 232, 75, 0.845393) 23.35%, rgba(244, 244, 209, 0.836292) 26.29%, rgba(206, 210, 0, 0.9) 49.44%, rgba(239, 239, 165, 0.9) 57.53%, rgba(196, 189, 59, 0.9) 65.25%, rgba(203, 184, 20, 0.9) 86.32%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.market-list-item-container .market-item-action-container .market-item-action-timer {
  display: flex;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 50%;
  bottom: 10px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-bottom: -10px;
  padding: 3px 6px 3px 6px;
  background-color: #1F1E1E;
  text-align: center;
}
.market-list-item-container .market-item-action-container .market-item-action-timer span {
  font-size: 14px;
}
.market-bold-text {
  font-weight: bold;
}
.market-item-img {
  height: 80px;
  width: 80px;
  min-width: 80px;
  margin: 8px 10px;
  background-size: 65px;
  background-repeat: no-repeat;
  background-position: center;
}
#market-modal-sell-item,
#market-modal-buy-item,
#market-modal-notification {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#market-modal-sell-item a,
#market-modal-buy-item a,
#market-modal-notification a {
  font-size: 16px;
  color: grey;
  font-weight: bold;
}
#market-modal-sell-item .modal-content,
#market-modal-buy-item .modal-content,
#market-modal-notification .modal-content {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  top: 50%;
  left: 50%;
  text-decoration: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
  min-width: 330px;
}
@media (max-width: 960px) {
  #market-modal-sell-item .modal-content,
  #market-modal-buy-item .modal-content,
  #market-modal-notification .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
    top: 50%;
  }
}
@media (max-width: 850px) {
  #market-modal-sell-item .modal-content,
  #market-modal-buy-item .modal-content,
  #market-modal-notification .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#market-modal-sell-item .modal-content .modal-header > h2,
#market-modal-buy-item .modal-content .modal-header > h2,
#market-modal-notification .modal-content .modal-header > h2 {
  font-size: 35px;
  font-weight: bold;
}
#market-modal-sell-item .modal-content .modal-footer,
#market-modal-buy-item .modal-content .modal-footer,
#market-modal-notification .modal-content .modal-footer {
  display: flex;
  min-height: 78px;
}
#market-modal-sell-item .modal-content .modal-body,
#market-modal-buy-item .modal-content .modal-body,
#market-modal-notification .modal-content .modal-body {
  min-width: 514px;
  text-align: center;
  padding: 40px 0px;
  background: #141414;
}
#market-modal-sell-item .modal-content .modal-body .modal-body-text,
#market-modal-buy-item .modal-content .modal-body .modal-body-text,
#market-modal-notification .modal-content .modal-body .modal-body-text {
  font-size: 15px;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-sell-explanation-container,
#market-modal-buy-item .modal-content .modal-body .market-modal-sell-explanation-container,
#market-modal-notification .modal-content .modal-body .market-modal-sell-explanation-container {
  width: 332px;
  color: #AAAAAA;
  margin: 0 auto;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-sell-item-container,
#market-modal-buy-item .modal-content .modal-body .market-modal-sell-item-container,
#market-modal-notification .modal-content .modal-body .market-modal-sell-item-container {
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 141px;
  min-width: 313px;
  margin: 10px auto;
  background: #252525;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-sell-item-container #market-item-sell-img,
#market-modal-buy-item .modal-content .modal-body .market-modal-sell-item-container #market-item-sell-img,
#market-modal-notification .modal-content .modal-body .market-modal-sell-item-container #market-item-sell-img {
  height: 110px;
  width: 110px;
  margin: auto 20px;
  background-size: 90px;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats,
#market-modal-buy-item .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats,
#market-modal-notification .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats {
  text-align: left;
  margin: auto;
  padding-right: 20px;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats .market-item-sell-text,
#market-modal-buy-item .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats .market-item-sell-text,
#market-modal-notification .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats .market-item-sell-text {
  font-size: 15px;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats #market-item-name,
#market-modal-buy-item .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats #market-item-name,
#market-modal-notification .modal-content .modal-body .market-modal-sell-item-container .market-item-sell-stats #market-item-name {
  font-size: 35px;
  font-weight: bold;
  line-height: 41px;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-body-text,
#market-modal-buy-item .modal-content .modal-body .market-modal-body-text,
#market-modal-notification .modal-content .modal-body .market-modal-body-text {
  font-size: 26px;
  margin: 30px auto 10px auto;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-price-container,
#market-modal-buy-item .modal-content .modal-body .market-modal-price-container,
#market-modal-notification .modal-content .modal-body .market-modal-price-container {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  background-color: #3E3E3E;
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 30px;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-price-container .market-modal-price,
#market-modal-buy-item .modal-content .modal-body .market-modal-price-container .market-modal-price,
#market-modal-notification .modal-content .modal-body .market-modal-price-container .market-modal-price {
  height: 65px;
  width: 278px;
  padding-left: 35px;
  padding-right: 35px;
  line-height: 65px;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  color: transparent;
  cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
   -ms-user-select: text;
       user-select: text;
  background-image: linear-gradient(177.77deg, rgba(241, 242, 158, 0.81) 16.73%, rgba(228, 232, 75, 0.845393) 23.35%, rgba(244, 244, 209, 0.836292) 26.29%, rgba(206, 210, 0, 0.9) 49.44%, rgba(239, 239, 165, 0.9) 57.53%, rgba(196, 189, 59, 0.9) 65.25%, rgba(203, 184, 20, 0.9) 86.32%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-price-container .market-modal-price:empty::before,
#market-modal-buy-item .modal-content .modal-body .market-modal-price-container .market-modal-price:empty::before,
#market-modal-notification .modal-content .modal-body .market-modal-price-container .market-modal-price:empty::before {
  content: attr(placeholder);
  font-size: 20px;
  font-weight: normal;
  color: transparent;
  vertical-align: 50%;
  text-align: center;
  cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
   -ms-user-select: text;
       user-select: text;
  background-image: linear-gradient(177.77deg, rgba(241, 242, 158, 0.81) 16.73%, rgba(228, 232, 75, 0.845393) 23.35%, rgba(244, 244, 209, 0.836292) 26.29%, rgba(206, 210, 0, 0.9) 49.44%, rgba(239, 239, 165, 0.9) 57.53%, rgba(196, 189, 59, 0.9) 65.25%, rgba(203, 184, 20, 0.9) 86.32%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
#market-modal-sell-item .modal-content .modal-body .market-modal-price-container .market-modal-price:empty:focus::before,
#market-modal-buy-item .modal-content .modal-body .market-modal-price-container .market-modal-price:empty:focus::before,
#market-modal-notification .modal-content .modal-body .market-modal-price-container .market-modal-price:empty:focus::before {
  content: "";
}
#market-modal-sell-item .modal-content .modal-body .market-modal-price-container #market-buy-price,
#market-modal-buy-item .modal-content .modal-body .market-modal-price-container #market-buy-price,
#market-modal-notification .modal-content .modal-body .market-modal-price-container #market-buy-price {
  min-width: 278px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.btn-modal-confirm {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 40px;
  min-width: 172px;
  text-align: center;
  margin: auto;
  background: #00FF0A;
  border-radius: 5px;
  border-bottom: 2px solid #00a108;
  box-shadow: inset 0 -2px #00a108;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.btn-modal-confirm span {
  font-size: 19px;
  line-height: 35px;
  font-weight: bold;
  color: #000000;
}
.item-stats-container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  justify-content: left;
  margin: 5px 1px auto auto;
}
.item-stats-container .item-stats-text .stats-golden-text {
  display: inline;
  font-size: 20px;
  font-weight: bold;
  color: #FFE400;
  text-shadow: 1.20779px 1.20779px 0px #000000;
}
.item-stats-container .item-stats-text p {
  margin: 0px;
  font-size: 20px;
  color: white;
  line-height: 20px;
}
.item-stats-container .stats-second-line-container {
  display: flex;
  margin-top: 5px;
}
.item-stats-container .stats-second-line-container .item-stats-text {
  width: 90px;
}
.offerwall-reward-body {
  background-image: url(../img/gui/currency-potato-sack.svg), url(../img/pass/pass-premium-bg.svg) !important;
  background-color: #141414 !important;
  background-size: 120px, 300px !important;
  height: 200px;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#offerwall-reward-won-box {
  background-image: url(../img/gui/currency-golde-potato.svg);
  width: 200px;
  background-color: rgba(0, 0, 0, 0.6);
  height: 50px;
  background-repeat: no-repeat;
  background-position: left 40px center;
  background-size: 25px;
  color: #ffff5a;
  font-weight: bold;
  font-size: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  letter-spacing: 0.015em;
  text-indent: 85px;
  margin: auto;
  margin-top: 150px;
}
.modal-footer > .close > .btn-confirm-sell {
  border-radius: 5px;
  color: black;
  height: 40px;
  line-height: 40px;
  margin: auto;
  width: 140px;
  background-color: #00FF0A;
  background-position: 96%;
  border-bottom: 2px solid #00a108;
  box-shadow: inset 0 -2px #00a108;
}
.modal-footer > .close > .btn-cancel-sell {
  border-radius: 5px;
  color: white;
  height: 40px;
  line-height: 40px;
  margin: auto;
  width: 140px;
  background-color: #6D6D6D;
  background-position: 96%;
  border-bottom: 2px solid #313131;
  box-shadow: inset 0 -2px #313131;
}
.modal-footer > .close > .btn-okay {
  border-radius: 5px;
  color: black;
  height: 40px;
  line-height: 40px;
  margin: auto;
  width: 140px;
  background: #83af50;
  border-bottom: 2px solid #5b7a38;
  box-shadow: inset 0 -2px #5b7a38;
  color: white;
}
#msg {
  border: 1px solid #eee;
  padding: 10px 20px;
  overflow-y: scroll;
  max-height: 100px;
}
div.ui-slider {
  width: 300px;
}
#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-footer {
  background: #0D1630;
  width: 100vw;
  height: 42px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: end;
  padding-right: 40px;
}
#start-footer .store-icons {
  position: absolute;
  bottom: 68px;
  left: var(--side-pad);
  display: inline-flex;
}
#start-footer #featured-streamers {
  display: flex;
  margin: auto 0;
  width: 80%;
}
#start-footer #featured-streamers .streamer-list {
  display: flex;
}
#start-footer #featured-streamers .streamer-list .featured-streamer {
  display: block;
  margin-top: 6px;
}
#start-footer #featured-streamers .streamer-list .featured-streamer .btn-streamer {
  background-size: 30px;
  font-size: 12px;
}
#start-footer #featured-streamers .streamer-list .featured-streamer .btn-streamer > span {
  font-size: 11px;
  height: 15px;
  line-height: 0px;
}
#start-footer #featured-streamers .streaming-header {
  margin: auto 5px;
}
#start-footer #featured-streamers .streaming-header .streaming-header-title {
  font-size: 20px;
}
#start-footer #featured-streamers .streaming-header #streaming-icon {
  background-size: 33px;
  background-position: center;
  margin-bottom: -28px;
  margin-left: 6px;
  margin-right: 2px;
  width: 37px;
  height: 37px;
}
#start-footer .news-btn-container {
  top: calc(50% - 12.5px);
  right: 84px;
  padding: 0px;
}
#start-footer .news-btn-container .right-column-toggle {
  background-size: 23px;
  height: 25px;
  width: 25px;
}
#start-footer .btn-settings {
  position: absolute;
  right: 131px;
  top: calc(50% - 12.5px);
  width: 25px;
  height: 25px;
  background-size: 23px;
  box-shadow: none;
  background-position: center;
}
#start-footer #social-share-block-wrapper {
  bottom: 45px;
  right: 36px;
  top: auto;
  display: none;
}
#start-footer #social-share-block-wrapper.show {
  display: block;
}
.timer-container {
  display: flex;
  padding: 5px;
  line-height: 14px;
}
.timer-container .title {
  color: #757575;
  font-size: 12px;
  font-family: Edit Undo BRK;
}
.timer-container .time {
  font-size: 10px;
  font-family: Amiga Forever;
}
#missions-wrapper {
  /*position: absolute;*/
  width: 290px;
  height: 276px;
  background-color: #B0B0B0;
  border-radius: 0px;
}
#missions-wrapper .missions-wrapper-title {
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 24px;
  color: #000000;
  text-transform: uppercase;
  padding-top: 18px;
  margin-left: 15px;
}
#missions-wrapper #missions-wrapper-container {
  margin-top: 10px;
  border-top: 2px solid #C4C4C4;
  width: 250px;
  margin-left: 15px;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper {
  margin-top: 12px;
  padding-bottom: 9px;
  border-bottom: 2px solid #C4C4C4;
  width: 250px;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-name {
  font-family: Edit Undo BRK;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 13px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  color: #000000;
  margin-top: 10px;
  margin-bottom: 10px;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-body {
  display: flex;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-body .mission-wrapper-progress-outer {
  background: #E3E3E3;
  width: 166px;
  height: 8px;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-body .mission-wrapper-progress-outer .mission-wrapper-progress-inner {
  height: auto;
  background: #CCCCCC;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-body .mission-wrapper-task {
  justify-content: center;
  display: flex;
  margin-left: 6px;
  color: black;
  margin-top: -2px;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-body .mission-wrapper-task > span {
  font-family: Edit Undo BRK;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-body #mission-wrapper-currency {
  font-family: Edit Undo BRK;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 24px;
  color: black;
  display: flex;
  margin: auto;
  margin-top: -10px;
}
#missions-wrapper #missions-wrapper-container .mission-wrapper .mission-wrapper-body #mission-wrapper-currency #mission-wrapper-currency-icon {
  height: 20px;
  width: 20px;
  background-color: #E3E3E3;
  background-size: 20px;
  background-position: center;
  margin-right: 4px;
}
#season-wrapper {
  background: #B0B0B0;
  width: 290px;
  height: 133px;
  top: auto;
  margin-bottom: 23px;
}
#season-wrapper .season-wrapper-header {
  color: black;
  margin-top: 18px;
  margin-left: 15px;
  display: inline-flex;
}
#season-wrapper .season-wrapper-header .season-wrapper-title {
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 24px;
  text-transform: uppercase;
}
#season-wrapper .season-wrapper-header #season-wrapper-number {
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 24px;
  margin-left: 5px;
}
#season-wrapper .season-wrapper-line {
  margin-top: 6px;
  margin-left: 15px;
  margin-bottom: 9px;
  width: 188px;
  height: 3px;
  background-color: #C4C4C4;
}
#season-wrapper .season-wrapper-body {
  margin-top: 23px;
}
#season-wrapper .season-wrapper-body .season-wrapper-level {
  color: black;
  font-family: Edit Undo BRK;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 13px;
  display: flex;
  align-items: center;
  margin-left: 15px;
  margin-bottom: 10px;
}
#season-wrapper .season-wrapper-body .season-wrapper-level #season-wrapper-level-number {
  font-family: Edit Undo BRK;
  margin-left: 5px;
  font-size: 14px;
}
#season-wrapper .season-wrapper-body .season-wrapper-progress {
  display: flex;
}
#season-wrapper .season-wrapper-body .season-wrapper-progress .season-wrapper-progress-outer {
  background: #E3E3E3;
  width: 166px;
  height: 8px;
  margin-left: 15px;
}
#season-wrapper .season-wrapper-body .season-wrapper-progress .season-wrapper-progress-outer #season-wrapper-progress-inner {
  height: auto;
  background: #CCCCCC;
}
#season-wrapper .season-wrapper-body .season-wrapper-progress .season-wrapper-task {
  justify-content: center;
  display: flex;
  margin-left: 6px;
  color: black;
}
#season-wrapper .season-wrapper-body .season-wrapper-progress .season-wrapper-task > span {
  font-family: Edit Undo BRK;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}
#season-wrapper .season-wrapper-body #season-wrapper-currency {
  font-family: Edit Undo BRK;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 24px;
  color: black;
  display: flex;
  position: relative;
  bottom: 21px;
  right: -231px;
}
#season-wrapper .season-wrapper-body #season-wrapper-currency #season-wrapper-currency-icon {
  height: 20px;
  width: 20px;
  background-color: #E3E3E3;
  background-size: 20px;
  background-position: center;
  margin-right: 4px;
}
#start-logo-header {
  width: 310px;
}
#server-warning,
#game-warning {
  background-image: linear-gradient(to right, rgba(210, 0, 0, 0), rgba(210, 0, 0, 0.9), rgba(210, 0, 0, 0));
  border-radius: 5px;
  bottom: -35px;
  box-sizing: border-box;
  color: white;
  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: 100%;
  /*margin-bottom: 66px;
    margin-top: 97px;*/
}
@media (max-width: 850px), (max-width: 900px) {
  #server-warning,
  #game-warning {
    font-size: 12px;
    height: 18px;
    line-height: 20px;
    position: relative;
    top: 82px;
  }
}
#game-warning {
  bottom: auto;
  top: 10%;
  width: 70%;
}
#start-main #offerwall-collecting {
  display: flex;
  width: 290px;
  height: 70px;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: absolute;
  font-size: 15px;
  font-family: 'Edit Undo BRK';
  left: 4%;
  top: 26%;
}
@media (max-width: 1800px) {
  #start-main #offerwall-collecting {
    -webkit-transform: scale(1);
            transform: scale(1);
    left: 3.5%;
    top: 22%;
  }
}
@media (max-width: 1280px) {
  #start-main #offerwall-collecting {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    left: 3.5%;
    top: 22%;
  }
}
#start-main #offerwall-collecting img {
  position: relative;
  left: 3%;
  top: 41%;
}
#start-main #offerwall-collecting div {
  font-size: 20px;
  left: 5%;
  position: relative;
  font-family: 'Edit Undo BRK';
}
@media (max-width: 1800px) {
  #start-main #home-container {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-width: 1700px), (max-height: 945px) {
  #start-main #home-container {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-width: 1600px) {
  #start-main #home-container {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-height: 860px) {
  #start-main #home-container {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-height: 745px) {
  #start-main #home-container {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-width: 1550px), (max-height: 698px) {
  #start-main #home-container {
    position: relative;
    -webkit-transform: scale(0.64);
            transform: scale(0.64);
  }
}
@media (max-width: 1150px), (max-height: 650px) {
  #start-main #home-container {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
  }
}
@media (max-width: 1000px), (max-height: 550px) {
  #start-main #home-container {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@media (max-width: 800px) {
  #start-main #home-container {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
}
@media (max-height: 350px) {
  #start-main #home-container {
    -webkit-transform: scale(0.35);
            transform: scale(0.35);
  }
  #start-main #home-container #start-main-header {
    margin-bottom: 60px;
    margin-top: 100px;
  }
  #start-main #home-container .animated-loadout {
    margin-bottom: 0 ;
  }
  #start-main #home-container .home-ad-block {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    -webkit-transform-origin: top;
    transform-origin: top;
    top: 150px;
  }
}
#start-main-center {
  /*position: absolute;*/
  width: 1610px;
  height: 99%;
  -webkit-transform-origin: 50% 5%;
          transform-origin: 50% 5%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media (max-width: 4500px) {
  .tutorial-overlay {
    top: 27%!important;
  }
}
@media (max-width: 3000px) {
  .tutorial-overlay {
    padding-top: 112px !important;
    top: 53%!important;
  }
}
@media (max-width: 2000px), (max-height: 900px) {
  .tutorial-overlay {
    padding-top: 46px !important;
    top: 58%!important;
    left: 50%;
  }
}
@media (max-width: 1800px) {
  .tutorial-overlay {
    padding-top: 36px  !important;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  .tutorial-overlay {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  .tutorial-overlay {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-width: 1550px), (max-height: 698px) {
  .tutorial-overlay {
    position: relative;
    -webkit-transform: scale(0.64);
            transform: scale(0.64);
    top: 46% !important;
    left: 44.95% !important;
  }
}
@media (max-width: 1400px), (max-height: 650px) {
  .tutorial-overlay {
    top: 57% !important;
    left: 44.65% !important;
  }
}
@media (max-width: 1300px), (max-height: 650px) {
  .tutorial-overlay {
    top: 54% !important;
    left: 44.2% !important;
  }
}
@media (max-width: 1150px), (max-height: 650px) {
  .tutorial-overlay {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
    top: 48% !important;
    left: 41% !important;
  }
}
@media (max-width: 1000px), (max-height: 650px) {
  .tutorial-overlay {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
    top: 52% !important;
    left: 43% !important;
  }
}
@media (max-width: 1000px), (max-height: 550px) {
  .tutorial-overlay {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@media (max-width: 800px) {
  .tutorial-overlay {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
}
@media (max-height: 350px) {
  .tutorial-overlay {
    -webkit-transform: scale(0.35);
            transform: scale(0.35);
  }
  .tutorial-overlay #start-main-header {
    margin-bottom: 60px;
    margin-top: 100px;
  }
  .tutorial-overlay .animated-loadout {
    margin-bottom: 0 ;
  }
  .tutorial-overlay .home-ad-block {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    -webkit-transform-origin: top;
    transform-origin: top;
    top: 150px;
  }
}
.ftue-tooltip {
  -webkit-transform-origin: left;
          transform-origin: left;
}
@media (max-width: 1800px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@media (max-width: 1700px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1600px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
@media (max-width: 1400px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
  }
}
@media (max-width: 1150px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
  }
}
@media (max-width: 1000px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.45);
            transform: scale(0.45);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  .ftue-tooltip {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
}
/*#ftue-steps {
    @media (max-width: 1800px) {
        transform: scale(0.95);
    }

    @media (max-width: 1700px) {
        transform: scale(0.9);
    }

    @media (max-width: 1600px) {
        transform: scale(0.75);
    }

    @media (max-width: 1400px) {
        transform: scale(0.65);
    }

    @media (max-width: 1150px) {
        transform: scale(0.55);
    }

    @media (max-width: 1000px) {
        transform: scale(0.5);
    }

    @media @mobile {
        transform: scale(0.45);
    }

    @media @mobile-sm {
        transform: scale(0.4);
    }

}*/
.ad-block-left-bottom,
.ad-block-med-rect,
.ad-block-leaderboard-bottom {
  z-index: 1;
  /*@media @desktop-sm {
        transform: scale(0.9);
        transform-origin: bottom;
    }*/
}
@media (max-width: 1800px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@media (max-width: 1700px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1600px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
@media (max-width: 1400px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
  }
}
@media (max-width: 1150px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
  }
}
@media (max-width: 1000px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.45);
            transform: scale(0.45);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  .ad-block-left-bottom,
  .ad-block-med-rect,
  .ad-block-leaderboard-bottom {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
.hide-ad {
  display: none !important;
}
#start-row-top {
  height: 456px;
  position: relative;
  display: flex;
}
@media (max-width: 850px), (max-width: 900px) {
  #start-row-top {
    display: flex;
  }
}
.center-start-row {
  position: absolute;
  margin: 0;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translateY(calc(50% - 163px));
          transform: translateY(calc(50% - 163px));
}
@media (max-width: 1800px) {
  .center-start-row {
    -webkit-transform: translateY(calc(50% - 154.85px));
            transform: translateY(calc(50% - 154.85px));
  }
}
@media (max-width: 1700px) {
  .center-start-row {
    -webkit-transform: translateY(calc(50% - 146.7px));
            transform: translateY(calc(50% - 146.7px));
  }
}
@media (max-width: 1600px) {
  .center-start-row {
    -webkit-transform: translateY(calc(50% - 122.25px));
            transform: translateY(calc(50% - 122.25px));
  }
}
@media (max-width: 1400px) {
  .center-start-row {
    -webkit-transform: translateY(calc(50% - 105.95px));
            transform: translateY(calc(50% - 105.95px));
  }
}
@media (max-width: 1150px) {
  .center-start-row {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}
.menu-column {
  display: flex;
  margin: 10px auto;
  flex-direction: column;
  align-items: center;
}
.menu-block {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10.27px;
  box-sizing: border-box;
  display: block;
  max-height: 325px;
}
@media (max-width: 850px), (max-width: 900px) {
  .menu-block {
    max-height: initial;
  }
}
#splash-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #202939;
  z-index: 9999999;
}
#splash-screen #kongregate-logo {
  margin: 23% auto;
}
#preroll-wrapper {
  background: rgba(0, 0, 0, 0.75);
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.0;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 20;
}
#preroll {
  height: 540px;
  left: 50%;
  position: relative;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 960px;
}
#ad-block-right {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
  height: 250px;
  margin-left: 30px;
  width: 300px;
  right: 0px;
}
@media (max-width: 850px), (max-width: 900px) {
  #ad-block-right {
    height: 165px;
    width: 200px;
  }
}
.home-ad-block {
  position: absolute;
  right: 40px;
  top: 170px;
  display: none;
  /* @media (max-width: 1800px) {
        transform: scale(0.95);
    }

    @media (max-width: 1700px) {
        transform: scale(0.9);
    }

    @media (max-width: 1600px) {
        transform: scale(0.75);
    }

    @media (max-width: 1400px) {
        position: relative;
        transform: scale(0.65);
    }

    @media (max-width: 1150px) {
        transform: scale(0.55);
    }

    @media (max-width: 1000px) {
        transform: scale(0.5);
    }*

    @media (max-height: 1000px), (max-width: 1800px) {
        transform: translateY(calc(50% - 154.85px));

        transform: scale(0.9);
        transform-origin: right top;
    }

    @media (max-height: 960px), (max-width: 1600px) {
        transform: translateY(calc(50% - 154.85px));

        transform: scale(0.8);
        transform-origin: right top;
        top:150px;
    }

    @media (max-height: 860px), (max-width: 1400px) {
        transform: translateY(calc(50% - 154.85px));

        transform: scale(0.7);
        transform-origin: right top;
        top:130px;
    }

    @media (max-height: 760px), (max-width: 1150px) {
        transform: translateY(calc(50% - 154.85px));

        transform: scale(0.6);
        transform-origin: right top;
        top:110px;
    }
    

    @media (max-width: 1000px) {
        transform: scale(0.5);
    }*/
}
.home-ad-block > div {
  height: 250px;
  width: 290px;
  background: gray;
}
.home-ad-block .ad-block-home-med {
  margin: 17px 0;
}
@media (max-height: 1000px) {
  .home-ad-block {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: top right;
            transform-origin: top right;
    right: 0px;
  }
}
.ad-block-med-rect {
  height: 250px;
  width: 290px;
  position: absolute;
  top: 439px;
  right: var(--side-pad);
  background: gray;
}
.ad-block-left-bottom {
  height: 250px;
  width: 290px;
  position: absolute;
  top: 170px;
  right: var(--side-pad);
  background: gray;
}
.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 {
  margin-left: auto;
  margin-right: auto;
  pointer-events: auto;
  position: absolute;
  text-align: center;
  top: 709px;
  right: var(--side-pad);
  background: gray;
  height: 250px;
  width: 290px;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  /*@media (max-width: 1100px) {
        transform: scale(0.9);
    }*/
}
.ad-block-leaderboard-bottom div {
  margin: auto;
}
@media (max-width: 1100px) and (max-height: 720px) {
  .ad-block-leaderboard-bottom {
    right: auto;
  }
}
/**
 * social-share-block
 */
#social-share-block-wrapper {
  position: absolute;
  right: 5px;
  /*bottom: 50px;*/
  right: var(--side-pad);
  top: 28%;
  z-index: 1;
}
@media (max-height: 700px), (max-width: 1150px) {
  #social-share-block-wrapper {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
#social-share-block {
  padding: 4px;
  padding-top: 10px;
}
.btn-social-wrapper {
  width: 100%;
  text-align: center;
}
.btn-social {
  display: block;
  background-size: 40px;
  height: 42px;
  width: 40px;
  margin: 6px auto;
  margin-right: 0px;
  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-youtube {
  background-image: url(../img/icon_youtube.png);
  background-color: #ff0000;
  box-shadow: inset 0 -4px #8e0000;
}
.btn-instagram {
  background-image: url(../img/icon_instagram.png);
  background-color: #d93175;
  box-shadow: inset 0 -4px #9b2354;
}
.market-btn-disabled {
  color: inherit;
  -webkit-filter: brightness(50%);
  filter: brightness(50%);
  transition: all 0.25s ease;
  cursor: none;
  pointer-events: none;
  background: #6D6D6D !important;
  border-bottom: 2px solid #2C2C2C !important;
  box-shadow: inset 0 -2px #2C2C2C !important;
}
.market-btn-hide {
  color: inherit;
  transition: all 0.25s ease;
  cursor: none;
  pointer-events: none;
  background: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
#social-share-wrapper {
  margin-top: 8px;
  height: 18px;
  width: 100%;
  text-align: center;
}
.social-share-item {
  display: inline-flex;
  vertical-align: bottom;
}
.pass-premium-buy-btn {
  position: relative;
  overflow: hidden;
  margin-top: 11px;
}
.pass-premium-buy-btn .percent-box {
  display: none;
  position: absolute;
  background: radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  box-shadow: 0px 1.44643px 0px #AA1313;
  width: 72.59px;
  height: 12.79px;
  font-style: normal;
  font-weight: bold;
  font-size: 10.125px;
  line-height: 12px;
  text-align: center;
  color: #AA1313;
  left: -21px;
  top: 9px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.pass-premium-buy-btn .btn-green {
  box-shadow: 0px 6.21294px 0px #C68808;
  border-radius: 0px 0px 3.72777px 3.72777px;
  background: linear-gradient(180deg, #C68609 0%, #E5E802 64.69%, #FDFF83 100%);
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  color: #000000;
  border: none;
  height: 50px;
  margin-bottom: 7px;
  padding: 0 111px;
}
.pass-premium-buy-btn .btn-green .pass-btn-text {
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  margin: 0;
}
.pass-premium-buy-btn .btn-green .pass-premium-icon {
  background-image: url(../img/pass/pass-premium-badge.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 45px;
  height: 45px;
  margin: 0;
}
.pass-premium-buy-btn .btn-green.premium {
  background: #C8B91E;
  box-shadow: 0px 6.21294px 0px #C8B91E;
  pointer-events: none;
  justify-content: center;
  text-shadow: none;
}
.pass-premium-buy-btn .btn-green.premium .pass-gold-pass-text {
  font-style: normal;
  font-weight: normal;
  font-size: 26px;
  margin-right: 10px;
}
.pass-premium-buy-btn .btn-green.premium .pass-bonus-text {
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
}
.pass-premium-buy-btn .pass-premium-box-timer {
  background: #251A04;
  border: 2px solid #DFD503;
  text-align: center;
  color: #DFD503;
  width: 300.67px;
  height: 41.27px;
  margin: 0 auto;
  border-top: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pass-premium-buy-btn .pass-premium-box-timer div {
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 26px;
}
.item-rarity-style {
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background-color: #969696;
}
.item-rarity-style .item-outfit {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-outfit-style.svg);
  mask-image: url(../img/gui/item-outfit-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff;
}
.item-rarity-style .item-outfit.dark {
  background: #000000;
}
.item-rarity-style .item-melee {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-melee-style.svg);
  mask-image: url(../img/gui/item-melee-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff;
}
.item-rarity-style .item-melee.dark {
  background: #000000;
}
.item-rarity-style .item-emote {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-emote-style.svg);
  mask-image: url(../img/gui/item-emote-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 70%;
  mask-size: 70%;
  background: #ffffff;
}
.item-rarity-style .item-emote.dark {
  background: #000000;
}
.item-rarity-style .item-heal,
.item-rarity-style .item-heal_effect {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-heal-style.svg);
  mask-image: url(../img/gui/item-heal-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff;
}
.item-rarity-style .item-heal.dark,
.item-rarity-style .item-heal_effect.dark {
  background: #000000;
}
.item-rarity-style .item-golden_potato {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-potato-style.svg);
  mask-image: url(../img/gui/item-potato-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff;
}
.item-rarity-style .item-golden_potato.dark {
  background: #000000;
}
.item-rarity-style.golden::before {
  content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;
  border: 1em solid transparent;
  -o-border-image: linear-gradient(to top, red 0%, blue 100%);
     border-image: linear-gradient(to top, red 0%, blue 100%);
  border-image-slice: 1;
}
.item-rarity-style .item-boost,
.item-rarity-style .item-boost_effect {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-boost-style.svg);
  mask-image: url(../img/gui/item-boost-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff;
}
.item-rarity-style .item-boost.dark,
.item-rarity-style .item-boost_effect.dark {
  background: #000000;
}
.item-rarity-style .item-deathEffect {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-deathEffect-style.svg);
  mask-image: url(../img/gui/item-deathEffect-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff;
}
.item-rarity-style .item-deathEffect.dark {
  background: #000000;
}
.item-rarity-style .item-crosshair {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../img/gui/item-crosshair-style.svg);
  mask-image: url(../img/gui/item-crosshair-style.svg);
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff;
}
.item-rarity-style .item-crosshair.dark {
  background: #000000;
}
.display-help > h1 {
  margin-top: 30px;
}
@media (max-width: 850px), (max-width: 900px) {
  .display-help > h1 {
    margin-top: 12px;
  }
}
.display-help > p {
  margin: 6px;
}
@media (max-width: 850px), (max-width: 900px) {
  .display-help > p {
    margin: 2px;
    font-size: 11px;
    line-height: 16px;
  }
}
.display-help span.help-action {
  font-weight: normal;
}
@media (max-width: 850px), (max-width: 900px) {
  .display-help span.help-action {
    font-size: 11px;
  }
}
.display-help span.help-control {
  font-weight: bold;
}
@media (max-width: 850px), (max-width: 900px) {
  .display-help span.help-control {
    font-size: 11px;
  }
}
.menu-option {
  display: flex;
  line-height: 38px;
  margin-bottom: 12px;
  text-align: center;
  text-decoration: none;
  width: 100%;
  justify-content: center;
  align-items: center;
}
@media (max-width: 850px), (max-width: 900px) {
  .menu-option {
    font-size: 12px;
    line-height: 30px;
    margin-bottom: 6px;
  }
}
.menu-team-autofill-option {
  display: flex;
  background: #555555;
  height: 40px;
  box-shadow: 0px 6.20636px 0px #3E3E3E;
  border-radius: 3.72381px;
  font-weight: bold;
}
#team-menu-options-start {
  margin-bottom: 11px;
}
.btn-team-fill {
  margin: auto auto;
  background: #555555;
  padding: 0px 10%;
}
.btn-team-fill * {
  font-size: 20px;
}
.center-divider-team-menu {
  position: relative !important;
  margin: auto !important;
  padding: 0px !important;
}
.menu-option:focus,
.menu-option.focus {
  box-shadow: 0 0 1px 1px #83af50;
}
.server-select {
  background-color: #50afab;
  border-bottom: 2px solid #387c79;
  box-shadow: inset 0 -2px #387c79;
  color: #ffffff;
}
.btns-double-row {
  display: flex;
  max-width: 290px;
  margin: auto;
}
.btns-double-row > a {
  display: inline-block;
}
.btns-double-row > a:not(:last-child) {
  margin-right: 4px;
}
.team-btns-text {
  display: inline-block;
  line-height: 22px;
  font-size: 15px;
  font-family: Amiga Forever;
  text-transform: lowercase;
}
@media (max-width: 850px), (max-width: 900px) {
  .team-btns-text {
    line-height: 15px;
  }
}
.btn-green {
  background: #B0B0B0;
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  border-bottom: 2px solid #5b7a38;
  box-shadow: inset 0 -2px #5b7a38;
  color: black;
  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) {
  .btn-green {
    font-size: 12px;
  }
}
.btn-blue {
  background: #1e90ff;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  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) {
  .btn-blue {
    background: #9850af;
    border-bottom: 2px solid #683679;
    box-shadow: none;
    font-size: 12px;
  }
}
.btn-xpr-blue {
  background: #1e90ff;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  color: white;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  height: 46px;
  line-height: 46px;
  margin: 22px auto;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-xpr-blue {
    background: #1e90ff;
    border-bottom: 2px solid #1871c8;
    box-shadow: none;
    font-size: 12px;
  }
}
.btn-xpr-blue .pass-xp-icon {
  background-image: url(../img/pass/pass-video-icon.svg);
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: right;
  width: 28px;
  height: 28px;
  position: absolute;
  left: 79.36%;
  right: 6.68%;
  top: 18%;
  /*   @media @mobile {
            background-image:none;
        }*/
}
.btn-purple {
  background: #874C91;
  border-bottom: 2px solid #614066;
  box-shadow: inset 0 -2px #614066;
  position: absolute;
  top: 0;
}
.btn-pharma-crates {
  background: #50AFAB;
  border-bottom: 2px solid #387c79;
  box-shadow: inset 0 -2px #387c79;
  position: absolute;
  top: 0;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 18px;
}
.btn-offerwall {
  /*background: #9A6A0C;
    border-bottom: 2px solid #855e0e;
    box-shadow: inset 0 -2px #855e0e;*/
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 19px;
  display: flex;
  justify-content: center;
  background: #251A04;
  box-shadow: 0px 5px 0px #1D1300;
  border-bottom: none;
}
.btn-offerwall-container {
  background: linear-gradient(180deg, #C68609 0%, #E5E802 64.69%, #FDFF83 100%);
  box-shadow: 0px 5px 0px #1D1300;
  border-radius: 3px;
  padding: 3px;
  height: 40px;
  width: 89%;
  margin: 0 auto;
}
.btn-offerwall-shop {
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  height: 40px;
  width: 98%;
}
.btn-offerwall-shop .btn-offerwall {
  position: relative;
  height: 90%;
}
.btn-offerwall::after {
  content: url(../img/gui/currency-golde-potato.svg);
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.offerwall-start {
  position: relative;
  display: flex;
  width: 100%;
  height: 90%;
}
.offerwall-text {
  margin-top: 0px !important;
  font-size: 19px;
  background: linear-gradient(180deg, #C68609 0%, #E5E802 64.69%, #FDFF83 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-orange {
  background: #C68609;
  border-bottom: 2px solid #664400;
  box-shadow: inset 0 -2px #664400;
}
.btn-get-gems {
  background: #874C91;
  border-bottom: 2px solid #614066;
  box-shadow: inset 0 -2px #614066;
  position: absolute;
  top: 20px;
  width: 100px;
  right: -480px;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-get-gems {
    top: 50px;
    right: -380px;
  }
}
.btn-add-xp {
  background: #874C91;
  border-bottom: 2px solid #614066;
  box-shadow: inset 0 -2px #614066;
  position: absolute;
  top: 20px;
  width: 100px;
  right: -370px;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-add-xp {
    top: 10px;
    right: -380px;
  }
}
.btn-google-unlink {
  background: #874C91;
  border-bottom: 2px solid #614066;
  box-shadow: inset 0 -2px #614066;
  position: absolute;
  top: 20px;
  width: 100px;
  right: -590px;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-google-unlink {
    top: 10px;
    right: -490px;
  }
}
.btn-expire-market-items {
  background: #874C91;
  border-bottom: 2px solid #614066;
  box-shadow: inset 0 -2px #614066;
  position: absolute;
  top: 20px;
  right: -720px;
  width: 120px;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-expire-market-items {
    top: 50px;
    right: -490px;
    width: 100px;
  }
}
.btn-open-iap {
  background: #874C91;
  border-bottom: 2px solid #614066;
  box-shadow: inset 0 -2px #614066;
  background-image: url(../img/shop_icon.svg);
  background-position: 19%;
  background-repeat: no-repeat;
  background-size: 28px;
  padding-left: 10px;
  font-size: 25px;
  font-weight: bold;
  height: 66px;
  line-height: 69px;
}
.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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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) {
  .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: 46px;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-custom-mode-no-indent {
    background-position: 0px 2px;
    background-size: 22px;
    box-shadow: none;
    height: 28px;
  }
}
.btn-custom-mode-no-indent-no-animation {
  -webkit-animation-duration: 0s !important;
  background-repeat: no-repeat;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-custom-mode-no-indent-no-animation {
    background-position: 0px 2px;
    background-size: 22px;
    box-shadow: none;
  }
}
.btn-custom-mode-select {
  background-repeat: no-repeat;
  background-size: 21px;
  background-position: 6px center;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-custom-mode-select {
    background-position: 4px center;
    background-size: 14px;
    text-indent: 14px;
  }
}
#team-menu-options-start .btn-mode-mayo {
  background-size: 10%;
}
.play-button-container {
  position: relative;
  margin: 0 33%;
  z-index: 1;
}
.play-loading-outer {
  position: relative;
  margin-left: 30px;
  z-index: 5;
  opacity: 0.0;
  pointer-events: none;
}
.play-loading-inner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 100px;
}
.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) {
  #btn-customize {
    background-position: center;
    background-size: 20px;
    box-shadow: none;
    height: 30px;
    width: 22%;
  }
}
.btn-team-option {
  background: #B0B0B0;
  border-bottom: none;
  box-shadow: none;
  color: black;
  cursor: pointer;
  position: relative;
  text-shadow: none;
  font-weight: normal;
  line-height: 47px;
  height: 46px;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-team-option {
    border-bottom: none;
  }
}
#btn-team-leave {
  color: white;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -webkit-transform: scale(1);
          transform: scale(1);
  width: 100%;
  height: 45px;
  width: 311px;
  line-height: 47px;
  background: #CD3412;
  box-shadow: 0px 6.20636px 0px #821F09;
}
@media (max-height: 800px) {
  #btn-team-leave {
    font-size: 16px;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #btn-team-leave {
    box-shadow: none;
    font-size: 14px;
    line-height: 30px;
    top: 0px;
  }
}
#team-menu {
  display: none;
  height: 533px;
  width: 1122px;
  max-width: none;
  max-height: 533px;
  position: absolute;
  margin: auto auto;
  left: 0px;
  right: 0px;
}
@media (max-width: 850px), (max-width: 900px) {
}
#team-menu .modal-header {
  background-color: #1E90FF;
}
#team-menu .modal-header > h2 {
  color: #FFFFFF;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 20px;
  text-align: center;
  margin: 19px auto;
}
.member-boost-value {
  position: relative;
  top: 42%;
  /* -webkit-transform: translateY(-50%); */
  -webkit-transform: translateY(-42%);
          transform: translateY(-42%);
  text-align: center;
  color: #00EF32;
  font-size: 35px;
  font-weight: bold;
}
.play-team-button-container {
  position: relative;
  z-index: 1;
}
#team-menu-columns {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
}
#team-menu-connecting {
  display: none;
  margin-top: 120px;
  text-align: center;
  width: 100%;
}
@media (max-width: 850px), (max-width: 900px) {
  #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: 0px;
  margin-right: 0px;
  margin-top: 0px;
  max-height: 350px;
}
#team-menu-members {
  padding: 6px 0px;
  width: 770px;
}
@media (max-width: 850px), (max-width: 900px) {
}
.xp-boost-bar-container {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  width: 100%;
  height: 9px;
}
#xp-boost-bar {
  background: #00EF32;
  border-radius: 4px;
  width: 20%;
  height: 9px;
  transition: width 2s;
}
#squad-boost-perc {
  font-weight: bold;
  font-size: 25px;
  line-height: 45px;
  text-align: center;
  color: #00EF32;
  background: rgba(255, 255, 255, 0.1);
  height: 46px;
  border-radius: 4px;
  margin-bottom: 10px;
}
#team-boost {
  font-weight: bold;
  font-size: 25px;
  line-height: 45px;
  text-align: center;
  color: #00EF32;
  height: 46px;
  border-radius: 4px;
  margin-bottom: 10px;
}
#boost-warning {
  color: #FFDA57;
  font-size: 20px;
  text-align: center;
  line-height: 23px;
  margin: 20px auto;
}
.team-menu-member-list {
  display: inline-block;
}
.member-name-placeholder {
  position: relative;
  text-align: center;
  width: 92%;
  margin: auto;
  font-size: 20px;
  word-break: break-word;
  top: 32%;
  -webkit-transform: translateY(-32%);
  transform: translateY(-32%);
}
.team-menu-member {
  display: inline-block;
  margin-left: 17px;
  height: 242px;
  background: rgba(255, 255, 255, 0.1);
  vertical-align: top;
  max-width: 172px;
}
.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;
  position: absolute;
}
@media (max-width: 850px), (max-width: 900px) {
  .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: right;
  background-size: 17%;
  opacity: 1.0;
  cursor: pointer;
  width: 164px;
  z-index: 1;
}
.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 {
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: initial;
  flex: 1;
  padding: 10px 12px;
  width: 172px;
}
@media (max-width: 850px), (max-width: 900px) {
  .name {
    padding: 4px;
    width: 172px;
    margin-top: 34px;
  }
}
.name-text {
  color: white;
  font-size: 20px;
  line-height: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
@media (max-width: 850px), (max-width: 900px) {
  .name-text {
    font-size: 16px;
  }
}
.team-hide-copy-url *,
#team-code-text * {
  display: inline-block !important;
  margin-left: 53px;
}
.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-code-text {
  display: block;
  font-size: 18px;
  color: white;
  font-weight: bold;
  width: 1155px;
}
#team-code-text span {
  display: block;
}
@media (max-width: 850px), (max-width: 900px) {
  #team-code-text {
    font-size: 12px;
    margin-top: initial;
  }
}
#invite-code-text {
  color: white;
  font-size: 20px;
  font-weight: normal;
  width: 103px;
}
@media (max-width: 850px), (max-width: 900px) {
  #invite-code-text {
    font-size: 14px;
    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: 8px auto;
  text-align: center;
}
@media (max-width: 850px), (max-width: 900px) {
  #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: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  width: 1050px;
  max-width: none;
  padding-bottom: 20px;
  left: 0px;
  right: 0px;
}
#team-mobile-link .modal-header {
  background-color: #1E90FF;
}
#team-mobile-link .modal-header > h2 {
  color: #FFFFFF;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
  font-style: normal;
  font-weight: bold;
  font-size: 50px;
  line-height: 20px;
  text-align: center;
}
.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) {
  .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;
}
#xp-team-text {
  font-size: 25px;
  line-height: 30px;
  padding: 21px 17px;
  color: #ffffff;
}
.team-text-container {
  display: flex;
}
.team-text-container #xp-team-mission-value,
.team-text-container #xp-team-mission-text {
  opacity: 0;
  margin: auto;
  font-size: 25px;
  color: #00EF32;
  font-weight: bold;
  transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -webkit-transition: opacity 2s ease-in-out;
}
.xp-test {
  width: 279px;
  z-index: 1;
  display: flex;
}
.xp-test p {
  font-size: 27px;
  font-weight: bold;
}
.hide-on-team {
  display: none !important;
}
.team-menu-central-ad {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
@media (max-width: 1800px) {
  .team-menu-central-ad {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}
@media (max-width: 1700px) {
  .team-menu-central-ad {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@media (max-width: 1600px) {
  .team-menu-central-ad {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
  }
}
@media (max-width: 1400px) {
  .team-menu-central-ad {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
  }
}
@media (max-width: 1150px) {
  .team-menu-central-ad {
    -webkit-transform: scale(0.45);
            transform: scale(0.45);
  }
}
@media (max-width: 1000px) {
  .team-menu-central-ad {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
}
#team-link-input {
  cursor: initial;
  margin: auto;
  width: 172px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  color: #74FBFD;
  margin-left: 15px;
  font-size: 20px;
}
#team-url {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 15px 0px;
  width: 361px;
  text-align: center;
}
#team-code {
  width: 172px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  margin-left: 46px;
  font-size: 20px;
}
#team-link-input::-webkit-input-placeholder {
  color: #74FBFD;
}
#team-link-input::-moz-placeholder {
  color: #74FBFD;
}
#team-link-input::-ms-input-placeholder {
  color: #74FBFD;
}
#team-link-input::placeholder {
  color: #74FBFD;
}
#team-menu-options {
  width: 335px;
  padding: 12px;
}
#team-menu-options .btn-change-mode-outer {
  margin-bottom: 20px;
}
#team-menu-options .btn-change-type-inner,
#team-menu-options .btn-change-mode-inner {
  margin-left: 0px;
  width: 100%;
}
#team-menu-options .btn-change-mode-selection div,
#team-menu-options .btn-change-type-selection div .right-play-btn {
  float: right;
  width: 72%;
}
#team-menu-options .btn-change-type-selection div .right-play-btn {
  float: right;
  width: 69% !important;
}
@media (max-width: 850px), (max-width: 900px) {
  #team-menu-options {
    float: right;
    padding: 12px 0px;
  }
}
#btn-team-mobile-link-join {
  width: 150px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 11px;
  width: 173px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.currency-container {
  position: absolute;
  top: 80px;
  right: 40px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 200px;
}
@media (max-width: 1800px) {
  .currency-container {
    -webkit-transform: translateX(0%) translateY(0%) scale(1);
            transform: translateX(0%) translateY(0%) scale(1);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  .currency-container {
    -webkit-transform: translateX(1%) translateY(1%) scale(0.9);
            transform: translateX(1%) translateY(1%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  .currency-container {
    -webkit-transform: translateX(1%) translateY(1%) scale(0.9);
            transform: translateX(1%) translateY(1%) scale(0.9);
  }
}
@media (max-width: 1550px) {
  .currency-container {
    -webkit-transform: translateX(5%) translateY(-55%) scale(0.9);
            transform: translateX(5%) translateY(-55%) scale(0.9);
  }
}
@media (max-width: 1400px) {
  .currency-container {
    -webkit-transform: translateX(15%) translateY(-8%) scale(1);
            transform: translateX(15%) translateY(-8%) scale(1);
  }
}
@media (max-width: 1300px) {
  .currency-container {
    -webkit-transform: translateX(35%) translateY(-30%) scale(0.82);
            transform: translateX(35%) translateY(-30%) scale(0.82);
  }
}
@media (max-width: 1050px) {
  .currency-container {
    -webkit-transform: translateX(30%) translateY(-94%) scale(0.9);
            transform: translateX(30%) translateY(-94%) scale(0.9);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .currency-container {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
.currency-container .text-gold {
  font-size: 30px;
}
.currency-container #gems-total {
  color: #9CCCEC;
}
.currency-container #gold-total {
  color: #FFECAD;
}
/**
 * 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: 720px), (max-width: 1150px) {
  #start-top-right {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transform-origin: top right;
            transform-origin: top right;
    right: 13px;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #start-top-right {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}
.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 !important;
}
.ui-modal-keybind .base-button {
  width: 184px;
}
.ui-modal-keybind-content {
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  position: fixed;
}
#ui-modal-keybind-footer {
  color: white;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#ui-modal-keybind-body {
  height: 100%;
  padding-right: 10px;
}
#ui-modal-keybind-list {
  height: calc(100% - 60px);
  overflow-y: scroll;
  pointer-events: all;
  padding: 12px;
  box-sizing: border-box;
}
#ui-modal-keybind-share {
  padding: 12px;
  height: 150px;
  bottom: -10px;
  position: absolute;
  top: unset;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(100%);
          transform: translateX(-50%) translateY(100%);
  right: unset;
}
#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%;
}
@-webkit-keyframes hotkeyPulse {
  0% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  100% {
    -webkit-filter: brightness(0.5);
            filter: brightness(0.5);
  }
}
@keyframes hotkeyPulse {
  0% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  100% {
    -webkit-filter: brightness(0.5);
            filter: brightness(0.5);
  }
}
.ui-keybind-container {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.ui-keybind-container .btn-keybind-desc-selected {
  -webkit-animation: hotkeyPulse 0.7s alternate infinite;
          animation: hotkeyPulse 0.7s alternate infinite;
}
#keybind-link-text {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
}
#keybind-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --text-fill-width: 184px;
  --text-fill-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}
#keybind-code-input {
  --text-fill-width: 184px;
  --text-fill-height: 32px;
  padding-left: 10px;
  padding-right: 10px;
}
#ui-modal-keybind-share .border-bar {
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
  width: 102px;
}
.keybind-share-code-container {
  width: 200px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
#keybind-copy {
  top: -10px;
  float: right;
}
/**
 * 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;
  width: 510px;
}
.modal-account > .modal-content .close-corner {
  margin-top: 28px;
}
@media (max-width: 850px), (max-width: 900px) {
  .modal-account > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  .modal-account > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
.modal-account > .modal-content > .modal-header-name {
  height: 76px;
  min-width: 276px;
}
.modal-account > .modal-content > .modal-header-name #modal-account-name-title {
  text-transform: none !important;
}
.modal-account > .modal-content > .modal-footer > .finish {
  font-size: 24px;
  text-align: center;
  font-size: 19px;
  --outline-width: 2px;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;
  color: #FFFFFF;
  width: 171.91px;
  height: 40px;
  margin: 11px auto;
}
.modal-account > .modal-content > .modal-footer > .finish:hover,
.modal-account > .modal-content > .modal-footer > .finish:focus {
  cursor: pointer;
  text-decoration: none;
}
#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;
  box-sizing: border-box;
}
#modal-account-name-desc {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 2px black;
  width: 100%;
  display: none;
}
#modal-battle-tag-time-warning {
  font-size: 16px;
  font-weight: none;
  text-align: center;
  text-shadow: 2px 2px 2px black;
  width: 100%;
  margin: 0px;
  padding-bottom: 28px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
#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: 16px;
  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 {
  height: auto;
  -webkit-animation-name: d;
          animation-name: d;
  -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-height: 420px) {
  #modal-create-account .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#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 {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#modal-create-account .modal-body-text {
  padding-top: 16px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-create-account .modal-body .menu-option {
    height: 32px;
  }
}
#modal-create-account .modal-footer {
  margin-top: 20px;
}
#modal-support,
#modal-no-gems {
  display: none;
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-support .modal-content,
#modal-no-gems .modal-content {
  text-decoration: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-name: d;
  animation-name: d;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-support .modal-content,
  #modal-no-gems .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-support .modal-content,
  #modal-no-gems .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-support .modal-content .modal-header,
#modal-no-gems .modal-content .modal-header {
  background: #D20000;
}
#modal-support .modal-content .modal-header h2,
#modal-no-gems .modal-content .modal-header h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
}
#modal-support .modal-content .modal-body,
#modal-no-gems .modal-content .modal-body {
  background: #141414;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#modal-support .modal-content .modal-footer,
#modal-no-gems .modal-content .modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#modal-support .modal-content .modal-body-text,
#modal-no-gems .modal-content .modal-body-text {
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
}
#modal-support .modal-content .modal-body-text strong,
#modal-no-gems .modal-content .modal-body-text strong {
  font-size: 20px;
}
#modal-support .modal-content .btn-green,
#modal-no-gems .modal-content .btn-green {
  width: 170px;
  background: #6D6D6D;
  border-bottom: 2px solid #2C2C2C;
  box-shadow: inset 0 -2px #2C2C2C;
  margin-top: 10px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-support .modal-content .btn-green,
  #modal-no-gems .modal-content .btn-green {
    line-height: 20px;
  }
}
#modal-support .modal-header h2 {
  text-align: center;
}
#modal-support .modal-content {
  width: 750px;
}
.ftue-tooltip {
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 400px;
  height: 200px;
  top: -20px;
  right: 100%;
  border-radius: 10.27px;
  display: none;
  z-index: 6;
}
#modal-ftue {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
  -webkit-animation-name: d;
  animation-name: d;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}
#modal-ftue #ftue-overlay {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background: radial-gradient(50% 50% at 50% 50%, rgba(12, 17, 30, 0.8) 66%, rgba(12, 17, 30, 0.8) 100%);
}
#modal-ftue .ftue-content {
  position: relative;
  background-image: url(../img/ftue/ftue_01_label.png);
  width: 1090px;
  height: 180px;
  top: 37%;
  margin: auto auto;
  -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
  /* @media @mobile {
            transform: scale(0.7);
            transform-origin: top;
            top: 13%;
            width: 100%;
        }

        @media @mobile-sm {
            transform: scale(0.5);
            transform-origin: top;
            top: 13%;
        } */
}
@media (max-width: 1080px), (max-height: 775px) {
  #modal-ftue .ftue-content {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-transform-origin: top center;
            transform-origin: top center;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
#modal-ftue .ftue-header {
  /* background: #80B251;
        height: 93px; */
}
#modal-ftue .ftue-header .ftue-modal-title {
  padding-top: 22px;
  /* @media @mobile {
                font-size: 43.5089px !important;
            } */
}
#modal-ftue .ftue-header .close-corner {
  display: none;
  position: absolute;
  margin-top: 8px;
  margin-right: 0px;
  right: 2px;
}
#modal-ftue .ftue-body {
  height: auto;
  align-items: center;
  text-align: center;
  width: 763px;
  margin: 0 auto;
}
#modal-ftue .ftue-body .ftue-text {
  position: relative;
  top: 38%;
  width: 100%;
  margin: 20px 0px;
}
#modal-ftue .ftue-body .note-ftue {
  display: none;
  margin-top: 5px;
}
#modal-ftue .ftue-btns {
  display: flex;
  justify-content: center;
  -webkit-column-gap: 38px;
     -moz-column-gap: 38px;
          column-gap: 38px;
}
#modal-ftue .ftue-btns #ftue-yes,
#modal-ftue .ftue-btns #ftue-no {
  width: 184px;
  height: 43px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#modal-ftue #ftue-steps {
  display: none;
  width: 1280px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /* @media @mobile {
            width: 90%;
        }

        @media @mobile-sm {
            width: 82%;
        }
 */
  /*  @media (max-width: 1800px) {
            transform: scale(0.95);
            transform-origin: top center;
        } */
  /* @media (max-width: 1700px), (max-height:870px) {
            transform: scale(0.9);
        } */
  /*  @media (max-width: 1150px) {
            transform: scale(0.6);
        }
    
        @media (max-width: 1000px) {
            transform: scale(0.5);
        }
    
        @media (max-width: 800px) {
            transform: scale(0.4);
        } */
  /* @media (max-height: 350px) {
            transform: scale(0.35);
        }
 */
}
#modal-ftue #ftue-steps .ftue-image-container {
  position: relative;
  width: 100%;
  height: 86%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform-origin: top;
          transform-origin: top;
  /* @media (max-width: 1800px) {
                top: 0px;
                //transform: scale(0.95);
            }

            @media @mobile {
                width: 74%;
                height: 104%;
            } */
}
#modal-ftue #ftue-steps .ftue-image {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
}
#modal-ftue #ftue-steps .ftue-desc {
  width: 100%;
  height: 120px;
  background-image: url(../img/ftue/ftue_label_large.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
  color: #FFFFFF;
  margin: auto;
  padding: 31px 0;
  margin-top: 20px;
  margin-bottom: 10px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-ftue #ftue-steps .ftue-desc {
    font-size: 30px;
    line-height: 50px;
    margin-top: 10px;
  }
}
#modal-ftue #ftue-steps .ftue-bottom-text {
  margin: 20px 0;
  /*width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);*/
}
#modal-ftue #ftue-steps .advice-text {
  width: 1094px;
  margin-right: 6%;
  height: 120px;
  background-image: url(../img/ftue/ftue_box.png);
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 33px;
  padding-right: 69px;
  /*   @media (max-width: 1650px) {
                width: 44%;
                line-height: 36px;
            }
            @media @tablet {
                width: 50%;
            }

            @media @mobile {
                width: 50%;
                margin: auto 25%;
            } */
}
#modal-ftue #ftue-steps .ftue-next {
  width: 184px;
  --base-button_height: 62px;
  justify-content: center;
  cursor: pointer;
  margin: 1% auto;
  /*   @media @mobile {
                height: 20px;
                box-shadow: 0px 3.5px 0px #597C39;
            } */
}
#modal-ftue #ftue-steps .ftue-next span {
  display: flex;
  align-items: center;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
}
@media (max-height: 1080px) {
  #modal-ftue #ftue-steps {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-width: 1300px), (max-height: 1000px) {
  #modal-ftue #ftue-steps {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
  #modal-ftue #ftue-steps #modal-ftue #ftue-steps .ftue-desc {
    font-size: 35px;
    padding: 20px 0;
  }
  #modal-ftue #ftue-steps #modal-ftue #ftue-steps .advice-text {
    height: auto;
    font-size: 14px;
    padding-right: 0;
  }
}
@media (max-height: 900px) {
  #modal-ftue #ftue-steps {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
  #modal-ftue #ftue-steps #modal-ftue #ftue-steps .ftue-desc {
    font-size: 35px;
    padding: 20px 0;
  }
  #modal-ftue #ftue-steps .advice-text {
    height: auto;
    width: 100%;
    background-size: 100% 100%;
  }
}
@media (max-width: 1280px), (max-height: 890px) {
  #modal-ftue #ftue-steps {
    position: relative;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    width: 100%;
  }
}
@media (max-width: 1280px), (max-height: 680px) {
  #modal-ftue #ftue-steps {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}
.tip-desc-title {
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  background-image: url(../img/ftue/ftue_bubble-header.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 60px;
  margin-top: -21px;
  padding-top: 4px;
}
.tip-desc {
  align-items: left;
  text-align: left;
  color: #FFFFFF;
  width: 356px;
  margin: 0 auto;
}
.tip-desc .tip-desc-2 {
  margin-top: 16px;
}
#modal-ftue #ftue-steps .ftue-modal-content {
  width: 752px;
  height: 672px;
  top: 50%;
  margin: 0;
  position: absolute;
  -webkit-transform: translateY(-40%);
          transform: translateY(-40%);
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px;
  -webkit-transform-origin: center;
          transform-origin: center;
  /*    @media (max-width: 1800px) {
        transform: scale(0.85) translateY(-40%);
    }

    @media (max-width: 1700px) {
        transform: scale(0.80) translateY(-50%);
    }

   @media (max-width: 1600px) {
        transform: scale(0.75) translateY(-50%);
    }

    @media (max-width: 1400px) {
        transform: scale(0.70) translateY(-50%);
    }

    @media (max-width: 1150px) {
        transform: scale(0.65) translateY(-50%);
    }

    @media (max-width: 1000px) {
        transform: scale(0.60) translateY(-50%);
    }

    @media @mobile {
        transform: translateX(-50%) scale(0.45);
        left: 50%;
    }

    @media @mobile-sm{
        transform: translateX(-50%) scale(0.35);
        left: 50%;
    } 
    */
}
@media (max-width: 1700px) {
  #modal-ftue #ftue-steps .ftue-modal-content {
    top: 70%;
  }
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body {
  height: 591px;
  position: relative;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .full-abs-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .segmented-bg-ftue {
  width: 100%;
  height: 100%;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  --bg-segment-size: 40px;
  --bg-y-offset: 1px;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .segmented-bg-ftue div {
  position: absolute;
  left: var(--left, unset);
  top: var(--top, unset);
  right: var(--right, unset);
  bottom: var(--bottom, unset);
  width: var(--width);
  height: var(--height);
  background-repeat: var(--background-repeat, unset);
  background-image: var(--background-image, no-repeat);
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .segmented-bg-ftue div:nth-child(1) {
  --left: var(--bg-y-offset);
  --top: var(--bg-y-offset);
  --background-image: url(../img/ui/frames/frame-seg-1.png);
  --width: var(--bg-segment-size);
  --height: var(--bg-segment-size);
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .segmented-bg-ftue div:nth-child(2) {
  --left: calc(var(--bg-segment-size) + var(--bg-y-offset));
  --top: var(--bg-y-offset);
  --width: calc(100% - calc(var(--bg-segment-size) * 2));
  --height: var(--bg-segment-size);
  --background-image: url(../img/ui/frames/frame-seg-2.png);
  --background-repeat: repeat-x;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .segmented-bg-ftue div:nth-child(3) {
  --right: var(--bg-y-offset);
  --top: var(--bg-y-offset);
  --background-image: url(../img/ui/frames/frame-seg-3.png);
  --width: var(--bg-segment-size);
  --height: var(--bg-segment-size);
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .modal-img-container {
  background-image: url(../img/ftue/ftue_skins_modal.png);
  background-size: cover;
  height: 100%;
  width: 752px;
  margin-top: -75px;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .modal-img-container div {
  width: 200px;
  height: 44px;
  font-size: 20px;
  line-height: 22px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  position: absolute;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .modal-img-container .item1 {
  top: 162px;
  left: calc(50% - 100px);
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .modal-img-container .item2 {
  top: 310px;
  left: 55px;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .modal-img-container .item3 {
  top: 310px;
  right: 65px;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-body .modal-img-container .item4 {
  bottom: 70px;
  left: calc(50% - 100px);
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-header p {
  width: 484px;
  height: 75px;
  color: #FFFFFF;
  margin-top: 40px;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-footer {
  position: absolute;
  width: 100%;
  height: 66px;
  bottom: 48px;
}
#modal-ftue #ftue-steps .ftue-modal-content .ftue-footer .ftue-next {
  --base-button_height: 43px;
  float: none;
}
.arrow-up {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 36px solid #874C90;
  top: -34px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.arrow-down {
  position: absolute;
  width: 0 !important;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 36px solid #874C90;
  margin: auto;
  margin-top: 8px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.arrow-right {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 36px solid #874C90;
  left: 342px;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.arrow-left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 36px solid #874C90;
  left: -34px;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.ftue-results-modal {
  position: absolute;
  width: 200px !important;
  height: 100px;
  background: #874C90;
  display: flex;
  align-items: center;
  border-radius: 10.27px;
  z-index: 1;
  right: 30px;
  bottom: 24px;
  display: none;
}
@media (min-width: 850px) and (max-width: 1060px) {
  .ftue-results-modal {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    left: -11px;
    bottom: 68px;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .ftue-results-modal {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
    left: -75px;
    bottom: 28px;
  }
}
.ftue-results-text {
  text-align: center;
  width: 100% !important;
  font-size: 17px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-indent: 0;
}
.ftue-results-modal .arrow-down {
  top: 73px;
}
.ftue-spectate {
  display: none !important;
  left: auto;
  right: -64px;
  text-align: center !important;
  bottom: 12px;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
@media (min-width: 850px) and (max-width: 1060px) {
  .ftue-spectate {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .ftue-spectate {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
  }
}
.find-killer-container {
  position: relative;
}
.player-row {
  position: relative;
}
#modal-contextual-offers {
  display: none;
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-contextual-offers .modal-content {
  text-decoration: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-name: d;
  animation-name: d;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  min-width: 566px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-contextual-offers .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-contextual-offers .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-contextual-offers .modal-content .modal-header {
  background: #3E3E3E;
}
#modal-contextual-offers .modal-content .modal-header h2 {
  text-align: center;
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
}
#modal-contextual-offers .modal-content .modal-body {
  background: #141414;
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 5px;
}
#modal-contextual-offers .modal-content .modal-body-text {
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
  margin: 10px auto 20px auto;
}
#modal-contextual-offers .modal-content .modal-contextual-offer-container {
  display: flex;
  width: 90%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  background: #252525;
}
#modal-contextual-offers .modal-content .modal-contextual-offer-container .modal-contextual-offer-pack-block {
  margin: auto;
}
#modal-contextual-offers .modal-content .modal-contextual-offer-container .contextual-gems-pack {
  background: #1E90FF;
  width: 110px;
  height: 109px;
  margin: 20px;
  border-radius: 5px;
  display: inline-block;
  line-height: 20px;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
}
#modal-contextual-offers .modal-content .modal-contextual-offer-container .contextual-gems-pack .iap-gems-item-container {
  background: #252525;
  margin: 5px;
  text-align: center;
  height: 70px;
}
#modal-contextual-offers .modal-content .modal-contextual-offer-container .contextual-gems-pack .iap-gems-item-container .iap-currency-container {
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: 7px center;
  background-size: 20%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#modal-contextual-offers .modal-content .modal-contextual-offer-container .contextual-gems-pack .iap-gems-item-container .iap-currency-container .iap-currency-text {
  margin-left: 22px;
  font-size: 24px;
}
#modal-contextual-offers .modal-content .modal-contextual-offer-container .contextual-gems-pack .iap-price {
  text-align: center;
  font-weight: bold;
  font-size: 23px;
}
#market-modal-error {
  display: none;
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#market-modal-error .modal-content {
  text-decoration: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-name: d;
  animation-name: d;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}
@media (max-width: 850px), (max-width: 900px) {
  #market-modal-error .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #market-modal-error .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#market-modal-error .modal-content .modal-header {
  background: #D20000;
}
#market-modal-error .modal-content .modal-header h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 0.993111px 0.993111px 1.18977px rgba(0, 0, 0, 0.75);
}
#market-modal-error .modal-content .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #141414;
}
#market-modal-error .modal-content .modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: #3E3E3E;
}
#market-modal-error .modal-content .modal-body-text {
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
}
#market-modal-error .modal-content .modal-body-text strong {
  font-size: 20px;
}
#market-modal-error .modal-content .btn-action {
  width: 170px;
  margin-top: 10px;
  color: white;
  font-style: normal;
  font-weight: bold;
  font-size: 19px;
  background: #6D6D6D;
  border-radius: 3px;
  border-bottom: 2px solid #2C2C2C;
  box-shadow: inset 0 -2px #2C2C2C;
}
#modal-instant-refresh {
  display: none;
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-instant-refresh .modal-content {
  text-decoration: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-name: d;
  animation-name: d;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-instant-refresh .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-instant-refresh .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-instant-refresh .modal-content .modal-header {
  background: #3E3E3E;
}
#modal-instant-refresh .modal-content .modal-header h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
}
#modal-instant-refresh .modal-content .modal-body {
  background: #141414;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#modal-instant-refresh .modal-content .modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#modal-instant-refresh .modal-content .modal-body-text {
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
}
#modal-instant-refresh .modal-content .modal-body-text strong {
  font-size: 20px;
}
#modal-instant-refresh .modal-content .btn-green {
  width: 170px;
  background: #1E90FF;
  border-bottom: 2px solid #1871C8;
  box-shadow: inset 0 -2px #1871C8;
  margin-top: 10px;
  color: white;
  font-style: normal;
  font-weight: bold;
  font-size: 19px;
  text-shadow: none;
  display: flex;
  justify-content: center;
  padding-top: 2px;
  width: 247px;
  line-height: 33px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-instant-refresh .modal-content .btn-green {
    line-height: 20px;
  }
}
#modal-instant-refresh .modal-content .btn-green .refresh-price {
  background: black;
  padding: 2px 6px;
  margin: 0;
  display: flex;
  height: 32px;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-around;
  margin-left: 3px;
  border-radius: 2.34939px;
}
#modal-instant-refresh .modal-content .btn-green .refresh-price span {
  font-style: normal;
  font-weight: bold;
  font-size: 15.116px;
  line-height: 18px;
  background: linear-gradient(173.67deg, rgba(241, 242, 158, 0.81) 16.73%, rgba(228, 232, 75, 0.845393) 23.35%, rgba(244, 244, 209, 0.836292) 26.29%, rgba(206, 210, 0, 0.9) 49.44%, rgba(239, 239, 165, 0.9) 57.53%, rgba(196, 189, 59, 0.9) 65.25%, rgba(203, 184, 20, 0.9) 86.32%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
#modal-instant-refresh-video {
  display: none;
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-instant-refresh-video .modal-content {
  text-decoration: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-name: d;
  animation-name: d;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-instant-refresh-video .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-instant-refresh-video .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-instant-refresh-video .modal-content .modal-header {
  background: #3E3E3E;
}
#modal-instant-refresh-video .modal-content .modal-header h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
}
#modal-instant-refresh-video .modal-content .modal-body {
  background: #141414;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#modal-instant-refresh-video .modal-content .modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#modal-instant-refresh-video .modal-content .modal-body-text {
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
}
#modal-instant-refresh-video .modal-content .modal-body-text strong {
  font-size: 20px;
}
#modal-instant-refresh-video .modal-content .btn-green {
  width: 170px;
  background: #1E90FF;
  border-bottom: 2px solid #1871C8;
  box-shadow: inset 0 -2px #1871C8;
  margin-top: 10px;
  color: black;
  font-style: normal;
  font-weight: bold;
  font-size: 19px;
  text-shadow: none;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-instant-refresh-video .modal-content .btn-green {
    line-height: 20px;
  }
}
#modal-stimfield-notification {
  display: none;
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-stimfield-notification .modal-content {
  min-width: 820px;
  min-height: 351px;
  text-decoration: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-name: d;
  animation-name: d;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-stimfield-notification .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-stimfield-notification .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-stimfield-notification .modal-content .modal-header {
  background: #00FF0A;
}
#modal-stimfield-notification .modal-content .modal-header h2 {
  text-align: center;
  margin: 0;
  padding: 30px 0;
  font-style: normal;
  font-weight: bold;
  font-size: 53px;
  text-shadow: 1.66941px 1.66941px 2px rgba(0, 0, 0, 0.75);
}
#modal-stimfield-notification .modal-content .modal-body {
  display: flex;
  min-height: 120px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #141414;
}
#modal-stimfield-notification .modal-content .modal-body p {
  font-size: 25px;
}
#modal-stimfield-notification .modal-content .modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#modal-stimfield-notification .modal-content .btn-green {
  width: 170px;
  background: #1E90FF;
  border-bottom: 2px solid #1871C8;
  box-shadow: inset 0 -2px #1871C8;
  margin-top: 10px;
  color: white;
  font-style: normal;
  font-weight: bold;
  text-shadow: none;
}
#modal-stimfield-notification .modal-content .btn-green span {
  font-size: 19px !important;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-stimfield-notification .modal-content .btn-green {
    line-height: 25px;
  }
}
#modal-fadeout {
  background: black;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  opacity: 0.0;
  pointer-events: none;
}
#modal-pass-premium {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.6);
  /* Black w/ opacity */
  z-index: 5;
  display: none;
}
#modal-pass-premium a {
  text-decoration: underline;
  color: black;
  font-weight: bold;
}
#modal-pass-premium .modal-content {
  -webkit-animation-name: d;
          animation-name: d;
  -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%);
  width: 820.47px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-pass-premium .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-pass-premium .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-pass-premium .modal-header {
  background: linear-gradient(180deg, #C68609 0%, #E5E802 64.69%, #FDFF83 100%);
  box-sizing: border-box;
  height: 96.61px;
}
#modal-pass-premium .modal-header .modal-header-content {
  display: flex;
  justify-content: center;
  margin-top: 13px;
}
#modal-pass-premium .modal-header h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 53.5089px;
  line-height: 70px;
  text-align: center;
  color: #000000;
  margin: 0;
}
#modal-pass-premium .modal-header p {
  font-style: normal;
  font-weight: bold;
  font-size: 53.5089px;
  line-height: 63px;
  text-align: center;
  color: #000000;
  margin: 0;
}
#modal-pass-premium .modal-header .modal-discount-text {
  display: none;
  border-bottom: 3px solid black;
  border-top: 3px solid black;
  margin-left: 11px;
}
#modal-pass-premium .modal-body {
  background-color: #141414;
  box-sizing: border-box;
  height: 313.62px;
  display: flex;
  justify-content: space-around;
  position: relative;
}
#modal-pass-premium .modal-body .modal-pass-box-timer {
  display: none;
  background: #251A04;
  border: 2px solid #DFD503;
  text-align: center;
  color: #DFD503;
  width: 287.67px;
  height: 41.27px;
  margin: 0 auto;
  border-top: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
}
#modal-pass-premium .modal-body .modal-pass-box-timer span {
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 26px;
}
#modal-pass-premium .modal-body .modal-body-item {
  width: 220px;
}
#modal-pass-premium .modal-body .modal-body-item .modal-body-item-img {
  background-image: url(../img/pass/pass-noad.svg);
  width: 152px;
  height: 152px;
  margin: 0 auto;
  margin-top: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
#modal-pass-premium .modal-body .modal-body-item .modal-body-item-img.skin {
  background-image: url(../img/pass/pass-fabulorn.svg);
}
#modal-pass-premium .modal-body .modal-body-item .modal-body-item-img.crate {
  background-image: url(../img/pass/pass-xp.svg);
}
#modal-pass-premium .modal-body .modal-body-item .modal-body-item-text {
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 1px 1px 0px #000000;
  margin-top: 25px;
}
#modal-pass-premium .modal-footer {
  padding: 2px 110px;
  background-color: #91650d;
  height: 78.78px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}
#modal-pass-premium .modal-footer .btn-green {
  width: 247px;
  height: 50px;
  margin: 0;
  background: #282828;
  margin-top: 10px;
  box-shadow: 0px 3.91566px 0px #000000;
  border: none;
  font-style: normal;
  font-weight: bold;
  font-size: 17.8363px;
  line-height: 21px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  text-shadow: 1px 1px 0px #000000;
  justify-content: center;
  position: relative;
}
#modal-pass-premium .modal-footer .btn-green.premium {
  width: 339px;
  border: 2px solid transparent;
  border-radius: 2.34939px;
  background: linear-gradient(to right, #282828, #282828), linear-gradient(139.75deg, rgba(241, 242, 158, 0.81) 5.59%, rgba(228, 232, 75, 0.845393) 14.44%, rgba(244, 244, 209, 0.836292) 18.37%, rgba(198, 171, 78, 0.862221) 30.98%, rgba(217, 218, 157, 0.888115) 43.57%, rgba(206, 210, 0, 0.9) 49.35%, rgba(239, 239, 165, 0.9) 67.63%, rgba(196, 189, 59, 0.9) 70.5%, rgba(167, 165, 77, 0.856018) 81.7%, rgba(244, 244, 209, 0.836292) 86.72%, rgba(203, 184, 20, 0.9) 98.68%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}
#modal-pass-premium .modal-footer .btn-premium-container {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}
#modal-pass-premium .modal-footer .btn-premium-container .btn-green {
  margin: 0;
}
#modal-pass-premium .modal-footer .percent-box {
  position: absolute;
  background: radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  box-shadow: 0px 1.44643px 0px #AA1313;
  width: 72.59px;
  height: 12.79px;
  font-style: normal;
  font-weight: bold;
  font-size: 10.125px;
  line-height: 12px;
  text-align: center;
  color: #AA1313;
  left: -21px;
  top: 9px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#modal-pass-premium .modal-footer .modal-pass-price {
  background: black;
  padding: 2px 6px;
  margin: 0;
  display: flex;
  height: 32px;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-around;
  margin-left: 16px;
}
#modal-pass-premium .modal-footer .modal-pass-price .pass-gems-icon {
  width: 20px;
  height: 20px;
  background-image: url(../img/gui/currency-golde-potato.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%;
  margin: 0;
  margin-right: 8px;
}
#modal-pass-premium .modal-footer .modal-pass-price span {
  font-style: normal;
  font-weight: bold;
  font-size: 15.116px;
  line-height: 18px;
  background: linear-gradient(173.67deg, rgba(241, 242, 158, 0.81) 16.73%, rgba(228, 232, 75, 0.845393) 23.35%, rgba(244, 244, 209, 0.836292) 26.29%, rgba(206, 210, 0, 0.9) 49.44%, rgba(239, 239, 165, 0.9) 57.53%, rgba(196, 189, 59, 0.9) 65.25%, rgba(203, 184, 20, 0.9) 86.32%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 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) {
  #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 > .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: #717171;
}
#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 > #modal-item-confirm-image-outer > #modal-item-confirm-image-inner .item-rarity-style {
  margin-left: -6px;
  margin-top: -6px;
}
#modal-item-confirm .modal-body .account-buttons {
  width: 232px;
}
#modal-item-confirm .modal-footer {
  display: flex;
}
#modal-item-confirm .modal-footer > div {
  margin-left: auto;
  margin-right: auto;
}
#modal-item-confirm .modal-footer > div > .close-footer {
  color: white;
  font-size: 24px;
  text-align: center;
}
#modal-item-confirm .modal-footer > div > .close-footer:hover,
#modal-item-confirm .modal-footer > div > .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;
}
.account-buttons-wrapper {
  z-index: 1;
}
@media (max-width: 850px), (max-width: 900px) {
  .account-buttons-wrapper {
    background-color: transparent !important;
    margin: auto !important;
    width: 60% !important;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #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: 851px) and (max-height: 376px) {
  #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) {
  #customize-account-avatar {
    right: 124px;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .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) {
  .btn-player-stats-link {
    background-size: 22px !important;
  }
}
/**
 * currency-block
 */
.currency-block {
  position: absolute;
  left: 0px;
  width: 213px;
}
/**
 * account-block
 */
.account-block {
  position: absolute;
  right: 0px;
  width: 232px;
  z-index: 5;
}
@media (max-width: 1050px) {
  .account-block {
    right: 106px;
  }
}
.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-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-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) {
  .account-details-button-wrapper {
    height: 36px;
    line-height: 36px;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .account-details-button-wrapper > .account-details-button > .account-link > span {
    font-size: 20px;
  }
}
.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) {
  .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) {
  .account-details-top-buttons > .account-details-button-wrapper {
    height: 36px;
    line-height: 36px;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .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 {
  --box-login-width: 260px !important;
  --box-login-height: 100% !important;
  position: relative;
  top: 52px;
  right: 65px;
}
.account-box-title-text {
  max-width: 98%;
  padding-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 8px;
  align-items: center;
  text-align: center;
  font-family: Edit Undo BRK;
  font-size: 20px;
  line-height: 20px;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
.linked-account-container .border-bar {
  --border-width: 100%;
}
.linked-account-container div {
  font-family: Edit Undo BRK;
  font-size: 20px;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
.linked-account-container .linked-account {
  display: flex;
  flex-direction: column;
  margin: 5px 0;
}
#linked-account-icons {
  display: flex;
  justify-content: space-evenly;
  margin-top: 5px;
}
.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;
  position: relative;
}
.login-button-name span {
  color: #ffffff;
  font-family: Edit Undo BRK;
  font-size: 30px;
  line-height: 40px;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
.btn-login-linked {
  color: inherit;
  cursor: default;
  align-items: center;
  -webkit-filter: brightness(80%) !important;
  filter: brightness(80%) !important;
  pointer-events: none;
}
.btn-login-linked-logo {
  background-image: url(../img/gui/link-icon.png);
  background-position-x: 98%;
  background-position-y: 48%;
  background-repeat: no-repeat;
  background-size: 26px;
  width: 137px;
  height: 40px;
  position: absolute;
  top: -20px;
  left: -65px;
  text-align: left;
}
.account-block {
  display: block;
}
.account-overview {
  display: flex;
}
.currency-overview {
  display: none;
}
.spin-overview {
  display: none;
}
#open-store-button {
  display: none;
  position: absolute;
  left: 242px;
  width: 232px;
  top: var(--side-pad);
}
.currency-details-user {
  display: flex;
}
.currency-details-block {
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  position: absolute;
  left: 12px;
  top: var(--side-pad);
  width: 100%;
  /*background: linear-gradient(139.75deg, rgba(241, 242, 158, 0.81) 5.59%, rgba(228, 232, 75, 0.845393) 14.44%, rgba(244, 244, 209, 0.836292) 18.37%, rgba(198, 171, 78, 0.862221) 30.98%, rgba(217, 218, 157, 0.888115) 43.57%, rgba(206, 210, 0, 0.9) 49.35%, rgba(239, 239, 165, 0.9) 67.63%, rgba(196, 189, 59, 0.9) 70.5%, rgba(167, 165, 77, 0.856018) 81.7%, rgba(244, 244, 209, 0.836292) 86.72%, rgba(203, 184, 20, 0.9) 98.68%), radial-gradient(64.2% 64.2% at 28.13% 35.8%, #ECF013 0%, #AEB110 100%);*/
}
.currency-details {
  display: flex;
  height: 58px;
  padding: 3px;
  width: calc(100% - 6px);
}
.currency-gems {
  color: #000;
  display: flex;
  align-items: center;
  justify-content: start;
  background-size: 10%;
  min-width: 50%;
  padding: 5px 8px;
}
.currency-text {
  color: #000;
  font-size: 16px;
  line-height: 30px;
  font-family: 'Amiga Forever';
}
.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-style {
  margin-top: 15px;
  font-family: Edit Undo BRK;
  font-size: 30px;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  cursor: pointer;
}
.btn-account-logout {
  margin-top: 15px;
  font-family: Edit Undo BRK;
  font-size: 20px;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
.btn-account-grey {
  font-family: Edit Undo BRK;
  font-size: 25px;
  margin-top: 24px;
  color: black;
  background-color: #DADADA;
}
.btn-account-disabled {
  cursor: default;
  -webkit-filter: brightness(60%) !important;
  filter: brightness(60%) !important;
}
.account-details-user {
  cursor: pointer;
  display: flex;
}
.account-details-block {
  --block-height: 43px;
  --block-width: 248px;
  max-width: 260px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: absolute;
  margin-left: auto;
  right: 43px;
  top: var(--side-pad);
}
@media (max-width: 1400px) {
  .account-details-block {
    right: 14px;
  }
}
.news-btn-container:hover {
  background-color: rgba(0, 0, 0, 0.9);
}
.account-details {
  display: flex;
  height: 40px;
  width: 100%;
  align-items: center;
}
.account-details .drop-arrow {
  padding-right: 30px;
}
.account-loading-container {
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 20px;
}
.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);
  }
}
.loading-circle-anim {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  border-top: 3px solid #6F6F6F;
  height: 100%;
  width: 100%;
  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 {
  --box-fill-height: 30px !important;
  --box-fill-size: 20px!important;
  padding: 0 5px;
  margin-top: -1px;
  margin-left: 15px;
  margin-right: 20px;
  min-width: 200px !important;
  font-family: Edit Undo BRK;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  overflow: hidden;
  text-overflow: ellipsis;
}
#account-login {
  min-width: unset !important;
}
.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) {
  #start-top-left-lower {
    display: none;
  }
}
/*
* Pass 3 menu UI
*/
.animated-loadout {
  height: 280px;
  margin-bottom: 40px;
}
.team-loadout {
  width: 172px;
  padding-top: 0px;
  margin-bottom: 0px;
  margin-top: 42px;
  height: 144px !important;
  margin-left: 0px !important;
}
.ftue-window {
  padding-top: 0px;
  background: #FF0000;
}
.ftue-window .btns-container,
.ftue-window .character-container {
  display: none;
}
.ftue-window .tip-desc {
  display: flex;
}
#pass-wrapper,
#missions-wrapper {
  display: block;
  z-index: 1;
}
.menu-pass-container {
  height: 300px;
  width: 100%;
}
#pass-loading {
  position: absolute;
}
.btn-battle {
  background: #B0B0B0;
  color: #000000;
  border: none;
  box-shadow: none;
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 49px;
  margin: 0;
  height: 50px;
  width: 290px;
  text-align: center;
  justify-content: center;
  display: flex;
  text-transform: uppercase;
}
.btn-battle-container {
  /*height: 95px;*/
  /*   width: fit-content;
    margin: 0 auto; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin-bottom: -17px;*/
}
@-webkit-keyframes battle-pulse {
  from {
    background-color: #874C90;
    border-bottom-color: #664053;
    -webkit-box-shadow: 0 0 9px #664053;
  }
  50% {
    background-color: #C372CF;
    border-bottom-color: #874C90;
    -webkit-box-shadow: 0 0 18px #874C90;
  }
  to {
    background-color: #874C90;
    border-bottom-color: #664053;
    -webkit-box-shadow: 0 0 9px #664053;
  }
}
.left-play-btn {
  position: relative;
  margin: 0px 30px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-weight: bold;
  white-space: nowrap;
  line-height: 46px;
}
.index-play-mode {
  margin-right: 25px;
}
.right-play-btn {
  font-family: Amiga Forever;
  font-weight: normal;
  font-weight: bold;
  position: relative;
  margin: 0px 0px 0px auto;
  height: 50px;
  width: 100% !important;
  text-align: center;
  padding-left: 0px;
  background-size: 15% !important;
  background-repeat: no-repeat !important;
  background-position: 15px 50% !important;
  font-size: 14px;
  line-height: 48px;
}
.play-row {
  margin-top: 8px;
  margin-bottom: 1px;
}
.btn-divider {
  border-bottom: solid 24px #FFFFFF;
  content: '';
  cursor: default;
  margin-left: 90px;
  position: absolute;
  width: 2px;
  padding: 5px 0px;
}
.index-dropdown-arrow {
  position: absolute;
  right: 10px;
  height: 100%;
  width: 30px;
  background: url(../img/gui/index-dropdown-arrow.svg);
  background-repeat: no-repeat;
  background-position: 15px 50%;
}
.btn-change-mode-outer {
  position: relative;
}
.btn-change-mode-outer .btn-green div {
  margin-top: 0px;
}
.btn-change-mode-inner {
  display: flex;
  position: absolute;
  width: 135px;
  z-index: 5;
  margin-left: -8px;
  border: none;
  box-shadow: none;
}
.btn-change-mode-selection {
  overflow-y: auto;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 49%;
  top: 0;
  margin-top: 100px;
  display: none;
  position: absolute;
  z-index: 4;
}
.btn-change-mode-selection div {
  width: 100%;
  float: left;
  /*margin-left: 90px;*/
  margin-bottom: 5px;
}
.btn-change-mode-selection div .right-play-btn {
  width: 95% !important;
  margin: 2px;
  margin-left: 3.5px;
  border-bottom: none !important;
  box-shadow: none !important;
}
.btn-change-mode-selection .btn-divider {
  border-left: 2px solid #FFFFFF;
  width: 0px;
  padding: 0px 0px;
  margin-left: 0px;
  height: calc(100% - 32px);
}
.btn-change-type-inner {
  background: #B0B0B0;
  border-bottom: none;
  box-shadow: none;
  display: flex;
  position: absolute;
  width: 135px;
  z-index: 4;
  margin-left: 8px;
}
.btn-change-type-selection {
  overflow-y: auto;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: 44px;
  display: none;
  top: 0;
  width: 49%;
  position: absolute;
  z-index: 4;
}
.btn-change-type-selection div {
  width: 100%;
  float: left;
  /*margin-left: 90px;*/
  margin-bottom: 5px;
}
.btn-change-type-selection div .right-play-btn {
  width: 95% !important;
  margin: 2px;
  margin-left: 3.5px;
  border-bottom: none !important;
  box-shadow: none !important;
}
.btn-change-type-selection .btn-divider {
  border-left: 2px solid #FFFFFF;
  width: 0px;
  padding: 0px 0px;
  margin-left: 0px;
  height: calc(100% - 32px);
}
#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;
}
#surviv-loading-screen {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
  display: none;
}
#surviv-offerwall-modal {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 95;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: none;
  background-image: url(../img/gui/close.svg);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: top 20px right 20px;
}
#surviv-loading-screen.showLoading {
  display: block;
}
#surviv-loading-screen > div {
  width: 200px;
  height: 269px;
  position: absolute;
  top: calc(50% - 134.5px);
  left: calc(50% - 100px);
}
.sls-loading-logo {
  background: url(../img/loading-logo.svg);
  width: 172px;
  height: 172px;
  margin: auto;
  -webkit-animation: sls-rotate 1.5s linear infinite;
  animation: sls-rotate 1.5s linear infinite;
}
.sls-loading-text {
  margin-top: 50px;
  font-family: Roboto Condensed;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  text-align: center;
  color: #FFFFFF;
}
.sls-loading-text span:first-child,
.sls-loading-text span:last-child {
  -webkit-animation: sls-dots-animation-1 2s linear infinite;
  animation: sls-dots-animation-1 2s linear infinite;
}
.sls-loading-text span:nth-child(2),
.sls-loading-text span:nth-child(5) {
  -webkit-animation: sls-dots-animation-2 2s linear infinite;
  animation: sls-dots-animation-2 2s linear infinite;
}
.sls-loading-text span:nth-child(3),
.sls-loading-text span:nth-child(4) {
  -webkit-animation: sls-dots-animation-3 2s linear infinite;
  animation: sls-dots-animation-3 2s linear infinite;
}
.sls-loading-text > span {
  font-family: Roboto Condensed;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  text-align: center;
  color: #FFFFFF;
}
.ios-debug-iap {
  display: none;
}
@-webkit-keyframes sls-rotate {
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes sls-rotate {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes sls-dots-animation-1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sls-dots-animation-1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes sls-dots-animation-2 {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sls-dots-animation-2 {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes sls-dots-animation-3 {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sls-dots-animation-3 {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#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: 2px solid #563619!important;
  box-shadow: inset 0 -2px #563619 !important;
  background: #8f5827;
}
@media (max-width: 850px), (max-width: 900px) {
  .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: 2px solid #853500!important;
  box-shadow: inset 0 -2px #853500 !important;
  background: #d45500;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-desert {
    border-bottom: 2px solid #853500!important;
  }
}
.btn-mode-mayo {
  -webkit-animation-name: mayo-pulse;
  border-bottom: 2px solid #FF8DEB!important;
  box-shadow: inset 0 -2px #EC6ED6 !important;
  background: #FF8DEB;
  background-size: 17%;
  background-position: 6% 60%;
}
@media (orientation: portrait) {
  .btn-mode-mayo {
    background-size: 13%;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-mayo {
    border-bottom: 2px solid #EC6ED6!important;
  }
}
@-webkit-keyframes mayo-pulse {
  from {
    background-color: #FF8DEB;
    border-bottom-color: #EC6ED6;
    -webkit-box-shadow: 0 0 9px #EC6ED6;
  }
  50% {
    background-color: #FFBB6E;
    border-bottom-color: #EA9E48;
    -webkit-box-shadow: 0 0 18px #EA9E48;
  }
  to {
    background-color: #FF8DEB;
    border-bottom-color: #EC6ED6;
    -webkit-box-shadow: 0 0 9px #EC6ED6;
  }
}
.btn-mode-easter {
  -webkit-animation-name: easter-pulse;
  border-bottom: 2px solid #519188!important;
  box-shadow: inset 0 -2px #519188 !important;
  background: #66B7AC;
  background-size: 11%;
  background-position: 6% 60%;
}
@media (orientation: portrait) {
  .btn-mode-easter {
    background-size: 8%;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-easter {
    border-bottom: 2px solid #519188!important;
  }
}
@-webkit-keyframes easter-pulse {
  from {
    background-color: #66B7AC;
    border-bottom-color: #519188;
    -webkit-box-shadow: 0 0 9px #519188;
  }
  50% {
    background-color: #459EB8;
    border-bottom-color: #3A899F;
    -webkit-box-shadow: 0 0 18px #3A899F;
  }
  to {
    background-color: #66B7AC;
    border-bottom-color: #519188;
    -webkit-box-shadow: 0 0 9px #519188;
  }
}
@-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: 2px solid #696726!important;
  box-shadow: inset 0 -2px #696726 !important;
  background: #908d2d;
}
@media (max-width: 850px), (max-width: 900px) {
  .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-storm {
  -webkit-animation-name: storm-pulse;
  border-bottom: 4px solid #2F474D!important;
  box-shadow: inset 0 -2px #2F474D !important;
  background-position: 5%;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-storm {
    border-bottom: 2px solid #2F474D!important;
  }
}
@-webkit-keyframes storm-pulse {
  from {
    background-color: #5F8A93;
    -webkit-box-shadow: 0 0 18px #2F474C;
    border-bottom-color: #2F474C;
  }
  50% {
    background-color: #37545A;
    -webkit-box-shadow: 0 0 9px #2F474D;
    border-bottom-color: #2F474D;
  }
  to {
    background-color: #5F8A93;
    -webkit-box-shadow: 0 0 18px #2F474C;
    border-bottom-color: #2F474C;
  }
}
.btn-mode-faction {
  -webkit-animation-name: faction-pulse;
  -webkit-animation-duration: 4s;
  border-bottom: 2px solid #00448a;
  box-shadow: inset 0 -2px #00448a !important;
  background: #007eff;
}
@media (max-width: 850px), (max-width: 900px) {
  .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-faction-sacrifice {
  background: #DB4531;
  border-bottom: 2px solid #B63928;
  box-shadow: inset 0 -2px #B63928;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-faction-sacrifice {
    border-bottom: 2px solid #B63928;
  }
}
@-webkit-keyframes sacrifice-pulse {
  from {
    background-color: #DB4531;
    border-bottom-color: #B63928;
    -webkit-box-shadow: 0 0 9px #B63928;
  }
  50% {
    background-color: #FE6948;
    border-bottom-color: #ED5F40;
    -webkit-box-shadow: 0 0 18px #ED5F40;
  }
  to {
    background-color: #DB4531;
    border-bottom-color: #B63928;
    -webkit-box-shadow: 0 0 9px #B63928;
  }
}
.btn-mode-may-fourth {
  background: #01BAF1;
  border-bottom: 2px solid #208AA9;
  box-shadow: inset 0 -2px #208AA9;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-may-fourth {
    border-bottom: 2px solid #208AA9;
  }
}
@-webkit-keyframes may-pulse {
  from {
    background-color: #01BAF1;
    border-bottom-color: #208AA9;
    -webkit-box-shadow: 0 0 9px #208AA9;
  }
  50% {
    background-color: #9EE9FF;
    border-bottom-color: #7ECDE4;
    -webkit-box-shadow: 0 0 18px #7ECDE4;
  }
  to {
    background-color: #01BAF1;
    border-bottom-color: #208AA9;
    -webkit-box-shadow: 0 0 9px #208AA9;
  }
}
.btn-mode-savannah {
  -webkit-animation-name: savannah-pulse;
  border-bottom: 2px solid #947c1c;
  box-shadow: inset 0 -2px #947c1c !important;
  background: #c7a726;
}
@media (max-width: 850px), (max-width: 900px) {
  .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: 2px solid #2d0000;
}
@media (max-width: 850px), (max-width: 900px) {
  .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: 2px solid #1d252e;
  box-shadow: inset 0 -2px #1d252e;
  background: #2e3742;
}
@media (max-width: 850px), (max-width: 900px) {
  .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;
  }
}
.btn-mode-snow {
  -webkit-animation-name: winterPulse;
  border-bottom: 2px solid #7F97A4;
  box-shadow: inset 0 -2px #7F97A4;
  background: #95BBCF;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-snow {
    border-bottom: 2px solid #7F97A4;
  }
}
@-webkit-keyframes winterPulse {
  from {
    background-color: #95BBCF;
    -webkit-box-shadow: 0 0 9px #95BBCF;
  }
  50% {
    background-color: #8EA8B6;
    -webkit-box-shadow: 0 0 18px #8EA8B6;
  }
  to {
    background-color: #95BBCF;
    -webkit-box-shadow: 0 0 9px #95BBCF;
  }
}
.btn-mode-valentine {
  background-size: 28px;
  background-position: 4%;
  -webkit-animation-name: valentinePulse;
  border-bottom: 2px solid #FF3D43;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-valentine {
    background-size: 18px;
    border-bottom: 2px solid #FF3D43;
  }
}
.btn-mode-stPatrick {
  background-size: 28px;
  background-position: 4%;
  -webkit-animation-name: stPatrickPulse;
  border-bottom: 2px solid #569D1E;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-stPatrick {
    background-size: 18px;
    border-bottom: 2px solid #569D1E;
  }
}
@-webkit-keyframes valentinePulse {
  from {
    background-color: #D70357;
    -webkit-box-shadow: 0 0 9px #D70357;
  }
  50% {
    background-color: #FD6BA5;
    -webkit-box-shadow: 0 0 18px #FD6BA5;
  }
  to {
    background-color: #D70357;
    -webkit-box-shadow: 0 0 9px #D70357;
  }
}
@-webkit-keyframes stPatrickPulse {
  from {
    background-color: #5A9130;
    -webkit-box-shadow: 0 0 9px #569D1E;
  }
  50% {
    background-color: #73C435;
    -webkit-box-shadow: 0 0 18px #569D1E;
  }
  to {
    background-color: #5A9130;
    -webkit-box-shadow: 0 0 9px #569D1E;
  }
}
.btn-mode-blossoms {
  -webkit-animation-name: blossoms-pulse;
  border-bottom: 2px solid #E06894!important;
  box-shadow: inset 0 -2px #E06894 !important;
}
@media (max-width: 850px), (max-width: 900px) {
  .btn-mode-blossoms {
    border-bottom: 2px solid #E06894!important;
  }
}
@-webkit-keyframes blossoms-pulse {
  from {
    background-color: #FC8FB7;
    -webkit-box-shadow: 0 0 9px #E06894;
  }
  50% {
    background-color: #FFCBE4;
    -webkit-box-shadow: 0 0 18px #ED9FC4;
  }
  to {
    background-color: #FC8FB7;
    -webkit-box-shadow: 0 0 9px #E06894;
  }
}
.ftue-btn-disable {
  background-color: #9F9F9F !important;
  border-bottom: 2px solid #666666 !important;
  box-shadow: inset 0 -2px #666666 !important;
  color: #7C7C7C !important;
  pointer-events: none !important;
}
.ftue-btn-disable .index-dropdown-arrow {
  background: url(../img/gui/index-dropdown-arrow-disable.svg);
  background-repeat: no-repeat;
  background-position: 15px 50%;
}
.ftue-btn-disable .index-play-select {
  color: #7C7C7C !important;
}
img {
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
#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: 35px;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
}
.team-menu-options-buttons {
  display: flex;
}
.team-menu-options-buttons > a:not(:last-child) {
  margin-right: 4px;
}
#btns-quick-start .btn-mode-easter {
  background-size: 17%;
}
#btn-start-team {
  display: block;
}
#team-desc {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#team-desc-text {
  display: block;
  font-size: 16px;
  cursor: pointer;
  margin: auto;
}
#team-desc-text span#invite-link-text {
  color: white;
  font-size: 20px;
  font-weight: normal;
  width: 96px;
}
#team-desc-text span {
  color: #74FBFD;
  font-size: 20px;
  font-weight: bold;
  display: block;
}
.copy-item {
  display: inline-block;
  position: relative;
  top: 18px;
  height: 50px;
  width: 80px;
  border: none;
  background-size: 24px;
  background-image: url(../img/gui/copy.svg);
  background-repeat: no-repeat;
  background-color: #1e90ff;
  background-position: center;
  box-shadow: 0px 6.20636px 0px #1871C8;
  border-radius: 3.72381px;
  cursor: pointer;
  margin-left: 18px;
}
.copy-toast {
  opacity: 0;
  position: fixed;
  top: 0px;
  left: 0px;
  font-size: 18px;
  color: lawngreen;
}
.hide-item {
  display: inline-block;
  position: relative;
  top: 18px;
  height: 50px;
  width: 80px;
  border: none;
  background-repeat: no-repeat;
  background-size: 24px;
  background-image: url(../img/gui/eye.svg);
  cursor: pointer;
  box-shadow: 0px 6.20636px 0px #3E3E3E;
  border-radius: 3.72381px;
  background-color: #555555;
  background-position: center;
  margin-left: 7px;
}
.team-hide-copy-url {
  display: block;
}
/* End remove */
.server-select {
  height: 42px;
  padding: 0px 4px;
  -moz-text-align-last: center;
       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-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: relative;
  width: 28px;
  z-index: 3;
}
.news-btn-container {
  top: var(--side-pad);
  right: 255px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 6.2px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 2;
}
@media (max-height: 720px), (max-width: 1150px) {
  .news-btn-container {
    /* transform: scale(0.8);
        top: 5px;
        right: 218px;*/
  }
}
.support-btn-container {
  position: absolute;
  top: calc(var(--side-pad) + 50px);
  right: 23px;
  z-index: 1;
  cursor: pointer;
}
@media (max-height: 720px), (max-width: 1150px) {
  .support-btn-container {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    top: calc(var(--side-pad) + 35px);
    right: 15px;
  }
}
#btn-support {
  display: block;
  width: 206px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 6.2px;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: white;
  background: #7A7A7A;
  box-shadow: 0px 5px 0px #3E3E3E;
  border-radius: 3px;
}
.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,
#missions-wrapper {
  display: 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;
  box-shadow: inset 0 -2px #3e3e3e;
  line-height: 36px;
}
/**
* Missions block
*/
#missions-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: 45px;
  width: 45px;
  margin: auto;
  margin-top: 100px;
  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);
  }
}
#missions-name {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  height: 20px;
  padding: 8px;
  padding-left: 12px;
  margin-bottom: 10px;
  text-align: center;
}
#missions-name > span {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffffff;
}
/**
 * pass-block
 */
.missions-column {
  height: 229px;
  margin-right: 30px;
  position: relative;
  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;
  position: relative;
}
#pass-block.stimfield-bonus {
  border: 5px solid #00FF0A;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 15px;
  transition: 0.5s linear all;
}
.pass-stimfield-container {
  display: none;
  position: absolute;
  width: calc(100% + 10px);
  bottom: -45px;
  left: -5px;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-radius: 5px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  color: black;
  background: #00FF0A;
}
.pass-stimfield-container span {
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.pass-stimfield-container .pass-stimfield-timer {
  font-style: normal;
  font-weight: normal;
  font-size: 23px;
  letter-spacing: -0.02em;
  background: #00000033;
  border-radius: 4.97593px;
  width: 145px;
  height: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#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;
  text-transform: uppercase;
}
#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: #ffffff;
  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: 24px;
  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-bar {
  display: flex;
  height: 100%;
  vertical-align: middle;
  align-items: center;
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
  margin: auto;
}
.pass-quest-bar-fill {
  background: #E7E7E7;
  height: 100%;
  overflow: inherit !important;
  width: 0%;
}
.ui-quest-bar-fill {
  background: linear-gradient(180deg, #0FBEFA 0%, #0C98C8 100%);
  height: 100%;
  overflow: inherit !important;
  transition: width 2s;
  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-quest-counter-goal {
  font-size: 14px;
}
#pass-xp-loading {
  z-index: 1;
}
#pass-xp-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: -80px;
  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);
  }
}
#xp-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: 45px;
  width: 45px;
  margin: auto;
  margin-top: 100px;
  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-xp-buy-btn {
  display: none;
}
.pass-xp-buy-btn a:hover {
  color: white;
}
.pass-xp-buy-btn a:visited {
  color: white;
}
.pass-xp-buy-btn a:link {
  color: white;
}
.pass-xp-buy-btn .btn-xp-blue {
  background: #1e90ff;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
  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) {
  .pass-xp-buy-btn .btn-xp-blue {
    background: #1e90ff;
    border-bottom: 2px solid #1871c8;
    box-shadow: none;
    font-size: 12px;
  }
}
.pass-xp-buy-btn .btn-xp-blue .pass-xp-btn-text .pass-link-btn-text {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  margin: 0;
}
.pass-xp-buy-btn .btn-xp-blue .pass-xp-icon {
  background-image: url(../img/pass/pass-video-icon.svg);
  background-repeat: no-repeat;
  background-size: 65%;
  background-position: center;
  width: 45px;
  height: 45px;
  margin: 0;
}
@media (max-width: 850px), (max-width: 900px) {
  .pass-xp-buy-btn .btn-xp-blue .pass-xp-icon {
    background: #1e90ff;
  }
}
.pass-xp-buy-btn .btn-xp-blue.xp {
  pointer-events: none;
  justify-content: center;
  text-shadow: none;
}
.pass-xp-buy-btn .btn-xp-blue.xp .pass-xp-pass-text {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  margin-right: 10px;
}
.pass-xp-buy-btn .pass-xp-box-timer {
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 26px;
  text-align: center;
  color: #ffffff;
  height: 52.27px;
  margin: 0 auto;
  border-top: none;
  display: block;
  justify-content: center;
  align-items: center;
}
.pass-xp-buy-btn .offer-msg-part-1 {
  font-size: 24px;
  width: 100%;
  margin-top: 26px;
  margin-bottom: 0px;
}
.pass-xp-buy-btn .offer-msg-part-1 b {
  border-bottom: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  padding: 3px 0px;
  font-size: 24px;
}
.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: 20px;
  left: 8px;
}
@media (max-width: 1800px) {
  #start-top-left {
    -webkit-transform: translateX(0%) translateY(0%) scale(1);
            transform: translateX(0%) translateY(0%) scale(1);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #start-top-left {
    -webkit-transform: translateX(1%) translateY(1%) scale(0.9);
            transform: translateX(1%) translateY(1%) scale(0.9);
    left: -40px;
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #start-top-left {
    -webkit-transform: translateX(1%) translateY(1%) scale(0.9);
            transform: translateX(1%) translateY(1%) scale(0.9);
  }
}
@media (max-width: 1550px) {
  #start-top-left {
    -webkit-transform: translateX(-100%) translateY(25%) scale(1.4);
            transform: translateX(-100%) translateY(25%) scale(1.4);
  }
}
@media (max-width: 1400px) {
  #start-top-left {
    -webkit-transform: translateX(-86%) translateY(5%) scale(1);
            transform: translateX(-86%) translateY(5%) scale(1);
  }
}
@media (max-width: 1300px) {
  #start-top-left {
    -webkit-transform: translateX(-74%) translateY(-5%) scale(0.85);
            transform: translateX(-74%) translateY(-5%) scale(0.85);
  }
}
@media (max-width: 1050px) {
  #start-top-left {
    -webkit-transform: translateX(-44%) translateY(-15%) scale(0.8);
            transform: translateX(-44%) translateY(-15%) scale(0.8);
  }
}
@media (max-height: 720px), (max-width: 1250px) {
  #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-youtuber {
  display: none;
  margin-top: 12px;
}
.youtube-header {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  display: inline-block;
  height: 26px;
  line-height: 28px;
  padding: 4px 12px;
}
#youtube-header-title {
  color: white;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
}
.btn-youtuber {
  background-image: url(../img/yt_icon_rgb.png);
  background-size: 36px;
  background-repeat: no-repeat;
  background-position: 4px 4px;
  box-sizing: border-box;
  color: gold !important;
  display: block;
  font-size: 18px;
  height: 40px;
  line-height: 36px;
  margin: auto;
  margin-top: 2px;
  text-align: left;
  text-indent: 48px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  width: auto;
}
#featured-streamers {
  visibility: hidden;
}
.streaming-header {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  height: 24px;
  line-height: 24px;
  margin-right: 20px;
  padding: 4px;
  padding-left: 12px;
  max-width: 500px;
}
#streaming-header-title {
  color: white;
  display: inline-flex;
  font-size: 14px;
  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: 10px;
  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: 11px;
  left: 0px;
  position: absolute;
}
.language-select-wrap {
  border-radius: 3px;
  color: #FFFFFF;
  display: block;
  font-size: 10px;
  overflow: hidden;
  position: absolute;
  margin-top: 10px;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.language-select-wrap:hover {
  opacity: 0.7;
}
.language-select-wrap:after {
  content: "\25BC";
  padding: 12px 8px;
  margin-left: -32px;
  position: absolute;
  top: -8px;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}
#free-gems-offer {
  width: 300px;
  height: 175px;
  margin-bottom: 0px;
  margin-top: 10px;
  padding-top: 15px;
  display: -webkit-box;
  display: block;
}
.language-select {
  display: inline-flex;
  background-color: transparent;
  color: white;
  font-weight: bold;
  height: 24px;
  margin-bottom: 6px;
  padding-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;
  font-size: 21px;
  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 {
  color: #FFF;
  bottom: var(--side-pad);
  left: var(--side-pad);
  margin-top: 40px;
}
#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;
}
.btn-download-app {
  display: inline-block;
  background-size: contain;
  background-position: center;
  height: 60px;
  width: 155px;
  margin: auto;
  margin-left: 0px;
  margin-right: 4px;
  box-sizing: border-box;
  font-size: large;
  text-align: center;
  border: 0;
  cursor: pointer;
}
.btn-download-ios {
  display: block;
  background-image: url(../img/icon_download_ios.png);
  background-repeat: no-repeat;
}
@media (max-height: 720px) {
  .btn-download-ios {
    display: none;
  }
}
.btn-download-android {
  background-image: url(../img/icon_download_android.png);
  background-repeat: no-repeat;
  /*vertical-align: bottom;*/
}
@media (max-height: 720px) {
  .btn-download-android {
    display: none;
  }
}
.version-proxies-links-tablet {
  left: var(--side-pad) !important;
  bottom: 80px !important;
  -webkit-transform: none !important;
          transform: none !important;
}
.version-proxies-links-tablet > a {
  display: block !important;
}
.version-proxies-links-steam {
  left: var(--side-pad) !important;
  bottom: 10px !important;
  -webkit-transform: none !important;
          transform: none !important;
}
.version-proxies-links-steam > 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);
  top: var(--side-pad);
  /*width: 17%;*/
  width: 350px;
  height: 180px;
  font-size: 0px;
  z-index: 1;
}
@media (max-height: 720px), (max-width: 1150px) {
  #start-bottom-right {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transform-origin: top right;
            transform-origin: top right;
    top: 9px;
  }
}
@media (max-height: 770px) {
  #start-bottom-right {
    width: 363px;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #start-bottom-right {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}
#start-bottom-right {
  pointer-events: none;
}
#start-bottom-right > * {
  pointer-events: all;
}
.btn-start-option {
  margin-right: 0px;
  margin-left: auto;
  margin-bottom: 0px;
  width: 48px;
  height: 43px;
  display: inline-block;
  background-repeat: no-repeat;
  background-color: #7a7a7a;
  box-shadow: inset 0 -4px #3e3e3e;
}
.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-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 {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  cursor: inherit;
  display: none;
  position: fixed;
  z-index: 3;
  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;
  background: radial-gradient(50% 50% at 50% 50%, rgba(12, 17, 30, 0.8) 66%, rgba(12, 17, 30, 0.8) 100%);
}
.modal-content {
  position: absolute;
  width: auto;
  min-width: 200px;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}
/* The Close Button */
.close-corner {
  margin-top: 5px;
  margin-right: -20px;
  width: 45px;
  height: 45px;
  color: black;
  float: right;
  font-size: 48px;
  font-weight: normal;
  background-repeat: no-repeat;
  background-image: url('../img/gui/close-icon.svg');
  background-size: 45px;
  position: relative;
  z-index: 2;
}
.close-corner-black {
  margin-top: 14px;
  margin-right: -8px;
  width: 32px;
  height: 32px;
  color: black;
  float: right;
  font-size: 48px;
  font-weight: normal;
  background-repeat: no-repeat;
  background-image: url('../img/gui/close-2.svg');
  background-size: 24px;
}
.modal-body p:not(.gear-text-container):not(.distillation-failed-msg) {
  display: inline-block;
  position: relative;
  bottom: 4px;
  font-size: 14px;
}
.modal-main-container {
  width: 100%;
  max-height: 350px;
  display: flex;
  flex-wrap: wrap;
  margin: 10px auto;
  justify-content: center;
  min-height: 130px;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-footer {
  padding: 2px 16px;
}
.modal-buttons {
  display: flex;
  justify-content: center;
}
.modal-buttons span {
  font-family: Edit Undo BRK;
  font-size: 20px;
  --outline-width: 2px;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;
}
.modal-button {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 150px;
  margin: 5px auto;
  margin: 5px;
  padding: 8px 16px;
  background-color: #B9B9B9;
  font-family: Edit Undo BRK;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  font-weight: normal;
  justify-content: center;
  text-transform: uppercase;
  cursor: pointer;
}
.modal-button span {
  font-family: Edit Undo BRK;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
}
.modal-button img {
  height: 20px;
  width: auto;
}
.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 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 20px;
  margin: auto;
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
  /*--outline-width: 2px;
    text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;*/
}
#modal-notification {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-notification > .modal-content {
  text-decoration: none;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  bottom: 50%;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  width: 636px;
  height: 198px;
  box-sizing: border-box;
}
#modal-notification .modal-body {
  max-width: 550px;
  text-align: center;
  margin: 15px auto;
}
#modal-notification button.green-button {
  min-width: 110px;
  margin: auto;
}
#modal-notification .modal-footer {
  background: none;
}
#modal-notification .close-corner {
  background-image: url(../img/ui/buttons/close-button.png);
  position: absolute;
  right: -210px;
  bottom: 15px;
}
#modal-temporal-ban,
.modal-report {
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-temporal-ban .modal-content,
.modal-report .modal-content {
  width: 820px;
}
#modal-temporal-ban .modal-header,
.modal-report .modal-header {
  background: #DC0205;
  border-radius: 3.90913px 3.90913px 0px 0px;
  font-weight: bold;
  padding: 0px 16px;
}
#modal-temporal-ban .modal-header > div,
.modal-report .modal-header > div {
  font-size: 53.5089px;
  text-align: center;
  line-height: 96px;
  color: #FFFFFF;
  text-shadow: 2.48134px 2.48134px 2.97272px rgba(0, 0, 0, 0.75);
}
#modal-temporal-ban .modal-body,
.modal-report .modal-body {
  background-color: #141414;
  text-align: center;
  padding-top: 53px;
  padding-bottom: 10px;
}
#modal-temporal-ban .modal-body > p,
.modal-report .modal-body > p {
  margin: 0;
}
#modal-temporal-ban .modal-footer,
.modal-report .modal-footer {
  padding: 3px 16px;
}
#modal-temporal-ban a,
.modal-report a {
  font-size: 16px;
  text-decoration: underline;
  color: black;
  font-weight: bold;
}
#modal-temporal-ban .modal-body-text,
.modal-report .modal-body-text {
  font-weight: bold;
  font-size: 25px;
  line-height: 29px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 1px 1px 0px #000000;
  margin: 0;
  padding-bottom: 36px;
}
#modal-temporal-ban .modal-body-text-2,
.modal-report .modal-body-text-2 {
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 1px 1px 0px #000000;
}
#modal-temporal-ban > .modal-content,
.modal-report > .modal-content {
  text-decoration: none;
  top: 50%;
  left: 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-temporal-ban .btn-contact-support,
.modal-report .btn-contact-support {
  background: #6d6d6d;
  width: 408px;
  height: 40px;
  display: flex;
  text-align: center;
  align-items: center;
  margin: 0 auto;
  text-decoration: none;
  margin: 10px auto;
  box-shadow: 0px 6.20636px 0px #2C2C2C;
  border-radius: 3.72381px;
}
#modal-temporal-ban .btn-contact-support > span,
.modal-report .btn-contact-support > span {
  margin: auto;
  font-weight: bold;
  font-size: 20px;
  line-height: 23px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
#modal-report-confirmation {
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 5;
}
#modal-report-confirmation .modal-content {
  width: 538px;
}
#modal-report-confirmation .modal-body {
  background-color: #141414;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 76px;
}
#modal-report-confirmation .modal-body .modal-body-text-2 {
  font-size: 20px;
  line-height: 23px;
}
#modal-report-confirmation .modal-body .modal-body-text-2:first-child {
  margin-bottom: 19px;
}
#modal-report-confirmation .modal-footer {
  padding: 11px 50px 14px 50px;
}
#modal-report-confirmation .close-footer {
  display: flex;
  margin: 0;
}
#modal-report-confirmation .close-footer > div {
  margin: auto;
  width: 228.44px;
  height: 31.45px;
  font-size: 17.8363px;
  background-color: #6D6D6D;
  box-shadow: 0px 5.28986px 0px #2C2C2C;
  border-radius: 10px;
  width: 214px;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
#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-confirm-sell {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 4;
}
#modal-confirm-sell a {
  font-size: 16px;
  color: grey;
  font-weight: bold;
}
#modal-confirm-sell > .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: auto;
}
@media (max-width: 960px) {
  #modal-confirm-sell > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
    top: 50%;
  }
}
@media (max-width: 850px) {
  #modal-confirm-sell > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
#modal-confirm-sell > .modal-content .modal-header > h2 {
  font-weight: bold;
}
#modal-confirm-sell > .modal-content > .modal-body > .modal-body-text {
  font-size: 16px;
}
#modal-confirm-sell > .modal-content > .modal-footer > .close-footer {
  display: flex;
}
#modal-crate-contain {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75);
  /* Black w/ opacity */
  z-index: 4;
}
#modal-crate-contain a {
  font-size: 25px;
  color: grey;
  font-weight: bold;
}
#modal-crate-contain > .modal-content {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  top: 50%;
  left: 50%;
  text-decoration: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  width: 1160px;
}
@media (min-width: 851px) and (max-height: 768px), (max-width: 1200px) {
  #modal-crate-contain > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.82);
            transform: translate(-50%, -50%) scale(0.82);
  }
}
@media (min-width: 850px) and (max-width: 1060px) {
  #modal-crate-contain > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.67);
            transform: translate(-50%, -50%) scale(0.67);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-crate-contain > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
  }
}
@media (max-width: 851px) and (max-height: 376px) {
  #modal-crate-contain > .modal-content {
    -webkit-transform: translate(-50%, -50%) scale(0.4);
            transform: translate(-50%, -50%) scale(0.4);
  }
}
#modal-crate-contain > .modal-content > .modal-header {
  background-color: #37513A;
  height: 96.61px;
  box-sizing: border-box;
}
#modal-crate-contain > .modal-content > .modal-header > h2 {
  color: #FFFFFF;
  text-shadow: 2.48134px 2.48134px 2.97272px rgba(0, 0, 0, 0.75);
  font-style: normal;
  font-weight: bold;
  font-size: 53.5089px;
  text-align: center;
  line-height: 5px;
}
#modal-crate-contain > .modal-content > .modal-body {
  background-color: #000000;
}
#modal-crate-contain > .modal-content > .modal-body > .modal-body-text {
  font-size: 16px;
}
#modal-crate-contain > .modal-content > .modal-body > .modal-items-odds {
  display: flex;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 5px;
  line-height: 5px;
  border-radius: 5px;
  width: 1105px;
  margin: 0 auto;
}
#modal-crate-contain > .modal-content > .modal-body > .modal-items-odds > .gear-odds-info {
  font-size: 20px;
  padding: 10px;
  margin-right: auto;
}
#modal-crate-contain > .modal-content > .modal-body > .modal-items-odds > .info-items-odds {
  display: flex;
  margin-right: auto;
}
#modal-crate-contain > .modal-content > .modal-body > .modal-items-odds > .info-items-odds > .item-odd {
  padding: 10px;
  margin-right: 25px;
  background-color: #141414;
  border-radius: 5px;
}
#modal-crate-contain > .modal-content > .modal-body > .items-crate {
  position: relative;
  padding: 2% 0%;
  width: 1105px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
}
#modal-crate-contain > .modal-content > .modal-body > .items-crate > .items-crate-contains {
  position: relative;
  margin-right: 11px;
  margin-left: auto !important;
  width: 68.7px;
  height: 68.7px;
  box-sizing: border-box;
  margin-bottom: 10px;
  background-size: 66%;
  background-repeat: no-repeat;
  background-position: center;
}
#modal-crate-contain > .modal-content > .modal-body > .items-crate > .items-crate-contains .item-rarity-style {
  position: absolute;
  top: -1.7176px;
  left: -1.7176px;
}
#modal-crate-contain > .modal-content > .modal-footer {
  background-color: #37513A;
  height: 78.78px;
  box-sizing: border-box;
}
#modal-crate-contain > .modal-content > .modal-footer > .close-footer {
  display: flex;
  margin: 0;
  margin-top: 20px;
}
#modal-crate-contain > .modal-content > .modal-footer > .close > .btn-okay {
  background-color: #7A7A7A;
  border-radius: 5px;
  color: white;
  font-style: bold;
  text-align: center;
  height: 40px;
  line-height: 28px;
  margin: auto;
  width: 228.44px;
  height: 31.45px;
  font-size: 17.8363px;
  border-bottom: 2px solid #3E3E3E;
  box-shadow: inset 0 -2px #3E3E3E;
}
/* modal-customize */
#modal-customize,
#forge_modal {
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  background: unset;
}
#modal-customize .item-rarity-style,
#forge_modal .item-rarity-style {
  position: absolute;
}
.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: relative;
  margin: 45% 50%;
  z-index: 3;
}
#customize-emote-wheel #customize-emote-top #emote-top-drop-area {
  border-radius: 0 0 0 275px;
  -webkit-transform: scale(2) rotate(135deg);
          transform: scale(2) rotate(135deg);
  -webkit-transform-origin: left;
          transform-origin: left;
  top: 165px;
  right: 107px;
}
#customize-emote-wheel #customize-emote-right #emote-right-drop-area {
  border-radius: 0 0 0 275px;
  -webkit-transform: scale(2) rotate(225deg);
          transform: scale(2) rotate(225deg);
  -webkit-transform-origin: left;
          transform-origin: left;
  top: 274px;
  right: 0px;
}
#customize-emote-wheel #customize-emote-bottom #emote-bottom-drop-area {
  border-radius: 0 0 0 275px;
  -webkit-transform: scale(2) rotate(315deg);
          transform: scale(2) rotate(315deg);
  -webkit-transform-origin: left;
          transform-origin: left;
  top: 283px;
  right: 207px;
}
#customize-emote-wheel #customize-emote-left #emote-left-drop-area {
  border-radius: 0 0 0 275px;
  -webkit-transform: scale(2) rotate(45deg);
          transform: scale(2) rotate(45deg);
  -webkit-transform-origin: left;
          transform-origin: left;
  top: 173px;
  right: 313px;
}
#customize-emote-wheel #emote-dead-zone {
  border-radius: 275px;
  width: 91px;
  height: 91px;
  cursor: default;
}
#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 {
  display: flex;
  height: 500px;
}
#modal-customize-body.heal-tab {
  height: 362px;
  overflow-y: scroll;
  overflow-x: hidden;
}
#modal-customize-body.heal-tab #modal-customize-list,
#modal-customize-body.heal-tab #modal-customize-list-boost {
  height: auto;
  overflow-y: hidden;
  padding-bottom: 27px;
}
#modal-customize-item-header {
  display: flex;
  min-height: 47px;
  padding: 10px 5px;
  margin-bottom: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: #555555;
}
#modal-customize-item-name {
  color: white;
  cursor: pointer;
  display: inline;
  font-size: 28px;
  line-height: 28px;
  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-item-sell-container {
  bottom: 9px;
  right: 20px;
  float: right;
  margin: auto;
  position: absolute;
  background-color: #1F1E1E;
  width: auto;
  height: auto;
  display: flex;
}
#modal-customize-item-sell-info {
  display: inline-flex;
  vertical-align: middle;
}
#modal-customize-item-season {
  padding-bottom: 5px;
  color: white;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
#modal-customize-item-price {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  padding-top: 24px;
  padding-right: 9px;
  padding-left: 20px;
}
#modal-customize-item-price-value {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  padding-top: 22px;
}
#button-sell-item {
  height: 39.75px;
  width: 120px;
  margin-left: 25px;
  margin-right: 20px;
  margin-top: 8px;
  float: right;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 2px 2px 2px 2px;
  background-color: #1e90ff;
  background-position: 96%;
  border-bottom: 2px solid #1871c8;
  box-shadow: inset 0 -2px #1871c8;
}
#button-sell-item > span {
  color: white;
  font-size: 24px;
}
#modal-customize-loading-container {
  /*bottom: 6px;*/
  float: right;
  margin: auto 0px;
  padding: 0px;
  position: absolute;
  right: 55px;
  top: 25px;
}
.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: none;
  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: 70px;
  height: 70px;
}
.customize-col-large {
  width: 96px;
  height: 96px;
}
.ui-emote-top .customize-col {
  margin-top: -98px;
}
.ui-emote-right .customize-col {
  margin-left: 98px;
}
.ui-emote-bottom .customize-col {
  margin-top: 98px;
}
.ui-emote-left .customize-col {
  margin-left: -98px;
}
#modal-customize-list,
#modal-customize-list-boost {
  height: 400px;
  position: relative;
  width: 360px;
  margin: 0 auto;
  margin-top: -35px;
}
/*#modal-customize-list > div,
#modal-customize-list-boost > div{
    margin-left: 16px;
}*/
.customize-list-item {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: inline-block;
  height: 96px;
  margin-right: 12px;
  position: relative;
  width: 96px;
}
.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: 0.5;
  /*   opacity: 1.0;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease; */
}
.customize-list-item-selected {
  opacity: 1.0;
  box-sizing: border-box;
}
.customize-list-item .customize-item-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 64px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.customize-list-item .customize-item-image span {
  position: absolute;
}
.customize-list-item .customize-item-image .item-rarity-style {
  left: -2.86534px;
  top: -2.86534px;
}
.customize-list-item-selected {
  box-shadow: 0 0 0 3px white;
}
#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: unset;
  color: white;
  height: 73px;
  padding: 0!important;
  background: none;
  display: flex;
  align-items: flex-end;
  margin-left: 0px;
}
#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-image {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 48px;
  width: 48px;
}
.modal-customize-cat-selected .modal-customize-cat-image {
  margin-left: 4px;
  margin-right: 4px;
}
.modal-customize-cat-name {
  align-self: center;
  display: none;
}
.modal-customize-cat-selected {
  opacity: 1;
}
.modal-customize-cat-selected .modal-customize-cat-name {
  display: block;
}
.modal-customize-cat-connect {
  background: #FFFFFF;
  bottom: -16px;
  height: 8px;
  margin: auto;
  opacity: 0.0;
  position: relative;
  width: 70px;
}
.modal-customize-cat-selected {
  /*  background: #C4C4C4; */
  --box-height: 80px;
  --box-width: 160px;
  background-image: url(../img/ui/frames/frame-tab-open.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  min-width: var(--box-width);
  min-height: var(--box-height);
}
.modal-customize-cat-image-selected {
  opacity: 1.0;
  background-color: #E3E3E3;
}
.modal-customize-cat-connect-selected {
  opacity: 1.0;
}
#modal-customize-edit-container {
  width: auto;
}
#modal-customize-edit-container .modal-customize-edit-group {
  margin-bottom: 22px;
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-name {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-name.disable {
  color: #B6B6B6;
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-buttons {
  display: flex;
  width: 126px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 10px;
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-buttons .modal-customize-edit-prev-button {
  /* 
                background-color: #E3E3E3;
                width: 33.2px;
                height: 33.2px;
                background-image: url(../img/gui/gui-arrow-prev.svg);
                background-position: center;
                background-repeat: no-repeat; */
  margin: auto;
  /* 
                background-size: 11px;
                cursor: pointer; */
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-buttons .modal-customize-edit-prev-button.hidden {
  display: none;
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-buttons .modal-customize-edit-next-button {
  /* 
                background-color: #E3E3E3;
                width: 33.2px;
                height: 33.2px;
                background-image: url(../img/gui/gui-arrow-next.svg);
                background-position: center;
                background-repeat: no-repeat; */
  margin: auto;
  /* background-size: 11px;
                cursor: pointer; */
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-buttons .modal-customize-edit-box {
  display: flex;
  justify-content: center;
  align-items: center;
  --box-width: 46px;
  --box-height: 46px;
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-buttons .modal-customize-edit-display {
  /*  border: 3px solid #E3E3E3; */
  width: 35px;
  height: 35px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
  color: #fff;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
#modal-customize-edit-container .modal-customize-edit-group .modal-customize-edit-buttons .modal-customize-edit-display.disable {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
#modal-player-card-container {
  margin: 0px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-player-card-container .arrow-btn-left {
  margin-right: 5px;
}
#modal-player-card-container .arrow-btn-right {
  margin-left: 5px;
}
.modal-customize-buttons {
  align-self: flex-end;
  margin-bottom: 10px;
}
.modal-customize-buttons #random-button {
  width: 184px;
  height: 43px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-transform: lowercase;
  margin-bottom: 10px;
  cursor: pointer;
  color: #fff;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
.modal-customize-buttons #nft-button {
  text-align: center;
  justify-content: center;
  text-transform: lowercase;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
.modal-customize-buttons #save-button {
  width: 184px;
  height: 43px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-transform: lowercase;
  cursor: pointer;
}
#modal-customize-header h2 {
  font-weight: bold;
}
#modal-customize-footer {
  background-color: #3E3E3E;
  color: white;
  height: 84px;
}
#modal-customize-item-source {
  color: #FFFFFF;
  font-size: 24px;
  font-style: normal;
  line-height: 28px;
  padding-top: 6px;
}
#modal-customize-item-lore {
  color: #C5C5C5;
  font-size: 18px;
  font-style: italic;
  line-height: 21px;
}
#modal-customize-unlocks {
  bottom: -60px;
  left: 0px;
  pointer-events: all;
  position: fixed;
  width: 578px;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-customize-unlocks {
    bottom: -40px;
    left: calc(50% - 130px);
  }
}
.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) {
  .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-youtube-subscribe-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;
}
@media (max-width: 1550px) {
  .ad-block-loadouts-left {
    display: none;
  }
}
#modal-customize-wrapper {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  height: 477px;
  left: calc(50% + 8px);
  pointer-events: none;
  position: fixed;
  top: 60%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  /*width: 1210px;*/
  width: 910px;
}
@media (max-width: 1800px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-45%) translateX(-50%) scale(0.9);
            transform: translateY(-45%) translateX(-50%) scale(0.9);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
@media (max-width: 1700px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-42.5%) translateX(-50%) scale(0.85);
            transform: translateY(-42.5%) translateX(-50%) scale(0.85);
    top: 48%;
  }
}
@media (max-width: 1550px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-33.5%) translateX(-50%) scale(0.67);
            transform: translateY(-33.5%) translateX(-50%) scale(0.67);
    top: 50%;
  }
}
@media (max-width: 1150px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-29%) translateX(-50%) scale(0.58);
            transform: translateY(-29%) translateX(-50%) scale(0.58);
    top: 42%;
  }
}
@media (max-width: 1000px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-24%) translateX(-50%) scale(0.48);
            transform: translateY(-24%) translateX(-50%) scale(0.48);
    top: 50%;
  }
}
@media (max-width: 800px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-19%) translateX(-50%) scale(0.38);
            transform: translateY(-19%) translateX(-50%) scale(0.38);
    top: 36%;
  }
}
@media (max-height: 420px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.4);
            transform: translateY(-50%) translateX(-50%) scale(0.4);
    top: 87%;
  }
}
@media (max-height: 375px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.35);
            transform: translateY(-50%) translateX(-50%) scale(0.35);
  }
}
@media (max-height: 350px) {
  #modal-customize-wrapper {
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.32);
            transform: translateY(-50%) translateX(-50%) scale(0.32);
    top: 99%;
  }
}
.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: 876px;*/
  width: 100%;
}
.modal-content-right {
  bottom: 0px;
  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;
  display: none;
}
#modal-content-right-emote {
  height: 464px;
}
#modal-customize .modal-customize-text {
  margin-left: 8px;
  width: 320px;
  overflow-wrap: break-word;
}
/* Opponet screen */
#modal-content-left2 {
  display: inline-block;
  left: 0px;
  pointer-events: initial;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 681.19px;
  height: 550px;
  background: rgba(3, 3, 3, 0.5);
  box-sizing: border-box;
  padding: 0 30px;
}
#modal-opponent-wrapper {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  height: 600px;
  left: calc(50% + 167px);
  pointer-events: none;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  /*width: 1210px;*/
  width: 1010px;
}
@media (max-width: 1550px) {
  #modal-opponent-wrapper {
    left: 54%;
  }
}
@media (max-width: 1300px) {
  #modal-opponent-wrapper {
    -webkit-transform: translateX(-50%) scale(0.9);
            transform: translateX(-50%) scale(0.9);
    -webkit-transform-origin: top;
            transform-origin: top;
    top: 71px;
  }
}
@media (max-width: 1200px) {
  #modal-opponent-wrapper {
    -webkit-transform: translateX(-50%) scale(0.9);
            transform: translateX(-50%) scale(0.9);
    -webkit-transform-origin: top;
            transform-origin: top;
    top: 71px;
  }
}
@media (max-width: 960px) {
  #modal-opponent-wrapper {
    -webkit-transform: translateX(-50%) scale(0.55);
            transform: translateX(-50%) scale(0.55);
    -webkit-transform-origin: top;
            transform-origin: top;
    top: 0;
  }
}
@media (max-height: 650px) {
  #modal-opponent-wrapper {
    -webkit-transform: translateX(-50%) scale(0.55);
            transform: translateX(-50%) scale(0.55);
    -webkit-transform-origin: top;
            transform-origin: top;
    top: 0;
  }
}
#modal-opponent-header {
  color: white;
  align-items: baseline;
  margin-top: 33px;
}
.modal-opponent-name {
  font-weight: bold;
  font-size: 48.2732px;
  margin-left: 20px;
}
.modal-opponent-kills {
  display: flex;
  margin-left: 20px;
}
.modal-opponent-kills-text {
  font-weight: normal;
  font-size: 20px;
}
.modal-opponent-kills-value {
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;
}
#modal-opponent-list {
  height: 270px;
  box-sizing: border-box;
  background: #1F1E1E;
  overflow: auto;
  padding-left: 12%;
  padding-top: 20px;
}
#modal-opponent-footer {
  display: flex;
}
.modal-opponent-item {
  display: flex;
}
.modal-opponent-item div {
  font-style: normal;
  font-size: 14px;
  color: #C5C5C5;
}
.opponent-item-data-container {
  display: flex;
  margin-top: 17px;
}
#modal-opponent-body {
  background: #3E3E3E;
  margin-top: 15px;
  padding: 25px;
}
#modal-opponent-item-name {
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
}
#modal-opponent-close {
  position: absolute;
  right: 13px;
}
#modal-weapon-selection {
  display: none;
  margin-top: 0px;
  overflow: visible;
  /*     @media (max-width: 1850px), (max-height:870px){
        transform: scale(0.9);
        transform-origin: top center;
    }

    @media (max-width: 1700px){
        transform: scale(0.87);
        transform-origin: top left;
    }

    @media (max-width: 1600px), (max-height:775px)  {
        transform: scale(0.85);
        transform-origin: top left;
        overflow: visible;
    }

    @media (max-width: 1400px) {
        transform: scale(0.8);
        transform-origin: top left;
    }

    @media (max-height:698px) , (max-height:722px) {
        transform: scale(0.75);
        transform-origin: top left;
    }

    @media (max-width: 1300px), (max-height:698px) {
        transform: scale(0.7);
        transform-origin: top left;
    }

    @media (max-width: 1200px) {
        transform: scale(0.6);
        transform-origin: top left;
    }

    @media (max-width: 1080px) {
        transform: scale(0.5);
        transform-origin: top left;
    }

    @media (max-width: 900px) {
        transform: scale(0.4);
        transform-origin: top left;
    }

    @media (max-width: 800px), (max-height:350px) {
        transform: scale(0.3);
        transform-origin: top left;
    } */
}
#modal-weapon-selection .modal-weapon-selection-left-container {
  width: 1300px;
  margin: 0 auto;
  padding-top: 67px;
}
#modal-weapon-selection .modal-weapon-selection-title {
  position: relative;
  display: flex;
  margin: 0 auto;
}
#modal-weapon-selection .modal-weapon-selection-title div {
  margin: 0 auto;
  color: #FFFFFF;
  padding-top: 4px;
}
#modal-weapon-selection .modal-weapon-selection-canvas {
  position: absolute;
  top: 22vh;
  left: 20px;
  /* .modal-weapon-canvas-background{
            background: black;
            opacity: 0.5;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
        } */
  /*   @media (max-width: 1600px) {
            transform: scale(0.8) translate(0,-50%);
            transform-origin: top left;
        }

        @media (max-width: 1400px) {
            transform: scale(0.7) translate(0,-50%);
            transform-origin: top left;
        }*/
}
#modal-weapon-selection #modal-weapon-canvas {
  position: absolute;
  top: 0;
  pointer-events: none;
}
#modal-weapon-selection #modal-weapon-selection-container {
  width: 1201px;
  margin-top: 78px;
  display: flex;
  margin-bottom: 36px;
  /*  @media (max-width: 1600px) {
        transform: scale(0.8);
        transform-origin: top left;
        margin-left: 306px;
    }

    @media (max-width: 1400px) {
        transform: scale(0.7);
        transform-origin: top left;
        margin-left: 291px;
    }


    @media (max-width: 1180px) {
        width: 1100px;
    }*/
}
#modal-weapon-selection #modal-weapon-selection-container .weapon {
  margin: auto;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 16px solid transparent;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon:not(:last-child) {
  margin-right: 41px;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .weapon-name {
  margin: 0 auto;
  display: flex;
  margin-top: 1px;
  margin-bottom: 24px;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .playstyle-weapon-description {
  width: 255px;
  margin: 0 auto;
  margin-bottom: 24px;
  text-align: center;
  word-spacing: -8px;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .weapon-image {
  width: 112px;
  min-height: 116px;
  background-repeat: no-repeat !important;
  background-size: contain!important;
  background-position: center!important;
  margin: 0 auto;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .difficulty-group {
  display: flex;
  margin: 0 auto;
  padding-top: 52px;
  padding-bottom: 20px;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .difficulty-group .difficulty-label {
  width: 105px;
  margin-right: 4px;
  display: flex;
  align-items: center;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .difficulty-group .difficulty-level {
  display: flex;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .difficulty-group .difficulty-star {
  height: 30px;
  width: 30px;
  margin-right: 4px;
  background-repeat: no-repeat;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .playstyle-description {
  width: 290px;
  margin: 0 auto;
  height: 147px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .basic-skill-group .basic-skill-label {
  margin-left: 34px;
  margin-top: 10px;
  text-align: center;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .basic-skill-group .skill-header-container {
  margin: auto;
  margin-left: 18px;
  margin-top: 8px;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .basic-skill-group .skill-header-container .skill-image {
  width: 76px;
  height: 76px;
  background-size: contain!important;
}
#modal-weapon-selection #modal-weapon-selection-container .weapon .basic-skill-group .skill-description-container {
  width: 350px;
  height: 80px;
  text-align: center;
  margin: 0 auto;
  margin-top: 17px;
}
#modal-weapon-selection .modal-weapon-selection-btn {
  display: flex;
  position: relative;
  margin: 0 auto;
  /*bottom: -64px;*/
  top: auto;
  width: 404px;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  justify-content: center;
  --base-button_height: 62px;
}
#modal-weapon-selection .modal-weapon-selection-content {
  margin-top: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
}
#modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
#modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
@media (max-width: 1860px), (max-height: 1040px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@media (max-height: 980px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1700px), (max-height: 920px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}
@media (max-width: 1600px), (max-height: 890px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@media (max-width: 1550px), (max-height: 820px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
@media (max-width: 1440px), (max-height: 780px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}
@media (max-width: 1280px), (max-height: 720px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
  }
}
@media (max-width: 1080px), (max-height: 680px) {
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-left-container,
  #modal-weapon-selection .modal-weapon-selection-content .modal-weapon-selection-canvas {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
  }
}
/* 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;
}
/* Add Animation */
@-webkit-keyframes slideIn {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slideIn {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-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,
#mobile-download-app,
#language-select-mobile-wrapper,
.hide-on-desktop {
  display: none;
}
#btn-account-link {
  position: absolute;
  right: 180px;
  top: 12px;
}
.loadout-armors-container {
  display: flex;
  height: 100%;
}
.loadout-armors-select-container {
  width: 60%;
}
.loadout-armors-grid-container {
  width: 100%;
  height: 390px;
  overflow-y: auto;
  overflow-x: hidden;
}
#armory-gears-grid-container,
#armory-pet-grid-container,
#craft-recipes-grid-container,
#distill-recipes-grid-container {
  display: grid;
  grid-template-columns: 430px auto;
  gap: 10px;
}
#emote-grid-container {
  display: grid;
  grid-template-columns: 465px auto;
  gap: 10px;
}
#armory-gears-grid,
#armory-pet-grid {
  grid-template-columns: 90px 90px 90px 90px;
  grid-template-rows: 124px;
  height: 320px;
}
#emote-grid {
  grid-template-columns: 100px 100px 100px 100px;
  height: 387px;
  padding-top: 15px;
  padding-left: 5px;
}
#armory-gears-grid,
#armory-pet-grid {
  padding-top: 14px;
  margin-top: 4px;
}
.armory-gear-upgrade {
  flex-direction: column;
  position: relative;
}
.armory-info-pane-container {
  position: relative;
  padding: 7px;
  box-sizing: border-box;
  height: 232px;
}
.armory-info-pane-img-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.armory-info-pane-img-container .armor-rarity-label {
  position: absolute;
  bottom: 7px;
  text-transform: capitalize;
  text-align: center;
}
.armory-info-pane-img-container img {
  height: calc(108px - var(--image-height-offset, 0px));
  -o-object-fit: contain;
     object-fit: contain;
  margin-top: 30px;
}
.armory-info-pane-img-container.locked img {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.armory-info-pane-img-container .bound-label {
  position: absolute;
  left: 11px;
  bottom: 56px;
  width: auto;
  margin-bottom: calc(1% + var(--image-height-offset, 0px));
  font-size: 20px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  text-transform: uppercase;
  color: #FFFF00;
}
.loadout-armor-info-action-buttons {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  display: flex;
  width: 90%;
  justify-content: center;
  align-items: center;
}
.loadout-armor-info-action-button {
  box-shadow: 0px 4px 6px #a4a4a4;
  color: #000;
  min-height: 30px;
  border: none;
  padding: 0 14px;
  font-family: 'Amiga Forever';
  font-size: 12px;
}
.loadout-armor-info-action-button:not(:last-of-type) {
  margin-right: 10px;
}
.loadout-armor-info-tab-button {
  background-color: #BDBDBD;
  border: none;
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  display: flex;
  align-items: center;
  min-height: 30px;
  justify-content: flex-start;
  width: 100%;
  text-align: start;
  color: #333333;
  opacity: 0.5;
}
.loadout-armor-info-tab-button.selected,
.loadout-armor-info-tab-button:hover {
  opacity: 1;
}
.loadout-armor-info-tab-button:not(:last-of-type) {
  margin-bottom: 10px;
}
.button-light {
  cursor: pointer;
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  color: #000;
  transition: all 0.25s ease;
}
.button-light:hover,
.button-light:active {
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
}
.coming-soon-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.test-button {
  border: none;
  background-color: #D20000;
  font-family: Amiga Forever;
  font-size: 14px;
  padding: 6px 10px;
  color: #fff;
  -webkit-filter: drop-shadow(0px 1px 1px #525050);
          filter: drop-shadow(0px 1px 1px #525050);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#test-add-gold-button {
  position: absolute;
  top: -40px;
  left: -1050px;
}
#test-add-gems-button {
  position: absolute;
  top: -40px;
  left: -778px;
}
#test-add-xp-button {
  position: absolute;
  top: -40px;
  left: -547px;
}
#test-reset-tutorial-quest {
  position: absolute;
  top: -33px;
  left: -350px;
}
.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
#test-add-gold-button .modal-customize-loading,
#test-add-gems-button .modal-customize-loading {
  display: none;
}
#test-add-gold-button.loading .modal-customize-loading,
#test-add-gems-button.loading .modal-customize-loading {
  display: block;
}
#armory_gear_card-equipped_gear {
  height: 328px;
}
#armory_gear_card-equipped_gear .equipped-gear-container {
  height: 80%;
}
.equip-gear-box .img-box-wrapper {
  min-width: 50px;
  height: 50px;
}
.filter-gray-0 {
  -webkit-filter: contrast(0) hue-rotate(112deg) brightness(100%);
          filter: contrast(0) hue-rotate(112deg) brightness(100%);
}
.filter-gray-1 {
  -webkit-filter: grayscale(1) brightness(0.2);
          filter: grayscale(1) brightness(0.2);
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-6 {
  border-width: 6px;
}
.border-8 {
  border-width: 8px;
}
.p-0 {
  padding: 0px;
}
.p-px {
  padding: 1px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.border-solid {
  border-style: solid;
}
.border-rare {
  border-color: #939ef4;
}
.border-common {
  border-color: #99ff80;
}
.border-epic {
  border-color: #fe7e7c;
}
.border-legendary {
  border-color: #ffff00;
}
.border-box-base-s {
  --box-width: 50px;
  --box-height: 50px;
  background-image: url(../img/ui/boxes/border-box-s.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: var(--box-width);
  height: var(--box-height);
}
.border-box-common-s {
  background-image: url(../img/ui/boxes/border-box-common-s.png);
}
.border-box-rare-s {
  background-image: url(../img/ui/boxes/border-box-rare-s.png);
}
.border-box-epic-s {
  background-image: url(../img/ui/boxes/border-box-epic-s.png);
}
.border-box-legendary-s {
  background-image: url(../img/ui/boxes/border-box-legendary-s.png);
}
.border-box-base-m {
  --box-width: 96px;
  --box-height: 96px;
  background-image: url(../img/ui/boxes/border-box-m.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: var(--box-width);
  height: var(--box-height);
}
.border-box-common-m {
  background-image: url(../img/ui/boxes/border-box-common-m.png);
}
.border-box-rare-m {
  background-image: url(../img/ui/boxes/border-box-rare-m.png);
}
.border-box-epic-m {
  background-image: url(../img/ui/boxes/border-box-epic-m.png);
}
.border-box-legendary-m {
  background-image: url(../img/ui/boxes/border-box-legendary-m.png);
}
.border-gray {
  border-color: #E0E0E0;
}
.border-gray-4 {
  border-color: #F2F2F2;
}
.border-gray-5 {
  border-color: #4F4F4F;
}
.border-transparent {
  border-color: transparent;
}
/* Background*/
.bg-black-opacity-75 {
  background-color: rgba(0, 0, 0, 0.75);
}
.bg-common {
  background-color: rgba(153, 255, 128, var(--tw-bg-opacity));
}
.bg-rare {
  background-color: rgba(147, 158, 244, var(--tw-bg-opacity));
}
.bg-epic {
  background-color: rgba(254, 126, 124, var(--tw-bg-opacity));
}
.bg-legendary {
  background-color: rgba(255, 255, 0, var(--tw-bg-opacity));
}
.bg-gray {
  background-color: #E0E0E0;
}
.bg-gray-2 {
  background-color: #E3E3E3;
}
.bg-gray-3 {
  background-color: #C4C4C4;
}
.bg-gray-5 {
  background-color: #4F4F4F;
}
.bg-gray-8 {
  background-color: #707070;
}
.bg-gray-10 {
  background-color: #9C9C9C;
}
/* Background*/
.text-rare {
  color: #939ef4;
}
.text-common {
  color: #99ff80;
}
.text-epic {
  color: #fe7e7c;
}
.text-legendary {
  color: #ffff00;
}
.text-gray {
  color: #E0E0E0;
}
.text-gray-2 {
  color: #E3E3E3;
}
.text-gray-3 {
  color: #C4C4C4;
}
.text-gray-3 {
  color: #F2F2F2;
}
.text-gray-5 {
  color: #4F4F4F;
}
.text-gray-6 {
  color: #333333;
}
.text-gray-9 {
  color: #828282;
}
div[hidden],
span[hidden],
button[hidden] {
  display: none !important;
}
.grid-cols-upgrade {
  grid-template-columns: 150px minmax(240px, 2fr) minmax(240px, 1.5fr);
}
.rendering-pixelated {
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.font-outline-white {
  color: #000000;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.font-outline-black {
  color: #fff;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
.font-outline-black-2 {
  color: #fff;
  text-shadow: -2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, 2px 2px 0 #000000;
}
.font-outline-black-3 {
  color: #fff;
  text-shadow: -3px -3px 0 #000000, 3px -3px 0 #000000, -3px 3px 0 #000000, 3px 3px 0 #000000;
}
.font-outline-black-4 {
  color: #fff;
  text-shadow: -4px -4px 0 #000000, 4px -4px 0 #000000, -4px 4px 0 #000000, 4px 4px 0 #000000;
}
.switch {
  display: flex;
  justify-content: space-between;
  width: 80px;
  height: 42px;
  position: relative;
}
.toggle-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  bottom: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: calc(50% - 4px);
  height: calc(100% - 4px);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  transition: -webkit-transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
}
.toggle-thumb-button {
  width: 40px;
  height: 42px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.toggle-thumb-down {
  background-image: url(/img/gui/arrow-down.svg);
}
.toggle-thumb-up {
  background-image: url(/img/gui/arrow-up.svg);
}
.checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}
.order-asc-checkbox ~ .toggle-thumb-down {
  background-image: url(../img/gui/arrow-down-selected.svg);
}
.order-asc-checkbox ~ .toggle-thumb-up {
  background-image: url(../img/gui/arrow-up.svg);
}
.order-asc-checkbox ~ .toggle-thumb-up:hover {
  background-image: url(../img/gui/arrow-up-hover.svg);
}
.order-asc-checkbox:checked ~ .toggle-thumb-down {
  background-image: url(../img/gui/arrow-down.svg);
}
.order-asc-checkbox:checked ~ .toggle-thumb-down:hover {
  background-image: url(../img/gui/arrow-down-hover.svg);
}
.order-asc-checkbox:checked ~ .toggle-thumb-up {
  background-image: url(../img/gui/arrow-up-selected.svg);
}
.max-min-h-md {
  max-height: 370px;
  min-height: 370px;
}
.h-md {
  height: 250px;
}
button[disabled],
a[disabled],
.button-disabled {
  cursor: not-allowed !important;
  pointer-events: none;
  -webkit-filter: opacity(0.7) grayscale(1);
          filter: opacity(0.7) grayscale(1);
}
*[data-visibility="hidden"] {
  visibility: hidden;
}
*[data-visibility="visible"] {
  visibility: visible;
}
#emote-instructions {
  text-align: center;
  margin-top: 5px;
}
.emote-equipped {
  height: 32px;
  width: 32px;
  left: 75px;
  bottom: 80px;
  background-repeat: no-repeat;
  background-size: 32px;
}
.base-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
}
.base-button.disable {
  cursor: none;
  pointer-events: none;
  -webkit-filter: grayscale(1) brightness(0.8);
          filter: grayscale(1) brightness(0.8);
}
.purple-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/purple-button-left.png), url(../img/ui/buttons/purple-button-center.png), url(../img/ui/buttons/purple-button-right.png);
}
.purple-button:hover {
  background-image: url(../img/ui/buttons/purple-button-hover_left.png), url(../img/ui/buttons/purple-button-hover_center.png), url(../img/ui/buttons/purple-button-hover_right.png);
}
.purple-button:active {
  background-image: url(../img/ui/buttons/purple-button-active_left.png), url(../img/ui/buttons/purple-button-active_center.png), url(../img/ui/buttons/purple-button-active_right.png);
}
.battle-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/battle-button-left.png), url(../img/ui/buttons/battle-button-center.png), url(../img/ui/buttons/battle-button-right.png);
}
.battle-button:hover {
  background-image: url(../img/ui/buttons/battle-button-hover_left.png), url(../img/ui/buttons/battle-button-hover_center.png), url(../img/ui/buttons/battle-button-hover_right.png);
}
.battle-button:active {
  background-image: url(../img/ui/buttons/battle-button-active_left.png), url(../img/ui/buttons/battle-button-active_center.png), url(../img/ui/buttons/battle-button-active_right.png);
}
.orange-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/orange-button-left.png), url(../img/ui/buttons/orange-button-center.png), url(../img/ui/buttons/orange-button-right.png);
}
.orange-button:hover {
  background-image: url(../img/ui/buttons/orange-button-hover_left.png), url(../img/ui/buttons/orange-button-hover_center.png), url(../img/ui/buttons/orange-button-hover_right.png);
}
.orange-button:active {
  background-image: url(../img/ui/buttons/orange-button-active_left.png), url(../img/ui/buttons/orange-button-active_center.png), url(../img/ui/buttons/orange-button-active_right.png);
}
.blue-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/blue-button-left.png), url(../img/ui/buttons/blue-button-center.png), url(../img/ui/buttons/blue-button-right.png);
}
.blue-button:hover {
  background-image: url(../img/ui/buttons/blue-button-hover_left.png), url(../img/ui/buttons/blue-button-hover_center.png), url(../img/ui/buttons/blue-button-hover_right.png);
}
.blue-button:active {
  background-image: url(../img/ui/buttons/blue-button-active_left.png), url(../img/ui/buttons/blue-button-active_center.png), url(../img/ui/buttons/blue-button-active_right.png);
}
.green-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/green-button-left.png), url(../img/ui/buttons/green-button-center.png), url(../img/ui/buttons/green-button-right.png);
}
.green-button:hover {
  background-image: url(../img/ui/buttons/green-button-hover_left.png), url(../img/ui/buttons/green-button-hover_center.png), url(../img/ui/buttons/green-button-hover_right.png);
}
.green-button:active {
  background-image: url(../img/ui/buttons/green-button-active_left.png), url(../img/ui/buttons/green-button-active_center.png), url(../img/ui/buttons/green-button-active_right.png);
}
.red-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/red-button-left.png), url(../img/ui/buttons/red-button-center.png), url(../img/ui/buttons/red-button-right.png);
}
.red-button:hover {
  background-image: url(../img/ui/buttons/red-button-hover_left.png), url(../img/ui/buttons/red-button-hover_center.png), url(../img/ui/buttons/red-button-hover_right.png);
}
.red-button:active {
  background-image: url(../img/ui/buttons/red-button-active_left.png), url(../img/ui/buttons/red-button-active_center.png), url(../img/ui/buttons/red-button-active_right.png);
}
.gold-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/gold-button-left.png), url(../img/ui/buttons/gold-button-center.png), url(../img/ui/buttons/gold-button-right.png);
}
.gold-button:hover {
  background-image: url(../img/ui/buttons/gold-button-hover_left.png), url(../img/ui/buttons/gold-button-hover_center.png), url(../img/ui/buttons/gold-button-hover_right.png);
}
.gold-button:active {
  background-image: url(../img/ui/buttons/gold-button-active_left.png), url(../img/ui/buttons/gold-button-active_center.png), url(../img/ui/buttons/gold-button-active_right.png);
}
.gray-button {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/gray-button-left.png), url(../img/ui/buttons/gray-button-center.png), url(../img/ui/buttons/gray-button-right.png);
}
.gray-button:hover {
  background-image: url(../img/ui/buttons/gray-button-hover_left.png), url(../img/ui/buttons/gray-button-hover_center.png), url(../img/ui/buttons/gray-button-hover_right.png);
}
.gray-button:active {
  background-image: url(../img/ui/buttons/gray-button-active_left.png), url(../img/ui/buttons/gray-button-active_center.png), url(../img/ui/buttons/gray-button-active_right.png);
}
.base-button-sm {
  cursor: pointer;
  --button-size: 43px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-size);
  height: var(--button-size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.green-button-sm {
  cursor: pointer;
  --button-size: 43px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-size);
  height: var(--button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/ui/buttons/green-button.png);
}
.purple-button-sm {
  cursor: pointer;
  --button-size: 43px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-size);
  height: var(--button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/ui/buttons/purple-button-sm.png);
}
.purple-button-sm:hover {
  background-image: url(../img/ui/buttons/purple-button-sm-hover.png);
}
.purple-button-sm:active {
  background-image: url(../img/ui/buttons/purple-button-sm-active.png);
}
.eula-button {
  cursor: pointer;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/blue-button-left.png), url(../img/ui/buttons/blue-button-center.png), url(../img/ui/buttons/blue-button-right.png);
  width: 83px;
  margin: auto;
  --base-button_height: 43px;
  --default-button-segment-width: 20px !important;
}
.eula-button:hover {
  background-image: url(../img/ui/buttons/blue-button-hover_left.png), url(../img/ui/buttons/blue-button-hover_center.png), url(../img/ui/buttons/blue-button-hover_right.png);
}
.eula-button:active {
  background-image: url(../img/ui/buttons/blue-button-active_left.png), url(../img/ui/buttons/blue-button-active_center.png), url(../img/ui/buttons/blue-button-active_right.png);
}
.eula-button span {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  text-transform: uppercase;
}
.arrow-button {
  --arrow-button-width: 32px;
  --arrow-button-height: 54px;
  width: var(--arrow-button-width);
  height: var(--arrow-button-height);
  background-image: url(../img/ui/buttons/arrow-button.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.arrow-button:hover {
  background-image: url(../img/ui/buttons/arrow-button-hover.png);
}
.arrow-button:active {
  background-image: url(../img/ui/buttons/arrow-button-active.png);
}
.plus-button {
  --plus-button-size: 36px;
  width: var(--plus-button-size);
  height: var(--plus-button-size);
  background-image: url(../img/ui/buttons/plus-button.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.plus-button:hover {
  background-image: url(../img/ui/buttons/plus-button-hover.png);
}
.plus-button:active {
  background-image: url(../img/ui/buttons/plus-button-active.png);
}
.edit-button {
  --edit-button-width: 24px;
  --edit-button-height: 24px;
  width: var(--edit-button-width);
  height: var(--edit-button-height);
  background-image: url(../img/ui/icons/edit-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.edit-button:hover {
  background-image: url(../img/ui/icons/edit-icon-hover.png);
}
.edit-button:active {
  background-image: url(../img/ui/icons/edit-icon-active.png);
}
.bubble-button {
  --button-width: 40px;
  --button-height: 40px;
  width: var(--button-width);
  height: var(--button-height);
  background-repeat: no-repeat;
  background-size: contain;
}
.bubble-red-button {
  --button-width: 40px;
  --button-height: 40px;
  width: var(--button-width);
  height: var(--button-height);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/ui/buttons/bubble-red-button.png);
}
.bubble-red-button:hover {
  background-image: url(../img/ui/buttons/bubble-red-button-hover.png);
}
.bubble-red-button:active {
  background-image: url(../img/ui/buttons/bubble-red-button-active.png);
}
.bubble-green-button {
  --button-width: 40px;
  --button-height: 40px;
  width: var(--button-width);
  height: var(--button-height);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/ui/buttons/bubble-green-button.png);
}
.bubble-green-button:hover {
  background-image: url(../img/ui/buttons/bubble-green-button-hover.png);
}
.bubble-green-button:active {
  background-image: url(../img/ui/buttons/bubble-green-button-active.png);
}
.bubble-gray-button {
  --button-width: 40px;
  --button-height: 40px;
  width: var(--button-width);
  height: var(--button-height);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/ui/buttons/bubble-gray-button.png);
}
.bubble-gray-button:hover {
  background-image: url(../img/ui/buttons/bubble-gray-button-hover.png);
}
.bubble-gray-button:active {
  background-image: url(../img/ui/buttons/bubble-gray-button-active.png);
}
.button-info-icon {
  width: 27px;
  height: 27px;
  background: url('../img/ui/buttons/button-info-icon.png');
  background-size: contain;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.button-info-icon:hover {
  background: url('../img/ui/buttons/button-info-icon-hover.png');
}
.button-info-icon:active {
  background: url('../img/ui/buttons/button-info-icon-active.png');
}
.hotkey-box {
  --button-width: 196px;
  --button-height: 32px;
  width: var(--button-width);
  height: var(--button-height);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/ui/boxes/hotkey-large.png);
}
.button-h-md {
  --base-button_height: 60px;
}
.red-ribbon {
  background-image: url(../img/ui/red-ribbon_1.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.red-ribbon.corner {
  background-image: url(../img/ui/red-ribbon_2.png);
}
.drop-arrow {
  background-image: url(../img/ui/drop-arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 18px;
  height: 16px;
}
.screw {
  ---screw-size: 18px;
  background-image: url(../img/ui/screw.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(---screw-size);
  height: var(---screw-size);
}
.gems-icon {
  --icon-width: 36px;
  --icon-height: 36px;
  background-image: url(../img/ui/icons/gems-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-left: 1%;
  margin-top: 1%;
}
.gold-icon {
  --icon-width: 32px;
  --icon-height: 38px;
  background-image: url(../img/ui/icons/gold-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  display: inline-block;
  margin-left: 2.5%;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.xp-icon {
  --icon-width: 30px;
  --icon-height: 30px;
  background-image: url(../img/quests/exp-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  display: inline-block;
}
.keyboard-icon {
  --icon-size: 28px;
  background-image: url(../img/ui/icons/keyboard-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
.fullscreen-icon {
  --icon-size: 28px;
  background-image: url(../img/ui/icons/fullscreen-icon-on.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
.fullscreen-icon.off {
  background-image: url(../img/ui/icons/fullscreen-icon-off.png);
}
.sound-icon {
  --icon-size: 28px;
  background-image: url(../img/ui/icons/sound-icon-on.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
.sound-icon.off {
  background-image: url(../img/ui/icons/sound-icon-off.png);
}
.video-icon {
  --icon-width: 30px;
  --icon-height: 28px;
  background-image: url(../img/ui/icons/video-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
}
.perk-icon {
  display: inline-block;
  --icon-width: 18px;
  --icon-height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  width: var(--icon-width);
  height: var(--icon-height);
}
.boon_extrapouch-icon {
  display: inline-block;
  --icon-width: 18px;
  --icon-height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../img/ui/icons/boon-extrapouch-icon.png);
}
.boon_elvishmetal-icon {
  display: inline-block;
  --icon-width: 18px;
  --icon-height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../img/ui/icons/boon-elvishmetal-icon.png);
}
.boon_agoodstart-icon {
  display: inline-block;
  --icon-width: 18px;
  --icon-height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../img/ui/icons/boon-agoodstart-icon.png);
}
.boon_healerskit-icon {
  display: inline-block;
  --icon-width: 18px;
  --icon-height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../img/ui/icons/boon-healerskit-icon.png);
}
.perk-locked-icon {
  min-width: 18px;
  min-height: 18px;
  width: 18px;
  height: 18px;
  display: inline-block;
  background-image: url(../img/ui/icons/perk-locked-icon.png);
}
.perk-unlocked-icon {
  width: 18px;
  height: 16px;
  min-width: 18px;
  min-height: 16px;
  display: inline-block;
  background-image: url(../img/ui/icons/perk-unlocked-icon.png);
}
.modifier-icon-lg {
  width: 60px !important;
  height: 68px !important;
}
.modifier-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
}
.arcane-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-arcane.png);
}
.arcane-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-arcane@2x.png);
}
.steadfast-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-hardened.png);
}
.steadfast-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-hardened@2x.png);
}
.impervious-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-impervious.png);
}
.impervious-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-impervious@2x.png);
}
.cooling-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-cooling.png);
}
.cooling-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-cooling@2x.png);
}
.grounding-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-grounding.png);
}
.grounding-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-grounding@2x.png);
}
.warmth-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-warmth.png);
}
.warmth-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-warmth@2x.png);
}
.suture-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-suture.png);
}
.suture-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-suture@2x.png);
}
.cleansing-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-cleansing.png);
}
.cleansing-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-cleansing@2x.png);
}
.vision-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-vision.png);
}
.vision-icon-md {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  margin-top: 2px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  display: inline-block;
  --icon-width: 30px;
  --icon-height: 34px;
  background-image: url(../img/ui/icons/modifiers/icon-modifier-vision@2x.png);
}
.modifier-box {
  text-transform: uppercase;
  font-size: 12px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  padding: 2px 7px;
  line-height: 21px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  --frame-box-size: 4px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--frame-box-size) - 1px) 0px, right top, 0px calc(var(--frame-box-size) - 1px), calc(var(--frame-box-size) - 1px) calc(var(--frame-box-size) - 1px), right calc(var(--frame-box-size) - 1px), left bottom, calc(var(--frame-box-size) - 1px) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), calc(100% - calc(var(--frame-box-size) * 2) + 2px) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: auto;
  height: unset;
  background-origin: border-box;
}
.modifier-box.arcane {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_9.png);
}
.modifier-box.steadfast {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_9.png);
}
.modifier-box.impervious {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_9.png);
}
.modifier-box.cooling {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_9.png);
}
.modifier-box.grounding {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_9.png);
}
.modifier-box.warmth {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_9.png);
}
.modifier-box.suture {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Suture_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_9.png);
}
.modifier-box.cleansing {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_9.png);
}
.modifier-box.vision {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Vision_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_9.png);
}
.news-button {
  --news-button-width: 36px;
  --news-button-height: 34px;
  background-image: url(../img/ui/buttons/news_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--news-button-width);
  height: var(--news-button-height);
}
.news-button:hover {
  background-image: url(../img/ui/buttons/news_icon_hover.png);
}
.news-button:active {
  background-image: url(../img/ui/buttons/news_icon_down.png);
}
.settings-button {
  --settings-button-width: 36px;
  --settings-button-height: 38px;
  background-image: url(../img/ui/buttons/settings-button.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--settings-button-width);
  height: var(--settings-button-height);
}
.settings-button:hover {
  background-image: url(../img/ui/buttons/settings-button-hover.png);
}
.settings-button:active {
  background-image: url(../img/ui/buttons/settings-button-active.png);
}
.social-button {
  --social-button-width: 36px;
  --social-button-height: 38px;
  background-image: url(../img/ui/buttons/social-button.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--social-button-width);
  height: var(--social-button-height);
}
.social-button:hover {
  background-image: url(../img/ui/buttons/social-button-hover.png);
}
.social-button:active {
  background-image: url(../img/ui/buttons/social-button-active.png);
}
.close-button {
  --button-width: 54px;
  --button-height: 54px;
  background-image: url(../img/ui/buttons/close-button.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-width);
  height: var(--button-height);
}
.close-button:hover {
  background-image: url(../img/ui/buttons/close-button-hover.png);
}
.close-button:active {
  background-image: url(../img/ui/buttons/close-button-active.png);
}
.close-button-xs {
  --button-width: 25px;
  --button-height: 26px;
  background-image: url(../img/ui/buttons/close-button.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-width);
  height: var(--button-height);
}
.close-button-xs:hover {
  background-image: url(../img/ui/buttons/close-button-hover.png);
}
.close-button-xs:active {
  background-image: url(../img/ui/buttons/close-button-active.png);
}
.white-check-icon {
  --icon-size: 24px;
  background-image: url(../img/ui/icons/white-check-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
.white-close-icon {
  --icon-size: 18px;
  background-image: url(../img/ui/icons/white-close-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
.loading-icon,
.ui-spinner {
  --icon-size: 38px;
  background-image: url(../img/ui/icons/loading-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  margin-right: 83px;
  -webkit-animation: loadingIcon 1s steps(8) infinite;
          animation: loadingIcon 1s steps(8) infinite;
}
@-webkit-keyframes loadingIcon {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loadingIcon {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.social-btn {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
.facebook-social-btn {
  background-image: url(../img/ui/icons/facebook-icon.png);
}
.twitter-social-btn {
  background-image: url(../img/ui/icons/twitter-icon.png);
}
.instagram-social-btn {
  background-image: url(../img/ui/icons/instagram-icon.png);
}
.discord-social-btn {
  background-image: url(../img/ui/icons/discord-icon.png);
}
.youtube-social-btn {
  background-image: url(../img/ui/icons/youtube-icon.png);
}
.base-social-icon {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
.facebook-social-icon {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url(../img/ui/icons/facebook-icon.png);
}
.button-social-disabled {
  pointer-events: none;
}
.button-facebook {
  --button-width: 230px;
  --button-height: 48px;
  width: var(--button-width);
  height: var(--button-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/buttons/facebook-button.png);
}
.button-facebook.button-social-disabled {
  background-image: url(../img/ui/buttons/facebook-button-disabled.png);
}
.button-facebook:hover {
  background-image: url(../img/ui/buttons/facebook-button-hover.png);
}
.button-facebook:active {
  background-image: url(../img/ui/buttons/facebook-button-active.png);
}
.google-social-icon {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url(../img/ui/icons/google-icon.png);
}
.button-google {
  --button-width: 230px;
  --button-height: 48px;
  width: var(--button-width);
  height: var(--button-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/buttons/google-button.png);
}
.button-google.button-social-disabled {
  background-image: url(../img/ui/buttons/google-button-disabled.png);
}
.button-google:hover {
  background-image: url(../img/ui/buttons/google-button-hover.png);
}
.button-google:active {
  background-image: url(../img/ui/buttons/google-button-active.png);
}
.twitch-social-icon {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url(../img/ui/icons/twitch-icon.png);
}
.button-twitch {
  --button-width: 230px;
  --button-height: 48px;
  width: var(--button-width);
  height: var(--button-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/buttons/twitch-button.png);
}
.button-twitch.button-social-disabled {
  background-image: url(../img/ui/buttons/twitch-button-disabled.png);
}
.button-twitch:hover {
  background-image: url(../img/ui/buttons/twitch-button-hover.png);
}
.button-twitch:active {
  background-image: url(../img/ui/buttons/twitch-button-active.png);
}
.discord-social-icon {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url(../img/ui/icons/discord-icon.png);
}
.button-discord {
  --button-width: 230px;
  --button-height: 48px;
  width: var(--button-width);
  height: var(--button-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/buttons/discord-button.png);
}
.button-discord.button-social-disabled {
  background-image: url(../img/ui/buttons/discord-button-disabled.png);
}
.button-discord:hover {
  background-image: url(../img/ui/buttons/discord-button-hover.png);
}
.button-discord:active {
  background-image: url(../img/ui/buttons/discord-button-active.png);
}
.apple-social-icon {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url(../img/ui/icons/apple-icon.png);
}
.button-apple {
  --button-width: 230px;
  --button-height: 48px;
  width: var(--button-width);
  height: var(--button-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/buttons/apple-button.png);
}
.button-apple.button-social-disabled {
  background-image: url(../img/ui/buttons/apple-button-disabled.png);
}
.button-apple:hover {
  background-image: url(../img/ui/buttons/apple-button-hover.png);
}
.button-apple:active {
  background-image: url(../img/ui/buttons/apple-button-active.png);
}
.kongregate-social-icon {
  --icon-size: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url(../img/ui/icons/kongregate-icon.png);
}
.button-kongregate {
  --button-width: 230px;
  --button-height: 48px;
  width: var(--button-width);
  height: var(--button-height);
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/buttons/kongregate-button.png);
}
.button-kongregate.button-social-disabled {
  background-image: url(../img/ui/buttons/kongregate-button-disabled.png);
}
.button-kongregate:hover {
  background-image: url(../img/ui/buttons/kongregate-button-hover.png);
}
.button-kongregate:active {
  background-image: url(../img/ui/buttons/kongregate-button-active.png);
}
.topper-base {
  --base-topper_height: 75px;
  background-image: url(../img/ui/raid-topper-left.png), url(../img/ui/raid-topper-center.png), url(../img/ui/raid-topper-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--base-topper_height) - 1px) 0px, right 0px;
  background-size: var(--base-topper_height) var(--base-topper_height), calc(100% - calc(var(--base-topper_height) * 2) + 2px) var(--base-topper_height), var(--base-topper_height) var(--base-topper_height);
  min-width: calc(var(--base-topper_height) * 2 + 1px);
  height: var(--base-topper_height);
  background-origin: border-box;
}
.white-box-frame {
  --base-box_height: 70px;
  background-image: url(../img/ui/white-box-left.png), url(../img/ui/white-box-center.png), url(../img/ui/white-box-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--base-box_height) - 1px) 0px, right 0px;
  background-size: var(--base-box_height) var(--base-box_height), calc(100% - calc(var(--base-box_height) * 2) + 2px) var(--base-box_height), var(--base-box_height) var(--base-box_height);
  min-width: calc(var(--base-box_height) * 2 + 1px);
  height: var(--base-box_height);
  background-origin: border-box;
}
.topper-dark {
  background-image: url(../img/ui/frames/modal-header-left.png), url(../img/ui/frames/modal-header-center.png), url(../img/ui/frames/modal-header-right.png);
}
.speech-bubble {
  --speech-bubble_width: 330px;
  --speech-bubble_height: 137px;
  background-image: url(../img/ui/speech-bubble-2.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--speech-bubble_width);
  height: var(--speech-bubble_height);
  padding: 0px 20px;
}
.text-input-box {
  --fill-text-box_height: 30px;
  --fill-text-box-width: 100%;
  background-image: url(../img/ui/text-input-left.png), url(../img/ui/text-input-center.png), url(../img/ui/text-input-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--fill-text-box_height) 0px, right 0px;
  background-size: var(--fill-text-box_height) var(--fill-text-box_height), calc(100% - calc(var(--fill-text-box_height) * 2)) var(--fill-text-box_height), var(--fill-text-box_height) var(--fill-text-box_height);
  min-width: calc(var(--fill-text-box_height) * 2 + 1px);
  width: var(--fill-text-box-width);
  height: var(--fill-text-box_height);
  background-origin: border-box;
  background-color: unset;
}
.text-fill {
  --text-fill-width: 72px;
  --text-fill-height: 24px;
  background-image: url(../img/ui/boxes/text-fill-left.png), url(../img/ui/boxes/text-fill-center.png), url(../img/ui/boxes/text-fill-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--text-fill-height) 0px, right 0px;
  background-size: var(--text-fill-height) var(--text-fill-height), calc(100% - calc(var(--text-fill-height) * 2)) var(--text-fill-height), var(--text-fill-height) var(--text-fill-height);
  min-width: calc(var(--text-fill-height) * 3 + 1px);
  width: var(--text-fill-width);
  height: var(--text-fill-height);
  background-origin: border-box;
  background-color: unset;
}
.text-fill-light {
  --text-fill-width: 72px;
  --text-fill-height: 28px;
  background-image: url(../img/ui/boxes/text-fill-light-left.png), url(../img/ui/boxes/text-fill-light-center.png), url(../img/ui/boxes/text-fill-light-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--text-fill-height) 0px, right 0px;
  background-size: var(--text-fill-height) var(--text-fill-height), calc(100% - calc(var(--text-fill-height) * 2)) var(--text-fill-height), var(--text-fill-height) var(--text-fill-height);
  min-width: calc(var(--text-fill-height) * 3 + 1px);
  width: var(--text-fill-width);
  height: var(--text-fill-height);
  background-origin: border-box;
  background-color: unset;
}
.fill-space {
  --width: 28px;
  --height: 28px;
  --fill-height: 9px;
  --min-height: calc(var(--fill-height) * 3);
  background-image: url(../img/ui/boxes/fill-space-left.png), url(../img/ui/boxes/fill-space-center.png), url(../img/ui/boxes/fill-space-right.png);
  background-repeat: no-repeat;
  height: var(--min-height);
  width: var(--width);
  height: var(--height);
  padding: 3px 0px;
  background-position: 0px 0px, calc(var(--fill-height) - 1px) 0px, right 0px;
  background-size: var(--min-height) var(--min-height), calc(100% - calc(var(--fill-height) * 2) + 2px) var(--min-height), var(--min-height) var(--min-height);
}
.border-bar {
  --border-height: 12px;
  --border-width: 248px;
  background-image: url(../img/ui/frames/border-bar-left.png), url(../img/ui/frames/border-bar-center.png), url(../img/ui/frames/border-bar-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
}
.white-progress-box-bar {
  --box-height: 32px;
  --box-width: 169px;
  --box-segment-width: 32px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url(../img/ui/boxes/white-progress-box-left.png), url(../img/ui/boxes/white-progress-box-center.png), url(../img/ui/boxes/white-progress-box-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--box-segment-width) - 1px) 0px, right 0px;
  background-size: var(--box-segment-width) var(--box-height), calc((100% - (var(--box-segment-width) * 2)) + 2px) var(--box-height), var(--box-segment-width) var(--box-height);
  min-width: calc(var(--box-segment-width) * 2 + 1px);
  width: var(--box-width);
  height: var(--box-height);
  background-origin: border-box;
  background-color: unset;
  border: 6px solid transparent;
}
.stats-bar {
  --bar-width: 94px;
  --bar-segment-size: 24px;
  background-image: url(../img/ui/frames/stat-bar-left.png), url(../img/ui/frames/stat-bar-center.png), url(../img/ui/frames/stat-bar-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--bar-segment-size) - 2px) 0px, right 0px;
  background-size: var(--bar-segment-size) var(--bar-segment-size), calc(100% - var(--bar-segment-size) * 2 + 4px) var(--bar-segment-size), var(--bar-segment-size) var(--bar-segment-size);
  min-width: calc(var(--bar-segment-size) * 2 + 1px);
  width: var(--bar-width);
  height: var(--bar-segment-size);
  background-origin: border-box;
  background-color: unset;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.hud-text-frame {
  --bar-width: 106px;
  --bar-segment-width: 28px;
  --bar-segment-height: 34px;
  background-image: url(../img/ui/frames/hud-text-frame-left.png), url(../img/ui/frames/hud-text-frame-center.png), url(../img/ui/frames/hud-text-frame-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--bar-segment-width)) 0px, right 0px;
  background-size: var(--bar-segment-width) var(--bar-segment-height), calc(100% - var(--bar-segment-width) * 2) var(--bar-segment-height), var(--bar-segment-width) var(--bar-segment-height);
  width: var(--bar-width);
  height: var(--bar-segment-height);
  background-origin: border-box;
  background-color: unset;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.currency-box {
  --fill-text-box_height: 36px;
  --fill-text-box-width: 150px;
  background-image: url(../img/ui/currency-box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-width: var(--fill-text-box-width);
  height: var(--fill-text-box_height);
  background-origin: border-box;
  background-color: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 4px;
  padding-right: 8px;
  height: 64px;
}
.frame-box {
  --frame-box-width: 120px;
  --frame-box-height: 120px;
  --frame-box-size: 40px;
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding: 40px 22px;
}
.default-frame {
  --frame-box-width: 60px;
  --frame-box-height: 60px;
  --frame-box-size: 110px;
  background-image: url(../img/ui/frames/basic-frame-seg-01.png), url(../img/ui/frames/basic-frame-seg-02.png), url(../img/ui/frames/basic-frame-seg-03.png), url(../img/ui/frames/basic-frame-seg-04.png), url(../img/ui/frames/basic-frame-seg-05.png), url(../img/ui/frames/basic-frame-seg-06.png), url(../img/ui/frames/basic-frame-seg-07.png), url(../img/ui/frames/basic-frame-seg-08.png), url(../img/ui/frames/basic-frame-seg-09.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--frame-box-size) - 1px) 0px, right top, 0px calc(var(--frame-box-size) - 1px), calc(var(--frame-box-size) - 1px) calc(var(--frame-box-size) - 1px), right calc(var(--frame-box-size) - 1px), left bottom, calc(var(--frame-box-size) - 1px) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), calc(100% - calc(var(--frame-box-size) * 2) + 2px) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
.default-frame.rare {
  background-image: url(../img/ui/frames/rare-frame-seg-1.png), url(../img/ui/frames/rare-frame-seg-2.png), url(../img/ui/frames/rare-frame-seg-3.png), url(../img/ui/frames/rare-frame-seg-4.png), url(../img/ui/frames/rare-frame-seg-5.png), url(../img/ui/frames/rare-frame-seg-6.png), url(../img/ui/frames/rare-frame-seg-7.png), url(../img/ui/frames/rare-frame-seg-8.png), url(../img/ui/frames/rare-frame-seg-9.png);
}
.default-frame.epic {
  background-image: url(../img/ui/frames/epic-frame-seg-1.png), url(../img/ui/frames/epic-frame-seg-2.png), url(../img/ui/frames/epic-frame-seg-3.png), url(../img/ui/frames/epic-frame-seg-4.png), url(../img/ui/frames/epic-frame-seg-5.png), url(../img/ui/frames/epic-frame-seg-6.png), url(../img/ui/frames/epic-frame-seg-7.png), url(../img/ui/frames/epic-frame-seg-8.png), url(../img/ui/frames/epic-frame-seg-9.png);
}
.default-frame.legendary {
  background-image: url(../img/ui/frames/legendary-frame-seg-1.png), url(../img/ui/frames/legendary-frame-seg-2.png), url(../img/ui/frames/legendary-frame-seg-3.png), url(../img/ui/frames/legendary-frame-seg-4.png), url(../img/ui/frames/legendary-frame-seg-5.png), url(../img/ui/frames/legendary-frame-seg-6.png), url(../img/ui/frames/legendary-frame-seg-7.png), url(../img/ui/frames/legendary-frame-seg-8.png), url(../img/ui/frames/legendary-frame-seg-9.png);
}
.modal-alert-frame {
  --frame-box-width: 60px;
  --frame-box-height: 60px;
  --frame-box-size: 20px;
  background-image: url(../img/ui/frames/alert-box-1.png), url(../img/ui/frames/alert-box-2.png), url(../img/ui/frames/alert-box-3.png), url(../img/ui/frames/alert-box-4.png), url(../img/ui/frames/alert-box-5.png), url(../img/ui/frames/alert-box-6.png), url(../img/ui/frames/alert-box-7.png), url(../img/ui/frames/alert-box-8.png), url(../img/ui/frames/alert-box-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, var(--frame-box-size) 0px, right top, 0px var(--frame-box-size), var(--frame-box-size) var(--frame-box-size), right var(--frame-box-size), left bottom, var(--frame-box-size) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), calc(100% - calc(var(--frame-box-size) * 2)) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
.box-fill {
  --box-fill-width: 60px;
  --box-fill-height: 60px;
  --box-fill-size: 40px;
  --box-fill-bg-offset: 2px;
  background-image: url(../img/ui/frames/box-fill-1.png), url(../img/ui/frames/box-fill-2.png), url(../img/ui/frames/box-fill-3.png), url(../img/ui/frames/box-fill-4.png), url(../img/ui/frames/box-fill-5.png), url(../img/ui/frames/box-fill-6.png), url(../img/ui/frames/box-fill-7.png), url(../img/ui/frames/box-fill-8.png), url(../img/ui/frames/box-fill-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--box-fill-size) - 1px) 0px, right top, 0px calc(var(--box-fill-size) - 1px), calc(var(--box-fill-size) - 1px) calc(var(--box-fill-size) - 1px), right calc(var(--box-fill-size) - 1px), left bottom, calc(var(--box-fill-size) - 1px) bottom, right bottom;
  background-size: var(--box-fill-size), calc(100% - calc(var(--box-fill-size) * 2) + 2px) var(--box-fill-size), var(--box-fill-size), var(--box-fill-size) calc(100% - calc(var(--box-fill-size) * 2) + 2px), calc(100% - calc(var(--box-fill-size) * 2) + 2px) calc(100% - calc(var(--box-fill-size) * 2) + 2px), var(--box-fill-size) calc(100% - calc(var(--box-fill-size) * 2) + 2px), var(--box-fill-size), calc(100% - calc(var(--box-fill-size) * 2) + 2px) var(--box-fill-size), var(--box-fill-size);
  min-width: var(--box-fill-width);
  min-height: var(--box-fill-size);
  width: var(--box-fill-width);
  height: var(--box-fill-height);
  background-origin: border-box;
  background-color: unset;
}
.box-fill-with-border {
  --box-fill-width: 60px;
  --box-fill-height: 60px;
  --box-fill-size: 40px;
  --box-fill-bg-offset: 2px;
  background-image: url(../img/ui/frames/box-fill-1.png), url(../img/ui/frames/box-fill-2.png), url(../img/ui/frames/box-fill-3.png), url(../img/ui/frames/box-fill-4.png), url(../img/ui/frames/box-fill-5.png), url(../img/ui/frames/box-fill-6.png), url(../img/ui/frames/box-fill-7.png), url(../img/ui/frames/box-fill-8.png), url(../img/ui/frames/box-fill-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--box-fill-size) - 1px) 0px, right top, 0px calc(var(--box-fill-size) - 1px), calc(var(--box-fill-size) - 1px) calc(var(--box-fill-size) - 1px), right calc(var(--box-fill-size) - 1px), left bottom, calc(var(--box-fill-size) - 1px) bottom, right bottom;
  background-size: var(--box-fill-size), calc(100% - calc(var(--box-fill-size) * 2) + 2px) var(--box-fill-size), var(--box-fill-size), var(--box-fill-size) calc(100% - calc(var(--box-fill-size) * 2) + 2px), calc(100% - calc(var(--box-fill-size) * 2) + 2px) calc(100% - calc(var(--box-fill-size) * 2) + 2px), var(--box-fill-size) calc(100% - calc(var(--box-fill-size) * 2) + 2px), var(--box-fill-size), calc(100% - calc(var(--box-fill-size) * 2) + 2px) var(--box-fill-size), var(--box-fill-size);
  min-width: var(--box-fill-width);
  min-height: var(--box-fill-size);
  width: var(--box-fill-width);
  height: var(--box-fill-height);
  background-origin: border-box;
  background-color: unset;
  background-image: url(../img/ui/frames/box-fill-border-1.png), url(../img/ui/frames/box-fill-border-2.png), url(../img/ui/frames/box-fill-border-3.png), url(../img/ui/frames/box-fill-border-4.png), url(../img/ui/frames/box-fill-border-5.png), url(../img/ui/frames/box-fill-border-6.png), url(../img/ui/frames/box-fill-border-7.png), url(../img/ui/frames/box-fill-border-8.png), url(../img/ui/frames/box-fill-border-9.png);
}
.box-fill-text {
  ----box-fill-width: 106px;
  --box-fill-size: 28px;
  --box-fill-height: 34px;
  background-image: url(../img/ui/frames/box-fill-text-1.png), url(../img/ui/frames/box-fill-text-2.png), url(../img/ui/frames/box-fill-text-3.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--box-fill-size)) 0px, right 0px;
  background-size: var(--box-fill-size) var(--box-fill-height), calc(100% - var(--box-fill-size) * 2) var(--box-fill-height), var(--box-fill-size) var(--box-fill-height);
  width: var(--box-fill-width);
  height: var(--box-fill-height);
  background-origin: border-box;
  background-color: unset;
}
.speech-bubble-message {
  --frame-box-width: 254px;
  --frame-box-height: fit-content;
  --frame-box-size: 12px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, var(--frame-box-size) 0px, right top, left bottom, var(--frame-box-size) bottom, right bottom;
  background-size: var(--frame-box-size) calc(100% - var(--frame-box-size)), calc(100% - calc(var(--frame-box-size) * 2)) calc(100% - var(--frame-box-size)), var(--frame-box-size) calc(100% - var(--frame-box-size)), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 2);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding: 4px var(--frame-box-size);
}
.speech-bubble-message.red {
  background-image: url(../img/ui/frames/speech-frame-seg-1.png), url(../img/ui/frames/speech-frame-seg-2.png), url(../img/ui/frames/speech-frame-seg-3.png), url(../img/ui/frames/speech-frame-seg-4.png), url(../img/ui/frames/speech-frame-seg-5.png), url(../img/ui/frames/speech-frame-seg-6.png);
}
.speech-bubble-message.green {
  background-image: url(../img/ui/frames/speech-frame-2-seg-1.png), url(../img/ui/frames/speech-frame-2-seg-2.png), url(../img/ui/frames/speech-frame-2-seg-3.png), url(../img/ui/frames/speech-frame-2-seg-4.png), url(../img/ui/frames/speech-frame-2-seg-5.png), url(../img/ui/frames/speech-frame-2-seg-6.png);
}
.yellow-box {
  --box-size: 46px;
  background-image: url(../img/ui/boxes/yellow-box.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--box-size);
  height: var(--box-size);
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  border: 5px solid transparent;
}
.white-box-xl {
  --box-width: 290px;
  --box-height: 80px;
  background-image: url(../img/ui/boxes/white-box-xl.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  background-position: center;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: var(--box-width);
  height: var(--box-height);
  padding: 2px;
  border: 2px solid transparent;
}
.stone-box {
  --box-width: 345px;
  --box-height: 150px;
  background-image: url(../img/ui/boxes/stone-box.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.login-box,
.blue-frame-box {
  --box-login-width: 60x;
  --box-login-height: 60px;
  --box-login-size: 40px;
  background-image: url(../img/ui/frames/box-login-1.png), url(../img/ui/frames/box-login-2.png), url(../img/ui/frames/box-login-3.png), url(../img/ui/frames/box-login-4.png), url(../img/ui/frames/box-login-5.png), url(../img/ui/frames/box-login-6.png), url(../img/ui/frames/box-login-7.png), url(../img/ui/frames/box-login-8.png), url(../img/ui/frames/box-login-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, var(--box-login-size) 0px, right top, 0px var(--box-login-size), var(--box-login-size) var(--box-login-size), right var(--box-login-size), left bottom, var(--box-login-size) bottom, right bottom;
  background-size: var(--box-login-size), calc(100% - calc(var(--box-login-size) * 2)) var(--box-login-size), var(--box-login-size), var(--box-login-size) calc(100% - calc(var(--box-login-size) * 2)), calc(100% - calc(var(--box-login-size) * 2)) calc(100% - calc(var(--box-login-size) * 2)), var(--box-login-size) calc(100% - calc(var(--box-login-size) * 2)), var(--box-login-size), calc(100% - calc(var(--box-login-size) * 2)) var(--box-login-size), var(--box-login-size);
  min-width: var(--box-login-width);
  min-height: var(--box-login-size);
  width: var(--box-login-width);
  height: var(--box-login-height);
  background-origin: border-box;
  background-color: unset;
}
.login-box-premium {
  --box-login-width: 60x;
  --box-login-height: 60px;
  --box-login-size: 40px;
  background-image: url(../img/ui/frames/box-login-1.png), url(../img/ui/frames/box-login-2.png), url(../img/ui/frames/box-login-3.png), url(../img/ui/frames/box-login-4.png), url(../img/ui/frames/box-login-5.png), url(../img/ui/frames/box-login-6.png), url(../img/ui/frames/box-login-7.png), url(../img/ui/frames/box-login-8.png), url(../img/ui/frames/box-login-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, var(--box-login-size) 0px, right top, 0px var(--box-login-size), var(--box-login-size) var(--box-login-size), right var(--box-login-size), left bottom, var(--box-login-size) bottom, right bottom;
  background-size: var(--box-login-size), calc(100% - calc(var(--box-login-size) * 2)) var(--box-login-size), var(--box-login-size), var(--box-login-size) calc(100% - calc(var(--box-login-size) * 2)), calc(100% - calc(var(--box-login-size) * 2)) calc(100% - calc(var(--box-login-size) * 2)), var(--box-login-size) calc(100% - calc(var(--box-login-size) * 2)), var(--box-login-size), calc(100% - calc(var(--box-login-size) * 2)) var(--box-login-size), var(--box-login-size);
  min-width: var(--box-login-width);
  min-height: var(--box-login-size);
  width: var(--box-login-width);
  height: var(--box-login-height);
  background-origin: border-box;
  background-color: unset;
  background-image: url(../img/ui/frames/box-login-premium-1.png), url(../img/ui/frames/box-login-premium-2.png), url(../img/ui/frames/box-login-premium-3.png), url(../img/ui/frames/box-login-premium-4.png), url(../img/ui/frames/box-login-premium-5.png), url(../img/ui/frames/box-login-premium-6.png), url(../img/ui/frames/box-login-premium-7.png), url(../img/ui/frames/box-login-premium-8.png), url(../img/ui/frames/box-login-premium-9.png);
}
.table-grid-box {
  --box-width: 142px;
  --box-height: 32px;
  --segment-size: 20px;
  background-image: url(../img/ui/boxes/table-grid-1.png), url(../img/ui/boxes/table-grid-2.png), url(../img/ui/boxes/table-grid-3.png), url(../img/ui/boxes/table-grid-4.png), url(../img/ui/boxes/table-grid-5.png), url(../img/ui/boxes/table-grid-6.png), url(../img/ui/boxes/table-grid-7.png), url(../img/ui/boxes/table-grid-8.png), url(../img/ui/boxes/table-grid-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ left var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ left calc(100% + 2px), /*8*/ calc(var(--segment-size) - 2px) calc(100% + 2px), /*9*/ right calc(100% + 2px);
  background-size: var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ var(--segment-size) calc(var(--segment-size) + 4px), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(var(--segment-size) + 4px), /*9*/ var(--segment-size) calc(var(--segment-size) + 4px);
  min-height: var(--segment-size);
  min-width: calc(var(--segment-size) * 3);
  width: var(--box-width);
  height: var(--box-height);
  background-color: unset;
  background-origin: border-box;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.right-cell {
  background-position: -2px top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ -2px var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ -2px calc(100% + 2px), /*8*/ calc(var(--segment-size) - 2px) calc(100% + 2px), /*9*/ right calc(100% + 2px);
  background-size: calc(var(--segment-size) + 4px) var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ calc(var(--segment-size) + 4px) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ calc(var(--segment-size) + 4px), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(var(--segment-size) + 4px), /*9*/ var(--segment-size) calc(var(--segment-size) + 4px);
}
.bottom-cell {
  background-position: left top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ left var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ left bottom, /*8*/ calc(var(--segment-size) - 2px) bottom, /*9*/ right bottom;
  background-size: var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ var(--segment-size), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*9*/ var(--segment-size);
}
.bottom-right-cell {
  background-position: -2px top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ -2px var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ -2px bottom, /*8*/ calc(var(--segment-size) - 2px) bottom, /*9*/ right bottom;
  background-size: calc(var(--segment-size) + 4px) var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ calc(var(--segment-size) + 4px) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ calc(var(--segment-size) + 4px) var(--segment-size), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*9*/ var(--segment-size);
}
.h1 {
  font-size: 120px;
  line-height: 107px;
}
.h3 {
  font-size: 40px;
  line-height: 45px;
}
.h4 {
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0em;
}
.h5 {
  font-size: 30px;
  line-height: 40px;
}
.h6 {
  font-size: 20px;
}
.h7 {
  font-size: 15px;
  line-height: 20px;
}
.h8 {
  font-size: 20px;
  line-height: 14px;
}
.h9 {
  font-size: 15px;
}
.h11 {
  font-size: 30px;
  line-height: 48px;
}
.h12 {
  font-size: 24px;
}
.h13 {
  font-size: 18px;
  line-height: 30px;
}
.h14 {
  font-size: 15px;
  line-height: 24px;
}
.h15 {
  font-size: 12px;
}
.h18 {
  font-size: 12px;
  line-height: 10px;
}
.h19 {
  font-size: 50px;
  line-height: 45px;
}
.h20 {
  font-size: 68px;
  line-height: 61px;
}
.font-10px {
  font-size: 10px;
}
.text-white {
  color: #fff;
}
.text-red {
  color: #FF0000 !important;
}
.text-gold {
  color: #FFECAD;
}
.text-gold {
  color: #9CCCEC;
}
.text-yellow {
  color: #FDFE00;
}
.text-yellow-2 {
  color: #F4F605 !important;
}
.text-yellow-3 {
  color: #F6F036 ;
}
.text-green {
  color: #7DFF00;
}
.text-legend {
  color: #FFFF00;
}
.text-green-2 {
  color: #42FC54;
}
.text-blue {
  color: #00BFFF !important;
}
.font-amiga {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
}
.font-edit {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
}
.uppercase {
  text-transform: uppercase;
}
.relative {
  position: relative;
}
.flip-x {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.text-outline-black {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
.text-outline-1 {
  --outline-width: 1px;
}
.red-ribbon span,
.red-ribbon div {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  display: block;
  -webkit-transform-origin: center;
          transform-origin: center;
  margin-left: 14px;
  margin-top: 8px;
}
#btn-play-game,
#btn-create-team {
  width: 100%;
}
#btn-play-game {
  --base-button_height: 90px;
}
#btn-play-game:after {
  content: "";
  background-image: url("../img/ui/icons/icon-gear01.png");
  top: 0;
  margin-left: -114px;
  left: -90px;
  position: relative;
  width: 58px;
  height: 56px;
  background-repeat: no-repeat;
  background-size: contain;
}
#btn-create-team + .red-ribbon {
  position: absolute;
  height: 52px;
  width: 92px;
  top: -5px;
  left: 0;
}
#btn-change-type {
  width: 100%;
  text-align: center;
}
#btn-change-type #index-play-type-selected {
  margin-left: 18px;
}
#btn-change-mode {
  width: 100%;
  text-align: center;
}
#btn-change-mode #index-play-mode-selected {
  margin-left: 18px;
}
#battletag-edit-input {
  --fill-text-box_height: 48px;
}
#streamers-box {
  position: absolute;
  --frame-box-width: 282px;
  --frame-box-height: 380px;
  right: 40px;
  top: 253px;
}
@media (max-width: 1800px) {
  #streamers-box {
    -webkit-transform: translateX(-20%) translateY(0%) scale(1);
            transform: translateX(-20%) translateY(0%) scale(1);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #streamers-box {
    -webkit-transform: translateX(-20%) translateY(0%) scale(0.9);
            transform: translateX(-20%) translateY(0%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #streamers-box {
    -webkit-transform: translateX(-20%) translateY(-20%) scale(0.8);
            transform: translateX(-20%) translateY(-20%) scale(0.8);
  }
}
@media (max-width: 1550px) {
  #streamers-box {
    -webkit-transform: translateX(10%) translateY(-30%) scale(0.8);
            transform: translateX(10%) translateY(-30%) scale(0.8);
  }
}
@media (max-width: 1440px) and (min-width: 1400px) {
  #streamers-box {
    top: 300px;
  }
}
@media (max-width: 1300px) {
  #streamers-box {
    -webkit-transform: translateX(30%) translateY(-35%) scale(0.6);
            transform: translateX(30%) translateY(-35%) scale(0.6);
  }
}
@media (max-width: 1280px) {
  #streamers-box {
    -webkit-transform: translateX(30%) translateY(-50%) scale(0.55);
            transform: translateX(30%) translateY(-50%) scale(0.55);
  }
}
@media (max-width: 1050px) {
  #streamers-box {
    -webkit-transform: translateX(30%) translateY(-60%) scale(0.5);
            transform: translateX(30%) translateY(-60%) scale(0.5);
  }
}
#streamers-box .box-fill {
  --box-fill-width: 100%;
}
#streamers-box_header {
  --box-fill-height: 50px;
}
#streamers-box_container {
  overflow-y: auto;
  --box-fill-height: 100%;
  max-height: 246px;
  padding: 20px 10px;
}
#streamers-box_container #streamers-box_list {
  width: 100%;
  padding-right: 40px;
  left: 18px;
  position: absolute;
}
#streamers-box_container .streamer_list_item {
  margin-bottom: 10px;
}
#town-square-box-panel {
  position: absolute;
  left: 46px;
  top: 253px;
}
@media (max-width: 1800px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-20%) translateY(0%) scale(1);
            transform: translateX(-20%) translateY(0%) scale(1);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-20%) translateY(0%) scale(0.9);
            transform: translateX(-20%) translateY(0%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-20%) translateY(-20%) scale(0.8);
            transform: translateX(-20%) translateY(-20%) scale(0.8);
  }
}
@media (max-width: 1550px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-5%) translateY(-60%) scale(0.8);
            transform: translateX(-5%) translateY(-60%) scale(0.8);
  }
}
@media (max-width: 1400px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-11%) translateY(-60%) scale(0.75);
            transform: translateX(-11%) translateY(-60%) scale(0.75);
  }
}
@media (max-width: 1440px) and (min-width: 1400px) {
  #town-square-box-panel {
    top: 300px;
  }
}
@media (max-width: 1300px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-17%) translateY(-70%) scale(0.65);
            transform: translateX(-17%) translateY(-70%) scale(0.65);
    top: 253px;
  }
}
@media (max-width: 1280px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-19%) translateY(-90%) scale(0.6);
            transform: translateX(-19%) translateY(-90%) scale(0.6);
  }
}
@media (max-width: 1050px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-23%) translateY(-90%) scale(0.55);
            transform: translateX(-23%) translateY(-90%) scale(0.55);
  }
}
#town-square-box-panel .red-ribbon {
  position: absolute;
  height: 146px;
  width: 145px;
  top: -6px;
  left: -6px;
}
#town-square-box-panel .red-ribbon span {
  margin-left: 0px;
  margin-top: 33px;
}
.speech-bubble-container {
  position: relative;
  width: 300px;
  height: 118px;
}
.speech-bubble-container .speech-bubble {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  -webkit-transform: translate(-50%, 10px) scaleX(-1);
          transform: translate(-50%, 10px) scaleX(-1);
}
.speech-bubble-container .buttons-container {
  position: absolute;
  z-index: 0;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, calc(100% - 4px));
          transform: translate(-50%, calc(100% - 4px));
}
.speech-bubble-container .buttons-container-wrapper {
  position: relative;
}
.speech-bubble-container .slide-animation {
  position: absolute;
  -webkit-transform: translate(calc(-50% + 6px), 0px);
          transform: translate(calc(-50% + 6px), 0px);
}
#home-username-bubble-container {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translate(calc(100% - 64px), 0px);
          transform: translate(calc(100% - 64px), 0px);
}
.h3-edit-white,
#modal-account-name-title {
  font-size: 40px;
  line-height: 45px;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  text-transform: uppercase;
}
.modal-content:not(.not-default) {
  --frame-box-width: 60px;
  --frame-box-height: 60px;
  --frame-box-size: 110px;
  background-image: url(../img/ui/frames/basic-frame-seg-01.png), url(../img/ui/frames/basic-frame-seg-02.png), url(../img/ui/frames/basic-frame-seg-03.png), url(../img/ui/frames/basic-frame-seg-04.png), url(../img/ui/frames/basic-frame-seg-05.png), url(../img/ui/frames/basic-frame-seg-06.png), url(../img/ui/frames/basic-frame-seg-07.png), url(../img/ui/frames/basic-frame-seg-08.png), url(../img/ui/frames/basic-frame-seg-09.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--frame-box-size) - 1px) 0px, right top, 0px calc(var(--frame-box-size) - 1px), calc(var(--frame-box-size) - 1px) calc(var(--frame-box-size) - 1px), right calc(var(--frame-box-size) - 1px), left bottom, calc(var(--frame-box-size) - 1px) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), calc(100% - calc(var(--frame-box-size) * 2) + 2px) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  width: 910px;
  --frame-box-height: 500px;
  padding-top: 36px;
}
.modal-content:not(.not-default).rare {
  background-image: url(../img/ui/frames/rare-frame-seg-1.png), url(../img/ui/frames/rare-frame-seg-2.png), url(../img/ui/frames/rare-frame-seg-3.png), url(../img/ui/frames/rare-frame-seg-4.png), url(../img/ui/frames/rare-frame-seg-5.png), url(../img/ui/frames/rare-frame-seg-6.png), url(../img/ui/frames/rare-frame-seg-7.png), url(../img/ui/frames/rare-frame-seg-8.png), url(../img/ui/frames/rare-frame-seg-9.png);
}
.modal-content:not(.not-default).epic {
  background-image: url(../img/ui/frames/epic-frame-seg-1.png), url(../img/ui/frames/epic-frame-seg-2.png), url(../img/ui/frames/epic-frame-seg-3.png), url(../img/ui/frames/epic-frame-seg-4.png), url(../img/ui/frames/epic-frame-seg-5.png), url(../img/ui/frames/epic-frame-seg-6.png), url(../img/ui/frames/epic-frame-seg-7.png), url(../img/ui/frames/epic-frame-seg-8.png), url(../img/ui/frames/epic-frame-seg-9.png);
}
.modal-content:not(.not-default).legendary {
  background-image: url(../img/ui/frames/legendary-frame-seg-1.png), url(../img/ui/frames/legendary-frame-seg-2.png), url(../img/ui/frames/legendary-frame-seg-3.png), url(../img/ui/frames/legendary-frame-seg-4.png), url(../img/ui/frames/legendary-frame-seg-5.png), url(../img/ui/frames/legendary-frame-seg-6.png), url(../img/ui/frames/legendary-frame-seg-7.png), url(../img/ui/frames/legendary-frame-seg-8.png), url(../img/ui/frames/legendary-frame-seg-9.png);
}
.modal-header {
  --base-topper_height: 75px;
  background-image: url(../img/ui/raid-topper-left.png), url(../img/ui/raid-topper-center.png), url(../img/ui/raid-topper-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--base-topper_height) - 1px) 0px, right 0px;
  background-size: var(--base-topper_height) var(--base-topper_height), calc(100% - calc(var(--base-topper_height) * 2) + 2px) var(--base-topper_height), var(--base-topper_height) var(--base-topper_height);
  min-width: calc(var(--base-topper_height) * 2 + 1px);
  height: var(--base-topper_height);
  background-origin: border-box;
  background-image: url(../img/ui/frames/modal-header-left.png), url(../img/ui/frames/modal-header-center.png), url(../img/ui/frames/modal-header-right.png);
  font-size: 40px;
  line-height: 45px;
  position: absolute;
  text-align: center;
  z-index: 1;
  top: 6px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 0px 50px;
}
.modal-header .modal-title {
  font-size: 40px;
  line-height: 45px;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  text-transform: uppercase;
}
.modal-close-btn {
  --button-width: 54px;
  --button-height: 54px;
  background-image: url(../img/ui/buttons/close-button.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-width);
  height: var(--button-height);
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 4px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.modal-close-btn:hover {
  background-image: url(../img/ui/buttons/close-button-hover.png);
}
.modal-close-btn:active {
  background-image: url(../img/ui/buttons/close-button-active.png);
}
#modal-settings {
  overflow: hidden;
  background: none;
  -webkit-animation: none;
          animation: none;
}
#modal-settings .modal-content {
  right: 40px;
  bottom: 40px;
  left: unset;
  top: unset;
  width: 473px;
  height: 891px;
  -webkit-transform: translateX(0px) translateY(0px);
          transform: translateX(0px) translateY(0px);
}
#modal-settings .modal-body {
  padding-bottom: 36px;
  padding-top: 36px;
}
#modal-settings #btn-help {
  width: 290px;
}
#modal-settings #settings-links {
  --text-fill-width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}
@media (max-width: 1800px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
}
@media (max-width: 1700px), (max-height: 900px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
}
@media (max-width: 1600px), (max-height: 850px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
}
@media (max-width: 1550px), (max-height: 750px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.64);
            transform: scale(0.64);
  }
}
@media (max-width: 1150px), (max-height: 650px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.55);
            transform: scale(0.55);
  }
}
@media (max-width: 1000px), (max-height: 550px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@media (max-width: 800px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
}
@media (max-height: 350px) {
  #modal-settings .modal-content {
    -webkit-transform: scale(0.35);
            transform: scale(0.35);
  }
}
.slider {
  --slider-width: 224px;
  --slider-progress: 1;
  --slider-thumb-size: 43px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: unset;
  background-image: url(../img/ui/boxes/white-box-md.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--slider-width);
  min-width: var(--slider-width);
  height: 32px;
  position: relative;
}
.slider::before {
  --slider-progress-left: 10px;
  content: '';
  background-image: url(../img/ui/boxes/volume-bar.png);
  background-repeat: no-repeat;
  width: calc(calc(var(--slider-progress) * 100%) - calc(var(--slider-progress) * var(--slider-thumb-size) - 3px) - var(--slider-progress-left));
  height: 16px;
  display: block;
  position: absolute;
  left: var(--slider-progress-left);
  top: 50%;
  -webkit-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  z-index: 1;
  -webkit-transform-origin: left;
          transform-origin: left;
}
.slider::-webkit-slider-thumb {
  z-index: 2;
  -webkit-appearance: none;
          appearance: none;
  cursor: -webkit-grab;
  cursor: grab;
  cursor: pointer;
  --button-size: 43px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-size);
  height: var(--button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/ui/buttons/green-button.png);
}
.checkbox-v2 {
  --size: 28px;
  background-image: url(../img/ui/boxes/checkbox-off.png);
  background-repeat: no-repeat;
  background-size: contain;
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.checkbox-v2:checked::after {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  background-image: url(../img/ui/boxes/checkbox-on-check.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--size);
  height: var(--size);
}
.modal .border-bar {
  display: block;
  margin: 0 auto;
}
.modal-settings-items-container {
  margin-bottom: 8.5px;
  margin-top: 30px;
  margin-left: 14px;
  margin-right: 14px;
}
#btn-contact-support,
#btn-delete-account {
  height: 43px;
  width: 100%;
  margin-bottom: 11px;
}
#btn-contact-support a,
#btn-delete-account a {
  width: 100%;
}
.ui-modal-keybind .modal-content {
  height: 500px;
  width: 636px;
}
.keybind-btn {
  --text-fill-width: 72px;
  --text-fill-height: 24px;
  background-image: url(../img/ui/boxes/text-fill-left.png), url(../img/ui/boxes/text-fill-center.png), url(../img/ui/boxes/text-fill-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--text-fill-height) 0px, right 0px;
  background-size: var(--text-fill-height) var(--text-fill-height), calc(100% - calc(var(--text-fill-height) * 2)) var(--text-fill-height), var(--text-fill-height) var(--text-fill-height);
  min-width: calc(var(--text-fill-height) * 3 + 1px);
  width: var(--text-fill-width);
  height: var(--text-fill-height);
  background-origin: border-box;
  background-color: unset;
  --text-fill-width: 282px;
  --text-fill-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.keybind-btn-text {
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
.keybind-hotkey-btn {
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-social-buttons .modal-content {
  display: flex;
  flex-direction: column;
  width: 84px;
  height: 312px;
  padding-top: 16px;
  padding-bottom: 16px;
  align-items: center;
  justify-content: space-between;
  right: 20px;
  bottom: 36px;
  left: unset;
  top: unset;
  -webkit-transform: unset;
          transform: unset;
  -webkit-animation-name: slideIn;
          animation-name: slideIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
}
.edit-base-button-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  text-transform: uppercase;
}
.h5-edit-white {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 30px;
  line-height: 40px;
  color: #fff;
  text-transform: uppercase;
}
.h4-edit-white {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0em;
  color: #fff;
  text-transform: uppercase;
}
.h7-edit-white {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  text-transform: uppercase;
}
.perk-text-container,
.gear-perk-line {
  display: inline-flex;
  align-items: flex-start;
}
.boon-icon {
  margin-right: 5px;
}
.item-perk-value .boon-icon {
  margin: 0;
}
.gear-text-container {
  text-align: left;
}
#recipe-reward-modal .reward-image-container {
  margin-right: 0px;
}
#recipe-reward-modal .reward-info-container {
  margin-left: 14px;
}
#recipe-reward-modal .reward-info-text {
  --outline-width: 1px;
}
#recipe-reward-modal .materlial-list {
  margin-top: 13px;
}
#recipe-reward-modal .material-icon-line-reward:not(:last-child) {
  margin-bottom: 10px;
}
#recipe-reward-modal .material-icon {
  margin-right: 11px;
}
#recipe-reward-modal .material-icon-name,
#recipe-reward-modal .material-icon-required-count {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 15px;
  line-height: 16px;
  text-align: left;
}
.gold-currency-box {
  --base-button_height: 46px;
  background-image: url(../img/ui/frames/gold-currency-box-left.png), url(../img/ui/frames/gold-currency-box-center.png), url(../img/ui/frames/gold-currency-box-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--base-button_height) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--base-button_height) * 2)) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 8px);
  height: var(--base-button_height);
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}
.gems-currency-box {
  --base-button_height: 46px;
  background-image: url(../img/quests/blue-box-1-left.png), url(../img/quests/blue-box-2-center.png), url(../img/quests/blue-box-3-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--base-button_height) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--base-button_height) * 2)) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 8px);
  height: var(--base-button_height);
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}
.xp-currency-box {
  --base-button_height: 46px;
  background-image: url(../img/quests/green-box-1-left.png), url(../img/quests/green-box-2-center.png), url(../img/quests/green-box-3-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--base-button_height) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--base-button_height) * 2)) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 8px);
  height: var(--base-button_height);
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.row {
  flex-direction: row;
}
.gold-pass-gems-icon {
  --gems-icon-width: 22px;
  --gems-icon-height: 28px;
  background-image: url(../img/ui/icons/gold-pass-gem-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--gems-icon-width);
  height: var(--gems-icon-height);
}
.gold-pass-gold-icon {
  --gems-icon-width: 42px;
  --gems-icon-height: 48px;
  background-image: url(../img/ui/icons/gold-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--gems-icon-width);
  height: var(--gems-icon-height);
  background-position: center;
}
#season-pass {
  position: relative;
  flex-direction: column;
}
#season-pass .rusty-window-lg .season-pass-button {
  width: 395px;
  height: 45.91px;
  background: #E3E3E3;
  font-family: Amiga Forever;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 40px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: absolute;
  right: 366px;
  top: 27px;
  color: black;
  cursor: pointer;
}
#season-pass .rusty-window-lg .season-pass-container {
  position: relative;
  display: flex;
  width: 100%;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-icons {
  color: #000000;
  display: flex;
  flex-direction: column;
  margin-right: 7px;
  margin-left: 40px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-icons .season-pass-icon {
  width: 100px;
  height: 130px;
  justify-content: center;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-icons .season-pass-free-icon {
  background-image: url(../img/pass/free-pass.png);
  margin-top: 0px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-icons .season-pass-premiun-icon {
  background-image: url(../img/pass/gold-pass.png);
  margin-bottom: 0px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-arrow {
  height: 36px;
  width: 22px;
  display: flex;
  margin: auto 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-prev {
  background-image: url('../img/pass/arrow-season-up.png');
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-prev:hover {
  background-image: url('../img/pass/arrow-season-over.png');
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-prev:active {
  background-image: url('../img/pass/arrow-season-down.png');
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-next {
  background-image: url('../img/pass/arrow-season-up.png');
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-next:hover {
  background-image: url('../img/pass/arrow-season-over.png');
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-next:active {
  background-image: url('../img/pass/arrow-season-down.png');
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-conceal {
  background-repeat: no-repeat;
  width: 40px;
  height: 136px;
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-conceal-free {
  background-image: url('../img/pass/season-pass-conceal-free.png');
  position: absolute;
  left: 94%;
  bottom: 58.7%;
}
#season-pass .rusty-window-lg .season-pass-container #season-pass-conceal-premium {
  background-image: url('../img/pass/season-pass-conceal-premium.png');
  position: absolute;
  left: 94%;
  bottom: -1%;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows::-webkit-scrollbar {
  display: none;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows {
  font-family: Edit Undo BRK;
  width: 636px;
  overflow-x: scroll;
  overflow-y: hidden;
  cursor: -webkit-grab;
  cursor: grab;
  scrollbar-width: none;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container {
  display: flex;
  flex-direction: column;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .item-rarity-style-border {
  left: -2.86534px;
  top: -2.86534px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row {
  display: flex;
  align-items: center;
  padding: 0 20px;
  --base-height: 130px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-image: url(../img/pass/free-pass-left.png), url(../img/pass/free-pass-center.png), url(../img/pass/free-pass-right.png);
  background-size: var(--base-height) var(--base-height), calc(100% - calc(var(--base-height) * 2)) var(--base-height), var(--base-height) var(--base-height);
  background-origin: border-box;
  background-position: 0px 0px, var(--base-height) 0px, right 0px;
  height: var(--base-height);
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row .season-pass-item {
  height: 90px;
  width: 88px;
  margin-right: 38.55px;
  margin-left: 7px;
  flex: 0 0 auto;
  background-position: center;
  background-size: 55%, 100%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row .season-pass-item img {
  opacity: 0;
  position: absolute;
  top: -12px;
  right: -12px;
  transition: opacity 1s ease-in-out;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row .season-pass-item.golden {
  background-size: 100%;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row .season-pass-item.golden .gold-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row .season-pass-item.golden .gold-item .gold-container {
  margin-top: 14px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row .season-pass-item.golden .gold-item .gold-amount {
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-free-row .season-pass-icon:last-child {
  width: 60px;
  margin-right: 0;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-progress {
  position: relative;
  height: 13px;
  margin: 25px 0;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-progress .season-pass-progress-outer {
  width: 100%;
  padding-right: 100px;
  position: absolute;
  bottom: -35%;
  --base-height: 22px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-image: url(../img/pass/season-bar-left.png), url(../img/pass/season-bar-center.png), url(../img/pass/season-bar-right.png);
  background-size: var(--base-height) var(--base-height), calc(100% - calc(var(--base-height) * 2)) var(--base-height), var(--base-height) var(--base-height);
  background-origin: border-box;
  background-position: 0px 0px, var(--base-height) 0px, right 0px;
  height: var(--base-height);
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-progress .season-pass-progress-outer .season-pass-progress-inner {
  border-top: 2px #ABEE5F solid;
  background-color: #7BE504;
  border-bottom: 2px #5CAB03 solid;
  --base-height: 22px;
  height: calc(var(--base-height) - 6px);
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 0;
  --border-width: 4px;
  --progress: 0%;
  width: calc(var(--progress) - var(--border-width));
  max-width: 99.8%;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-progress .season-progress-levels {
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 80px;
  padding-left: 58px;
  box-sizing: border-box;
  justify-content: space-between;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-progress .season-progress-levels .season-pass-progress-checkpoint {
  display: flex;
  position: relative;
  width: 46px;
  height: 48px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 15px;
  line-height: 20px;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-image: url(../img/pass/pass-level.png);
  background-repeat: no-repeat;
  z-index: 1;
  transition: background-image 1s ease-in-out;
  transition: color 1s ease-in-out;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-progress .season-progress-levels .season-pass-progress-checkpoint.passed {
  background-image: url(../img/pass/pass-level-obtained.png);
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-progress .season-progress-levels .season-pass-progress-checkpoint:last-child {
  margin-right: 12px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-premiun-row {
  display: flex;
  align-items: center;
  padding: 0 20px;
  --base-height: 130px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-image: url(../img/pass/gold-pass-left.png), url(../img/pass/gold-pass-center.png), url(../img/pass/gold-pass-right.png);
  background-size: var(--base-height) var(--base-height), calc(100% - calc(var(--base-height) * 2)) var(--base-height), var(--base-height) var(--base-height);
  background-origin: border-box;
  background-position: 0px 0px, var(--base-height) 0px, right 0px;
  height: var(--base-height);
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-premiun-row .season-pass-item {
  height: 90px;
  width: 88px;
  margin-right: 38.55px;
  margin-left: 7px;
  background-image: url(../img/logo-bn.png);
  flex: 0 0 auto;
  background-position: center;
  background-size: 55%,100%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-premiun-row .season-pass-item img {
  opacity: 0;
  position: absolute;
  top: -12px;
  right: -12px;
  transition: opacity 1s ease-in-out;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-premiun-row .season-pass-item .pass-lock-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  bottom: 9.13466px;
  right: -5.86534px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-premiun-row .season-pass-item .pass-lock-container .pass-lock {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 0px;
  right: 0px;
  background-image: url(../img/pass/pass-lock.png);
  background-repeat: no-repeat;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-premiun-row .season-pass-item::before {
  content: '';
  background-image: url(../img/pass/banner-gold-pass.png);
  background-repeat: no-repeat;
  width: 26px;
  height: 102px;
  position: absolute;
  right: -36px;
  top: -12px;
}
#season-pass .rusty-window-lg .season-pass-container .season-pass-container-rows .season-inner-container .season-pass-premiun-row .season-pass-icon:last-child {
  width: 60px;
  margin-right: 0;
}
#season-pass .rusty-window-lg .season-pass-footer {
  display: flex;
  width: 100%;
  margin-top: 8px;
  padding: 0 40px;
  position: relative;
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-title-container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-title-container .season-pass-title {
  display: flex;
  align-items: center;
  justify-content: left;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  line-height: 33px;
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-title-container .season-pass-counter {
  display: flex;
  align-items: center;
  margin-top: -8px;
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-title-container .season-pass-counter span {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 40px;
  line-height: 45px;
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-buy-container {
  position: absolute;
  left: 45%;
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-buy-container #season-buy-btn {
  width: 432px;
  position: relative;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/gold-button-left.png), url(../img/ui/buttons/gold-button-center.png), url(../img/ui/buttons/gold-button-right.png);
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-buy-container #season-buy-btn:hover {
  background-image: url(../img/ui/buttons/gold-button-hover_left.png), url(../img/ui/buttons/gold-button-hover_center.png), url(../img/ui/buttons/gold-button-hover_right.png);
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-buy-container #season-buy-btn:active {
  background-image: url(../img/ui/buttons/gold-button-active_left.png), url(../img/ui/buttons/gold-button-active_center.png), url(../img/ui/buttons/gold-button-active_right.png);
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-buy-container #season-buy-btn .season-btn-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 30px;
  line-height: 40px;
}
#season-pass .rusty-window-lg .season-pass-footer .season-pass-buy-container #season-buy-btn.gold {
  background-image: url(../img/pass/gold-pass-button-left.png), url(../img/pass/gold-pass-button-center.png), url(../img/pass/gold-pass-button-right.png);
  opacity: 1!important;
  --base-button_height: 46px;
}
@media (max-width: 1800px) {
  #season-pass .rusty-window-lg {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #season-pass .rusty-window-lg {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #season-pass .rusty-window-lg {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}
@media (max-width: 1550px) {
  #season-pass .rusty-window-lg {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #season-pass .rusty-window-lg {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
#season-pass #season-timer-container {
  margin: auto;
  margin-top: -2px;
  width: 350px;
  padding: 7px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  --base-button_height: 48px;
  --default-button-segment-width: 24px !important;
  background-image: url(../img/pass/season-timer-left.png), url(../img/pass/season-timer-center.png), url(../img/pass/season-timer-right.png);
}
#season-pass #season-timer-container .timer-progress-bar {
  background: linear-gradient(180deg, #A62E8E 0%, #820A6A 100%);
}
#season-pass #season-timer-container .timer-progress-bar.completed {
  background: linear-gradient(180deg, #A2DC69 0%, #54AA02 100%);
}
#season-pass #season-timer-container .title {
  color: #fff;
  font-size: 20px;
  line-height: 14px;
  width: 150px;
  display: flex;
  justify-content: right;
  align-items: center;
  margin-left: 0px;
  padding-right: 4px;
}
#season-pass #season-timer-container .time {
  font-size: 10px;
  align-items: center;
  display: flex;
  width: 121px;
}
#season-pass #season-timer-container .time.completed {
  display: none;
}
#season-pass #season-loading-spinner {
  position: absolute;
  right: 14px;
  margin: 5px;
  margin-top: 17px;
  width: 20px;
  height: 20px;
}
@media (max-width: 1800px) {
  #season-pass {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    width: 890px;
    --slide-y-offset: 97px;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    left: 33%;
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #season-pass {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    width: 848px;
    --slide-y-offset: 95px;
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #season-pass {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    width: 798px;
    --slide-y-offset: 109px;
  }
}
@media (max-width: 1550px) {
  #season-pass {
    width: 900px;
    --slide-y-offset: 110px;
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #season-pass {
    width: 753px;
    height: 351px;
    --slide-y-offset: 110px;
  }
}
@media (max-width: 1800px) {
  #season-pass::before,
  #season-pass::after {
    -webkit-transform: translateY(-94%) scale(0.95) !important;
            transform: translateY(-94%) scale(0.95) !important;
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #season-pass::before,
  #season-pass::after {
    -webkit-transform: translateY(-90%) scale(0.9) !important;
            transform: translateY(-90%) scale(0.9) !important;
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #season-pass::before,
  #season-pass::after {
    -webkit-transform: translateY(-85%) scale(0.85) !important;
            transform: translateY(-85%) scale(0.85) !important;
  }
}
@media (max-width: 1550px) {
  #season-pass::before,
  #season-pass::after {
    -webkit-transform: translateY(-72%) scale(0.75) !important;
            transform: translateY(-72%) scale(0.75) !important;
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #season-pass::before,
  #season-pass::after {
    -webkit-transform: translateY(-80%) scale(0.8) !important;
            transform: translateY(-80%) scale(0.8) !important;
  }
}
#modal-buy-season .modal-button .gems-icon,
#modal-login-incentive .modal-button .gems-icon {
  margin-right: 5px;
}
#modal-buy-season .modal-content .close .modal-close-btn,
#modal-login-incentive .modal-content .close .modal-close-btn {
  top: 5px;
  right: 5px;
}
#modal-buy-season .modal-content .modal-header h2,
#modal-login-incentive .modal-content .modal-header h2 {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-buy-season .modal-content .modal-body .modal-main-container,
#modal-login-incentive .modal-content .modal-body .modal-main-container {
  margin: 14px auto;
}
#modal-buy-season .modal-content .modal-body .modal-main-container .season-info-column,
#modal-login-incentive .modal-content .modal-body .modal-main-container .season-info-column {
  margin: 0 10px;
  margin-bottom: 15px;
  width: 254px;
  height: 327px;
  background-image: url(../img/pass/season-info-column.png);
  background-position: center;
  background-repeat: no-repeat;
}
#modal-buy-season .modal-content .modal-body .modal-main-container .season-info-column .season-icon,
#modal-login-incentive .modal-content .modal-body .modal-main-container .season-info-column .season-icon {
  font-family: Edit Undo BRK;
  background-repeat: no-repeat !important;
  background-position: center!important;
  background-size: contain;
  width: 178px;
  height: 130px;
  margin: 0 auto;
  margin-top: 67px;
}
#modal-buy-season .modal-content .modal-body .modal-main-container .season-info-column .season-description-container,
#modal-login-incentive .modal-content .modal-body .modal-main-container .season-info-column .season-description-container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 210px;
  height: 40px;
  margin: auto;
  margin-top: 27px;
  color: #fff;
}
#modal-buy-season .modal-content .modal-body .modal-main-container .season-info-column .season-description-container .season-description,
#modal-login-incentive .modal-content .modal-body .modal-main-container .season-info-column .season-description-container .season-description {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  display: flex;
  align-items: center;
  text-align: center;
}
#modal-buy-season .modal-content .modal-body .modal-buttons .red-ribbon,
#modal-login-incentive .modal-content .modal-body .modal-buttons .red-ribbon {
  background-image: url(../img/ui/red-ribbon_1.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 84px;
  height: 52px;
  left: 0;
  z-index: 2;
}
#modal-buy-season .modal-content .modal-body .modal-buttons .red-ribbon div,
#modal-login-incentive .modal-content .modal-body .modal-buttons .red-ribbon div {
  margin-left: 12px;
  margin-top: 6px;
}
#modal-buy-season .modal-content .modal-body .modal-buttons .modal-left-btn,
#modal-login-incentive .modal-content .modal-body .modal-buttons .modal-left-btn {
  background-color: unset;
  position: relative;
  width: 286px;
  margin-right: 22px;
}
#modal-buy-season .modal-content .modal-body .modal-buttons .modal-left-btn span,
#modal-login-incentive .modal-content .modal-body .modal-buttons .modal-left-btn span {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
}
#modal-buy-season .modal-content .modal-body .modal-buttons .modal-right-btn,
#modal-login-incentive .modal-content .modal-body .modal-buttons .modal-right-btn {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/purple-button-left.png), url(../img/ui/buttons/purple-button-center.png), url(../img/ui/buttons/purple-button-right.png);
  width: 268px;
  margin-left: 22px;
}
#modal-buy-season .modal-content .modal-body .modal-buttons .modal-right-btn:hover,
#modal-login-incentive .modal-content .modal-body .modal-buttons .modal-right-btn:hover {
  background-image: url(../img/ui/buttons/purple-button-hover_left.png), url(../img/ui/buttons/purple-button-hover_center.png), url(../img/ui/buttons/purple-button-hover_right.png);
}
#modal-buy-season .modal-content .modal-body .modal-buttons .modal-right-btn:active,
#modal-login-incentive .modal-content .modal-body .modal-buttons .modal-right-btn:active {
  background-image: url(../img/ui/buttons/purple-button-active_left.png), url(../img/ui/buttons/purple-button-active_center.png), url(../img/ui/buttons/purple-button-active_right.png);
}
#modal-buy-season .modal-content .modal-body .modal-buttons .modal-right-btn span,
#modal-login-incentive .modal-content .modal-body .modal-buttons .modal-right-btn span {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
}
#modal-buy-season .modal-content .modal-body .modal-buttons img,
#modal-login-incentive .modal-content .modal-body .modal-buttons img {
  margin-left: 15px;
}
@media (max-width: 1800px) {
  #modal-buy-season .modal-content,
  #modal-login-incentive .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);
            transform: translateX(-50%) translateY(-50%) scale(0.95);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #modal-buy-season .modal-content,
  #modal-login-incentive .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
            transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #modal-buy-season .modal-content,
  #modal-login-incentive .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85);
            transform: translateX(-50%) translateY(-50%) scale(0.85);
  }
}
@media (max-width: 1550px) {
  #modal-buy-season .modal-content,
  #modal-login-incentive .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
            transform: translateX(-50%) translateY(-50%) scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #modal-buy-season .modal-content,
  #modal-login-incentive .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
            transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
}
#modal-pass-reward {
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 4;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#modal-pass-reward .modal-pass-reward-background {
  background: radial-gradient(50% 50% at 50% 50%, #0C111E 66.98%, rgba(12, 17, 30, 0.8) 100%);
  opacity: 0.8;
  position: fixed;
  height: 100%;
  width: 100%;
}
#modal-pass-reward .modal-pass-reward-container {
  height: 347px;
  width: 1748px;
  position: relative;
}
#modal-pass-reward .modal-pass-reward-container .modal-pass-reward-effect {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 81%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}
#modal-pass-reward .modal-pass-reward-container .modal-pass-reward-effect.sfx-1 {
  background-image: url(../img/pass/pass-unlock-banner.png);
  height: 222px;
}
#modal-pass-reward .modal-pass-reward-container .modal-pass-reward-effect.sfx-2 {
  width: 280px;
  height: 236px;
  background-image: url(../img/pass/pass-icon.png);
  top: 24%;
}
#modal-pass-reward .modal-pass-reward-container .modal-pass-reward-spiner {
  position: absolute;
  height: 711px;
  width: 729px;
  background-image: url(../img/pass/pass-unlock-shines.png);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-animation: spin 4s linear infinite;
  animation: spincenter 4s linear infinite;
  top: 22%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@-webkit-keyframes spincenter {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spincenter {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
#modal-pass-reward .modal-pass-reward-text {
  position: absolute;
  left: 50%;
  top: 57%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
#modal-pass-reward .modal-pass-reward-text .modal-pass-reward-text-color {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 80px;
  line-height: 85px;
}
#modal-items-rewards .modal-content {
  width: 636px;
}
#modal-items-rewards .modal-content .modal-header h2 {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-counter-container {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  position: absolute;
  top: 63px;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-counter-container .season-reward-counter {
  width: 10px;
  height: 12px;
  margin: 0 2px;
  background-image: url(../img/pass/reward-counter.png);
  background-repeat: no-repeat;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-counter-container .filled {
  background-image: url(../img/pass/reward-counter-fill.png);
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container {
  display: flex;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container {
  display: flex;
  min-width: 500px;
  justify-content: center;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-lvl {
  position: absolute;
  top: 35px;
  padding: 2px 15px;
  width: 119px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/pass/reward-level-left.png), url(../img/pass/reward-level-center.png), url(../img/pass/reward-level-right.png);
  --base-button_height: 24px;
  --default-button-segment-width: 24px !important;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container {
  display: flex;
  width: 500px;
  margin: 10px 10px;
  align-items: center;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-image-container {
  display: flex;
  width: 300px;
  min-width: 300px;
  height: 300px;
  margin: 0 auto;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background-repeat: no-repeat !important;
  background-size: 100%!important;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-image-container .reward-item-name {
  color: black;
  font-family: Edit Undo BRK;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  min-height: 28px;
  --width: calc(100% - 12px);
  margin-left: 6px;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-image-container .reward-item-image {
  height: 108px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-image-container .reward-item-rarity-text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 6px;
  padding: 5px;
  padding-bottom: 0;
  text-align: center;
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 12px;
  line-height: 10px;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container {
  display: flex;
  width: 200px;
  height: 300px;
  margin-right: auto;
  flex-direction: column;
  margin-left: 23px;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container .reward-info-text {
  padding: 2px 5px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container .reward-lvl-text {
  margin-left: 5px;
  width: 42px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 15px;
  background-image: url(../img/pass/reward-perk-level-left.png), url(../img/pass/reward-perk-level-center.png), url(../img/pass/reward-perk-level-right.png);
  background-repeat: no-repeat, repeat, no-repeat;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container .reward-perks-list {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 267px;
  padding: 0;
  margin-left: 5px;
  margin-top: 10px;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container .reward-perks-list .item-perk-container {
  display: flex;
  align-items: center;
  margin: 5px;
  margin-left: 0px;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container .reward-perks-list .item-perk-container .item-perk-value-container {
  min-width: 40px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat !important;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container .reward-perks-list .item-perk-container .item-perk-value-container .item-perk-value {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 15px;
  line-height: 20px;
  width: 28px;
  justify-content: center;
  display: flex;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-item-container .reward-info-container .reward-perks-list .item-perk-container .item-perk-name-text {
  max-width: 120px;
  margin-left: 8px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gems-container {
  display: flex;
  width: 305px;
  height: 260px;
  margin: 10px 107.5px;
  align-items: center;
  justify-content: center;
  background-image: url(../img/ui/icons/gems-pack-2.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gems-container .reward-gems-amount-container {
  width: 100px;
  position: absolute;
  bottom: 10px;
  margin: 0;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gems-container .reward-gems-amount-container .reward-gems-amount {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 8px;
  text-align: left;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gems-container .reward-gems-amount-container .reward-gems-amount .reward-gems-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gold-container {
  display: flex;
  width: 305px;
  height: 260px;
  margin: 10px 107.5px;
  align-items: center;
  justify-content: center;
  background-image: url(../img/ui/icons/gold-pack.png);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gold-container .reward-gold-amount-container {
  width: 100px;
  position: absolute;
  bottom: 10px;
  margin: 0;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gold-container .reward-gold-amount-container .reward-gold-amount {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 8px;
  text-align: left;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .reward-container .reward-gold-container .reward-gold-amount-container .reward-gold-amount .reward-gold-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .gui-arrow {
  height: 36px;
  width: 22px;
  display: flex;
  margin: auto;
  background-repeat: no-repeat;
  cursor: pointer;
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .season-left-arrow {
  background-image: url('../img/pass/arrow-season-up.png');
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .season-left-arrow:hover {
  background-image: url('../img/pass/arrow-season-over.png');
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .season-left-arrow:active {
  background-image: url('../img/pass/arrow-season-down.png');
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .season-right-arrow {
  background-image: url('../img/pass/arrow-season-up.png');
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .season-right-arrow:hover {
  background-image: url('../img/pass/arrow-season-over.png');
}
#modal-items-rewards .modal-content .modal-body .modal-main-container .season-reward-main-container .season-right-arrow:active {
  background-image: url('../img/pass/arrow-season-down.png');
}
#modal-items-rewards .modal-content .modal-body .modal-buttons {
  width: 416px;
  margin: 0 auto;
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .red-ribbon {
  display: none;
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .red-ribbon.enable {
  display: block;
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-button {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  background-color: unset;
  width: 184px;
  margin: 0 auto;
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-button span {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-button:hover {
  color: #fff;
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-left-btn {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/red-button-left.png), url(../img/ui/buttons/red-button-center.png), url(../img/ui/buttons/red-button-right.png);
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-left-btn:hover {
  background-image: url(../img/ui/buttons/red-button-hover_left.png), url(../img/ui/buttons/red-button-hover_center.png), url(../img/ui/buttons/red-button-hover_right.png);
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-left-btn:active {
  background-image: url(../img/ui/buttons/red-button-active_left.png), url(../img/ui/buttons/red-button-active_center.png), url(../img/ui/buttons/red-button-active_right.png);
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-right-btn {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/green-button-left.png), url(../img/ui/buttons/green-button-center.png), url(../img/ui/buttons/green-button-right.png);
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-right-btn:hover {
  background-image: url(../img/ui/buttons/green-button-hover_left.png), url(../img/ui/buttons/green-button-hover_center.png), url(../img/ui/buttons/green-button-hover_right.png);
}
#modal-items-rewards .modal-content .modal-body .modal-buttons .modal-right-btn:active {
  background-image: url(../img/ui/buttons/green-button-active_left.png), url(../img/ui/buttons/green-button-active_center.png), url(../img/ui/buttons/green-button-active_right.png);
}
@media (max-width: 1800px) {
  #modal-items-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);
            transform: translateX(-50%) translateY(-50%) scale(0.95);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #modal-items-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
            transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #modal-items-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85);
            transform: translateX(-50%) translateY(-50%) scale(0.85);
  }
}
@media (max-width: 1550px) {
  #modal-items-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
            transform: translateX(-50%) translateY(-50%) scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #modal-items-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
            transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
}
#modal-melt .red-ribbon {
  display: none;
}
#modal-melt .modal-content {
  width: 666px;
  height: 326px;
}
#modal-melt .modal-content .modal-header h2 {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .item-img-container {
  width: 100%;
  height: 100%;
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .melt-card-item-container.cursor-pointer {
  cursor: unset !important;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .melt-text-container {
  margin-left: 20px;
  width: 300px;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .melt-text-container .melt-text {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 24px;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .melt-text-container .melt-text-gold {
  display: flex;
  align-items: center;
  margin-top: 18px;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .melt-text-container .melt-text-gold .melt-text-get {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 24px;
  margin-right: 14px;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .melt-text-container .melt-text-gold .melt-value-container {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0px 11px;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/pass/reward-level-left.png), url(../img/pass/reward-level-center.png), url(../img/pass/reward-level-right.png);
  --base-button_height: 32px;
  --default-button-segment-width: 32px !important;
  width: 86px;
}
#modal-melt .modal-content .modal-body .modal-main-container .melt-main-container .melt-text-container .melt-text-gold .melt-value-container .melt-value {
  font-size: 15px;
  line-height: 20px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  width: 100%;
  text-align: center;
}
#modal-melt .modal-content .modal-body .modal-buttons {
  margin-top: 35px;
}
#modal-melt .modal-content .modal-body .modal-buttons .modal-button {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 15px;
  line-height: 20px;
  background-color: unset;
  width: 184px;
  position: relative;
  -webkit-transform: unset;
          transform: unset;
  right: unset;
  top: unset;
}
#modal-melt .modal-content .modal-body .modal-buttons .modal-left-btn {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/red-button-left.png), url(../img/ui/buttons/red-button-center.png), url(../img/ui/buttons/red-button-right.png);
}
#modal-melt .modal-content .modal-body .modal-buttons .modal-left-btn:hover {
  background-image: url(../img/ui/buttons/red-button-hover_left.png), url(../img/ui/buttons/red-button-hover_center.png), url(../img/ui/buttons/red-button-hover_right.png);
}
#modal-melt .modal-content .modal-body .modal-buttons .modal-left-btn:active {
  background-image: url(../img/ui/buttons/red-button-active_left.png), url(../img/ui/buttons/red-button-active_center.png), url(../img/ui/buttons/red-button-active_right.png);
}
#modal-melt .modal-content .modal-body .modal-buttons .modal-right-btn {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/green-button-left.png), url(../img/ui/buttons/green-button-center.png), url(../img/ui/buttons/green-button-right.png);
}
#modal-melt .modal-content .modal-body .modal-buttons .modal-right-btn:hover {
  background-image: url(../img/ui/buttons/green-button-hover_left.png), url(../img/ui/buttons/green-button-hover_center.png), url(../img/ui/buttons/green-button-hover_right.png);
}
#modal-melt .modal-content .modal-body .modal-buttons .modal-right-btn:active {
  background-image: url(../img/ui/buttons/green-button-active_left.png), url(../img/ui/buttons/green-button-active_center.png), url(../img/ui/buttons/green-button-active_right.png);
}
@media (max-width: 1800px) {
  #modal-melt .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);
            transform: translateX(-50%) translateY(-50%) scale(0.95);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #modal-melt .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
            transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #modal-melt .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85);
            transform: translateX(-50%) translateY(-50%) scale(0.85);
  }
}
@media (max-width: 1550px) {
  #modal-melt .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
            transform: translateX(-50%) translateY(-50%) scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #modal-melt .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
            transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
}
.reward-info-container .gear-perk-line {
  margin-bottom: 7px;
}
.reward-info-container .gear-perk-line .modifier-box {
  font-size: 15px;
}
.reward-info-container .gear-perk-line > :first-child {
  margin-right: 10px;
}
.reward-item-container {
  display: flex;
  width: 500px;
  margin: 10px 10px;
  align-items: center;
}
.reward-item-container .reward-image-container {
  display: flex;
  width: 300px;
  min-width: 300px;
  height: 300px;
  margin: 0 auto;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background-repeat: no-repeat !important;
  background-size: 100%!important;
}
.reward-item-container .reward-image-container .reward-item-name {
  color: black;
  font-family: Edit Undo BRK;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  min-height: 28px;
  --width: calc(100% - 12px);
  margin-left: 6px;
}
.reward-item-container .reward-image-container .reward-item-image {
  height: 108px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.reward-item-container .reward-image-container .reward-item-rarity-text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 6px;
  padding: 5px;
  padding-bottom: 0;
  text-align: center;
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 12px;
  line-height: 10px;
}
.reward-item-container .reward-info-container {
  display: flex;
  width: 200px;
  height: 300px;
  margin-right: auto;
  flex-direction: column;
  margin-left: 23px;
}
.reward-item-container .reward-info-container .reward-info-text {
  padding: 2px 5px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
.reward-item-container .reward-info-container .reward-lvl-text {
  margin-left: 5px;
  width: 34px;
  height: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 15px;
  background-image: url(../img/pass/reward-perk-level-left.png), url(../img/pass/reward-perk-level-center.png), url(../img/pass/reward-perk-level-right.png);
  background-repeat: no-repeat, repeat, no-repeat;
}
.reward-item-container .reward-info-container .reward-perks-list {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 267px;
  padding: 0;
  margin-left: 5px;
  margin-top: 10px;
}
.reward-item-container .reward-info-container .reward-perks-list .item-perk-container {
  display: flex;
  align-items: center;
  margin: 5px;
  margin-left: 0px;
}
.reward-item-container .reward-info-container .reward-perks-list .item-perk-container .item-perk-value-container {
  min-width: 40px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat !important;
}
.reward-item-container .reward-info-container .reward-perks-list .item-perk-container .item-perk-value-container .item-perk-value {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 15px;
  line-height: 20px;
  width: 28px;
  justify-content: center;
  display: flex;
}
.reward-item-container .reward-info-container .reward-perks-list .item-perk-container .item-perk-name-text {
  max-width: 120px;
  margin-left: 8px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#quests-timer-container {
  display: none !important;
}
#quests-timer-container,
.timer-container-default {
  position: absolute;
  margin-top: 110px;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  background-color: unset;
  background-image: url(../img/quests/new-quest-bar-1.png), url(../img/quests/new-quest-bar-2.png), url(../img/quests/new-quest-bar-3.png);
  --base-button_height: 46px;
  width: 270px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border: 4px solid transparent;
}
#quests-timer-container .title,
.timer-container-default .title {
  font-size: 15px;
  line-height: 14px !important;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#quests-timer-container .time,
.timer-container-default .time {
  font-size: 10px;
  line-height: 10px;
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  height: 12px;
}
.timer-container {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}
.timer-progress-bar {
  --progress: 0%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scaleX(var(--progress));
          transform: scaleX(var(--progress));
  height: 100%;
  z-index: 0;
  background: linear-gradient(180deg, #0FBEFA 0%, #0C98C8 100%);
  transition: all 0.5s ease-in;
}
.timer-text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#quests-section {
  height: 600px;
  width: 926px;
  margin: auto;
  position: relative;
  margin-top: 125px;
}
#quests-section .quest-list {
  height: 420px;
  display: flex;
}
#quests-section .quest-list .quest:last-child {
  margin-right: 0;
}
#quests-section .quest-list .quest {
  position: relative;
  display: flex;
  color: #000000;
  flex-direction: column;
  margin: 0 0;
  margin-right: auto;
  --frame-box-width: 60px;
  --frame-box-height: 60px;
  --frame-box-size: 110px;
  background-image: url(../img/ui/frames/basic-frame-seg-01.png), url(../img/ui/frames/basic-frame-seg-02.png), url(../img/ui/frames/basic-frame-seg-03.png), url(../img/ui/frames/basic-frame-seg-04.png), url(../img/ui/frames/basic-frame-seg-05.png), url(../img/ui/frames/basic-frame-seg-06.png), url(../img/ui/frames/basic-frame-seg-07.png), url(../img/ui/frames/basic-frame-seg-08.png), url(../img/ui/frames/basic-frame-seg-09.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--frame-box-size) - 1px) 0px, right top, 0px calc(var(--frame-box-size) - 1px), calc(var(--frame-box-size) - 1px) calc(var(--frame-box-size) - 1px), right calc(var(--frame-box-size) - 1px), left bottom, calc(var(--frame-box-size) - 1px) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), calc(100% - calc(var(--frame-box-size) * 2) + 2px) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  --frame-box-width: 290px;
  --frame-box-height: 420px;
  min-width: unset;
  padding: 0;
}
#quests-section .quest-list .quest.rare {
  background-image: url(../img/ui/frames/rare-frame-seg-1.png), url(../img/ui/frames/rare-frame-seg-2.png), url(../img/ui/frames/rare-frame-seg-3.png), url(../img/ui/frames/rare-frame-seg-4.png), url(../img/ui/frames/rare-frame-seg-5.png), url(../img/ui/frames/rare-frame-seg-6.png), url(../img/ui/frames/rare-frame-seg-7.png), url(../img/ui/frames/rare-frame-seg-8.png), url(../img/ui/frames/rare-frame-seg-9.png);
}
#quests-section .quest-list .quest.epic {
  background-image: url(../img/ui/frames/epic-frame-seg-1.png), url(../img/ui/frames/epic-frame-seg-2.png), url(../img/ui/frames/epic-frame-seg-3.png), url(../img/ui/frames/epic-frame-seg-4.png), url(../img/ui/frames/epic-frame-seg-5.png), url(../img/ui/frames/epic-frame-seg-6.png), url(../img/ui/frames/epic-frame-seg-7.png), url(../img/ui/frames/epic-frame-seg-8.png), url(../img/ui/frames/epic-frame-seg-9.png);
}
#quests-section .quest-list .quest.legendary {
  background-image: url(../img/ui/frames/legendary-frame-seg-1.png), url(../img/ui/frames/legendary-frame-seg-2.png), url(../img/ui/frames/legendary-frame-seg-3.png), url(../img/ui/frames/legendary-frame-seg-4.png), url(../img/ui/frames/legendary-frame-seg-5.png), url(../img/ui/frames/legendary-frame-seg-6.png), url(../img/ui/frames/legendary-frame-seg-7.png), url(../img/ui/frames/legendary-frame-seg-8.png), url(../img/ui/frames/legendary-frame-seg-9.png);
}
#quests-section .quest-list .quest::before {
  position: absolute;
  left: 5.52%;
  right: 86.21%;
  bottom: 99%;
  width: 290px;
  height: 143px;
  content: "";
  background-image: url(../img/quests/ropes.png);
  background-repeat: no-repeat;
}
#quests-section .quest-list .quest .quest-loading-spinner {
  position: absolute;
  right: 0;
  margin: 6px;
  width: 20px;
  height: 20px;
}
#quests-section .quest-list .quest .quest-name-container {
  position: relative;
  display: flex;
  width: 290px;
  height: 54px;
  margin: 25px auto;
  margin-bottom: 0;
}
#quests-section .quest-list .quest .quest-name-container .quest-name {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 0px auto;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
}
#quests-section .quest-list .quest .quest-progress-counter {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 5px auto;
  margin-top: -2px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  font-size: 30px;
  line-height: 40px;
}
#quests-section .quest-list .quest .quest-progress-counter.completed {
  color: #7DFF00;
}
#quests-section .quest-list .quest .quest-progress-bar-outer {
  margin: 0 auto;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/quests/experience-bar-1.png), url(../img/quests/experience-bar-2.png), url(../img/quests/experience-bar-3.png);
  --base-button_height: 10px;
  --default-button-segment-width: 4px !important;
  width: 220px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  position: relative;
}
#quests-section .quest-list .quest .quest-progress-bar-outer .quest-progress-bar-inner {
  background: #0FBEFA;
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px;
  --base-height: 11px;
  height: calc(var(--base-height) - 6px);
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 2px;
  --border-width: 8px;
  --progress: 0%;
  /*transition: width 0.3s ease-in-out;*/
  width: calc(var(--progress) - var(--border-width));
}
#quests-section .quest-list .quest .quest-progress-bar-outer .quest-progress-bar-inner.completed {
  background-color: #7DFF00;
}
#quests-section .quest-list .quest .quest-difficulty-level {
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-top: 16px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
#quests-section .quest-list .quest .quest-difficulty-level .difficulty-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
}
#quests-section .quest-list .quest .quest-difficulty-level .quest-difficulty-text {
  font-size: 20px;
}
#quests-section .quest-list .quest .quest-icon {
  font-family: Edit Undo BRK;
  width: 85px;
  height: 96px;
  font-size: 13px;
  line-height: 14px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: auto auto;
  margin-top: 15px;
  background-image: url(../img/quests/icon-quest-easy.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#quests-section .quest-list .quest .quest-icon .quest-completed-icon {
  display: none;
  height: 100%;
  width: 100%;
  padding: 25px;
  background-image: url(../img/quests/quest-ready-icon.png);
}
#quests-section .quest-list .quest .bound-section {
  width: 208px;
  display: flex;
  margin: auto;
  margin-top: 11px;
  margin-bottom: 19px;
  position: relative;
  pointer-events: none;
}
#quests-section .quest-list .quest .bound-section .hero-bound {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  color: #fff;
  text-align: left;
  position: absolute;
  left: 0;
}
#quests-section .quest-list .quest .bound-section .player-bound {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  color: #fff;
  text-align: left;
  position: absolute;
  right: 0;
}
#quests-section .quest-list .quest .quest-rewards {
  color: #ffffff;
  width: 250px;
  display: flex;
  margin: auto;
  margin-top: 0;
  margin-bottom: 53px;
  pointer-events: none;
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-gold-box {
  width: 100px;
  margin: auto;
  display: flex;
  align-items: center;
  margin-right: 19px;
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-gold-box .quest-reward-gold {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  margin-left: 10px;
  text-align: center;
  width: 100%;
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-gold-box.completed {
  background-image: url(../img/quests/reward-complete-box-1.png), url(../img/quests/reward-complete-box-2.png), url(../img/quests/reward-complete-box-3.png);
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-gold-box.completed .gold-icon {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-xp-box {
  width: 100px;
  margin: auto;
  display: flex;
  align-items: center;
  margin-left: 19px;
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-xp-box .quest-reward-xp {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  margin-left: 2px;
  text-align: center;
  width: 100%;
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-xp-box.completed {
  background-image: url(../img/quests/reward-complete-box-1.png), url(../img/quests/reward-complete-box-2.png), url(../img/quests/reward-complete-box-3.png);
}
#quests-section .quest-list .quest .quest-rewards .quest-reward-xp-box.completed .xp-icon {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
#quests-section .quest-replace-btn {
  width: 914px;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/orange-button-left.png), url(../img/ui/buttons/orange-button-center.png), url(../img/ui/buttons/orange-button-right.png);
  margin: 5px auto;
  margin-top: 20px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#quests-section .quest-replace-btn:hover {
  background-image: url(../img/ui/buttons/orange-button-hover_left.png), url(../img/ui/buttons/orange-button-hover_center.png), url(../img/ui/buttons/orange-button-hover_right.png);
}
#quests-section .quest-replace-btn:active {
  background-image: url(../img/ui/buttons/orange-button-active_left.png), url(../img/ui/buttons/orange-button-active_center.png), url(../img/ui/buttons/orange-button-active_right.png);
}
#quests-section .quest-replace-btn .quest-text {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 24px;
  text-transform: uppercase;
}
#quests-section .quest-replace-btn .quest-replace-currency-icon {
  margin-right: 4px;
}
#quests-section .quest-replace-btn .quest-button-currency {
  display: flex;
  margin-right: 6px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#quests-section .fixed-quest {
  display: none;
  width: auto;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 10px;
  width: 910px;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/quests/dailies-bar-1.png), url(../img/quests/dailies-bar-2.png), url(../img/quests/dailies-bar-3.png);
  --base-button_height: 46px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  justify-content: unset;
  align-items: unset;
  position: relative;
}
#quests-section .fixed-quest .quest-progress-bar-inner {
  background: #0FBEFA;
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px;
  --base-height: 44px;
  height: calc(var(--base-height) - 6px);
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 2px;
  --border-width: 8px;
  --progress: 0%;
  /*transition: width 0.3s ease-in-out;*/
  width: calc(var(--progress) - var(--border-width));
}
#quests-section .fixed-quest .data-container {
  display: flex;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(50%);
          transform: translateX(-50%) translateY(50%);
}
#quests-section .fixed-quest .data-container .quest-title {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 24px;
}
#quests-section .fixed-quest .data-container .quest-progress-counter {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
}
@media (max-width: 1800px) {
  #quests-section {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #quests-section {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #quests-section {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    margin-top: 118px;
  }
}
@media (max-width: 1550px) {
  #quests-section {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    margin-top: 72px;
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #quests-section {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    margin-top: 29px;
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #quests-section {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
}
#modal-replace-quests .modal-content {
  width: 666px;
  height: 326px;
}
#modal-replace-quests .modal-content .modal-header {
  flex: 0 0 auto;
}
#modal-replace-quests .modal-content .modal-header h2 {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-replace-quests .modal-content .modal-body {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 29px;
}
#modal-replace-quests .modal-content .modal-body .modal-close-btn {
  top: -60px;
  right: -4px;
}
#modal-replace-quests .modal-content .modal-body .modal-replace-time-container {
  margin: auto;
  display: flex;
  width: 500px;
}
#modal-replace-quests .modal-content .modal-body .modal-replace-time-container .modal-time-text {
  width: 417px;
  margin: auto;
  margin-left: 0;
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 24px;
}
#modal-replace-quests .modal-content .modal-body .modal-replace-time-container #modal-replace-timer-container {
  padding: 5px;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/quests/new-quest-bar-1.png), url(../img/quests/new-quest-bar-2.png), url(../img/quests/new-quest-bar-3.png);
  --base-button_height: 46px;
  margin: auto;
  width: 180px;
}
#modal-replace-quests .modal-content .modal-body .modal-replace-time-container #modal-replace-timer-container .time {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 12px;
  line-height: 10px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#modal-replace-quests .modal-content .modal-body .modal-replace-confimation-text {
  width: 500px;
  margin: auto;
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 24px;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons {
  padding-top: 30px;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-button {
  width: 184px;
  background-color: unset;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/green-button-left.png), url(../img/ui/buttons/green-button-center.png), url(../img/ui/buttons/green-button-right.png);
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm:hover {
  background-image: url(../img/ui/buttons/green-button-hover_left.png), url(../img/ui/buttons/green-button-hover_center.png), url(../img/ui/buttons/green-button-hover_right.png);
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm:active {
  background-image: url(../img/ui/buttons/green-button-active_left.png), url(../img/ui/buttons/green-button-active_center.png), url(../img/ui/buttons/green-button-active_right.png);
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm .modal-replace-btn-text {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 24px;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm .modal-replace-btn-text:hover {
  color: #fff;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm .modal-replace-price {
  background-image: url("../img/gui/gems-icon.png");
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: 5px;
  padding-left: 30px;
  margin-left: -7px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm .modal-replace-price:hover {
  color: #fff;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-confirm:hover {
  color: #fff;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-cancel {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/red-button-left.png), url(../img/ui/buttons/red-button-center.png), url(../img/ui/buttons/red-button-right.png);
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 20px;
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-cancel:hover {
  background-image: url(../img/ui/buttons/red-button-hover_left.png), url(../img/ui/buttons/red-button-hover_center.png), url(../img/ui/buttons/red-button-hover_right.png);
}
#modal-replace-quests .modal-content .modal-body .modal-buttons .modal-replace-cancel:active {
  background-image: url(../img/ui/buttons/red-button-active_left.png), url(../img/ui/buttons/red-button-active_center.png), url(../img/ui/buttons/red-button-active_right.png);
}
@media (max-width: 1800px) {
  #modal-replace-quests .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);
            transform: translateX(-50%) translateY(-50%) scale(0.95);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #modal-replace-quests .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
            transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #modal-replace-quests .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85);
            transform: translateX(-50%) translateY(-50%) scale(0.85);
  }
}
@media (max-width: 1550px) {
  #modal-replace-quests .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
            transform: translateX(-50%) translateY(-50%) scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #modal-replace-quests .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
            transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
}
#modal-rewards {
  background: radial-gradient(50% 50% at 50% 50%, rgba(12, 17, 30, 0.8) 66.98%, rgba(12, 17, 30, 0.8) 100%);
}
#modal-rewards .modal-content {
  min-width: 510px;
  width: auto;
  max-width: 910px;
}
#modal-rewards .modal-content .modal-header {
  flex: 0 0 auto;
}
#modal-rewards .modal-content .modal-header .modal-title {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-rewards .modal-content .modal-body #modal-rewards-list {
  display: flex;
  flex-wrap: wrap;
  margin: 11px auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 24px;
  padding-right: 24px;
  margin-bottom: 82px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest {
  position: relative;
  display: flex;
  color: #000000;
  flex-direction: column;
  margin: 0 auto;
  --box-fill-width: 60px;
  --box-fill-height: 60px;
  --box-fill-size: 40px;
  --box-fill-bg-offset: 2px;
  background-image: url(../img/ui/frames/box-fill-1.png), url(../img/ui/frames/box-fill-2.png), url(../img/ui/frames/box-fill-3.png), url(../img/ui/frames/box-fill-4.png), url(../img/ui/frames/box-fill-5.png), url(../img/ui/frames/box-fill-6.png), url(../img/ui/frames/box-fill-7.png), url(../img/ui/frames/box-fill-8.png), url(../img/ui/frames/box-fill-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--box-fill-size) - 1px) 0px, right top, 0px calc(var(--box-fill-size) - 1px), calc(var(--box-fill-size) - 1px) calc(var(--box-fill-size) - 1px), right calc(var(--box-fill-size) - 1px), left bottom, calc(var(--box-fill-size) - 1px) bottom, right bottom;
  background-size: var(--box-fill-size), calc(100% - calc(var(--box-fill-size) * 2) + 2px) var(--box-fill-size), var(--box-fill-size), var(--box-fill-size) calc(100% - calc(var(--box-fill-size) * 2) + 2px), calc(100% - calc(var(--box-fill-size) * 2) + 2px) calc(100% - calc(var(--box-fill-size) * 2) + 2px), var(--box-fill-size) calc(100% - calc(var(--box-fill-size) * 2) + 2px), var(--box-fill-size), calc(100% - calc(var(--box-fill-size) * 2) + 2px) var(--box-fill-size), var(--box-fill-size);
  min-width: var(--box-fill-width);
  min-height: var(--box-fill-size);
  width: var(--box-fill-width);
  height: var(--box-fill-height);
  background-origin: border-box;
  background-color: unset;
  background-image: url(../img/ui/frames/box-fill-border-1.png), url(../img/ui/frames/box-fill-border-2.png), url(../img/ui/frames/box-fill-border-3.png), url(../img/ui/frames/box-fill-border-4.png), url(../img/ui/frames/box-fill-border-5.png), url(../img/ui/frames/box-fill-border-6.png), url(../img/ui/frames/box-fill-border-7.png), url(../img/ui/frames/box-fill-border-8.png), url(../img/ui/frames/box-fill-border-9.png);
  --box-fill-width: 254px;
  --box-fill-height: 359px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-loading-spinner {
  position: absolute;
  right: 0;
  margin: 6px;
  width: 20px;
  height: 20px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-name-container {
  position: relative;
  display: flex;
  width: 179px;
  height: 40px;
  margin: 25px auto;
  margin-bottom: 112px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-name-container .quest-name {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 0px auto;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-progress-counter {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 5px auto;
  margin-top: -2px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  font-size: 30px;
  line-height: 40px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-progress-counter.completed {
  color: #7DFF00;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-progress-bar-outer {
  margin: 0 auto;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/quests/experience-bar-1.png), url(../img/quests/experience-bar-2.png), url(../img/quests/experience-bar-3.png);
  --base-button_height: 10px;
  --default-button-segment-width: 4px !important;
  width: 220px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  position: relative;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-progress-bar-outer .quest-progress-bar-inner {
  background: #0FBEFA;
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px;
  --base-height: 11px;
  height: calc(var(--base-height) - 6px);
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 2px;
  --border-width: 8px;
  --progress: 0%;
  /*transition: width 0.3s ease-in-out;*/
  width: calc(var(--progress) - var(--border-width));
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-progress-bar-outer .quest-progress-bar-inner.completed {
  background-color: #7DFF00;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-difficulty-level {
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-top: 16px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-difficulty-level .difficulty-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-difficulty-level .quest-difficulty-text {
  font-size: 20px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-icon {
  font-family: Edit Undo BRK;
  width: 85px;
  height: 96px;
  font-size: 13px;
  line-height: 14px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: auto auto;
  margin-top: 50px;
  background-image: url(../img/quests/icon-quest-easy.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-icon .quest-completed-icon {
  display: none;
  height: 100%;
  width: 100%;
  padding: 25px;
  background-image: url(../img/quests/quest-ready-icon.png);
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .bound-section {
  width: 208px;
  display: flex;
  margin: auto;
  margin-top: -99px;
  margin-bottom: 101px;
  position: relative;
  pointer-events: none;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .bound-section .hero-bound {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  color: #fff;
  text-align: left;
  position: absolute;
  left: 0;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .bound-section .player-bound {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  color: #fff;
  text-align: left;
  position: absolute;
  right: 0;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards {
  color: #ffffff;
  width: 250px;
  display: flex;
  margin: auto;
  margin-top: 0;
  /*margin-bottom: 53px; New Style removed*/
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-gold-box {
  margin-top: -80px;
  width: 100px;
  display: flex;
  align-items: center;
  margin-right: 19px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-gold-box .quest-reward-gold {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  margin-left: 10px;
  text-align: center;
  width: 100%;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-gold-box.completed {
  background-image: url(../img/quests/reward-complete-box-1.png), url(../img/quests/reward-complete-box-2.png), url(../img/quests/reward-complete-box-3.png);
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-gold-box.completed .gold-icon {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-xp-box {
  width: 100px;
  margin: auto;
  padding: 5px;
  margin-left: 22px;
  margin-top: -80px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/quests/green-box-1-left.png), url(../img/quests/green-box-2-center.png), url(../img/quests/green-box-3-right.png);
  --base-button_height: 46px;
  justify-content: unset;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-xp-box .icon {
  margin-left: 4px;
  background-image: url(../img/quests/exp-icon.png);
  width: 52px;
  height: 30px;
  background-repeat: no-repeat;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-xp-box .quest-reward-xp {
  display: flex;
  justify-content: end;
  align-items: center;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  width: 100%;
  margin-right: 4px;
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-xp-box.completed {
  background-image: url(../img/quests/reward-complete-box-1.png), url(../img/quests/reward-complete-box-2.png), url(../img/quests/reward-complete-box-3.png);
}
#modal-rewards .modal-content .modal-body #modal-rewards-list .quest .quest-rewards .quest-reward-xp-box.completed .icon {
  background-image: url(../img/quests/exp-complete-icon.png);
}
#modal-rewards .modal-content .modal-body #modal-claim-rewards {
  margin: auto;
  margin-top: -45px;
  width: 290px;
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/green-button-left.png), url(../img/ui/buttons/green-button-center.png), url(../img/ui/buttons/green-button-right.png);
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#modal-rewards .modal-content .modal-body #modal-claim-rewards:hover {
  background-image: url(../img/ui/buttons/green-button-hover_left.png), url(../img/ui/buttons/green-button-hover_center.png), url(../img/ui/buttons/green-button-hover_right.png);
}
#modal-rewards .modal-content .modal-body #modal-claim-rewards:active {
  background-image: url(../img/ui/buttons/green-button-active_left.png), url(../img/ui/buttons/green-button-active_center.png), url(../img/ui/buttons/green-button-active_right.png);
}
@media (max-width: 1800px) {
  #modal-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);
            transform: translateX(-50%) translateY(-50%) scale(0.95);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #modal-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
            transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #modal-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.85);
            transform: translateX(-50%) translateY(-50%) scale(0.85);
  }
}
@media (max-width: 1550px) {
  #modal-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
            transform: translateX(-50%) translateY(-50%) scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #modal-rewards .modal-content {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
            transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
}
@-webkit-keyframes slide-down {
  from {
    -webkit-transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
            transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
  }
  to {
    -webkit-transform: translate(var(--transform-x, 0), 0);
            transform: translate(var(--transform-x, 0), 0);
  }
}
@keyframes slide-down {
  from {
    -webkit-transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
            transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
  }
  to {
    -webkit-transform: translate(var(--transform-x, 0), 0);
            transform: translate(var(--transform-x, 0), 0);
  }
}
@-webkit-keyframes slide-up {
  from {
    -webkit-transform: translate(var(--transform-x, 0), 0);
            transform: translate(var(--transform-x, 0), 0);
  }
  to {
    -webkit-transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
            transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
  }
}
@keyframes slide-up {
  from {
    -webkit-transform: translate(var(--transform-x, 0), 0);
            transform: translate(var(--transform-x, 0), 0);
  }
  to {
    -webkit-transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
            transform: translate(var(--transform-x, 0), calc(-100% - var(--slide-y-offset, 0)));
  }
}
.slide-down {
  -webkit-animation: slide-down 0.3s ease-in;
          animation: slide-down 0.3s ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.slide-up {
  -webkit-animation: slide-up 0.1s ease-out;
          animation: slide-up 0.1s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
#start-main-header {
  margin: auto;
  width: 100%;
  position: relative;
  margin-top: 110px;
  z-index: 2;
}
#start-menu-buttons {
  width: 1100px;
  height: 75px;
  position: relative;
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
}
.start-menu-button {
  min-width: 200px;
  height: 38px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 3px;
  position: relative;
}
.start-menu-button span {
  z-index: 2;
}
.start-menu-button .screw {
  position: absolute;
  z-index: 1;
  right: -10px;
}
.start-menu-button.selected::after {
  content: "";
  position: absolute;
  background-image: url(../img/ui/selected-topper.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 84px;
  min-width: 233px;
  z-index: 1;
  top: -27px;
}
.start-menu-button#home-button::before {
  width: 108px;
  height: 110px;
  background-image: url(../img/ui/icons/home-icon.png);
}
.start-menu-button#season-pass-button::before {
  width: 90px;
  height: 102px;
  background-image: url(../img/ui/icons/season-icon.png);
}
.start-menu-button#quests-button::before {
  width: 84px;
  height: 96px;
  background-image: url(../img/ui/icons/quest-icon.png);
}
.start-menu-button#equipment-button::before {
  width: 84px;
  height: 88px;
  background-image: url(../img/ui/icons/armory-icon.png);
}
.start-menu-button#forge-button::before {
  width: 88px;
  height: 76px;
  background-image: url(../img/ui/icons/forge-icon.png);
}
.start-menu-button#shop-button::before {
  width: 88px;
  height: 92px;
  background-image: url(../img/ui/icons/shop-icon.png);
}
.start-menu-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  display: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  z-index: 3;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
}
.start-menu-button.selected::before,
.start-menu-button:hover::before {
  display: block;
}
.start-menu-button:hover:not(.selected)::before {
  opacity: 0.7;
}
.rusty-window-lg {
  --frame-box-width: 60px;
  --frame-box-height: 60px;
  --frame-box-size: 110px;
  background-image: url(../img/ui/frames/basic-frame-seg-01.png), url(../img/ui/frames/basic-frame-seg-02.png), url(../img/ui/frames/basic-frame-seg-03.png), url(../img/ui/frames/basic-frame-seg-04.png), url(../img/ui/frames/basic-frame-seg-05.png), url(../img/ui/frames/basic-frame-seg-06.png), url(../img/ui/frames/basic-frame-seg-07.png), url(../img/ui/frames/basic-frame-seg-08.png), url(../img/ui/frames/basic-frame-seg-09.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--frame-box-size) - 1px) 0px, right top, 0px calc(var(--frame-box-size) - 1px), calc(var(--frame-box-size) - 1px) calc(var(--frame-box-size) - 1px), right calc(var(--frame-box-size) - 1px), left bottom, calc(var(--frame-box-size) - 1px) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), calc(100% - calc(var(--frame-box-size) * 2) + 2px) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  aspect-ratio: 1.86;
  position: absolute;
  left: 0;
  top: 0;
  padding: 40px 40px;
  --frame-box-width: 930px;
  --frame-box-height: 500px;
}
.rusty-window-lg.rare {
  background-image: url(../img/ui/frames/rare-frame-seg-1.png), url(../img/ui/frames/rare-frame-seg-2.png), url(../img/ui/frames/rare-frame-seg-3.png), url(../img/ui/frames/rare-frame-seg-4.png), url(../img/ui/frames/rare-frame-seg-5.png), url(../img/ui/frames/rare-frame-seg-6.png), url(../img/ui/frames/rare-frame-seg-7.png), url(../img/ui/frames/rare-frame-seg-8.png), url(../img/ui/frames/rare-frame-seg-9.png);
}
.rusty-window-lg.epic {
  background-image: url(../img/ui/frames/epic-frame-seg-1.png), url(../img/ui/frames/epic-frame-seg-2.png), url(../img/ui/frames/epic-frame-seg-3.png), url(../img/ui/frames/epic-frame-seg-4.png), url(../img/ui/frames/epic-frame-seg-5.png), url(../img/ui/frames/epic-frame-seg-6.png), url(../img/ui/frames/epic-frame-seg-7.png), url(../img/ui/frames/epic-frame-seg-8.png), url(../img/ui/frames/epic-frame-seg-9.png);
}
.rusty-window-lg.legendary {
  background-image: url(../img/ui/frames/legendary-frame-seg-1.png), url(../img/ui/frames/legendary-frame-seg-2.png), url(../img/ui/frames/legendary-frame-seg-3.png), url(../img/ui/frames/legendary-frame-seg-4.png), url(../img/ui/frames/legendary-frame-seg-5.png), url(../img/ui/frames/legendary-frame-seg-6.png), url(../img/ui/frames/legendary-frame-seg-7.png), url(../img/ui/frames/legendary-frame-seg-8.png), url(../img/ui/frames/legendary-frame-seg-9.png);
}
.window-tabs-container {
  position: absolute;
  top: 42px;
  left: 56px;
  z-index: 2;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  display: flex;
  gap: 10px;
}
.currency-icon-lg {
  --icon-size: 48px;
  background-image: url(../img/ui/icons/currency-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
}
.chest-icon-lg {
  --icon-size: 48px;
  background-image: url(../img/ui/icons/chest-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
}
.battlegor-icon-lg {
  --icon-size: 48px;
  background-image: url(../img/ui/icons/battlegor-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
}
.upgrade-icon-lg {
  --icon-size: 48px;
  background-image: url(../img/ui/upgrade_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
}
.craft-icon-lg {
  --icon-size: 48px;
  background-image: url(../img/ui/craft_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
}
.distill-icon-lg {
  --icon-size: 48px;
  background-image: url(../img/ui/icons/distill-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.armory-icon-lg {
  --icon-width: 84px;
  --icon-height: 88px;
  background-image: url(../img/ui/icons/armory-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  display: inline-block;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.window-tab:hover .currency-icon-lg {
  background-image: url(../img/ui/icons/currency-icon-hover.png);
}
.window-tab:active .currency-icon-lg {
  background-image: url(../img/ui/icons/currency-icon-active.png);
}
.window-tab:hover .chest-icon-lg {
  background-image: url(../img/ui/icons/chest-icon-hover.png);
}
.window-tab:active .chest-icon-lg {
  background-image: url(../img/ui/icons/chest-icon-active.png);
}
.window-tab:hover .upgrade-icon-lg {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}
.window-tab:active .upgrade-icon-lg {
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
}
.window-tab:hover .craft-icon-lg {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}
.window-tab:active .craft-icon-lg {
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
}
.window-tab:hover .distill-icon-lg {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}
.window-tab:active .distill-icon-lg {
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
}
.window-tab_icon {
  --icon-size: 48px;
}
.window-tab_name {
  display: none;
}
.window-tab {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/ui/frames/frame-tab-close.png);
  height: 80px;
  width: 80px;
  background-repeat: no-repeat;
}
.window-tab.selected {
  width: 160px;
  background-image: url(../img/ui/frames/frame-tab-open.png);
  background-position-y: -1.8px;
}
.window-tab.selected .window-tab_name {
  display: block;
}
.rusty-window-container {
  --slide-y-offset: 140px;
  --transform-x: -50%;
  width: 930px;
  height: 500px;
  position: absolute;
  top: var(--slide-y-offset);
  left: 50%;
  -webkit-transform: translate(var(--transform-x), 0);
          transform: translate(var(--transform-x), 0);
}
.rusty-window-container::before,
.rusty-window-container::after {
  content: '';
  --chain-tiles: 4;
  --chain-height: 40px;
  background-image: url(../img/ui/frames/rope-seg.png);
  background-repeat: repeat-y;
  position: absolute;
  width: 44px;
  height: calc(var(--chain-tiles) * var(--chain-height));
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  background-size: 25px;
}
.rusty-window-container::before {
  left: 22px;
  top: 4px;
}
.rusty-window-container::after {
  right: 4px;
  top: 2px;
}
.window-modal-on-enter {
  -webkit-animation: slide-down 0.3s ease-in;
          animation: slide-down 0.3s ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.window-modal-on-exit {
  -webkit-animation: slide-up 0.1s ease-out;
          animation: slide-up 0.1s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.start-windows-container {
  height: 100vh;
  position: relative;
  width: 100%;
  margin-top: -10px;
}
#home-section {
  display: block;
  margin-top: 120px;
}
#animated-loadout {
  height: 280px;
  margin-bottom: 40px;
  justify-content: center;
  align-items: center;
  display: flex;
}
#animated-loadout .nft-card {
  position: absolute;
  top: -10%;
  left: 36%;
}
#animated-loadout .nft-card .nft-frame {
  position: absolute;
  top: 0;
}
#animated-loadout .nft-card .nft-gen {
  position: absolute;
  top: 0;
}
#player-armory-container .nft-card {
  position: absolute;
  top: 0%;
  left: 20%;
  -webkit-transform: scale(0.74);
          transform: scale(0.74);
}
#player-armory-container .nft-card .nft-frame {
  position: absolute;
  top: 0;
}
#player-armory-container .nft-card .nft-gen {
  position: absolute;
  top: 0;
}
#slideshow-streaming-box {
  width: 212px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
}
#slideshow-streaming-box .slide {
  width: 212px;
  height: 300px;
}
.slideshow-banners .slide {
  display: none;
  text-align: center;
}
.slideshow-banners .slide.active {
  display: block;
}
.slideshow-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  margin-top: 10px;
}
.slideshow-dot {
  background-image: url(../img/ui/icons/slideshow-dot.png);
  background-repeat: no-repeat;
  width: 12px;
  height: 10px;
}
.slideshow-dot.active {
  background-image: url(../img/ui/icons/slideshow-dot-active.png);
  background-repeat: no-repeat;
  width: 12px;
  height: 10px;
}
#streamers-box {
  background-image: url(../img/ui/frames/stream-box-2.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 282px;
  height: 380px;
  right: 40px;
  top: 253px;
  padding: 40px 24px;
}
@media (max-width: 1800px) {
  #streamers-box {
    -webkit-transform: translateX(-20%) translateY(0%) scale(1);
            transform: translateX(-20%) translateY(0%) scale(1);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #streamers-box {
    -webkit-transform: translateX(-20%) translateY(0%) scale(0.9);
            transform: translateX(-20%) translateY(0%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #streamers-box {
    -webkit-transform: translateX(-20%) translateY(-20%) scale(0.8);
            transform: translateX(-20%) translateY(-20%) scale(0.8);
  }
}
@media (max-width: 1550px) {
  #streamers-box {
    -webkit-transform: translateX(22%) translateY(-30%) scale(0.7);
            transform: translateX(22%) translateY(-30%) scale(0.7);
  }
}
@media (max-width: 1440px) and (min-width: 1400px) {
  #streamers-box {
    top: 300px;
  }
}
@media (max-width: 1300px) {
  #streamers-box {
    -webkit-transform: translateX(30%) translateY(-35%) scale(0.6);
            transform: translateX(30%) translateY(-35%) scale(0.6);
  }
}
@media (max-width: 1280px) {
  #streamers-box {
    -webkit-transform: translateX(30%) translateY(-50%) scale(0.55);
            transform: translateX(30%) translateY(-50%) scale(0.55);
  }
}
@media (max-width: 1050px) {
  #streamers-box {
    -webkit-transform: translateX(30%) translateY(-60%) scale(0.5);
            transform: translateX(30%) translateY(-60%) scale(0.5);
  }
}
#streamers-box_header {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#streamers-box_container {
  overflow-y: auto;
  width: 100%;
  height: 234px;
  padding: 20px 10px;
  margin-top: 11px;
}
#streamers-box_container #streamers-box_list {
  width: 100%;
  padding-right: 40px;
  left: 18px;
  position: absolute;
}
#streamers-box_container .streamer_list_item {
  margin-bottom: 10px;
}
#town-square-box-panel {
  position: absolute;
  left: 46px;
  top: 253px;
}
@media (max-width: 1800px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-20%) translateY(0%) scale(1);
            transform: translateX(-20%) translateY(0%) scale(1);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-20%) translateY(0%) scale(0.9);
            transform: translateX(-20%) translateY(0%) scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-20%) translateY(-20%) scale(0.8);
            transform: translateX(-20%) translateY(-20%) scale(0.8);
  }
}
@media (max-width: 1550px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-5%) translateY(-60%) scale(0.8);
            transform: translateX(-5%) translateY(-60%) scale(0.8);
  }
}
@media (max-width: 1400px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-11%) translateY(-60%) scale(0.75);
            transform: translateX(-11%) translateY(-60%) scale(0.75);
  }
}
@media (max-width: 1440px) and (min-width: 1400px) {
  #town-square-box-panel {
    top: 300px;
  }
}
@media (max-width: 1300px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-17%) translateY(-70%) scale(0.65);
            transform: translateX(-17%) translateY(-70%) scale(0.65);
    top: 253px;
  }
}
@media (max-width: 1280px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-19%) translateY(-90%) scale(0.6);
            transform: translateX(-19%) translateY(-90%) scale(0.6);
  }
}
@media (max-width: 1050px) {
  #town-square-box-panel {
    -webkit-transform: translateX(-23%) translateY(-90%) scale(0.55);
            transform: translateX(-23%) translateY(-90%) scale(0.55);
  }
}
#town-square-box-panel .red-ribbon {
  position: absolute;
  height: 146px;
  width: 145px;
  top: -6px;
  left: -6px;
}
#town-square-box-panel .red-ribbon span {
  margin-left: 0px;
  margin-top: 33px;
}
#modal-news .modal-content {
  width: 752px;
  height: 500px;
  padding-left: 56px;
  padding-top: 56px;
  padding-right: 20px;
  padding-bottom: 30px;
}
#modal-news .modal-body {
  height: 100%;
}
#modal-news .border-bar {
  width: 100%;
}
#modal-news #news {
  margin-right: 14px;
}
#news-block {
  overflow-y: auto;
  max-height: 100%;
}
#news-block .border-bar {
  width: 100%;
}
#news-block .news-img-banner {
  margin: auto;
  width: 100%;
  content: url(../img/news-banner.png);
}
#news-block .news-block {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
#news-block .news-block-header {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  margin-top: 20px;
}
#news-block .news-block-date {
  font-size: 15px;
  line-height: 20px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#news-block .news-block-paragraph {
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  margin-top: 11px;
}
#shop-currency-section {
  width: 100%;
  height: 100%;
}
#shop-iap-pack-list {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.gems-pack {
  background-image: url(../img/ui/boxes/gold-window-small.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 150px;
  height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
#shop-chests-section {
  height: 104%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#shop-chests-description {
  margin-top: 15px;
  text-align: right;
  padding-right: 35px;
}
.gems-pack_currency-icon {
  --gems-icon-width: 22px;
  --gems-icon-height: 28px;
}
.gems-pack_currency-container {
  position: relative;
  height: 120px;
  display: flex;
  flex-direction: column;
}
.gems-pack_currency-container img {
  height: 100%;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  bottom: 25px;
  position: relative;
}
.gems-pack_currency-container .gems-currency-box {
  position: absolute;
  bottom: -18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.gems-pack_buy-btn {
  min-width: 120px;
  z-index: 1;
  position: absolute;
  bottom: -50px;
}
.gems-bound-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  text-transform: uppercase;
  color: #FFFF00;
  font-size: 15px;
  line-height: 24px;
  position: relative;
  bottom: 50px;
  margin: auto;
}
.shop-rarity-chest,
.shop-box {
  width: 252px;
  height: 314px;
  background-image: url(../img/ui/shop/neutral-chest-window.png);
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.shop-rarity-chest.rare,
.shop-box.rare {
  background-image: url(../img/ui/shop/rare-chest-window.png);
}
.shop-rarity-chest.epic,
.shop-box.epic {
  background-image: url(../img/ui/shop/epic-chest-window.png);
}
.shop-rarity-chest.legendary,
.shop-box.legendary {
  background-image: url(../img/ui/shop/legendary-chest-window.png);
}
.shop-box {
  margin-top: 36px;
}
.shop-rarity-chest_info-btn {
  position: absolute;
  right: 7px;
  top: 5px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.shop-rarity-chest_watch-ad-btn,
.shop-rarity-chest_buy-btn,
.shop-battlegor-_buy-btn {
  min-width: 184px;
  margin-bottom: 14px;
}
.shop-rarity-chest_watch-ad-btn .gems-icon,
.shop-rarity-chest_buy-btn .gems-icon,
.shop-battlegor-_buy-btn .gems-icon {
  margin-left: 5px;
  margin-right: 9px;
}
.offerwall-img-container {
  height: 120px;
  position: relative;
  width: 100%;
}
.offerwall-img-container img {
  position: relative;
  left: 37%;
  top: 20%;
  bottom: 0;
  -webkit-transform: scale(2.5);
          transform: scale(2.5);
}
.shop-rarity-chest_img-container {
  height: 160px;
  position: relative;
  width: 100%;
}
.shop-rarity-chest_img-container img {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.shop-rarity-chest_name {
  margin-top: 19px;
  margin-bottom: 5px;
}
#shop-chests-list {
  display: flex;
  gap: 23px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow-x: scroll;
  flex-wrap: wrap;
}
#shop-chests-list::-webkit-scrollbar {
  width: 23px;
  height: 23px;
}
#shop-chests-list::-webkit-scrollbar-button:single-button {
  height: 20px;
  width: 18px;
}
#shop-chests-list::-webkit-scrollbar-track {
  background: transparent;
  border: 3px solid #000;
  border-left: unset;
  border-right: unset;
  border-radius: 0px;
}
#shop-chests-list::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url(../img/ui/buttons/arrow-scroll-right-button.png);
  background-repeat: no-repeat;
}
#shop-chests-list::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url(../img/ui/buttons/arrow-scroll-left-button.png);
  background-repeat: no-repeat;
}
.info-button {
  --button-width: 54px;
  --button-height: 54px;
  background-image: url(../img/ui/buttons/info-button-common.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-width);
  height: var(--button-height);
}
.info-button:hover {
  background-image: url(../img/ui/buttons/info-button-common_hover.png);
}
.info-button:active {
  background-image: url(../img/ui/buttons/info-button-common_active.png);
}
.info-button.rare {
  background-image: url(../img/ui/buttons/info-button-rare.png);
}
.info-button.rare:hover {
  background-image: url(../img/ui/buttons/info-button-rare_hover.png);
}
.info-button.rare:active {
  background-image: url(../img/ui/buttons/info-button-rare_active.png);
}
.info-button.epic {
  background-image: url(../img/ui/buttons/info-button-epic.png);
}
.info-button.epic:hover {
  background-image: url(../img/ui/buttons/info-button-epic_hover.png);
}
.info-button.epic:active {
  background-image: url(../img/ui/buttons/info-button-epic_active.png);
}
.info-button.legendary {
  background-image: url(../img/ui/buttons/info-button-legendary.png);
}
.info-button.legendary:hover {
  background-image: url(../img/ui/buttons/info-button-legendary_hover.png);
}
.info-button.legendary:active {
  background-image: url(../img/ui/buttons/info-button-legendary_active.png);
}
.rarity-text-fill {
  --text-fill-width: 96px;
  --text-fill-height: 32px;
  background-image: url(../img/ui/boxes/common-text-fill-left.png), url(../img/ui/boxes/common-text-fill-center.png), url(../img/ui/boxes/common-text-fill-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--text-fill-height) 0px, right 0px;
  background-size: var(--text-fill-height) var(--text-fill-height), calc(100% - calc(var(--text-fill-height) * 2)) var(--text-fill-height), var(--text-fill-height) var(--text-fill-height);
  min-width: calc(var(--text-fill-height) * 3 + 1px);
  width: var(--text-fill-width);
  height: var(--text-fill-height);
  background-origin: border-box;
  background-color: unset;
}
.rarity-text-fill.rare {
  background-image: url(../img/ui/boxes/rare-text-fill-left.png), url(../img/ui/boxes/rare-text-fill-center.png), url(../img/ui/boxes/rare-text-fill-right.png);
}
.rarity-text-fill.epic {
  background-image: url(../img/ui/boxes/epic-text-fill-left.png), url(../img/ui/boxes/epic-text-fill-center.png), url(../img/ui/boxes/epic-text-fill-right.png);
}
.rarity-text-fill.legendary {
  background-image: url(../img/ui/boxes/legendary-text-fill-left.png), url(../img/ui/boxes/legendary-text-fill-center.png), url(../img/ui/boxes/legendary-text-fill-right.png);
}
#rarity-chest-info-modal .modal-content {
  width: 910px;
  height: 500px;
}
#rarity-chest-info-modal .modal-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  gap: 18px;
}
#rarity-chest-info-modal_list {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
}
#rarity-chest-info-modal_items {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 90px;
  width: 100%;
  height: 100%;
  gap: 4px;
}
#rarity-chest-info-modal_odds {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
#rarity-chest-info-modal_ok-btn {
  width: 184px;
}
.rarity-chest-item {
  min-width: 88px;
  width: 88px;
  height: 90px;
  padding: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/pass/item-background-common.png);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rarity-chest-item.rare {
  background-image: url(../img/pass/item-background-rare.png);
}
.rarity-chest-item.epic {
  background-image: url(../img/pass/item-background-epic.png);
}
.rarity-chest-item.legendary {
  background-image: url(../img/pass/item-background-legendary.png);
}
.gear-card-item-small_img {
  height: auto;
  width: 100%;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.rarity-chest-info-odd-text {
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  font-size: 12px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
.rarity-chest-bar {
  width: 10px;
  height: 24px;
  background-image: url(../img/ui/frames/exp-h-bar-common.png);
  background-repeat: no-repeat;
}
.rarity-chest-bar.rare {
  background-image: url(../img/ui/frames/exp-h-bar-rare.png);
}
.rarity-chest-bar.epic {
  background-image: url(../img/ui/frames/exp-h-bar-epic.png);
}
.rarity-chest-bar.legendary {
  background-image: url(../img/ui/frames/exp-h-bar-legendary.png);
}
#insufficient-gold-modal .modal-close-btn {
  top: 5px;
  right: -60px;
}
#insufficient-gold-modal .modal-body {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 220px;
  gap: 40px;
}
#insufficient-gold-modal .modal-content {
  width: 666px;
  height: 326px;
}
#insufficient-gold-modal .buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#insufficient-gold-modal button {
  width: 184px;
}
#insufficient-gold-modal .text-container {
  max-width: 264px;
}
#insufficient-gold-modal .text-container span {
  color: #E0E0E0;
  font-size: 12px;
  line-height: 24px;
  text-shadow: none;
}
.insufficient-gold-modal_img-container {
  min-width: 160px;
  position: relative;
}
.insufficient-gold-modal_img-container .insufficient-gold-modal_gems {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 160px;
}
.insufficient-gold-modal_img-container .insufficient-gold-modal_denied {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 100px;
}
#insufficient-required-gems {
  display: flex;
  align-items: center;
  justify-content: center;
  --text-fill-height: 32px;
}
.insufficient-required-gems-text-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  --text-fill-height: 32px;
  width: auto;
  padding: 0 10px;
}
.inline {
  display: inline-block;
}
.insufficient-gems-part-3 {
  margin-top: 20px;
  display: block;
}
.chest-rarity-text-fill-subtitle {
  position: absolute;
  top: 46px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  font-size: 24px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  text-transform: uppercase;
  color: #FFFF00;
}
.shop-battlegor-box-img {
  height: auto;
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  background-image: url(../img/ui/shop/battlegor-shop-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.shop-battlegor-box-img.disable {
  background-image: url(../img/ui/shop/battlegor-shop-icon-disable.png);
}
#shop-battlegor-button span {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.battlegor-shop-desc {
  font-size: 30px;
  line-height: 40px;
  padding-top: 13px;
  padding-bottom: 4px;
  color: #42FC54;
}
.battlegor-shop-desc-2 {
  background-image: url(../img/ui/shop/shop-box-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 240px;
  min-height: 96px;
  position: relative;
  margin-bottom: 4px;
}
.battlegor-shop-desc-2 span {
  font-size: 24px;
  line-height: 27px;
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  margin: 0 auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.box-fill-armory {
  --box-fill-width: 365px;
  --box-fill-height: 370px;
}
.loadout-armor-info-tabs-buttons {
  gap: 12px;
}
.equip-gear-box {
  margin-bottom: 25px;
}
.armory-tab-base {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/ui/frames/armory-tab.png);
  height: 32px;
  width: 108px;
}
.armory-tab-base.selected {
  background-image: url(../img/ui/frames/armory-tab-selected.png);
}
.armory-tab-base:hover {
  background-image: url(../img/ui/frames/armory-tab-hover.png);
}
.armory-tab-base.bg-common {
  background-image: url(../img/ui/frames/armory-tab-common.png);
}
.armory-tab-base.bg-common:hover {
  background-image: url(../img/ui/frames/armory-tab-common-hover.png);
}
.armory-tab-base.bg-common.selected {
  background-image: url(../img/ui/frames/armory-tab-common-selected.png);
}
.armory-tab-base.bg-rare {
  background-image: url(../img/ui/frames/armory-tab-rare.png);
}
.armory-tab-base.bg-rare:hover {
  background-image: url(../img/ui/frames/armory-tab-rare-hover.png);
}
.armory-tab-base.bg-rare.selected {
  background-image: url(../img/ui/frames/armory-tab-rare-selected.png);
}
.armory-tab-base.bg-epic {
  background-image: url(../img/ui/frames/armory-tab-epic.png);
}
.armory-tab-base.bg-epic:hover {
  background-image: url(../img/ui/frames/armory-tab-epic-hover.png);
}
.armory-tab-base.bg-epic.selected {
  background-image: url(../img/ui/frames/armory-tab-epic-selected.png);
}
.armory-tab-base.bg-legendary {
  background-image: url(../img/ui/frames/armory-tab-legendary.png);
}
.armory-tab-base.bg-legendary:hover {
  background-image: url(../img/ui/frames/armory-tab-legendary-hover.png);
}
.armory-tab-base.bg-legendary.selected {
  background-image: url(../img/ui/frames/armory-tab-legendary-selected.png);
}
.armory-info-pane-img-container {
  display: flex;
  background-image: url(../img/ui/boxes/windon-rarity.png);
  height: 200px;
  width: 348px;
  border: none;
}
.armory-info-pane-img-container.box-common {
  background-image: url(../img/ui/boxes/windon-rarity-common.png);
}
.armory-info-pane-img-container.box-rare {
  background-image: url(../img/ui/boxes/windon-rarity-rare.png);
}
.armory-info-pane-img-container.box-epic {
  background-image: url(../img/ui/boxes/windon-rarity-epic.png);
}
.armory-info-pane-img-container.box-legendary {
  background-image: url(../img/ui/boxes/windon-rarity-legendary.png);
}
#armory_gear_card-equipped_gear {
  background-image: url(../img/ui/boxes/border-box-xl.png);
  width: 348px;
  height: 328px;
  padding: 14px;
  border: none;
}
.armory-info-pane-img-name {
  position: absolute;
  bottom: 26px;
  --width: 336px;
  --min-height: 28px;
  --fill-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.canvas-container {
  position: absolute;
  height: calc(73% - var(--image-height-offset, 0px));
  margin: 0 auto;
}
#armory_gear_card-upgrade_btn_container,
#armory_gear_card-melt_btn,
#armory_gear_card-unlock_btn,
#armory_gear_card-shop_btn,
#armory_gear_card-upgrade_btn {
  width: 160px;
}
.gear-upgrade-cost-container {
  --text-fill-height: 32px;
  width: 152px;
  position: absolute;
  top: calc(100% - 3px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#armory_gear_card-shop_btn,
#armory-sort-by {
  display: none;
}
.armory_gear_card-modifiers {
  position: absolute;
  top: 8px;
  left: 8px;
  padding-right: 8px;
  display: flex;
  width: calc(100% - 8px);
  justify-content: space-between;
}
.armory_gear_card-modifiers .prefixes,
.armory_gear_card-modifiers .suffixes {
  display: flex;
}
#armory-sort-by,
.sortby-select-button {
  text-indent: 45px;
  display: block;
  text-overflow: '';
  width: 193px;
  height: 43px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: transparent url(../img/gui/select-armory.png) no-repeat center;
}
#armory-sort-by:hover,
.sortby-select-button:hover {
  background: transparent url(../img/gui/select-armory-hover.png) no-repeat center;
}
#armory-sort-by:active,
.sortby-select-button:active {
  background: transparent url(../img/gui/select-armory-active.png) no-repeat center;
}
#armory-sort-by * {
  color: #000000;
}
#armory-speech-bubble {
  position: absolute;
  top: 14%;
  left: 60%;
  z-index: 2;
}
#armory-speech-bubble .speech-bubble-container {
  height: 110px;
}
.armory-info-pane .gear-perk-line,
.equip-gear-box .gear-perk-line {
  margin-bottom: 7px;
}
.armory-info-pane .gear-perk-line .perk-unlocked-icon,
.equip-gear-box .gear-perk-line .perk-unlocked-icon,
.armory-info-pane .gear-perk-line .perk-locked-icon,
.equip-gear-box .gear-perk-line .perk-locked-icon,
.armory-info-pane .gear-perk-line :first-child,
.equip-gear-box .gear-perk-line :first-child {
  margin-right: 10px;
}
.armory-info-pane .gear-perk-line .modifier-box,
.equip-gear-box .gear-perk-line .modifier-box,
.armory-info-pane .gear-perk-line .perk-text-container > :first-child,
.equip-gear-box .gear-perk-line .perk-text-container > :first-child,
.armory-info-pane .gear-perk-line .perk-text,
.equip-gear-box .gear-perk-line .perk-text {
  font-size: 15px;
}
#armory-pet-info-container .base-button {
  padding: 0 15px;
  text-transform: uppercase;
}
#armory_pet_card-hatch_btn {
  min-width: 150px;
}
#armory_pet_card-fuse_btn {
  display: flex;
  justify-content: center;
}
#armory_pet_card-fuse_btn .armory_pet_card-fuse-number-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  bottom: -28px;
  position: absolute;
}
#armory_pet_card-fuse_btn .armory_pet_card-fuse-number-container #armory_pet_card-fuse-text {
  position: relative;
  color: white;
  font-size: 15px;
  line-height: 16px;
  font-family: Edit Undo BRK;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#armory_pet_card-fuse_btn .armory_pet_card-fuse-number-container .armory_pet_card-fuse-fill-bar {
  top: 0;
  left: 0;
  height: 100%;
  position: absolute;
  background: linear-gradient(180deg, #0A9FD1 0%, #085A76 100%);
}
#armory_pet_card-materials_btn {
  font-size: 10px;
}
.pet_edit_name-container {
  width: 100%;
}
.pet_edit_name-container .pet_edit_name-buttons {
  right: 0;
  bottom: 34px;
  position: absolute;
}
.pet_edit_name-container .pet_edit_name-buttons span {
  background-position: center;
}
.pet_edit_name-text-container {
  display: flex;
  width: 100%;
  justify-content: center;
}
.pet_edit_name-text-container .bubble-gray-button {
  --button-width: 40px;
  --button-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 5px;
  bottom: -5px;
  position: absolute;
}
.pet_edit_name-text-container .edit-icon {
  width: 20px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/icons/edit-icon.png);
}
.pet_edit_name-text-container .speech-bubble-message {
  top: 28px;
  width: 100%;
  position: absolute;
  z-index: 2;
}
.pet_edit_name-label,
.pet_edit_name-input {
  font-size: 20px;
  line-height: 20px;
  font-family: Edit Undo BRK;
  background-color: unset;
}
.pet_stats-list-container,
.pet_materials-list-container {
  display: flex;
  height: 130px;
  justify-content: space-evenly;
}
.pet_materials-list-container {
  height: 90px;
}
.pet_material_wrapper-title {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  margin-top: -5px;
  margin-bottom: 5px;
  color: white;
  font-size: 15px;
  line-height: 15px;
  font-family: Edit Undo BRK;
}
.pet_stat-container,
.pet_material-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pet_stat-img-container,
.pet_material-img-container {
  position: relative;
}
.pet_stat-img {
  width: 100%;
  height: auto;
}
.pet_material-img {
  width: 52px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.pet_stat-img-container::after,
.pet_material-img-container::after {
  content: '';
  width: 27px;
  height: 27px;
  background: url('../img/ui/buttons/button-info-icon.png');
  background-size: contain;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  top: -14px;
  right: -24px;
  position: absolute;
}
.pet_stat-img-container::after:hover,
.pet_material-img-container::after:hover {
  background: url('../img/ui/buttons/button-info-icon-hover.png');
}
.pet_stat-img-container::after:active,
.pet_material-img-container::after:active {
  background: url('../img/ui/buttons/button-info-icon-active.png');
}
.pet_stat-img-container:hover::after,
.pet_material-img-container:hover::after {
  background: url('../img/ui/buttons/button-info-icon-hover.png');
}
.pet_stat-img-container:active::after,
.pet_material-img-container:active::after {
  background: url('../img/ui/buttons/button-info-icon-active.png');
}
.pet_material-img-container::after {
  top: -8px;
}
.pet_stat-img-container.no-after::after,
.pet_material-img-container.no-after::after {
  content: none;
}
.pet_stat-name,
.pet_material-name {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 16px;
  font-family: Edit Undo BRK;
  color: #F2F2F2;
}
.pet_stat-lvl-bar {
  --width: 94px;
  position: relative;
}
.pet_stat-lvl-bar .pet_stat-background-bar {
  --bar-width: 94px;
  --bar-segment-size: 24px;
  background-image: url(../img/ui/frames/stat-bar-left.png), url(../img/ui/frames/stat-bar-center.png), url(../img/ui/frames/stat-bar-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--bar-segment-size) - 2px) 0px, right 0px;
  background-size: var(--bar-segment-size) var(--bar-segment-size), calc(100% - var(--bar-segment-size) * 2 + 4px) var(--bar-segment-size), var(--bar-segment-size) var(--bar-segment-size);
  min-width: calc(var(--bar-segment-size) * 2 + 1px);
  width: var(--bar-width);
  height: var(--bar-segment-size);
  background-origin: border-box;
  background-color: unset;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  --bar-width: var(--width);
  z-index: 1;
  position: relative;
}
.pet_stat-lvl-bar .pet_stat-inner-lvl-list {
  padding: 6px;
  display: flex;
  top: 0;
  z-index: 0;
  position: absolute;
}
.pet_stat-lvl-bar.medium {
  --width: 113px;
}
.pet_stat-lvl-bar.medium .pet_stat-lvl-section {
  --icon-width: 12px;
  background-image: url('../img/ui/icons/stat-level-element-m.png');
}
.pet_stat-lvl-bar.large {
  --width: 133px;
}
.pet_stat-lvl-bar.large .pet_stat-lvl-section {
  --icon-width: 14px;
  background-image: url('../img/ui/icons/stat-level-element-l.png');
}
.pet_stat-lvl-section {
  --icon-width: 10px;
  --icon-height: 10px;
  margin-right: -2px;
  width: var(--icon-width);
  height: var(--icon-height);
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../img/ui/icons/stat-level-element.png');
}
.pet_stat-lvl-section.medium {
  --icon-width: 12px;
  background-image: url('../img/ui/icons/stat-level-element-m.png');
}
.pet_stat-lvl-section.large {
  --icon-width: 14px;
  background-image: url('../img/ui/icons/stat-level-element-l.png');
}
.pet_stat-lvl-section.active {
  background-color: #0FBEFA;
}
.pet_stat-lvl-text {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  margin-top: 1px;
  font-size: 9px;
  line-height: 16px;
  font-family: Amiga Forever;
  color: #F2F2F2;
}
#modal-pet-stats .modal-content,
#modal-category-materials .modal-content {
  width: 665px;
  height: auto;
  padding-bottom: 30px;
  max-height: 778px;
}
#modal-pet-stats .modal-content .modal-main-container,
#modal-category-materials .modal-content .modal-main-container {
  max-height: 650px;
  margin-bottom: 20px;
}
#modal-pet-stats .red-ribbon,
#modal-category-materials .red-ribbon {
  display: none;
}
#modal-pet-stats .modal-button,
#modal-category-materials .modal-button {
  min-width: 160px;
}
.pet_stat_modal-desc-container,
.category_materials_modal-desc-container {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
  color: white;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
.pet_stat_modal-image {
  width: auto;
  height: 125px;
  padding-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.category_materials_modal-image {
  width: 104px;
  height: 120px;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.pet_stat_modal-desc,
.category_materials_modal-desc {
  max-width: 350px;
  font-size: 12px;
  line-height: 20px;
  font-family: Amiga Forever;
}
.pet_stat_modal-level-table-container,
.category_materials_modal-table-container {
  overflow: auto;
  max-height: 500px;
}
.pet_stat_modal-level-table-container table,
.category_materials_modal-table-container table {
  height: 1px;
  width: 390px;
  margin: auto;
}
.pet_stat_modal-level-table-container th,
.category_materials_modal-table-container th {
  position: relative;
  text-align: center;
  padding: 5px 0;
  font-size: 20px;
  line-height: 20px;
  font-weight: normal;
  font-family: Edit Undo BRK;
  --box-width: 142px;
  --box-height: 32px;
  --segment-size: 20px;
  background-image: url(../img/ui/boxes/table-grid-1.png), url(../img/ui/boxes/table-grid-2.png), url(../img/ui/boxes/table-grid-3.png), url(../img/ui/boxes/table-grid-4.png), url(../img/ui/boxes/table-grid-5.png), url(../img/ui/boxes/table-grid-6.png), url(../img/ui/boxes/table-grid-7.png), url(../img/ui/boxes/table-grid-8.png), url(../img/ui/boxes/table-grid-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ left var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ left calc(100% + 2px), /*8*/ calc(var(--segment-size) - 2px) calc(100% + 2px), /*9*/ right calc(100% + 2px);
  background-size: var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ var(--segment-size) calc(var(--segment-size) + 4px), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(var(--segment-size) + 4px), /*9*/ var(--segment-size) calc(var(--segment-size) + 4px);
  min-height: var(--segment-size);
  min-width: calc(var(--segment-size) * 3);
  width: var(--box-width);
  height: var(--box-height);
  background-color: unset;
  background-origin: border-box;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  padding-bottom: 3px;
}
.pet_stat_modal-level-table-container td,
.category_materials_modal-table-container td {
  padding: 10px 0;
  text-align: center;
  font-size: 9px;
  line-height: 10px;
  font-family: Amiga Forever;
  --box-width: 142px;
  --box-height: 32px;
  --segment-size: 20px;
  background-image: url(../img/ui/boxes/table-grid-1.png), url(../img/ui/boxes/table-grid-2.png), url(../img/ui/boxes/table-grid-3.png), url(../img/ui/boxes/table-grid-4.png), url(../img/ui/boxes/table-grid-5.png), url(../img/ui/boxes/table-grid-6.png), url(../img/ui/boxes/table-grid-7.png), url(../img/ui/boxes/table-grid-8.png), url(../img/ui/boxes/table-grid-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ left var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ left calc(100% + 2px), /*8*/ calc(var(--segment-size) - 2px) calc(100% + 2px), /*9*/ right calc(100% + 2px);
  background-size: var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ var(--segment-size) calc(var(--segment-size) + 4px), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(var(--segment-size) + 4px), /*9*/ var(--segment-size) calc(var(--segment-size) + 4px);
  min-height: var(--segment-size);
  min-width: calc(var(--segment-size) * 3);
  width: var(--box-width);
  height: var(--box-height);
  background-color: unset;
  background-origin: border-box;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  padding-bottom: 5px;
  /*color: white;
        .text-outline-black();
        --outline-width: 1px;*/
}
.pet_stat_modal-level-table-container .row-current-level td,
.category_materials_modal-table-container .row-current-level td {
  background-color: white;
  background-image: none;
  color: black;
  --outline-width: 0;
}
.pet_stat_modal-level-table-container .pet_stat_modal-level-container,
.category_materials_modal-table-container .pet_stat_modal-level-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
}
.pet_stat_modal-level-table-container .pet_stat_modal-lvl-text,
.category_materials_modal-table-container .pet_stat_modal-lvl-text {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 15px;
  line-height: 11px;
  font-family: Edit Undo BRK;
  margin-right: 10px;
  padding: 2px 6px 2px 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/ui/box-lvl-active-left.png), url(../img/ui/box-lvl-active-center.png), url(../img/ui/box-lvl-active-right.png);
  background-repeat: no-repeat, repeat, no-repeat;
}
.pet_stat_modal-level-table-container .pet_stat_modal-lvl-text.inactive,
.category_materials_modal-table-container .pet_stat_modal-lvl-text.inactive {
  color: #828282;
  text-shadow: unset;
  background-image: url(../img/ui/box-lvl-inactive-left.png), url(../img/ui/box-lvl-inactive-center.png), url(../img/ui/box-lvl-inactive-right.png);
  background-repeat: no-repeat, repeat, no-repeat;
}
.pet_stat_modal-level-table-container th:nth-child(n+2),
.category_materials_modal-table-container th:nth-child(n+2),
.pet_stat_modal-level-table-container td:nth-child(n+2),
.category_materials_modal-table-container td:nth-child(n+2) {
  background-position: -2px top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ -2px var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ -2px calc(100% + 2px), /*8*/ calc(var(--segment-size) - 2px) calc(100% + 2px), /*9*/ right calc(100% + 2px);
  background-size: calc(var(--segment-size) + 4px) var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ calc(var(--segment-size) + 4px) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ calc(var(--segment-size) + 4px), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(var(--segment-size) + 4px), /*9*/ var(--segment-size) calc(var(--segment-size) + 4px);
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 20px;
  line-height: 20px;
  font-family: Edit Undo BRK;
  padding-right: 2px;
}
.pet_stat_modal-level-table-container tr:last-child td:first-child,
.category_materials_modal-table-container tr:last-child td:first-child {
  background-position: left top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ left var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ left bottom, /*8*/ calc(var(--segment-size) - 2px) bottom, /*9*/ right bottom;
  background-size: var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ var(--segment-size), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*9*/ var(--segment-size);
  padding-bottom: 10px;
}
.pet_stat_modal-level-table-container tr:last-child td,
.category_materials_modal-table-container tr:last-child td {
  background-position: -2px top, /*2*/ calc(var(--segment-size) - 2px) top, /*3*/ right top, /*4*/ -2px var(--segment-size), /*5*/ calc(var(--segment-size) - 2px) var(--segment-size), /*6*/ right var(--segment-size), /*7*/ -2px bottom, /*8*/ calc(var(--segment-size) - 2px) bottom, /*9*/ right bottom;
  background-size: calc(var(--segment-size) + 4px) var(--segment-size), /*2*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*3*/ var(--segment-size), /*4*/ calc(var(--segment-size) + 4px) calc(100% - calc(var(--segment-size) * 2)), /*5*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) calc(100% - calc(var(--segment-size) * 2)), /*6*/ var(--segment-size) calc(100% - calc(var(--segment-size) * 2)), /*7*/ calc(var(--segment-size) + 4px) var(--segment-size), /*8*/ calc(100% - calc(var(--segment-size) * 2 - 4px)) var(--segment-size), /*9*/ var(--segment-size);
  padding-bottom: 10px;
}
.pet_stat_modal-level-table-container .gray,
.category_materials_modal-table-container .gray {
  color: #828282 !important;
  text-shadow: unset !important;
}
.category_materials_modal-table-container table {
  width: 510px;
}
.category_materials_modal-table-container th:nth-child(1),
.category_materials_modal-table-container td:nth-child(1) {
  --box-width: 60px;
}
.category_materials_modal-table-container th:nth-child(2),
.category_materials_modal-table-container td:nth-child(2) {
  min-width: 170px;
}
.category_materials_modal-table-container td {
  height: inherit;
}
.category_materials_modal-table-container td .material-row-image {
  --img-width: 52px;
  --img-height: 60px;
  width: var(--img-width);
  height: var(--img-height);
  margin: auto;
  background-size: var(--img-width) var(--img-height);
  background-repeat: no-repeat;
}
.category_materials_modal-table-container .material-row-name-desc {
  height: 100%;
  padding: 10px 0 !important;
}
.category_materials_modal-table-container .material-row-name-desc .material-row-name {
  height: 20%;
  min-height: 20px;
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  font-family: Amiga Forever;
}
.category_materials_modal-table-container .material-row-name-desc .material-row-desc {
  height: 80%;
  text-align: left;
  font-size: 12px;
  line-height: 24px;
  font-family: Amiga Forever;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 2px;
}
.category_materials_modal-table-container .material-row-name-desc .material-row-desc .gear-perk-line span {
  --icon-width: 15px;
  --icon-height: 17px;
}
.category_materials_modal-table-container .material-row-name-desc .material-row-desc .gear-text-container {
  margin-left: 5px;
}
.category_materials_modal-table-container .material-row-name-desc .material-row-desc .modifier-box {
  font-size: 12px;
  line-height: 24px;
  font-family: Amiga Forever;
}
.category_materials_modal-table-container .material-row-dropped-from span {
  display: block;
  font-size: 12px;
  line-height: 24px;
  font-family: Amiga Forever;
}
.pet_fusion_modal-container {
  width: 100%;
}
.pet_fusion_modal-pet-cards {
  display: flex;
  margin: 20px 0;
  justify-content: center;
}
.pet_fusion_modal-pet-cards div {
  margin: auto 5px;
  cursor: unset !important;
  pointer-events: none !important;
}
.pet_fusion_modal-description {
  width: 490px;
  margin: auto;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  font-family: Amiga Forever;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
.pet_fusion_modal-description span {
  text-transform: uppercase;
  font-size: 12px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  padding: 2px 7px;
  line-height: 21px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  --frame-box-size: 4px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, calc(var(--frame-box-size) - 1px) 0px, right top, 0px calc(var(--frame-box-size) - 1px), calc(var(--frame-box-size) - 1px) calc(var(--frame-box-size) - 1px), right calc(var(--frame-box-size) - 1px), left bottom, calc(var(--frame-box-size) - 1px) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), calc(100% - calc(var(--frame-box-size) * 2) + 2px) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2) + 2px), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2) + 2px) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: auto;
  height: unset;
  background-origin: border-box;
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Vision_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_9.png);
  color: black;
  font-size: 15px;
  line-height: 38px;
  font-family: Amiga Forever;
  --outline-width: 0.2px;
  padding: 5px 7px;
  padding-top: 8px;
}
.pet_fusion_modal-description span.arcane {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Arcane_9.png);
}
.pet_fusion_modal-description span.steadfast {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Hardened_9.png);
}
.pet_fusion_modal-description span.impervious {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Impervious_9.png);
}
.pet_fusion_modal-description span.cooling {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cooling_9.png);
}
.pet_fusion_modal-description span.grounding {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Grounding_9.png);
}
.pet_fusion_modal-description span.warmth {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Warmth_9.png);
}
.pet_fusion_modal-description span.suture {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Suture_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Suture_9.png);
}
.pet_fusion_modal-description span.cleansing {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Cleansing_9.png);
}
.pet_fusion_modal-description span.vision {
  background-image: url(../img/ui/boxes/modifiers/ModifierSeg_Vision_1.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_2.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_3.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_4.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_5.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_6.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_7.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_8.png), url(../img/ui/boxes/modifiers/ModifierSeg_Vision_9.png);
}
.pet_fusion_modal-pet-stats {
  display: flex;
  justify-content: space-evenly;
}
.pet_fusion_modal-pet-stats .pet_stat-container {
  flex-direction: unset;
}
.pet_fusion_modal-pet-stats .pet_stat-img-container {
  width: 28px;
  margin-right: 15px;
}
.pet_fusion_modal-pet-stats .pet_stat-name {
  margin-left: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 16px;
  font-family: Edit Undo BRK;
}
.pet_fusion_modal-pet-stats .pet_stat-lvl-text {
  margin-left: 5px;
  font-size: 9px;
  line-height: 13px;
  font-family: Amiga Forever;
}
.pet_fusion_modal-pet-stats .modal-button {
  min-width: 160px;
}
.loadout-armor-info-tabs-buttons.hide {
  opacity: 0;
  cursor: unset;
  pointer-events: none;
}
.egg_stats-container {
  display: flex;
  justify-content: space-between;
}
.egg_stats-container div {
  text-align: left;
  font-size: 15px;
  line-height: 16px;
  font-family: Edit Undo BRK;
  text-transform: uppercase;
}
.egg_stats-hatch-odds-list {
  display: flex;
}
.egg_stats-hatch-odds-list .pet_hatch_odd-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.egg_stats-hatch-odds-list .pet_hatch_odd-container span.low {
  color: #FF6666;
}
.egg_stats-hatch-odds-list .pet_hatch_odd-container span.medium {
  color: #F7B610;
}
.egg_stats-hatch-odds-list .pet_hatch_odd-container span.high {
  color: #88E35A;
}
.egg_stats-hatch-odds-list .border-box-base-s {
  --box-height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.egg_stats-hatch-odds-list img {
  width: auto;
  height: 25px;
}
.egg_stats-hatch-odds-list .pet_hatch_odd-text-container {
  min-width: 60px;
  text-align: center;
}
.egg_stats-hatching-time.hide {
  display: none;
}
.egg_stats-hatching-time-value {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  font-size: 7px !important;
  line-height: 1px !important;
  font-family: Amiga Forever !important;
  text-transform: lowercase !important;
  --fill-text-box_height: 30px;
  background-image: url(../img/ui/text-input-left.png), url(../img/ui/text-input-center.png), url(../img/ui/text-input-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--fill-text-box_height) 0px, right 0px;
  background-size: var(--fill-text-box_height) var(--fill-text-box_height), calc(100% - calc(var(--fill-text-box_height) * 2)) var(--fill-text-box_height), var(--fill-text-box_height) var(--fill-text-box_height);
  min-width: calc(var(--fill-text-box_height) * 2 + 1px);
  width: var(--fill-text-box-width);
  height: var(--fill-text-box_height);
  background-origin: border-box;
  background-color: unset;
  --fill-text-box_height: 24px;
  --fill-text-box-width: 100%;
  background-image: url(../img/ui/frames/egg-time-frame-left.png), url(../img/ui/frames/egg-time-frame-center.png), url(../img/ui/frames/egg-time-frame-right.png);
}
.reward-perks-list .pet_hatch_odd-container {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 16px;
  font-family: Edit Undo BRK;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.reward-perks-list .pet_hatch_odd-container span.low {
  color: #FF6666;
}
.reward-perks-list .pet_hatch_odd-container span.medium {
  color: #F7B610;
}
.reward-perks-list .pet_hatch_odd-container span.high {
  color: #88E35A;
}
.reward-perks-list .pet_hatch_odd-container .pet_hatch_odd-text-container {
  margin-left: 5px;
}
.reward-perks-list .pet_hatch_odd-container .border-box-base-m {
  --box-width: 80px;
  --box-height: 83px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reward-perks-list .pet_hatch_odd-container .border-box-base-m img {
  width: 52px;
  height: auto;
}
.armory_pet_card-btn-timer-container {
  bottom: -28px;
  position: absolute;
  text-transform: lowercase;
}
.armory_pet_card-btn-timer-container .timer-progress-bar {
  background: linear-gradient(180deg, #A62E8E 0%, #820A6A 100%);
}
.egg-card-img {
  width: 100%;
  max-width: 56px !important;
  max-height: unset !important;
  margin-top: unset !important;
}
.egg-hatch-progress-outer {
  position: absolute;
  width: 68px;
  margin: 0;
  left: 11px;
  bottom: 12px;
  --base-height: 12px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-image: url(../img/pass/season-bar-left.png), url(../img/pass/season-bar-center.png), url(../img/pass/season-bar-right.png);
  background-size: var(--base-height) var(--base-height), calc(100% - calc(var(--base-height) * 2)) var(--base-height), var(--base-height) var(--base-height);
  background-origin: border-box;
  background-position: 0px 0px, var(--base-height) 0px, right 0px;
  height: var(--base-height);
}
.egg-hatch-progress-outer .egg-hatch-progress-inner {
  background-color: #A02888;
  --base-height: 12px;
  height: calc(var(--base-height) - 6px);
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 2px;
  --border-width: 4px;
  --progress: 0%;
  width: calc(var(--progress) - var(--border-width));
  max-width: 99.8%;
  z-index: -1;
  transition: all 0.5s ease-in;
}
.pet-reward-subtitle {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  position: absolute;
  top: 36px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 40px;
  font-family: Edit Undo BRK;
}
.reward-perks-list .pet_material-container {
  align-items: center;
  flex-direction: unset;
  margin-bottom: 10px;
  cursor: unset;
  pointer-events: none;
}
.reward-perks-list .pet_stat-img-container::after,
.reward-perks-list .pet_material-img-container::after {
  content: none;
}
.reward-perks-list .pet_material-name {
  margin-left: 10px;
  margin-bottom: unset;
}
.reward-perks-list .pet_stat-container {
  margin-top: 6px;
  flex-direction: unset;
  cursor: unset;
  pointer-events: none;
}
.reward-perks-list .pet_stat-lvl-container {
  text-align: left;
  margin-left: 10px;
}
.reward-perks-list .pet_material-img {
  width: 26px;
  height: 30px;
}
.reward-perks-list .pet_stat-img {
  width: 28px;
}
#upgrade_section {
  margin-top: 22px;
}
.gear-card-item-box {
  width: 88px;
  position: relative;
  height: 120px;
  background-image: url(../img/ui/box-rarity-borders/Neutral.png);
  padding: 5px;
  border: none;
  z-index: 1;
}
.gear-card-item-box.border-common {
  background-image: url(../img/ui/box-rarity-borders/Common.png);
}
.gear-card-item-box.border-rare {
  background-image: url(../img/ui/box-rarity-borders/Rare.png);
}
.gear-card-item-box.border-epic {
  background-image: url(../img/ui/box-rarity-borders/Epic.png);
}
.gear-card-item-box.border-legendary {
  background-image: url(../img/ui/box-rarity-borders/Legendary.png);
}
.gear-card-item-box > img {
  max-width: 48px;
  max-height: 48px;
  min-width: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin-top: -15px;
}
.gear-card-item-box > img.no-item-equipped {
  margin-top: 0;
}
#cards_container {
  width: 108px;
  padding-left: 26px;
  height: 374px;
  min-height: 374px;
  justify-content: space-between;
}
.equipped_gear_card {
  height: 374px;
  min-height: 374px;
  max-height: 374px;
  width: 416px;
  border: none;
  background-image: url(../img/ui/box-rarity-borders/window_xxl_neutral.png);
  margin-left: -30px;
}
.equipped_gear_card.border-common {
  background-image: url(../img/ui/box-rarity-borders/window_xxl_common.png);
}
.equipped_gear_card.border-rare {
  background-image: url(../img/ui/box-rarity-borders/window_xxl_rare.png);
}
.equipped_gear_card.border-epic {
  background-image: url(../img/ui/box-rarity-borders/window_xxl_epic.png);
}
.equipped_gear_card.border-legendary {
  background-image: url(../img/ui/box-rarity-borders/window_xxl_legendary.png);
}
.forge_gear_perks_card {
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 24px;
  height: 374px;
  max-height: 374px;
  min-height: 374px;
  border: none;
  width: 254px;
  margin-left: 13px;
  background-image: url(../img/ui/box-rarity-borders/window_xl_neutral.png);
}
.forge_gear_perks_card.border-common {
  background-image: url(../img/ui/box-rarity-borders/window_xl_common.png);
}
.forge_gear_perks_card.border-rare {
  background-image: url(../img/ui/box-rarity-borders/window_xl_rare.png);
}
.forge_gear_perks_card.border-epic {
  background-image: url(../img/ui/box-rarity-borders/window_xl_epic.png);
}
.forge_gear_perks_card.border-legendary {
  background-image: url(../img/ui/box-rarity-borders/window_xl_legendary.png);
}
.gear-card-item {
  position: relative;
  max-height: 120px;
}
.gear-card-item:hover {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}
.gear-card-item.outline-gear-card-item:hover {
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
  cursor: default;
}
.gear-card-item-modifiers {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.gear-card-item-modifiers .prefixes,
.gear-card-item-modifiers .suffixes {
  display: flex;
}
#perks-container {
  padding: 15px 8px 25px 10px;
  width: 100%;
  overflow-y: auto;
}
#perks-container #current-perks {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}
#perks-container #current-perks .perk-text-container {
  margin-bottom: 8px;
}
#perks-container .gear-perk-line {
  margin-bottom: 11px;
}
#perks-container .gear-perk-line :first-child {
  margin-right: 11px;
}
#perks-container .boon-icon {
  margin-right: 8px;
}
.perks-text {
  color: white;
  font-size: 15px;
  line-height: 18px;
}
.perk-description {
  font-size: 15px;
}
.not-gear-equipped-text {
  line-height: 20px;
  text-align: center;
  color: #E0E0E0;
  text-transform: uppercase;
  max-width: 160px;
}
.gear-card-item .gear-level {
  display: block;
  position: absolute;
  bottom: 6px;
  left: 6px;
  background-image: url(../img/ui/level-background.png);
  width: 76px;
  height: 28px;
  margin: 0;
  line-height: 28px;
  font-size: 15px;
  text-transform: uppercase;
}
.equipped_gear_card-name {
  margin-bottom: 22px;
  font-size: 20px;
  line-height: 28px;
  color: #E0E0E0;
  --width: 404px;
  --min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 6px;
  margin-right: 6px;
}
.gear-card-item.outline-gear-card-item::after {
  content: '';
  position: absolute;
  width: 108px;
  height: 138px;
  left: calc(50% - 54px);
  top: calc(50% - 69px);
  background-image: url(../img/ui/item_selected_border.png);
  z-index: 0;
}
.equipped_gear_card-rarity {
  font-size: 20px;
  margin-top: 1px;
  letter-spacing: 1px;
}
.filter-gray-scale-1 {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
#upgrade_btn {
  width: 170px;
  height: 43px;
  position: absolute;
  bottom: -18px;
  left: calc(50% - 84px);
}
#upgrade_btn:disabled {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
#upgrade_btn:disabled > .gold-icon {
  -webkit-animation: none;
          animation: none;
}
#upgrade_btn > .gold-icon {
  width: 14%;
  height: 62%;
  min-width: 14%;
  min-height: 62%;
}
#not-gear-equipped > span.font-edit {
  font-size: 20px;
  max-width: 175px;
}
#next-perks > div {
  padding: 9px;
  align-items: center;
}
#next-perks > div > .font-edit {
  margin: 0;
  line-height: 1.1;
  color: white;
  font-size: 12.5px;
}
#next-perks > div.bg-current-perk {
  background-image: url(../img/ui/boxes/new-perk-active-top.png), url(../img/ui/boxes/new-perk-active-bottom.png), url(../img/ui/boxes/new-perk-active-center.png);
  background-size: contain;
  background-position: bottom, top, center;
  background-repeat: no-repeat, no-repeat, repeat;
  margin-bottom: 3px;
}
#next-perks > div > span:first-child {
  background-image: url(../img/ui/box-lvl-inactive.png);
  width: 34px;
  height: 14px;
  color: #828282;
  margin-right: 10px;
  text-shadow: none;
  min-width: 34px;
  min-height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 10px;
  opacity: 1;
}
#next-perks > div > span.active-perk:first-child {
  background-image: url(../img/ui/box-lvl-active.png);
  color: white;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
.equipped_gear_card-img_container > img {
  max-width: 200px;
  max-height: 200px;
}
#next-perks-container {
  border-top: none;
  padding-top: 15px;
}
#next-perks-container::after {
  content: '';
  background-image: url(../img/ui/bar-separator-perks.png);
}
#upgrade_btn:not([disabled]):hover + #perks-container div.bg-current-perk {
  background-image: url(../img/ui/boxes/new-perk-hover-top.png), url(../img/ui/boxes/new-perk-hover-bottom.png), url(../img/ui/boxes/new-perk-hover-center.png);
}
#armory_gear_card-distill_btn {
  padding: 0 20px;
}
#modal-account-name-change {
  z-index: 4;
}
#modal-account-name-change .modal-content {
  width: 635px;
  height: 250px;
}
#modal-account-name-change .modal-footer .finish {
  --base-button_height: 50px;
  width: 200px;
  height: 50px;
  font-family: Edit Undo BRK;
  font-size: 25px;
  line-height: 25px;
}
#modal-account-name-change .player-name-input::-webkit-input-placeholder {
  color: #fff;
  text-align: center !important;
  letter-spacing: -0.02em;
  --outline-width: 2px;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;
}
#modal-account-name-change .player-name-input::-moz-placeholder {
  color: #fff;
  text-align: center !important;
  letter-spacing: -0.02em;
  --outline-width: 2px;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;
}
#modal-account-name-change .player-name-input::-ms-input-placeholder {
  color: #fff;
  text-align: center !important;
  letter-spacing: -0.02em;
  --outline-width: 2px;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;
}
#modal-account-name-change .player-name-input::placeholder {
  color: #fff;
  text-align: center !important;
  letter-spacing: -0.02em;
  --outline-width: 2px;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;
}
#modal-account-name-change #modal-body-warning {
  font-size: 10px;
  margin-bottom: 5px;
  background: linear-gradient(270deg, rgba(210, 0, 0, 0) 1.87%, #D20000 28.26%, #D20000 70.12%, rgba(210, 0, 0, 0) 98.7%);
  color: #FFFFFF;
}
#modal-account-name-change .player-name-input {
  --box-fill-size: 30px;
  --box-fill-width: 450px;
  height: 63px;
  max-width: 400px;
  padding: 5px 10px;
  border-radius: 4px;
  margin: 28px auto 10px auto;
  color: #fff;
  font-family: Edit Undo BRK;
  font-size: 30px;
  line-height: 40px;
  text-align: start;
  --outline-width: 2px;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 #000, var(--outline-width) calc(-1 * var(--outline-width)) 0 #000, calc(-1 * var(--outline-width)) var(--outline-width) 0 #000, var(--outline-width) 0 #000;
}
@media (max-width: 850px), (max-width: 900px) {
  #modal-account-name-change .player-name-input {
    height: 32px;
  }
}
#full-health,
#full-xp,
#non-active-effects,
#maxhp-increased,
#speedboost-active,
#powerboost-active,
#potion-cooldown {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 362px;
  display: none;
}
#quadrants-ids-onleft {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media screen and (max-height: 2200px) {
  #quadrants-ids-onleft {
    margin-left: -29px;
  }
  #quadrants-ids-onleft p {
    font-size: 22px;
  }
}
@media screen and (max-height: 1080px) {
  #quadrants-ids-onleft {
    margin-left: -29px;
  }
  #quadrants-ids-onleft p {
    font-size: 22px;
  }
}
@media screen and (max-height: 900px) {
  #quadrants-ids-onleft {
    margin-left: -29px;
  }
  #quadrants-ids-onleft p {
    font-size: 15px;
  }
}
@media screen and (max-height: 758px) {
  #quadrants-ids-onleft {
    margin-left: -25px;
  }
  #quadrants-ids-onleft p {
    font-size: 13px;
  }
}
#quadrants-ids-ontop {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  position: absolute;
  display: flex;
  justify-content: space-around;
}
@media (max-width: 5000px) {
  #quadrants-ids-ontop {
    margin-left: 0px;
    margin-top: -35px;
  }
  #quadrants-ids-ontop p {
    font-size: 30px;
  }
}
@media (max-width: 2000px) {
  #quadrants-ids-ontop {
    margin-top: -30px;
  }
  #quadrants-ids-ontop p {
    font-size: 22px;
  }
}
@media (max-width: 1440px) {
  #quadrants-ids-ontop {
    margin-left: 0px;
    margin-top: -30px;
  }
  #quadrants-ids-ontop p {
    font-size: 13px;
  }
}
@media (max-width: 1290px) {
  #quadrants-ids-ontop {
    margin-top: -30px;
    margin-left: 1.25rem;
  }
  #quadrants-ids-ontop p {
    font-size: 13px;
  }
}
@media (max-width: 1024px) {
  #quadrants-ids-ontop {
    margin-left: 0px;
    margin-top: -30px;
  }
  #quadrants-ids-ontop p {
    font-size: 13px;
  }
}
#battle-chest-container {
  position: absolute;
  display: flex;
  top: 14px;
  right: 7px;
  width: auto;
  height: auto;
  z-index: 0;
}
#battle-chest-container .battle-points-container {
  width: 134px;
  height: 64px;
  background-image: url(../img/battle-spoils/battle-chest-points-bg.png);
}
#battle-chest-container .battle-points-container .battle-points-text {
  font-size: 48px;
  text-align: center;
  line-height: 63px;
}
#battle-chest-container .battle-points-chest-display {
  margin-right: 4px;
}
#battle-chest-container .battle-points-chest-display #battle-points-chest-icon {
  width: 56px;
  height: 56px;
}
#battle-chest-container .battle-points-chest-display .battle-points-bar-container {
  position: relative;
  margin-top: 5px;
}
#battle-chest-container .battle-points-chest-display .battle-points-bar-container .battle-points-progress-bar {
  width: 57px;
  height: 20px;
  background-image: url(../img/battle-spoils/battle-points-progress-bar.png);
  position: absolute;
  top: 0;
}
#battle-chest-container .battle-points-chest-display .battle-points-bar-container #battle-points-inner-bar {
  margin-left: 4px;
  width: 0%;
  max-width: 49px;
  height: 20px;
  background-color: #98FF7F;
  transition: width 2s linear;
}
@media (max-width: 1800px) {
  #battle-chest-container {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #battle-chest-container {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #battle-chest-container {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}
@media (max-width: 1550px) {
  #battle-chest-container {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #battle-chest-container {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}
.windows-hud-1 {
  --box-width: 90px;
  --box-height: 90px;
  background-image: url(../img/ui/boxes/windows-hud-1.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.windows-hud-2 {
  --box-width: 90px;
  --box-height: 32px;
  background-image: url(../img/ui/boxes/windows-hud-2.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.windows-hud-3 {
  --box-width: 90px;
  --box-height: 36px;
  background-image: url(../img/ui/boxes/windows-hud-3.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.windows-hud-4 {
  --box-width: 90px;
  --box-height: 44px;
  background-image: url(../img/ui/boxes/windows-hud-4.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.windows-hud-5 {
  --base-height: 45px;
  --default-segment-width: 46px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-height) var(--base-height), calc(100% - calc(var(--default-segment-width) * 2) + 2px) var(--base-height), var(--base-height) var(--base-height);
  min-width: calc(var(--base-height) * 2 + 1px);
  background-image: url(../img/ui/boxes/windows-hud-5-l.png), url(../img/ui/boxes/windows-hud-5-c.png), url(../img/ui/boxes/windows-hud-5-r.png);
}
.box-item {
  --box-width: 48px;
  --box-height: 48px;
  background-image: url(../img/ui/boxes/box-item.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  width: var(--box-width);
  height: var(--box-height);
}
.box-hotkey {
  --box-width: 32px;
  --box-height: 32px;
  background-image: url(../img/ui/icons/hotkey.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.box-hotkey-mouse-left {
  background-image: url(../img/gui/emote-mouse-icon-left.svg);
  width: 26px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.box-hotkey-mouse-right {
  background-image: url(../img/gui/emote-mouse-icon.svg);
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.box-item-hotkey {
  --box-width: 20px;
  --box-height: 48px;
  background-image: url(../img/ui/boxes/item-hotkey.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.bar-hp-sm {
  --box-width: 210px;
  --box-height: 46px;
  background-image: url(../img/ui/boxes/bar-hp-sm.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.bar-hp-xl {
  --box-width: 160px;
  --box-height: 14px;
  background-image: url(../img/ui/boxes/bar-hp-xl.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.bar-hp-xl-red {
  --box-width: 152px;
  --box-height: 6px;
  background-image: url(../img/ui/boxes/bar-hp-xl-red.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.arrow {
  --box-width: 46px;
  --box-height: 43px;
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  background-repeat: no-repeat;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.arrow-btn-left {
  --box-width: 46px;
  --box-height: 43px;
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  background-repeat: no-repeat;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
  background-image: url(../img/ui/icons/arrow-btn-left.png);
}
.arrow-btn-left:hover {
  background-image: url(../img/ui/icons/arrow-btn-left-hover.png);
}
.arrow-btn-left:active {
  background-image: url(../img/ui/icons/arrow-btn-left-active.png);
}
.arrow-btn-right {
  --box-width: 46px;
  --box-height: 43px;
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  background-repeat: no-repeat;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
  background-image: url(../img/ui/icons/arrow-btn-right.png);
}
.arrow-btn-right:hover {
  background-image: url(../img/ui/icons/arrow-btn-right-hover.png);
}
.arrow-btn-right:active {
  background-image: url(../img/ui/icons/arrow-btn-right-active.png);
}
.windows-hud-xl {
  --box-width: 210px;
  --box-height: 46px;
  background-image: url(../img/ui/boxes/windows-hud-xl.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}
.interaction-key-box {
  --box-width: 32px;
  --box-height: 32px;
  background-image: url(../img/ui/boxes/item-hotkey.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: var(--box-width);
  height: var(--box-height);
}
.ui-annoucement-bg {
  --border-height: 46px;
  --border-width: 1038px;
  background-image: url(../img/ui/hud/storm-annoucement-left.png), url(../img/ui/hud/storm-annoucement-center.png), url(../img/ui/hud/storm-annoucement-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
}
.ui-annoucement-bg-2 {
  --border-height: 46px;
  --border-width: 1002px;
  background-image: url(../img/ui/hud/ui-annoucement-left.png), url(../img/ui/hud/ui-annoucement-center.png), url(../img/ui/hud/ui-annoucement-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
}
.tooltip-info-box {
  --frame-box-width: 285px;
  --frame-box-height: auto;
  --frame-box-size: 53px;
  background-image: url(../img/ui/hud/frames/tooltip-neutral-1.png), url(../img/ui/hud/frames/tooltip-neutral-2.png), url(../img/ui/hud/frames/tooltip-neutral-3.png), url(../img/ui/hud/frames/tooltip-neutral-4.png), url(../img/ui/hud/frames/tooltip-neutral-5.png), url(../img/ui/hud/frames/tooltip-neutral-6.png), url(../img/ui/hud/frames/tooltip-neutral-7.png), url(../img/ui/hud/frames/tooltip-neutral-8.png), url(../img/ui/hud/frames/tooltip-neutral-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, var(--frame-box-size) 0px, right top, 0px var(--frame-box-size), var(--frame-box-size) var(--frame-box-size), right var(--frame-box-size), left bottom, var(--frame-box-size) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), calc(100% - calc(var(--frame-box-size) * 2)) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
}
.tooltip-info-box.common {
  background-image: url(../img/ui/hud/frames/tooltip-common-1.png), url(../img/ui/hud/frames/tooltip-common-2.png), url(../img/ui/hud/frames/tooltip-common-3.png), url(../img/ui/hud/frames/tooltip-common-4.png), url(../img/ui/hud/frames/tooltip-common-5.png), url(../img/ui/hud/frames/tooltip-common-6.png), url(../img/ui/hud/frames/tooltip-common-7.png), url(../img/ui/hud/frames/tooltip-common-8.png), url(../img/ui/hud/frames/tooltip-common-9.png);
}
.tooltip-info-box.common #ui-interaction-rarity {
  background-image: url(../img/ui/hud/frames/tooltip-common-label.png);
  background-position: center 2px;
  background-size: auto;
  background-repeat: no-repeat;
  position: relative;
  width: 180px;
  left: calc(50% - 90px);
  top: -17.5px;
  margin-bottom: -15px;
}
.tooltip-info-box.rare {
  background-image: url(../img/ui/hud/frames/tooltip-rare-1.png), url(../img/ui/hud/frames/tooltip-rare-2.png), url(../img/ui/hud/frames/tooltip-rare-3.png), url(../img/ui/hud/frames/tooltip-rare-4.png), url(../img/ui/hud/frames/tooltip-rare-5.png), url(../img/ui/hud/frames/tooltip-rare-6.png), url(../img/ui/hud/frames/tooltip-rare-7.png), url(../img/ui/hud/frames/tooltip-rare-8.png), url(../img/ui/hud/frames/tooltip-rare-9.png);
}
.tooltip-info-box.rare #ui-interaction-rarity {
  background-image: url(../img/ui/hud/frames/tooltip-rare-label.png);
  background-position: center 2px;
  background-size: auto;
  background-repeat: no-repeat;
  position: relative;
  width: 160px;
  left: calc(50% - 80px);
  top: -17.5px;
  margin-bottom: -15px;
}
.tooltip-info-box.epic {
  background-image: url(../img/ui/hud/frames/tooltip-epic-1.png), url(../img/ui/hud/frames/tooltip-epic-2.png), url(../img/ui/hud/frames/tooltip-epic-3.png), url(../img/ui/hud/frames/tooltip-epic-4.png), url(../img/ui/hud/frames/tooltip-epic-5.png), url(../img/ui/hud/frames/tooltip-epic-6.png), url(../img/ui/hud/frames/tooltip-epic-7.png), url(../img/ui/hud/frames/tooltip-epic-8.png), url(../img/ui/hud/frames/tooltip-epic-9.png);
}
.tooltip-info-box.epic #ui-interaction-rarity {
  background-image: url(../img/ui/hud/frames/tooltip-epic-label.png);
  background-position: center 2px;
  background-size: auto;
  background-repeat: no-repeat;
  position: relative;
  width: 160px;
  left: calc(50% - 80px);
  top: -17.5px;
  margin-bottom: -15px;
}
.tooltip-info-box.legendary {
  background-image: url(../img/ui/hud/frames/tooltip-legendary-1.png), url(../img/ui/hud/frames/tooltip-legendary-2.png), url(../img/ui/hud/frames/tooltip-legendary-3.png), url(../img/ui/hud/frames/tooltip-legendary-4.png), url(../img/ui/hud/frames/tooltip-legendary-5.png), url(../img/ui/hud/frames/tooltip-legendary-6.png), url(../img/ui/hud/frames/tooltip-legendary-7.png), url(../img/ui/hud/frames/tooltip-legendary-8.png), url(../img/ui/hud/frames/tooltip-legendary-9.png);
}
.tooltip-info-box.legendary #ui-interaction-rarity {
  background-image: url(../img/ui/hud/frames/tooltip-legendary-label.png);
  background-position: center 2px;
  background-size: auto;
  background-repeat: no-repeat;
  position: relative;
  width: 212px;
  left: calc(50% - 106px);
  top: -17.5px;
  margin-bottom: -15px;
}
.tooltip-info-box-2 {
  --border-height: 46px;
  --border-width: 138px;
  background-image: url(../img/ui/boxes/tooltip-info-cancel-left.png), url(../img/ui/boxes/tooltip-info-cancel-center.png), url(../img/ui/boxes/tooltip-info-cancel-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
}
.white-box-spectate {
  --box-width: 286px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: unset;
  background-image: url(../img/ui/boxes/white-box-md.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--box-width);
  min-width: var(--box-width);
  height: 46px;
  position: relative;
}
.gray-box {
  --frame-box-width: 246px;
  --frame-box-height: auto;
  --frame-box-size: 60px;
  background-image: url(../img/ui/frames/gray-box-seg-1.png), url(../img/ui/frames/gray-box-seg-2.png), url(../img/ui/frames/gray-box-seg-3.png), url(../img/ui/frames/gray-box-seg-4.png), url(../img/ui/frames/gray-box-seg-5.png), url(../img/ui/frames/gray-box-seg-6.png), url(../img/ui/frames/gray-box-seg-7.png), url(../img/ui/frames/gray-box-seg-8.png), url(../img/ui/frames/gray-box-seg-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, var(--frame-box-size) 0px, right top, 0px var(--frame-box-size), var(--frame-box-size) var(--frame-box-size), right var(--frame-box-size), left bottom, var(--frame-box-size) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), calc(100% - calc(var(--frame-box-size) * 2)) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
}
.gray-hexagonal-box {
  --box-width: 246px;
  --box-height: 94px;
  background-image: url(../img/ui/boxes/gray-hexagonal-box.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: var(--box-width);
  height: var(--box-height);
}
.buff-box {
  --box-width: 96px;
  --box-height: 32px;
  background-image: url(../img/ui/boxes/buff-modifier-bg.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: var(--box-width);
  height: var(--border-height);
}
.gray-skill-box {
  --box-width: 206px;
  --box-height: 200px;
  background-image: url(../img/ui/boxes/gray-skill-box.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  min-width: var(--box-width);
  min-height: var(--box-height);
}
.gray-weapon-box {
  --box-width: 150px;
  --box-height: 184px;
  background-image: url(../img/ui/boxes/gray-weapon-box.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  min-width: var(--box-width);
  min-height: var(--box-height);
}
.white-box {
  --border-height: 46px;
  --border-width: 210px;
  background-image: url(../img/ui/boxes/white-box-left.png), url(../img/ui/boxes/white-box-center.png), url(../img/ui/boxes/white-box-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
}
.white-box-s {
  --border-height: 46px;
  --border-width: 210px;
  background-image: url(../img/ui/boxes/white-box-left.png), url(../img/ui/boxes/white-box-center.png), url(../img/ui/boxes/white-box-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
}
.frame-weapon-selection {
  --box-width: 404px;
  --box-height: 704px;
  background-image: url(../img/ui/boxes/frame-weapon-selection.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  min-width: var(--box-width);
  min-height: var(--box-height);
}
.frame-weapon-selection:hover {
  background-image: url(../img/ui/boxes/frame-weapon-selection-hover.png);
}
.frame-weapon-selection.selected {
  background-image: url(../img/ui/boxes/frame-weapon-selection-selected.png);
}
.avatar-box {
  --box-width: 250px;
  --box-height: 250px;
  background-image: url(../img/ui/boxes/avatar-box.png);
  background-size: contain;
  background-origin: border-box;
  background-color: unset;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: var(--box-width);
  height: var(--box-height);
}
.box-full {
  --border-height: 34px;
  --border-width: 415px;
  background-image: url(../img/ui/hud/frames/box-full-left.png), url(../img/ui/hud/frames/box-full-center.png), url(../img/ui/hud/frames/box-full-right.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
}
#ui-bar-icon {
  70268003width: 90px;
  height: 54px;
  --image: url("../img/ui/hud/status/health-bar-shield-effect-icon.png");
  background-image: var(--image);
  --animation-speed: 1.8s;
  --steps: 0;
  -webkit-animation: play var(--animation-speed) steps(var(--steps)) infinite;
  animation: play var(--animation-speed) steps(var(--steps)) infinite;
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -30px;
}
@-webkit-keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -540px;
  }
}
@keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -540px;
  }
}
.weapon-modifier-icon {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.icon-deadly {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-competence-deadly.png');
}
.icon-agile {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-competence-agile.png');
}
.icon-tough {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-competence-tough.png');
}
.icon-scorching {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-affinity-scorching.png');
}
.icon-shocking {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-affinity-shocking.png');
}
.icon-chilling {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-affinity-chilling.png');
}
.icon-bleeding {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-affinity-bleeding.png');
}
.icon-toxicity {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-affinity-toxicity.png');
}
.icon-blinding {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-affinity-blinding.png');
}
.icon-plusOne {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-quality-plusOne.png');
}
.icon-plusTwo {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-quality-plusTwo.png');
}
.icon-plusThree {
  --icon-width: 15px;
  --icon-height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background-image: url('../img/ui/hud/icons/weaponModifiers/weap-mod-quality-plusThree.png');
}
.weapon-mod-competence {
  position: absolute;
  left: -24px;
  top: -8px;
}
.weapon-mod-affinity {
  position: absolute;
  right: -24px;
  top: -8px;
}
.weapon-mod-quality {
  position: absolute;
  right: -24px;
  bottom: -8px;
}
:root {
  --bottom-bar-height: 42px;
  --ads-left: 2px;
  --ads-right: 2px;
  --ads-bottom-offset: 2px;
  --ads-bottom: calc(var(--bottom-bar-height) + var(--ads-bottom-offset));
}
.pw-med_rect_btf {
  width: 300px;
  height: 250px;
}
.pw-leaderboard_btf,
.leaderboard_atf {
  width: 794px;
  height: 134px;
}
.pw-leaderboard_btf:empty {
  display: none;
}
.pw-leaderboard_btf > div:before {
  background-image: url(../img/ui/frames/ad-frame.png);
  background-size: 768px 134px;
  background-repeat: no-repeat;
  content: "";
  width: 774px;
  min-height: 134px;
  position: absolute;
  top: -23px;
  bottom: 42px;
  margin: 0 auto;
  left: -20px;
  right: 0;
  display: inline-block;
  z-index: -1;
}
.pw-leaderboard_btf {
  /* background-image: url(../img/ui/frames/ad-frame.png);
    background-size: contain;
    background-repeat: no-repeat;*/
}
.pw-leaderboard_btf img {
  max-height: 93px;
  width: 728px;
  height: 93px;
  position: absolute;
  z-index: 10;
}
.pw-leaderboard_btf > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  max-width: 753px;
  height: 93px;
  margin: 0 auto;
}
#home_bl_med_rect_btf {
  position: absolute;
  left: var(--ads-left);
  bottom: var(--ads-bottom);
  z-index: 1;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
#home_br_med_rect_btf {
  position: absolute;
  right: var(--ads-right);
  bottom: var(--ads-bottom);
  z-index: 1;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
@media (max-width: 1800px) {
  #home_bl_med_rect_btf,
  #home_br_med_rect_btf {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@media (max-width: 1700px), (max-height: 870px) {
  #home_bl_med_rect_btf,
  #home_br_med_rect_btf {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #home_bl_med_rect_btf,
  #home_br_med_rect_btf {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
}
@media (max-width: 1550px) {
  #home_bl_med_rect_btf,
  #home_br_med_rect_btf {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@media (max-width: 1400px) {
  #home_bl_med_rect_btf,
  #home_br_med_rect_btf {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1300px) {
  #home_bl_med_rect_btf,
  #home_br_med_rect_btf {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #home_bl_med_rect_btf,
  #home_br_med_rect_btf {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
#home_bc_leaderboard_btf,
#ingame_bc_leaderboard_btf,
#results_bc_leaderboard_btf {
  position: absolute;
  bottom: 42px;
  z-index: 1;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  pointer-events: all;
}
@media (max-width: 1800px) {
  #home_bc_leaderboard_btf,
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.95);
            transform: translateX(-50%) scale(0.95);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #home_bc_leaderboard_btf,
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.8);
            transform: translateX(-50%) scale(0.8);
  }
}
@media (max-width: 1550px) {
  #home_bc_leaderboard_btf,
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.7);
            transform: translateX(-50%) scale(0.7);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #home_bc_leaderboard_btf,
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.65);
            transform: translateX(-50%) scale(0.65);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #home_bc_leaderboard_btf,
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.9);
            transform: translateX(-50%) scale(0.9);
  }
}
@media (max-width: 1800px) {
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.65);
            transform: translateX(-50%) scale(0.65);
  }
}
@media (max-width: 1600px), (max-height: 775px) {
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.55);
            transform: translateX(-50%) scale(0.55);
  }
}
@media (max-width: 1550px) {
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.55);
            transform: translateX(-50%) scale(0.55);
  }
}
@media (max-height: 800px), (max-width: 1200px) {
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.35);
            transform: translateX(-50%) scale(0.35);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #ingame_bc_leaderboard_btf,
  #results_bc_leaderboard_btf {
    -webkit-transform: translateX(-50%) scale(0.5);
            transform: translateX(-50%) scale(0.5);
  }
}
#home-bonus-boxes {
  position: absolute;
  left: 330px;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: var(--ads-bottom);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
@media (max-width: 1850px) {
  #home-bonus-boxes {
    -webkit-transform: translateX(-10%) scale(0.9);
            transform: translateX(-10%) scale(0.9);
  }
}
@media (max-width: 1750px), (max-height: 870px) {
  #home-bonus-boxes {
    -webkit-transform: translateX(-30%) scale(0.85);
            transform: translateX(-30%) scale(0.85);
  }
}
@media (max-width: 1650px), (max-height: 775px) {
  #home-bonus-boxes {
    -webkit-transform: translateX(-30%) scale(0.8);
            transform: translateX(-30%) scale(0.8);
  }
}
@media (max-width: 1550px) {
  #home-bonus-boxes {
    -webkit-transform: translateX(-30%) scale(0.8);
            transform: translateX(-30%) scale(0.8);
  }
}
@media (max-width: 1400px) {
  #home-bonus-boxes {
    -webkit-transform: translateX(-40%) scale(0.75);
            transform: translateX(-40%) scale(0.75);
  }
}
@media (max-height: 800px), (max-width: 1300px) {
  #home-bonus-boxes {
    -webkit-transform: translateX(-55%) scale(0.75);
            transform: translateX(-55%) scale(0.75);
  }
}
@media (max-width: 850px), (max-width: 900px) {
  #home-bonus-boxes {
    -webkit-transform: translateX(-50%) scale(0.9);
            transform: translateX(-50%) scale(0.9);
  }
}
#home_reward_video_btn {
  width: 109px;
  height: 96px;
  background: url(../img/ui/reward-video/reward-video-btn.png) no-repeat;
  background-size: contain ;
}
#home_reward_video_btn:hover,
#home_reward_video_btn.active {
  background: url(../img/ui/reward-video/reward-video-btn-active.png) no-repeat;
  width: 109px;
  height: 96px;
  background-size: contain ;
}
#home_battlegor_box {
  width: 109px;
  height: 96px;
  margin-left: 5px;
  background: url(../img/ui/battlegor/battlegor-box.png) no-repeat;
  background-size: contain ;
  position: relative;
}
#home_battlegor_box #home_battlegor_box-bar {
  width: 60px;
  height: 10px;
  text-align: center;
  left: 18px;
  bottom: 10px;
  background: url(../img/ui/battlegor/battlegor-bar-level.png) no-repeat;
  background-size: contain;
  position: absolute;
}
#home_battlegor_box #home_battlegor_box-bar .fill {
  position: absolute;
  margin: 0;
  width: 100%;
  height: 6px;
  background-color: #00FF00;
  border-radius: 6px;
  margin-top: 1.4px;
  margin-left: 1px;
}
#mobile-splash-screen {
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background-color: #12042C;
}
#mobile-splash-screen .mobile-loading-img {
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  content: url('../img/mobile_banner_portrait.png');
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
#mobile-splash-screen .mobile-loading-img.portrait {
  content: url('../img/mobile_banner.png');
}
#mobile-splash-screen.showSplashScreen {
  display: block;
}
#warning-error-modal .modal-content {
  --frame-box-width: 60px;
  --frame-box-height: 60px;
  --frame-box-size: 20px;
  background-image: url(../img/ui/frames/alert-box-1.png), url(../img/ui/frames/alert-box-2.png), url(../img/ui/frames/alert-box-3.png), url(../img/ui/frames/alert-box-4.png), url(../img/ui/frames/alert-box-5.png), url(../img/ui/frames/alert-box-6.png), url(../img/ui/frames/alert-box-7.png), url(../img/ui/frames/alert-box-8.png), url(../img/ui/frames/alert-box-9.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, var(--frame-box-size) 0px, right top, 0px var(--frame-box-size), var(--frame-box-size) var(--frame-box-size), right var(--frame-box-size), left bottom, var(--frame-box-size) bottom, right bottom;
  background-size: var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), calc(100% - calc(var(--frame-box-size) * 2)) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size) calc(100% - calc(var(--frame-box-size) * 2)), var(--frame-box-size), calc(100% - calc(var(--frame-box-size) * 2)) var(--frame-box-size), var(--frame-box-size);
  min-width: calc(var(--frame-box-size) * 3);
  min-height: calc(var(--frame-box-size) * 3);
  width: var(--frame-box-width);
  height: var(--frame-box-height);
  background-origin: border-box;
  background-color: unset;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  width: 636px;
  height: 198px;
  padding-top: 45px;
}
#warning-error-modal .modal-content .modal-body > .modal-main-container {
  padding: 0 10px;
  text-align: center;
}
#warning-error-modal .modal-content .modal-body > .modal-main-container .warning-error-text {
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-family: Amiga Forever, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  font-size: 15px;
  line-height: 24px;
}
#warning-error-modal .modal-content .modal-buttons {
  margin-top: 10px;
}
#warning-error-modal .modal-content .modal-buttons .modal-button {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 15px;
  line-height: 20px;
  background-color: unset;
  width: 184px;
  position: relative;
  -webkit-transform: unset;
          transform: unset;
  right: unset;
  top: unset;
}
#warning-error-modal .modal-content .modal-buttons .modal-left-btn {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/green-button-left.png), url(../img/ui/buttons/green-button-center.png), url(../img/ui/buttons/green-button-right.png);
}
#warning-error-modal .modal-content .modal-buttons .modal-left-btn:hover {
  background-image: url(../img/ui/buttons/green-button-hover_left.png), url(../img/ui/buttons/green-button-hover_center.png), url(../img/ui/buttons/green-button-hover_right.png);
}
#warning-error-modal .modal-content .modal-buttons .modal-left-btn:active {
  background-image: url(../img/ui/buttons/green-button-active_left.png), url(../img/ui/buttons/green-button-active_center.png), url(../img/ui/buttons/green-button-active_right.png);
}
#warning-error-modal .modal-content .modal-buttons .modal-right-btn {
  cursor: pointer;
  --base-button_height: 43px;
  --default-button-segment-width: 43px !important;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, calc(var(--default-button-segment-width) - 1px) 0px, right 0px;
  background-size: var(--base-button_height) var(--base-button_height), calc(100% - calc(var(--default-button-segment-width) * 2) + 2px) var(--base-button_height), var(--base-button_height) var(--base-button_height);
  min-width: calc(var(--base-button_height) * 2 + 1px);
  height: var(--base-button_height);
  border-radius: 5px;
  background-origin: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: unset;
  background-image: url(../img/ui/buttons/red-button-left.png), url(../img/ui/buttons/red-button-center.png), url(../img/ui/buttons/red-button-right.png);
}
#warning-error-modal .modal-content .modal-buttons .modal-right-btn:hover {
  background-image: url(../img/ui/buttons/red-button-hover_left.png), url(../img/ui/buttons/red-button-hover_center.png), url(../img/ui/buttons/red-button-hover_right.png);
}
#warning-error-modal .modal-content .modal-buttons .modal-right-btn:active {
  background-image: url(../img/ui/buttons/red-button-active_left.png), url(../img/ui/buttons/red-button-active_center.png), url(../img/ui/buttons/red-button-active_right.png);
}
#modal-spine-animation .modal-content {
  width: 636px;
  height: 500px;
}
#modal-spine-animation .red-ribbon {
  display: none;
}
#modal-spine-animation .modal-right-btn {
  padding: 0 25px;
  font-size: 30px;
  line-height: 40px;
  font-family: Edit Undo BRK;
}
#modal-how-to-play {
  z-index: 5;
}
#modal-how-to-play .modal-content {
  width: 910px;
  height: 500px;
  padding-left: 56px;
  padding-top: 56px;
  padding-right: 20px;
  padding-bottom: 30px;
}
#modal-how-to-play .modal-body {
  overflow-y: auto;
  height: 100%;
}
#modal-how-to-play .howtoplay-content {
  margin-right: 24px;
}
#modal-how-to-play .howtoplay-control {
  margin-bottom: 4px;
}
#modal-how-to-play .subtitle {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
}
#modal-how-to-play .content-align {
  margin-top: 20px;
  margin-bottom: 20px;
}
#modal-how-to-play .controls-text {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 24px;
  color: #fff;
}
#modal-how-to-play .howtoplay-text {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 24px;
  color: #fff;
  margin-top: 8px;
  margin-bottom: 12px;
}
#modal-how-to-play .subsubtitle {
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
#modal-how-to-play p {
  display: block !important;
}
.material-icon {
  --icon-width: 26px;
  --icon-height: 30px;
  display: inline;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  display: inline-block;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.icon-material_skeleton_bonefragment {
  background-image: url(../img/ui/icons/materials/icon-material_skeleton_bonefragment.png);
}
.icon-material_skeleton_plate {
  background-image: url(../img/ui/icons/materials/icon-material_skeleton_plate.png);
}
.icon-material_skeleton_skull {
  background-image: url(../img/ui/icons/materials/icon-material_skeleton_skull.png);
}
.icon-material_ghostelf_spectralthread {
  background-image: url(../img/ui/icons/materials/icon-material_ghostelf_spectralthread.png);
}
.icon-material_ghostelf_cloth {
  background-image: url(../img/ui/icons/materials/icon-material_ghostelf_cloth.png);
}
.icon-material_ghostelf_spirit {
  background-image: url(../img/ui/icons/materials/icon-material_ghostelf_spirit.png);
}
.icon-material_orc_bruteblade {
  background-image: url(../img/ui/icons/materials/icon-material_orc_bruteblade.png);
}
.icon-material_orc_fang {
  background-image: url(../img/ui/icons/materials/icon-material_orc_fang.png);
}
.icon-material_orc_tusk {
  background-image: url(../img/ui/icons/materials/icon-material_orc_tusk.png);
}
.icon-material_hero_aspirantsoul {
  background-image: url(../img/ui/icons/materials/icon-material_hero_aspirantsoul.png);
}
.icon-material_hero_championsoul {
  background-image: url(../img/ui/icons/materials/icon-material_hero_championsoul.png);
}
.icon-material_hero_conquerorsoul {
  background-image: url(../img/ui/icons/materials/icon-material_hero_conquerorsoul.png);
}
.icon-material_modifier_monsterscale {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_monsterscale.png);
}
.icon-material_modifier_monsterpleura {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_monsterpleura.png);
}
.icon-material_modifier_monstermedula {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_monstermedula.png);
}
.icon-material_modifier_coolingvapors {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_coolingvapors.png);
}
.icon-material_modifier_fairydust {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_fairydust.png);
}
.icon-material_modifier_wardingsigil {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_wardingsigil.png);
}
.icon-material_modifier_gambesonfilament {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_gambesonfilament.png);
}
.icon-material_modifier_woolpadding {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_woolpadding.png);
}
.icon-material_modifier_glassbauble {
  background-image: url(../img/ui/icons/materials/icon-material_modifier_glassbauble.png);
}
.icon-material_ethereal {
  background-image: url(../img/ui/icons/materials/icon-material-ethereal.png);
}
.icon-material_extract {
  background-image: url(../img/ui/icons/materials/icon-material-extract.png);
}
.icon-material_mineral {
  background-image: url(../img/ui/icons/materials/icon-material-mineral.png);
}
.icon-material_organic {
  background-image: url(../img/ui/icons/materials/icon-material-organic.png);
}
.icon-material_scrap {
  background-image: url(../img/ui/icons/materials/icon-material-scrap.png);
}
.icon-material_category-5 {
  background-image: url(../img/ui/icons/materials/icon-material-ethereal.png);
}
.icon-material_category-4 {
  background-image: url(../img/ui/icons/materials/icon-material-extract.png);
}
.icon-material_category-3 {
  background-image: url(../img/ui/icons/materials/icon-material-mineral.png);
}
.icon-material_category-2 {
  background-image: url(../img/ui/icons/materials/icon-material-organic.png);
}
.icon-material_category-1 {
  background-image: url(../img/ui/icons/materials/icon-material-scrap.png);
}
.material-icon-frame {
  --icon-width: 26px;
  --icon-height: 30px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
}
.material-modifier-icon-frame {
  --icon-width: 26px;
  --icon-height: 30px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
}
.material-icon-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.material-icon-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.material-icon-text * {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  display: flex;
  align-items: center;
  height: 12px;
}
.material-icon-text .amount-required {
  color: #CD3838;
}
.recipe-materials-left-col,
.recipe-materials-right-col {
  position: relative;
  width: 50%;
}
.recipe-materials-right-col .material-icon-line {
  flex-direction: row-reverse;
}
.recipe-materials-right-col .material-icon-text {
  align-items: flex-start;
}
.recipe-materials-cols {
  display: flex;
  justify-content: center;
  margin-top: 9px;
}
.material-icon-line {
  --index: 0;
  --item-height: 30px;
  --item-left-offset: 14px;
  --item-top-offset: 3px;
  --item-left-padding: 3px;
  position: absolute;
  height: var(--item-height);
  top: calc(var(--index) * var(--item-height) - (var(--item-top-offset) * var(--index)));
  /* Default style for left col items*/
  right: calc(var(--index) * var(--item-left-offset) * -1 + var(--item-left-padding));
  gap: 3px;
}
.recipe-materials-right-col .material-icon-line {
  left: calc(var(--index) * var(--item-left-offset));
  right: unset;
}
/* Generates n classes:nth-child() style based on index used to calculate the "hexa-grid" item positions*/
.material-icon-line:nth-child(5) {
  --index: 4;
}
.material-icon-line:nth-child(4) {
  --index: 3;
}
.material-icon-line:nth-child(3) {
  --index: 2;
}
.material-icon-line:nth-child(2) {
  --index: 1;
}
.material-icon-line:nth-child(1) {
  --index: 0;
}
#distilling-recipe-modal .modal-content {
  width: 640px;
  height: 494px;
}
#distilling-recipe-modal_canvas {
  width: 300px;
  height: 300px;
}
#distilling-recipe-modal .modal-body,
#distillation-failed-modal .modal-body,
#recipe-reward-modal .modal-body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#distilling-recipe-modal .modal-buttons,
#distillation-failed-modal .modal-buttons,
#recipe-reward-modal .modal-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
}
#distilling-recipe-modal .modal-content,
#distillation-failed-modal .modal-content,
#recipe-reward-modal .modal-content {
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
#skip-distill-modal-btn {
  width: 130px;
}
#distillation-failed-modal .modal-content {
  width: 665px;
  height: 325px;
}
#recipe-reward-modal .modal-content {
  width: 636px;
  height: 500px;
}
#recipe-reward-modal .reward-item-container {
  width: 100%;
}
#recipe-reward-modal .modal-buttons button {
  width: 191px;
}
.material-icon-line-reward {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.distillation-failed-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 100px;
}
p.distillation-failed-msg {
  margin-left: 30px;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}
.material-icon-name-container {
  display: flex;
  align-items: center;
}
.recipe-icon {
  --icon-width: 32px;
  --icon-height: 36px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/ui/icons/recipe-icon.png);
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
}
.crafting-icon {
  --icon-width: 32px;
  --icon-height: 32px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/ui/images/hourglass-item-icon.png);
  width: var(--icon-width);
  height: var(--icon-height);
  min-width: var(--icon-width);
  min-height: var(--icon-height);
}
.recipe-card-item .gear-card-item-box {
  position: relative;
}
.recipe-card-item .gear-card-item-box .status-icon {
  position: absolute;
  right: 8px;
  top: 8px;
}
.craft-recipe-modifiers-pane {
  background-image: url(../img/ui/boxes/border-box-xl.png);
  width: 348px;
  height: 328px;
  padding: 8px 0;
  border: none;
}
.material-modifier-affix-slot-container {
  width: 30px;
  height: 34px;
  display: inline-block;
}
.material-modifier-affix-slot {
  background-image: url(../img/ui/frames/material-modifier-affix-slot.png);
  background-repeat: no-repeat;
  width: 30px;
  height: 34px;
  display: inline-block;
}
.material-slot-l {
  background-image: url(../img/ui/frames/materials/material-slot_enabled.png);
  background-repeat: no-repeat;
  background-size: contain;
  --slot-width: 78px;
  --slot-height: 90px;
  width: var(--slot-width);
  height: var(--slot-height);
  display: inline-block;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.material-slot-l:disabled {
  background-image: url(../img/ui/frames/materials/material-slot_disabled.png);
}
.material-slot-l:hover {
  background-image: url(../img/ui/frames/materials/material-slot_hover.png);
}
.material-slot-l:active {
  background-image: url(../img/ui/frames/materials/material-slot_active.png);
}
.material-slot-l .material-icon {
  --icon-width: var(--slot-width);
  --icon-height: var(--slot-height);
}
.material-slot-s-empty {
  background-image: url(../img/ui/frames/materials/material-slot_disabled.png);
  background-repeat: no-repeat;
  width: 26px;
  height: 30px;
  display: inline-block;
}
.material-slot-m {
  background-image: url(../img/ui/frames/materials/material-slot_enabled.png);
  background-repeat: no-repeat;
  background-size: contain;
  --slot-width: 52px;
  --slot-height: 60px;
  width: var(--slot-width);
  height: var(--slot-height);
  display: inline-block;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.material-slot-m:disabled {
  background-image: url(../img/ui/frames/materials/material-slot_disabled.png);
}
.material-slot-m:hover {
  background-image: url(../img/ui/frames/materials/material-slot_hover.png);
}
.material-slot-m:active {
  background-image: url(../img/ui/frames/materials/material-slot_active.png);
}
.material-slot-m .material-icon {
  --icon-width: var(--slot-width);
  --icon-height: var(--slot-height);
}
.craft-modifiers-materials-container {
  display: flex;
}
.craft-modifiers-col {
  width: 50%;
  position: relative;
}
.material-modifier-info-button {
  position: absolute;
  right: 10px;
  top: -12px;
}
.material-modifier-affix-name {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 15px;
}
.material-modifier-affix-container {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  margin-top: 12px;
  margin-right: 24px;
}
.info-button-sm {
  --button-width: 27px;
  --button-height: 28px;
  background-image: url(../img/ui/buttons/info-sm-button-neutral.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--button-width);
  height: var(--button-height);
}
.info-button-sm:hover {
  background-image: url(../img/ui/buttons/info-sm-button-neutral_hover.png);
}
.info-button-sm:active {
  background-image: url(../img/ui/buttons/info-sm-button-neutral_active.png);
}
.material-modifier-hexa-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.material-modifier-secondary-slots-container {
  display: flex;
  margin-top: -16px;
  align-items: center;
  gap: 5px;
}
#select-modifiers-materials-modal {
  background: none;
}
#select-modifiers-materials-modal .buttons-container {
  width: 283px;
  margin: 0 auto;
}
#select-modifiers-materials-modal-header-container {
  width: calc(100% - 12px);
  position: absolute;
  top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#select-modifiers-materials-modal-header {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 20px;
}
#select-modifiers-materials-modal .modal-body {
  width: 100%;
}
#select-modifiers-materials-modal .modal-content {
  width: 320px;
  min-height: 180px;
  flex-direction: column;
  display: flex;
  align-items: center;
  padding-top: 40px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 10px;
}
#select-modifiers-materials-modal-remove_btn {
  width: 100%;
}
.craft-recipe-materials-info {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
}
.craft-recipe-materials-info .material-icon-count {
  display: flex;
  align-items: center;
}
.distillation-recipe-materials-info .info-button-sm,
.craft-recipe-materials-info .info-button-sm {
  position: absolute;
  right: 0;
  top: 19px;
}
.craft-recipe-materials-info-col {
  display: flex;
  flex-direction: column;
  width: 50%;
  position: relative;
}
#craft-materials-info-modal .modal-content,
#craft-modifiers-info-modal .modal-content {
  width: 666px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-top: 68px;
  padding-bottom: 30px;
}
#craft-materials-info-modal .modal-body,
#craft-modifiers-info-modal .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#craft-materials-info-modal button.close:not(.modal-close-btn),
#craft-modifiers-info-modal button.close:not(.modal-close-btn) {
  margin-top: 28px;
}
.material-table-border-cell {
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  background-size: var(--border-height) var(--border-height), calc(100% - calc(var(--border-height) * 2)) var(--border-height), var(--border-height) var(--border-height);
  min-width: calc(var(--border-height) * 2 + 1px);
  width: var(--border-width);
  height: var(--border-height);
  background-origin: border-box;
  background-color: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -6px;
}
.material-table-border-header-cell {
  --border-height: 32px;
  --border-width: 100%;
  background-image: url(../img/ui/boxes/white-box-dark-sm-left.png), url(../img/ui/boxes/white-box-dark-sm-center.png), url(../img/ui/boxes/white-box-dark-sm-right.png);
}
.material-table-border-row-cell {
  --border-height: 46px;
  --border-width: 100%;
  background-image: url(../img/ui/boxes/white-box-dark-md-left.png), url(../img/ui/boxes/white-box-dark-md-center.png), url(../img/ui/boxes/white-box-dark-md-right.png);
}
.material-table-cell {
  background-repeat: repeat;
  background-position: 0px 0px, var(--border-height) 0px, right 0px;
  width: var(--border-width);
  height: var(--border-height);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -6px;
}
.material-table-header-cell {
  --border-height: 32px;
  --border-width: 100%;
  background-image: url(../img/ui/boxes/white-box-dark-sm-center.png);
}
.material-table-row-cell {
  --border-height: 46px;
  --border-width: 100%;
  background-image: url(../img/ui/boxes/white-box-dark-md-center.png);
}
.modifier-table-cell-text {
  text-transform: uppercase;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 15px;
  display: flex;
  justify-content: center;
}
.modifier-table-header-text {
  text-transform: uppercase;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 20px;
  line-height: 20px;
}
#craft-materials-info-modal-table {
  display: grid;
  grid-template-columns: 141px 258px 141px;
}
#craft-modifiers-info-modal-table {
  display: grid;
  grid-template-columns: 141px 141px 258px;
}
#craft-modifiers-info-modal-table .modifier-box {
  font-size: 12px;
}
.text-ellipsis-animation:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
          animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}
@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
#armory_gear_card-craft_btn {
  width: 142px;
}
.distillation-recipe-materials-info {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  height: 100%;
}
.distillation-recipe-materials-info-col-left,
.distillation-recipe-materials-info-col-right {
  width: 50%;
  position: relative;
}
.distillation-recipe-materials-info-col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.material-icon-count {
  display: flex;
  align-items: center;
}
.item-crafting-info,
.item-crafted-info {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.item-crafting-button-container {
  width: 182px;
  margin-top: 22px;
}
.item-crafting-button-container button {
  width: 100%;
}
.item-crafting-button-container .timer-container-default {
  position: relative;
  top: unset;
  margin: 0;
  margin-top: -2px;
  --base-button_height: 32px !important;
  --default-button-segment-width: 32px !important;
  width: 100%;
}
.item-crafting-button-container .timer-container-default .timer-progress-bar.completed {
  background: #9cd11f;
}
.recipe-card-item .recipe-card-item-level {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  font-size: 15px;
  text-align: center;
}
.recipe-card-item .fill-space {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 76px;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item-card-badge {
  position: absolute;
  top: 2px;
  right: 15px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  z-index: 1;
}
.recipe-crafting-progress {
  width: 68px;
  height: 12px;
  position: relative;
  --progress: 0%;
}
.recipe-crafting-progress-outer {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  --base-height: 12px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-image: url(../img/pass/season-bar-left.png), url(../img/pass/season-bar-center.png), url(../img/pass/season-bar-right.png);
  background-size: var(--base-height) var(--base-height), calc(100% - calc(var(--base-height) * 2)) var(--base-height), var(--base-height) var(--base-height);
  background-origin: border-box;
  background-position: 0px 0px, var(--base-height) 0px, right 0px;
  height: var(--base-height);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
.recipe-crafting-progress-inner {
  background-color: #A02888;
  height: 5px;
  position: absolute;
  top: 2px;
  left: 2px;
  --border-width: 4px;
  width: calc(var(--progress) - var(--border-width));
  max-width: calc(100% - var(--border-width));
  transition: all 0.5s ease-in;
}
.item-card-badge {
  --side-blocks-width: 8px;
  --side-blocks-height: 18px;
  display: inline-block;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: var(--side-blocks-width) var(--side-blocks-height), calc(100% - calc(var(--side-blocks-width) * 2)) var(--side-blocks-height), var(--side-blocks-width) var(--side-blocks-height);
  background-position: 0px 0px, var(--side-blocks-width) 0px, right 0px;
  background-image: url(../img/ui/buttons/notifiy-badge_left.png), url(../img/ui/buttons/notifiy-badge_center.png), url(../img/ui/buttons/notifiy-badge_right.png);
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  min-width: 34px;
  height: 18px;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 12px;
  padding-left: 7px;
  padding-right: 7px;
}
#craft-section-no-items,
#distillation-section-no-items {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#craft-section-no-items .distill-icon-lg,
#distillation-section-no-items .distill-icon-lg {
  --icon-size: 96px;
}
.craft-no-recipes-msg {
  width: 358px;
  margin-top: 24px;
  text-align: center;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0em;
}
.material-modifier-hexa-container .close-button-xs {
  position: absolute;
  right: -10px;
  top: 4px;
  z-index: 1;
}
.material-modifier-hexa-container .material-secondary-modifier-slot-container:first-of-type .close-button-xs {
  left: -10px;
  right: unset;
}
.material-secondary-modifier-slot-container,
.material-primary-modifier-slot-container {
  position: relative;
}
.material-modifier-affix-type {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
}
.material-modifier-affix-description {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  text-transform: uppercase;
  margin-top: 6px;
  margin-bottom: 15px;
  font-size: 10px;
  line-height: 11px;
  color: #BDBDBD;
}
.material-modifier-values-chances {
  margin-top: 3px;
}
.material-modifier-chance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.material-modifier-chance-item-name {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
}
.material-modifier-chance-item-chance {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
}
.modifier-chance-color-0 {
  color: #FF6666 !important;
}
.modifier-chance-color-1 {
  color: #F7B610 !important;
}
.modifier-chance-color-2 {
  color: #88E35A !important;
}
.material-modifier-affix-col {
  height: 84px;
  padding: 0 20px;
}
.recipe-card-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.recipe-card-gold .gold-icon {
  --icon-size: 30px;
  margin-left: 3px;
  margin-right: 3px;
}
.recipe-card-gold .gold-cost,
.recipe-card-gold .gold-cost-label {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}
.craft-recipe-materials-info-header {
  text-transform: uppercase;
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  color: #F2F2F2;
}
.material-line-required-animation {
  -webkit-animation-name: requiredMaterialShake;
          animation-name: requiredMaterialShake;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
@-webkit-keyframes requiredMaterialShake {
  0%,
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}
@keyframes requiredMaterialShake {
  0%,
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}
span.distillation-chance {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  font-size: 30px;
  margin: 25px;
}
#craft-modifiers-info-modal_modifier-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
#craft-modifiers-info-modal_modifier-description {
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 12px;
  line-height: 24px;
  width: 336px;
  margin-left: 40px;
  margin-top: 10px;
}
.modifier-selection-list {
  display: block;
  margin-top: 10px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.modifier-material-list-item {
  display: block;
  width: 100%;
  height: 36px;
}
.material-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
}
.material-select-option:hover {
  background-image: url(../img/ui/boxes/fill-space-box-gray-1.png);
  background-repeat: no-repeat;
}
.material-select-option .material-icon-container {
  position: relative;
  display: flex;
  align-items: center;
}
.material-select-option .material-option-selected-icon {
  margin-left: 4px;
  margin-right: 4px;
  width: 18px;
  height: 16px;
}
.material-select-option .material-icon-container:first-child {
  margin-left: 26px;
}
.material-select-option .material-icon-required-count {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  font-size: 12px;
  position: absolute;
  right: -3px;
  bottom: -6px;
}
.material-select-option .material-icon-name {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  text-transform: uppercase;
  font-size: 15px;
  margin-left: 8px;
}
.material-select-option .gear-text-container {
  width: 100px;
}
.material-select-option .modifier-box {
  font-size: 12px;
}
#recipe_display_card_crafting_canvas {
  width: 300px;
  height: 120px;
}
.sortby-select-container {
  position: relative;
  width: 193px;
  height: 43px;
}
.sortby-select-button {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
.sortby-select-options-popup {
  position: absolute;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 189px;
  top: calc(100% - 34px);
  z-index: 1;
  left: 2px;
  padding-top: 32px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
}
.sortby-select-options {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
}
.sortby-select-option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 26px;
  padding-left: 4px;
}
.sortby-select-option:hover {
  background-image: url(../img/ui/boxes/fill-space-box-gray-1.png);
}
.sortby-select-option .sortby-selected-icon {
  margin-right: 5px;
  width: 18px;
  height: 16px;
}
.sortby-select-option .sortby-select-option-text:first-child {
  margin-left: 23px;
}
.sortby-select-option-text {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
}
.modifier-selection-empty-msg {
  font-family: Edit Undo BRK, ui-sans-serif, system-ui, -apple-system;
  font-size: 15px;
  line-height: 20px;
  text-transform: uppercase;
  color: #fff;
  --outline-width: 2px;
  --outline-color: #000;
  text-shadow: calc(-1 * var(--outline-width)) calc(-1 * var(--outline-width)) 0 var(--outline-color), 0px calc(-1 * var(--outline-width)) 0 var(--outline-color), var(--outline-width) calc(-1 * var(--outline-width)) 0 var(--outline-color), calc(-1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color), 0px var(--outline-width) 0 var(--outline-color), calc(1 * var(--outline-width)) var(--outline-width) 0 var(--outline-color);
  --outline-width: 1px;
  width: 201px;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 16px;
  text-align: center;
}
/*
@media (min-height:768px) and (max-width: 1366px) and (min-resolution: 2dppx){
    @import "menu_tablet.less";
}

@media (max-width: 850px), (max-width: 900px) /*and (min-resolution: 3dppx)*/

/*# sourceMappingURL=app.fc8d3ec61a968afe8a70.css.map*/