@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: 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-container {
  width: 455px;
}
.dono-train-container .dono-train {
  height: 71px;
}
.dono-train-container .dono-train:not(.goals) {
  border: none;
}
.dono-train-container .dono-train.ready {
  --train-color-1: #ffffff;
  --train-color-2: #ffffff;
  --train-color-3: #ffffff;
  --train-color-4: #ffffff;
  --train-color-5: #ffffff;
  --train-color-6: #ffffff;
  --train-color-7: #ffffff;
  --train-color-8: #ffffff;
  --train-color-9: #ffffff;
  --train-color-10: #ffffff;
  --train-color-11: #ffffff;
}
.dono-train-container .dono-train.primed {
  --text-2xl: 1rem;
  --train-color-1: #ffffff;
  --train-color-2: #ffffff;
  --train-color-3: #ffffff;
  --train-color-4: #ffffff;
  --train-color-5: #ffffff;
  --train-color-6: #ffffff;
  --train-color-7: #ffffff;
  --train-color-8: #ffffff;
  --train-color-9: #ffffff;
  --train-color-10: #ffffff;
  --train-color-11: #ffffff;
}
.dono-train-container .dono-train.in-progress {
  --text-2xl: 1rem;
  --text-4xl: 1.6rem;
  --train-color-1: #ffffff;
  --train-color-2: #ffffff;
  --train-color-3: #ffffff;
  --train-color-4: #ffffff;
  --train-color-5: #ffffff;
  --train-color-6: #ffffff;
  --train-color-7: #ffffff;
  --train-color-8: #ffffff;
  --train-color-9: #ffffff;
  --train-color-10: #ffffff;
  --train-color-11: #ffffff;
}
.dono-train-container .dono-train.in-progress .record-bar {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 10%, #ffffff 20%, #ffffff 30%, #ffffff 40%, #ffffff 50%, #ffffff 60%, #ffffff 70%, #ffffff 80%, #ffffff 90%, #ffffff 100%);
}
.dono-train-container .dono-train.finished {
  --train-color-1: #ffffff;
  --train-color-2: #ffffff;
  --train-color-3: #ffffff;
  --train-color-4: #ffffff;
  --train-color-5: #ffffff;
  --train-color-6: #ffffff;
  --train-color-7: #ffffff;
  --train-color-8: #ffffff;
  --train-color-9: #ffffff;
  --train-color-10: #ffffff;
  --train-color-11: #ffffff;
}
.dono-train-container .dono-train.cooldown {
  --text-2xl: 1.2rem;
  --text-3xl: 1.75rem;
  --train-color-1: #ffffff;
  --train-color-2: #ffffff;
  --train-color-3: #ffffff;
  --train-color-4: #ffffff;
  --train-color-5: #ffffff;
  --train-color-6: #ffffff;
  --train-color-7: #ffffff;
  --train-color-8: #ffffff;
  --train-color-9: #ffffff;
  --train-color-10: #ffffff;
  --train-color-11: #ffffff;
}
.dono-train-container .dono-train.goals {
  border-image: conic-gradient(from calc(360deg * var(--progress)) at 50% 50%, #ffffff 0%, #ffffff 10%, #ffffff 20%, #ffffff 30%, #ffffff 40%, #ffffff 50%, #ffffff 60%, #ffffff 70%, #ffffff 80%, #ffffff 90%, #ffffff 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;
}.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;
}