.euler__loading {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 2rem;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  background-color: #F2F4F2;
}
.euler__loading-bar {
  position: relative;
  z-index: 0;
  width: 40vw;
  height: 20px;
  margin: 0 auto;
  border-radius: 5rem;
  background-color: #e2e2e2;
  overflow: hidden;
}
.euler__loading-bar::before {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 5rem;
  content: "";
  height: 100%;
  -webkit-animation-name: loadingItem;
          animation-name: loadingItem;
  -webkit-animation-timing-function: cubic-bezier(0.2, 0.22, 0, 0.98);
          animation-timing-function: cubic-bezier(0.2, 0.22, 0, 0.98);
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  background-color: #32a56f;
}
@-webkit-keyframes loadingItem {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes loadingItem {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.euler__loading-text {
  font-size: 1.5rem;
  font-weight: 400;
  font-family: "Inter", sans-serif;
}
.euler__loading > i {
  display: inline-block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 4rem;
  background-image: -webkit-gradient(linear, right top, left top, from(#2D9564), color-stop(#32a56f), to(#3dc787));
  background-image: linear-gradient(to left, #2D9564, #32a56f, #3dc787);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-animation-name: spinn;
          animation-name: spinn;
  -webkit-animation-timing-function: cubic-bezier(0.52, 0, 0.4, 0.99);
          animation-timing-function: cubic-bezier(0.52, 0, 0.4, 0.99);
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes spinn {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spinn {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@media (min-width: 1200px) {
  .euler__loading {
    border-radius: 1vw;
    padding: 1vw;
    gap: 1vw;
  }
  .euler__loading-bar {
    position: relative;
    z-index: 0;
    width: 40vw;
    height: 5vh;
    border-radius: 1vw;
  }
  .euler__loading-bar::before {
    border-radius: 5vw;
  }
  .euler__loading-text {
    font-size: 1.3vw;
  }
  .euler__loading > i {
    font-size: 3vw;
  }
}
@-webkit-keyframes eulerLoading {
  0% {
    background-color: #f6fcf8;
  }
  50% {
    background-color: #dee4e0;
  }
  100% {
    background-color: #f6fcf8;
  }
}
@keyframes eulerLoading {
  0% {
    background-color: #f6fcf8;
  }
  50% {
    background-color: #dee4e0;
  }
  100% {
    background-color: #f6fcf8;
  }
}

.euler__feed-loading {
  width: 100%;
  height: auto;
  padding: 3rem 0 20rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #FFFFFF;
}
.euler__feed-loading > .fa-circle-notch {
  display: inline-block;
  font-size: 3rem;
  color: #9c9c9c;
  -webkit-animation-name: spinn;
          animation-name: spinn;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.49, 1);
          animation-timing-function: cubic-bezier(0.42, 0, 0.49, 1);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@keyframes spinn {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    rotate: 360deg;
  }
}
@media (min-width: 1200px) {
  .euler__feed-loading {
    padding: 3vh 0;
  }
  .euler__feed-loading > .fa-circle-notch {
    font-size: 3vw;
  }
}