/* after update css, need to rename this file otherwise
   it will be not updated doe to cached after deployment  */
#preparation-app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#preparation-app > .spinner {
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  border: 0.5rem solid #d8d8d8;
  margin: 2rem;
  border-right-color: #ba324f;
  animation: rotate 1s linear infinite;
  transition: opacity 100ms linear;
  opacity: 0.75;
}

@media only screen and (max-width: 480px) {
  #preparation-app > .spinner {
    width: 8rem;
    height: 8rem;
    border-radius: 8rem;
    border-width: 1rem;
  }
}