@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap");@property --progress {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}

@keyframes anim {
    0% {
      --progress: 0;
    }
    100% {
      --progress: 1;
    }
  }

.ailenax-box {
    background-color: #000;
    color: #fff;
    
    padding: 10px;

    --progress: 0;
}

.ailenax-box {
  &.theme-rainbow {
    border-radius: 5px;
    border-width: 3px;
    border-style: solid;
    border-image: conic-gradient(from calc(360deg * var(--progress)) at 50% 50%, #8570ff 0%, #70a1ff 10%, #70fcf2 20%, #70ff96 30%, #c2ff74 40%, #fdef70 50%, #ffb970 60%, #ff7370 70%, #d370cf 80%, #d370cf 90%, #8570ff 100%) 1 1;
    animation: anim 5s linear 0s infinite normal forwards;
  }
}
.ailenax-box.theme-ice {
      border-radius: 5px;
  border-width: 3px;
  border-style: solid;
  border-image: conic-gradient(from calc(360deg * var(--progress)) at 50% 50%, #0000f5 0%, #0080ff 33%, #00ffff 66%, #0000f5 100%) 1 1;
  animation: anim 5s linear 0s infinite normal forwards; 
}@keyframes emote-jump {
  0% {
    transform: translate(-50%, 105%) scale(0) rotateZ(0deg);
  }
  50% {
    transform: translate(-50%, calc(var(--heightMultiplier) * -5%)) scale(var(--scale)) rotateZ(calc(180deg * var(--rotations)));
  }
  100% {
    transform: translate(-50%, 105%) scale(0) rotateZ(calc(360deg * var(--rotations)));
  }
}
.jumping-emotes {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.jumping-emotes > .jumping-emote {
  --x: 5%;
  --scale: 0.5;
  --heightMultiplier: 1;
  --animationDelay: 0;
  --rotations: 1;
  position: absolute;
  left: calc(1% * var(--x));
  bottom: 0;
  transform: translate(-50%, 105%) scale(var(--scale));
  animation: emote-jump 4000ms cubic-bezier(0.65, 0, 0.35, 1) calc(1ms * var(--animationDelay)) infinite alternate-reverse forwards;
}@property --train-color-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-4 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-5 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-6 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-7 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-8 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-9 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-10 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@property --train-color-11 {
  syntax: "<color>";
  inherits: true;
  initial-value: #70ff96;
}
@keyframes train-shine {
  to {
    background-position: 200% center;
  }
}
@keyframes train-record-shine {
  to {
    background-position: center 200%;
  }
}
.dono-train-container {
  width: 460px;
}
.dono-train-container .dono-train {
  width: 100%;
  height: 100px;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  border-width: 5px;
  border-style: solid;
  animation: anim 5s linear 0s infinite normal forwards;
  border-image: conic-gradient(from calc(360deg * var(--progress)) at 50% 50%, var(--train-color-1) 0%, var(--train-color-2) 10%, var(--train-color-3) 20%, var(--train-color-4) 30%, var(--train-color-5) 40%, var(--train-color-6) 50%, var(--train-color-7) 60%, var(--train-color-8) 70%, var(--train-color-9) 80%, var(--train-color-10) 90%, var(--train-color-11) 100%) 1 1;
  --opacityDelay: 0ms;
  transition: --train-color-1 2000ms, --train-color-2 2000ms, --train-color-3 2000ms, --train-color-4 2000ms, --train-color-5 2000ms, --train-color-6 2000ms, --train-color-7 2000ms, --train-color-8 2000ms, --train-color-9 2000ms, --train-color-10 2000ms, --train-color-11 2000ms, opacity 1000ms ease-in-out var(--opacityDelay);
}
.dono-train-container .dono-train > * {
  flex: 1 1 auto;
  width: 100%;
}
.dono-train-container .dono-train .train-color {
  background: linear-gradient(to right, var(--train-color-1) 0%, var(--train-color-2) 10%, var(--train-color-3) 20%, var(--train-color-4) 30%, var(--train-color-5) 40%, var(--train-color-6) 50%, var(--train-color-7) 60%, var(--train-color-8) 70%, var(--train-color-9) 80%, var(--train-color-10) 90%, var(--train-color-11) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 0% center;
  animation: train-shine 4s linear reverse infinite;
}
.dono-train-container .dono-train.in-progress .record-bar {
  position: absolute;
  top: 0;
  height: 300%;
  width: 4px;
  background-size: 100% 200%;
  background-position: center 0%;
  animation: train-record-shine 4s linear reverse infinite;
}
.dono-train-container .dono-train-state-enter {
  opacity: 0;
  transform: translateY(150%);
}
.dono-train-container .dono-train-state-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1000ms, transform 1000ms;
}
.dono-train-container .dono-train-state-exit {
  opacity: 1;
  transform: translateY(0);
}
.dono-train-container .dono-train-state-exit-active {
  opacity: 0;
  transition: opacity 1000ms, transform 1000ms;
  transform: translateY(-150%);
}
.dono-train-container .dono-train.goals {
  height: unset;
  border-width: 2px;
  font-size: 1.3rem;
  opacity: 0;
  transition: opacity 1000ms;
}.dono-train.ready {
  --train-color-1: #00ff00;
  --train-color-2: #33ff00;
  --train-color-3: #66ff00;
  --train-color-4: #99ff00;
  --train-color-5: #ccff00;
  --train-color-6: #ffff00;
  --train-color-7: #ccff00;
  --train-color-8: #99ff00;
  --train-color-9: #66ff00;
  --train-color-10: #33ff00;
  --train-color-11: #00ff00;
}
.dono-train.primed {
  --train-color-1: #cc6600;
  --train-color-2: #cc7000;
  --train-color-3: #cc7a00;
  --train-color-4: #cc8400;
  --train-color-5: #cc8e00;
  --train-color-6: #cc9800;
  --train-color-7: #cc8e00;
  --train-color-8: #cc8400;
  --train-color-9: #cc7a00;
  --train-color-10: #cc7000;
  --train-color-11: #cc6600;
}
.dono-train.in-progress {
  --train-color-1: #8570ff;
  --train-color-2: #70a1ff;
  --train-color-3: #70fcf2;
  --train-color-4: #70ff96;
  --train-color-5: #c2ff74;
  --train-color-6: #fdef70;
  --train-color-7: #ffb970;
  --train-color-8: #ff7370;
  --train-color-9: #d370cf;
  --train-color-10: #d370cf;
  --train-color-11: #8570ff;
}
.dono-train.in-progress.threshold-0 {
  --train-color-1: #5f332f;
  --train-color-2: #653a35;
  --train-color-3: #6b413b;
  --train-color-4: #714841;
  --train-color-5: #775047;
  --train-color-6: #7d574d;
  --train-color-7: #775047;
  --train-color-8: #714841;
  --train-color-9: #6b413b;
  --train-color-10: #653a35;
  --train-color-11: #5f332f;
}
.dono-train.in-progress.threshold-1 {
  --train-color-1: #5e636c;
  --train-color-2: #666b74;
  --train-color-3: #6e737c;
  --train-color-4: #767b84;
  --train-color-5: #7e838c;
  --train-color-6: #868b94;
  --train-color-7: #7e838c;
  --train-color-8: #767b84;
  --train-color-9: #6e737c;
  --train-color-10: #666b74;
  --train-color-11: #5e636c;
}
.dono-train.in-progress.threshold-2 {
  --train-color-1: #cd840e;
  --train-color-2: #d18b1e;
  --train-color-3: #d5922e;
  --train-color-4: #d9993e;
  --train-color-5: #dda04e;
  --train-color-6: #e1a75e;
  --train-color-7: #dda04e;
  --train-color-8: #d9993e;
  --train-color-9: #d5922e;
  --train-color-10: #d18b1e;
  --train-color-11: #cd840e;
}
.dono-train.in-progress.threshold-3 {
  --train-color-1: #ff9999;
  --train-color-2: #ffb380;
  --train-color-3: #ffd699;
  --train-color-4: #ffff99;
  --train-color-5: #99ff99;
  --train-color-6: #99ffe6;
  --train-color-7: #99ffff;
  --train-color-8: #80b3ff;
  --train-color-9: #9999ff;
  --train-color-10: #d699ff;
  --train-color-11: #ff9999;
}
.dono-train.in-progress.threshold-4 {
  --train-color-1: #ff9999;
  --train-color-2: #ffb380;
  --train-color-3: #ffd699;
  --train-color-4: #ffff99;
  --train-color-5: #99ff99;
  --train-color-6: #99ffe6;
  --train-color-7: #99ffff;
  --train-color-8: #80b3ff;
  --train-color-9: #9999ff;
  --train-color-10: #d699ff;
  --train-color-11: #ff9999;
}
.dono-train.in-progress.threshold-5 {
  --train-color-1: #ff0000;
  --train-color-2: #ff5a00;
  --train-color-3: #ffaa00;
  --train-color-4: #ffff00;
  --train-color-5: #00ff00;
  --train-color-6: #00ffaa;
  --train-color-7: #00ffff;
  --train-color-8: #005aff;
  --train-color-9: #0000ff;
  --train-color-10: #aa00ff;
  --train-color-11: #ff0000;
}
.dono-train.in-progress.threshold-6 {
  --train-color-1: #ff0000;
  --train-color-2: #ff5a00;
  --train-color-3: #ffaa00;
  --train-color-4: #ffff00;
  --train-color-5: #00ff00;
  --train-color-6: #00ffaa;
  --train-color-7: #00ffff;
  --train-color-8: #005aff;
  --train-color-9: #0000ff;
  --train-color-10: #aa00ff;
  --train-color-11: #ff0000;
}
.dono-train.in-progress .record-bar {
  background: linear-gradient(to bottom, #8570ff 0%, #70a1ff 10%, #70fcf2 20%, #70ff96 30%, #c2ff74 40%, #fdef70 50%, #ffb970 60%, #ff7370 70%, #d370cf 80%, #d370cf 90%, #8570ff 100%);
}
.dono-train.finished {
  --train-color-1: #ff9999;
  --train-color-2: #ffb380;
  --train-color-3: #ffd699;
  --train-color-4: #ffff99;
  --train-color-5: #99ff99;
  --train-color-6: #99ffe6;
  --train-color-7: #99ffff;
  --train-color-8: #80b3ff;
  --train-color-9: #9999ff;
  --train-color-10: #d699ff;
  --train-color-11: #ff9999;
}
.dono-train.cooldown {
  --train-color-1: #cc0000;
  --train-color-2: #d11919;
  --train-color-3: #d63333;
  --train-color-4: #db4d4d;
  --train-color-5: #b30000;
  --train-color-6: #990000;
  --train-color-7: #800000;
  --train-color-8: #660000;
  --train-color-9: #4d0000;
  --train-color-10: #cc0000;
  --train-color-11: #cc0000;
}
.goal-container {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: rgb(0, 0, 0) 0px 0px 2px, rgb(0, 0, 0) 0.1px 1px 0.1px, rgb(0, 0, 0) 1px 1px 0.1px, rgb(0, 0, 0) 1px 0.1px 0.1px, rgb(0, 0, 0) -1px 1px 0.1px, rgb(0, 0, 0) -1px 0.1px 0.1px, rgb(0, 0, 0) -1px -1px 0.1px, rgb(0, 0, 0) 0.1px -1px 0.1px, rgb(0, 0, 0) 1px -1px 0.1px, rgb(0, 0, 0) 0.1px 1.5px 0.1px, rgb(0, 0, 0) 1.5px 1.5px 0.1px, rgb(0, 0, 0) 1.5px 0.1px 0.1px, rgb(0, 0, 0) -1.5px 1.5px 0.1px, rgb(0, 0, 0) -1.5px 0.1px 0.1px, rgb(0, 0, 0) -1.5px -1.5px 0.1px, rgb(0, 0, 0) 0.1px -1.5px 0.1px, rgb(0, 0, 0) 1.5px -1.5px 0.1px, rgb(0, 0, 0) 0.1px 2px 0.1px, rgb(0, 0, 0) 2px 2px 0.1px, rgb(0, 0, 0) 2px 0.1px 0.1px, rgb(0, 0, 0) -2px 2px 0.1px, rgb(0, 0, 0) -2px 0.1px 0.1px, rgb(0, 0, 0) -2px -2px 0.1px, rgb(0, 0, 0) 0.1px -2px 0.1px, rgb(0, 0, 0) 2px -2px 0.1px;
}
.goal-container > .simple-dono-goal {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(68, 68, 68, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.goal-container > .simple-dono-goal > .progress-bar {
  position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #dec5c5;
  z-index: 1;
  transition: width 400ms ease-in-out;
}
.goal-container > .simple-dono-goal > .text {
  z-index: 2;
}
.goal-container > .simple-dono-goal > .text > .progress {
  color: #dec5c5;
}.simple-subathon-widget {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 1;
  width: 375px;
  font-size: 14px;
}
.simple-subathon-widget > hr {
  margin: 10px 0;
}
.simple-subathon-widget > .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.simple-subathon-widget > .header > img {
  width: 44px;
  margin: 0 10px;
}
.simple-subathon-widget > .header > .sub-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.simple-subathon-widget > .header > .sub-header > .title {
  text-align: center;
  font-size: 2em;
}
.simple-subathon-widget > .header > .sub-header > .subtitle {
  text-align: center;
  font-size: 1.5em;
}
.simple-subathon-widget > .timer {
  margin: 0 auto;
  text-align: center;
  font-size: 2.5em;
  padding-top: 5px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(0deg, #f77083, #bd70ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.simple-subathon-widget > .info-text {
  padding: 5px 0;
  text-align: center;
}
.simple-subathon-widget > .info-text > .info-extend-title {
  font-size: 1.4em;
  padding-bottom: 10px;
}
.simple-subathon-widget > .info-text > .info-extend-title > .colored {
  background: -webkit-linear-gradient(0deg, #ffb870, #e070b4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.simple-subathon-widget > .info-text > .info-extend-line {
  font-size: 1.8em;
}
.simple-subathon-widget > .info-text > .info-extend-line > .colored {
  background: -webkit-linear-gradient(0deg, #e070b4, #c270f4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}