/* line 3, app/assets/stylesheets/react_app/loading.css.scss */
.loading {
  margin: 20px auto;
  width: 16px;
  height: 16px;
  background-image: linear-gradient(90deg, #dedee3, #dedee3), linear-gradient(90deg, #dedee3, #dedee3), linear-gradient(90deg, #dedee3, #dedee3), linear-gradient(90deg, #dedee3, #dedee3), linear-gradient(90deg, #dedee3, #dedee3);
  background-size: 4px 8px, 4px 12px, 4px 16px, 4px 12px, 4px 8px;
  background-position: 0;
  background-repeat: no-repeat;
  animation: wait 1s steps(1, start) infinite;
  zoom: 2;
}

/* line 26, app/assets/stylesheets/react_app/loading.css.scss */
.loading.red {
  background-image: linear-gradient(90deg, #ff3c37, #ff3c37), linear-gradient(90deg, #ff3c37, #ff3c37), linear-gradient(90deg, #ff3c37, #ff3c37), linear-gradient(90deg, #ff3c37, #ff3c37), linear-gradient(90deg, #ff3c37, #ff3c37);
}

/* line 34, app/assets/stylesheets/react_app/loading.css.scss */
.loading.white {
  background-image: linear-gradient(90deg, white, white), linear-gradient(90deg, white, white), linear-gradient(90deg, white, white), linear-gradient(90deg, white, white), linear-gradient(90deg, white, white);
}

/* line 42, app/assets/stylesheets/react_app/loading.css.scss */
.loading.inline {
  display: inline-block;
  margin: unset;
  margin-left: 8px;
  vertical-align: middle;
  zoom: 1;
}

@keyframes wait {
  20% {
    background-position-x: 0, 6px, 12px, 18px, 24px;
  }
  40% {
    background-position-x: 6px, 12px, 18px, 24px, 0;
  }
  60% {
    background-position-x: 12px, 18px, 24px, 0, 6px;
  }
  80% {
    background-position-x: 18px, 24px, 0, 6px, 12px;
  }
  100% {
    background-position-x: 24px, 0, 6px, 12px, 18px;
  }
}