@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;
  }@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: 468px;
}
.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;
  opacity: 0;
  transition: opacity 1000ms;
}.dono-train-container .dono-train.ready {
  --train-color-1: #8141a6;
  --train-color-2: #743b97;
  --train-color-3: #673488;
  --train-color-4: #5a2e79;
  --train-color-5: #4d286a;
  --train-color-6: #40215b;
  --train-color-7: #4d286a;
  --train-color-8: #5a2e79;
  --train-color-9: #673488;
  --train-color-10: #743b97;
  --train-color-11: #8141a6;
}
.dono-train-container .dono-train.primed {
  --train-color-1: #8141a6;
  --train-color-2: #743b97;
  --train-color-3: #673488;
  --train-color-4: #5a2e79;
  --train-color-5: #4d286a;
  --train-color-6: #40215b;
  --train-color-7: #4d286a;
  --train-color-8: #5a2e79;
  --train-color-9: #673488;
  --train-color-10: #743b97;
  --train-color-11: #8141a6;
}
.dono-train-container .dono-train.in-progress {
  --train-color-1: #8141a6;
  --train-color-2: #743b97;
  --train-color-3: #673488;
  --train-color-4: #5a2e79;
  --train-color-5: #4d286a;
  --train-color-6: #40215b;
  --train-color-7: #4d286a;
  --train-color-8: #5a2e79;
  --train-color-9: #673488;
  --train-color-10: #743b97;
  --train-color-11: #8141a6;
}
.dono-train-container .dono-train.in-progress .record-bar {
  background: linear-gradient(to bottom, #8141a6 0%, #743b97 10%, #673488 20%, #5a2e79 30%, #4d286a 40%, #40215b 50%, #4d286a 60%, #5a2e79 70%, #673488 80%, #743b97 90%, #8141a6 100%);
}
.dono-train-container .dono-train.finished {
  --train-color-1: #8141a6;
  --train-color-2: #743b97;
  --train-color-3: #673488;
  --train-color-4: #5a2e79;
  --train-color-5: #4d286a;
  --train-color-6: #40215b;
  --train-color-7: #4d286a;
  --train-color-8: #5a2e79;
  --train-color-9: #673488;
  --train-color-10: #743b97;
  --train-color-11: #8141a6;
}
.dono-train-container .dono-train.cooldown {
  --train-color-1: #8141a6;
  --train-color-2: #743b97;
  --train-color-3: #673488;
  --train-color-4: #5a2e79;
  --train-color-5: #4d286a;
  --train-color-6: #40215b;
  --train-color-7: #4d286a;
  --train-color-8: #5a2e79;
  --train-color-9: #673488;
  --train-color-10: #743b97;
  --train-color-11: #8141a6;
}
.dono-train-container .dono-train.goals {
  border-image: conic-gradient(from calc(360deg * var(--progress)) at 50% 50%, #8141a6 0%, #743b97 10%, #673488 20%, #5a2e79 30%, #4d286a 40%, #40215b 50%, #4d286a 60%, #5a2e79 70%, #673488 80%, #743b97 90%, #8141a6 100%) 1 1;
}
.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;
}