/**
 * Loading
 */

.loading-spinner {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 1.4rem;
  pointer-events: none;
  -webkit-pointer-events: none;
  position: fixed;
  bottom: 2rem;
  right: 1rem;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  -webkit-animation: fadeIn .8s linear 0s 1 normal;
  animation: fadeIn .8s linear 0s 1 normal;
  transform: translate(-61%, -61%);
  z-index: 10;

  &.ng-enter {
    opacity: 0;
  }

  &.ng-leave-active {
    opacity: 0;
  }

  &::after {
    border: solid .2rem transparent;
    border-top-color: #004db3;
    border-left-color: #2483ff;
    content: '';
    display: block;
    height: 3rem;
    width: 3rem;
    border-radius: 5rem;

    -webkit-animation: rotateR 400ms linear infinite;
    -moz-animation: rotateR 400ms linear infinite;
    animation: rotateR 400ms linear infinite;
  }

  .background {
    display: block;
    width: 10rem;
    height: 10rem;
    opacity: .8;
    position: fixed;
    top: -2rem;
    left: -2rem;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(5rem);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rotateR {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes flipX {
  0% {
    transform: perspective(0) rotateX(0);
  }

  100% {
    transform: perspective(0) rotateX(360deg);
  }
}