/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/app.scss ***!
  \**************************************************************************************************************/
html {
  --saturation: saturate(1);
  --opactity: 1;
  --toc-yellow: rgb(229, 154, 15);
  --font-color: rgb(250, 250, 250);
  --background-color: rgb(6, 6, 6);
  --disabled-color: rgb(128, 128, 128);
  --footer-color: rgb(128, 128, 128);
  --rarity-common: rgb(196, 196, 196);
  --rarity-uncommon: rgb(72, 121, 41);
  --rarity-rare: rgb(49, 80, 150);
  --rarity-epic: rgb(100, 56, 126);
  --rarity-legendary: rgb(227, 137, 35);
  --rarity-mythic: rgb(196, 40, 40);
  --rarity-century-train: rgb(128, 128, 148);
  --idle-time: rgb(92, 92, 92);
  --idle-train: rgb(64, 64, 64);
  --npc-thomas: rgb(83, 145, 133);
  --npc-culprit: rgb(52, 18, 6);
  --train-region: rgba(255, 255, 255, 0.5);
  --rating-amazing: rgb(0, 255, 13);
  --rating-excellent: rgb(0, 200, 25);
  --rating-verygood: rgb(79, 170, 0);
  --rating-good: rgb(184, 184, 9);
  --rating-normal: rgb(232, 178, 17);
  --rating-poor: rgb(189, 158, 20);
  --rating-bad: rgb(137, 92, 33);
  --rating-disgusting: rgb(159, 57, 57);
}

html[night-mode=true] {
  --saturation: saturate(0.5);
  --opacity: 0.25;
  --toc-yellow: rgba(229, 154, 15, 0.7);
  --font-color: rgba(196, 196, 196, 0.7);
  --background-color: rgb(0, 0, 0);
  --disabled-color: rgba(128, 128, 128, 0.7);
  --footer-color: rgb(128, 128, 128);
  --rarity-common: rgb(196, 196, 196);
  --rarity-uncommon: rgb(72, 121, 41);
  --rarity-rare: rgb(49, 80, 150);
  --rarity-epic: rgb(100, 56, 126);
  --rarity-legendary: rgb(227, 137, 35);
  --rarity-mythic: rgb(196, 40, 40);
  --rarity-century-train: rgb(128, 128, 148);
  --idle-time: rgb(92, 92, 92);
  --idle-train: rgb(64, 64, 64);
  --npc-thomas: rgb(83, 145, 133);
  --npc-culprit: rgb(52, 18, 6);
  --train-region: rgba(255, 255, 255, 0.5);
  --rating-amazing: rgb(0, 255, 13);
  --rating-excellent: rgb(0, 200, 25);
  --rating-verygood: rgb(79, 170, 0);
  --rating-good: rgb(184, 184, 9);
  --rating-normal: rgb(232, 178, 17);
  --rating-poor: rgb(189, 158, 20);
  --rating-bad: rgb(137, 92, 33);
  --rating-disgusting: rgb(159, 57, 57);
}

.animate-fade-out {
  animation-name: fade-out;
  animation-duration: 550ms;
}

@keyframes fade-out {
  from {
    opacity: 1;
    transform: translate(0);
  }
  to {
    opacity: 0;
    transform: translate(0, 2em);
  }
}
.animate-stranger,
.animate-thomas,
.animate-otto,
.animate-culprit {
  animation-name: npc-animation;
  animation-duration: 2000ms;
}

@keyframes npc-animation {
  0% {
    opacity: 0;
    bottom: -500px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}
.animate-vial {
  transform-origin: 0;
  animation-name: animate-vial;
  animation-duration: 2s;
  transform: rotate(1) scale(1);
}

@keyframes animate-vial {
  0%, 25% {
    opacity: 0;
    transform: rotate(0) scale(0);
  }
  26% {
    opacity: 0.1;
  }
  85% {
    transform: rotate(360deg) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: rotate(1) scale(1);
  }
}
.card {
  display: flex;
  position: relative;
  top: 20em;
  left: -2em;
  width: 150px;
  height: 150px;
}
.card button {
  display: flex;
  align-self: center;
  height: fit-content;
  width: 7em;
  padding: 1em 1.5em;
  margin: 1em;
}

button {
  margin: 10px 0;
  padding: 5px 10px;
  color: var(--font-color);
  background-color: var(--background-color);
  border: 2px solid var(--toc-yellow);
  border-radius: 0.5em;
  font-size: 0.95rem;
  font-weight: 400;
}

button:disabled {
  color: var(--disabled-color);
  border-color: var(--disabled-color);
}

.button-wrapper {
  text-align: center;
}

.dismiss-npc-button {
  position: absolute;
  top: 0;
  right: 0;
}

.payout-button,
.claim-button,
.dispatch-button {
  display: flex;
  position: absolute;
  top: 45px;
  left: 20%;
  text-align: center;
  padding: 0 0.5em 0 0;
}

.payout-button {
  top: -2px;
  left: 72%;
  padding: 0.1em 0.8em;
  font-size: 0.8rem;
}

.claim-button {
  top: -5px;
  left: 72%;
}

.dispatch-button {
  top: -5px;
  left: 62%;
}

.claim-all-button,
.dispatch-all-button {
  position: absolute;
  top: -43px;
  right: 0;
  float: right;
}

progress {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  top: -5px;
  width: 95%;
  height: 6px;
  border-radius: 5px;
  padding: 0;
  margin: 0;
}

progress::-webkit-progress-bar {
  background-color: var(--background-color);
  border: 1px solid var(--toc-yellow);
  border-radius: 10px;
  overflow: hidden;
}

progress::-webkit-progress-value {
  background-color: var(--toc-yellow);
  transition: filter 300ms, width 200ms;
}

.time-remaining {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  width: 8%;
  left: -0.9em;
}
.time-remaining::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: 0 -18px;
  border-radius: 50%;
  border: 3px solid var(--toc-yellow);
  pointer-events: none;
  background-color: var(--background-color);
}
.time-remaining.train-common::before {
  border-color: var(--rarity-common);
}
.time-remaining.train-uncommon::before {
  border-color: var(--rarity-uncommon);
}
.time-remaining.train-rare::before {
  border-color: var(--rarity-rare);
}
.time-remaining.train-epic::before {
  border-color: var(--rarity-epic);
}
.time-remaining.train-legendary::before {
  border-color: var(--rarity-legendary);
}
.time-remaining.train-mythic::before {
  border-color: var(--rarity-mythic);
}
.time-remaining.train-century-train::before {
  border-color: var(--rarity-century-train);
}
.time-remaining .time-remaining-time,
.time-remaining .time-idle-time {
  position: relative;
  z-index: 2;
}
.time-remaining .time-idle-time {
  color: var(--idle-time);
}

.npc-culprit .card-nft img,
.npc-thomas .card-nft img {
  top: -150px;
  transform: rotate(12deg) scale(1.5) translateY(-75px);
}

.npc-encounter .npc-stranger {
  position: relative;
  width: 292px;
  height: 500px;
  background-image: url(/dbc35e314d1b310c62bd.webp);
  background-size: cover;
}
.npc-encounter .npc-stranger button {
  position: relative;
  top: -150px;
  left: -75px;
}
.npc-encounter .npc-stranger .vials {
  position: relative;
  width: 292px;
  height: 500px;
  left: -150px;
}
.npc-encounter .npc-stranger .vials::before {
  content: "";
  position: absolute;
  width: 292px;
  height: 500px;
  background-size: cover;
  background-image: url(/61ad7f89e1425ce68adb.webp);
  transform: rotate(25deg);
}
.npc-encounter .npc-stranger .vial-common::before {
  background-image: url(/61ad7f89e1425ce68adb.webp);
}
.npc-encounter .npc-stranger .vial-uncommon::before {
  background-image: url(/b0e1636300f74bbcd302.webp);
}
.npc-encounter .npc-stranger .vial-rare::before {
  background-image: url(/2b848368d139de96cd0c.webp);
}
.npc-encounter .npc-stranger .vial-epic::before {
  background-image: url(/887ef03f963a3e98220c.webp);
}
.npc-encounter .npc-stranger .vial-legendary::before {
  background-image: url(/ae04c2310771da1eb1cc.webp);
}
.npc-encounter .npc-stranger .vial-mythic::before {
  background-image: url(/35df32cd06f16f8f2603.webp);
}
.npc-encounter .npc-otto {
  position: relative;
  width: 292px;
  height: 500px;
  background-image: url(/633429365200dbc570b2.webp);
  background-size: cover;
}
.npc-encounter .npc-thomas {
  position: relative;
  width: 292px;
  height: 500px;
  background-image: url(/fd8eaedb31b210bdd7dc.webp);
  background-size: cover;
}
.npc-encounter .npc-culprit {
  position: relative;
  width: 292px;
  height: 500px;
  background-image: url(/068bf6cfc55fd55626dc.webp);
  background-size: cover;
}

.common {
  color: var(--rarity-common);
}

.uncommon {
  color: var(--rarity-uncommon);
}

.rare {
  color: var(--rarity-rare);
}

.epic {
  color: var(--rarity-epic);
}

.legendary {
  color: var(--rarity-legendary);
}

.mythic {
  color: var(--rarity-mythic);
}

.loading {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

.loader-container {
  position: relative;
  max-height: 124px;
  top: 5vh;
  flex: 1;
}
.loader-text {
  position: relative;
  max-height: 20px;
  top: 35vh;
  flex: 1;
}
.loader-logo-inner {
  position: relative;
  top: 55px;
  left: 24px;
  min-height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/13592e3d43bd838353c9.png);
}
.loader-logo-outer {
  position: relative;
  top: 0;
  left: 0;
  min-width: 80px;
  min-height: 80px;
  background-size: cover;
  background-image: url(/cf652c0628a09607e256.png);
  animation: rotate 1.8s linear reverse infinite;
}
@keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.curtain {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 15em;
  background: linear-gradient(0, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0) 100%);
}

.rewards-wrapper {
  max-width: 380px;
}

.claimcenter-wrapper {
  display: flex;
  flex-direction: column;
}

#image-rewards {
  position: fixed;
  bottom: 0;
  right: 10px;
  z-index: 3;
}

.claimcenter-wrapper,
.rewards-wrapper {
  width: 100%;
  text-align: left;
}
.claimcenter-wrapper h4,
.claimcenter-wrapper div,
.rewards-wrapper h4,
.rewards-wrapper div {
  flex: 1;
}

.current-rewards,
.unclaimed-rewards {
  align-self: center;
  text-align: center;
}

.trains-wrapper {
  padding-left: 1em;
  text-align: -webkit-center;
}

.train-row {
  position: relative;
  line-height: 40px;
  border: 2px solid var(--rarity-century-train);
  border-radius: 5px;
  margin: 10px 0;
  user-select: none;
  width: 95%;
}
.train-row.train-idle {
  border-color: var(--idle-train);
}

.train-info {
  display: flex;
  flex-direction: row;
}

.train-details {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.train-icon {
  position: relative;
  top: -0.1em;
  left: -0.7em;
  text-align: center;
  align-self: center;
  font-size: 24px;
  width: 28px;
  height: 28px;
  margin-right: -0.5em;
  background-size: cover;
  overflow: hidden;
}
.train-icon-background {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
}
.train-icon-background.common {
  background-color: var(--rarity-common);
}
.train-icon-background.uncommon {
  background-color: var(--rarity-uncommon);
}
.train-icon-background.rare {
  background-color: var(--rarity-rare);
}
.train-icon-background.epic {
  background-color: var(--rarity-epic);
}
.train-icon-background.legendary {
  background-color: var(--rarity-legendary);
}
.train-icon-background.mythic {
  background-color: var(--rarity-mythic);
}
.train-icon-background.thomas {
  background-color: var(--npc-thomas);
}
.train-icon-background.culprit {
  background-color: var(--npc-culprit);
}
.train-icon img {
  border: 2px solid var(--toc-yellow);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.train-name {
  padding: 0 1em 0 0;
  text-overflow: ellipsis;
  z-index: 0;
}

.train-payout {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  padding: 0 0.5em 0 0;
}

.train-number {
  font-size: 0.75rem;
}

.train-region {
  display: inline-block;
  padding: 0 5px;
  font-size: 14px;
  color: var(--train-region);
}

.train-progress,
.train-rating {
  display: flex;
  position: absolute;
  text-align: center;
  padding: 0 0.5em 0 0;
  width: 80%;
  max-width: 240px;
}

.train-progress {
  top: 44px;
  left: 20%;
}

.train-rating {
  top: -3px;
  left: 20%;
}
.train-rating span {
  display: inline-flex;
  min-width: 10px;
  height: 4px;
  background-color: transparent;
}
.train-rating span.long {
  width: 35px;
}
.train-rating span.amazing {
  background-color: var(--rating-amazing);
}
.train-rating span.excellent {
  background-color: var(--rating-excellent);
}
.train-rating span.verygood {
  background-color: var(--rating-verygood);
}
.train-rating span.good {
  background-color: var(--rating-good);
}
.train-rating span.normal {
  background-color: var(--rating-normal);
}
.train-rating span.poor {
  background-color: var(--rating-poor);
}
.train-rating span.bad {
  background-color: var(--rating-bad);
}
.train-rating span.disgusting {
  background-color: var(--rating-disgusting);
}
.train-rating span.century-train {
  background-color: var(--idle-time);
}
.train-rating span:last-of-type {
  position: relative;
  top: -2px;
  min-width: 20px;
  height: 9px;
  background-color: var(--background-color);
  justify-content: center;
}
.train-rating span:last-of-type p {
  position: relative;
  top: -25px;
  right: 0;
  color: var(--font-color);
  font-size: 11px;
}

.stats-wrapper {
  display: flex;
  flex-direction: row;
  margin: 1em 0;
}

.info-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0.25em 0 0;
}
.info-wrapper div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0.15em;
  gap: 0.3em;
}

.warning {
  color: orangered;
  padding: 0.5rem 1rem;
  border: 1px dashed orangered;
  border-radius: 5px;
  margin: 0.5rem 0 1rem;
  text-align: center;
}

.info-wrapper,
.stats-wrapper {
  border: 1px solid var(--toc-yellow);
  padding: 0.5em 1em;
  border-radius: 0.5em;
}

.stats {
  font-size: 1rem;
  text-align: center;
  padding: 0 0.5em;
}

.stats-bold-font {
  font-weight: 600;
}

.stats-small-font {
  font-size: 0.7rem;
}

.stats-total-decimals {
  margin: 4px 0 0 -3px;
}

html,
body {
  display: flex;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  justify-content: center;
  height: max-content;
  width: 100vw;
  min-height: max-content;
  overflow-x: hidden;
  color: var(--font-color);
  background-color: var(--background-color);
}

h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: max-content;
  width: 100vw;
  min-height: max-content;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  opacity: var(--opacity);
  filter: var(--saturation);
}

#footer {
  display: flex;
  position: fixed;
  align-items: flex-end;
  bottom: 5px;
  left: 0;
  width: max-content;
  height: 2em;
}

.toc-font {
  font-size: 0.7rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  padding-left: 1.35em;
  color: var(--toc-yellow);
}

.toc-font-bold {
  font-size: 1rem;
  font-weight: 600;
}

.footer {
  color: var(--footer-color);
  font-size: 0.5rem;
}

.spacer {
  min-height: 5em;
}
.spacer.small {
  min-height: 1em;
}

.hidden {
  display: none;
}

.app-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}

.app-wrapper::-webkit-scrollbar {
  display: none;
}

.account-wrapper {
  margin: 0;
}

#info,
#trains-in-transit,
#trains-idle,
#trains-out-of-service,
#trains-waiting-for-it {
  width: 100%;
  text-align: left;
}