app-root > .index-loading {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    color: #fff;

    font-family: Roboto, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica,
        Arial, 'Lucida Grande', sans-serif;

    font-size: 2.5rem;
}

body {
    margin: 0;
    padding: 0;
}

.index-loading .logo-wrapper {
    margin-top: -10px;
    margin-bottom: 10px;
}

.index-loading .logo-wrapper img {
    max-width: 300px;
}

@media only screen and (min-width: 600px) {
    .index-loading .logo-wrapper img {
        max-width: 500px;
    }
}

.index-loading .spinner {
    margin: 10px auto;
    /* width: 50px; */
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.index-loading .spinner > div {
    background-color: #fff;
    height: 100%;
    width: 6px;
    display: inline-block;
    margin: 0 3px 0 0;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.index-loading .spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.index-loading .spinner .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.index-loading .spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.index-loading .spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1);
    }
}

@keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }
}

/* .app-spinner {
  width: 100px;
  height: 100px;
}

.app-progress-spinner.app-progress-spinner-indeterminate-animation[mode=indeterminate] {
  animation: app-progress-spinner-linear-rotate 2s linear infinite;
}

.app-progress-spinner {
  display: block;
  position: relative;
}

.app-spinner svg {
  width: 100px;
  height: 100px;
}

.app-progress-spinner svg {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  left: 0;
  transform-origin: center;
  overflow: visible;
}

.app-spinner svg circle {
  animation-name: app-progress-spinner-stroke-rotate-100;
  stroke-dasharray: 282.743px;
  stroke-width: 10%;
}

.app-progress-spinner.app-progress-spinner-indeterminate-animation[mode=indeterminate] circle {
  transition-property: stroke;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(.35,0,.25,1);
  animation-iteration-count: infinite;
}

.app-progress-spinner circle {
  fill: transparent;
  transform-origin: center;
  transition: stroke-dashoffset 225ms linear;
}

.app-progress-spinner circle, .app-spinner circle {
  stroke: #fff;
}

@keyframes app-progress-spinner-linear-rotate {
  0% {
    transform: rotate(0);
  }

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

@keyframes app-progress-spinner-stroke-rotate-100 {
  0% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(0);
  }

  12.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(0);
  }

  12.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(72.5deg);
  }

  25% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(72.5deg);
  }

  25.0001% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(270deg);
  }

  37.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(270deg);
  }

  37.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(161.5deg);
  }

  50% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(161.5deg);
  }

  50.0001% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(180deg);
  }

  62.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(180deg);
  }

  62.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(251.5deg);
  }

  75% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(251.5deg);
  }

  75.0001% {
      stroke-dashoffset: 268.60617px;
      transform: rotate(90deg);
  }

  87.5% {
      stroke-dashoffset: 56.54867px;
      transform: rotate(90deg);
  }

  87.5001% {
      stroke-dashoffset: 56.54867px;
      transform: rotateX(180deg) rotate(341.5deg);
  }

  100% {
      stroke-dashoffset: 268.60617px;
      transform: rotateX(180deg) rotate(341.5deg);
  }
} */

/* 
@keyframes dots {
  50% {
    transform: translateY(-.4rem);
  }
  100% {
    transform: translateY(0);
  }
}

.d {
  animation: dots 1.5s ease-out infinite;
}

.d-2 {
  animation-delay: .5s;
}

.d-3 {
  animation-delay: 1s;
} */

/* .index-loading {
  display: none;
}

app-root:empty + .index-loading {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  color: #fff;
  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 2.5rem;
}

body {
  background-color: #3f51b5 !important;
  margin: 0;
  padding: 0;
}

app-root:empty + .index-loading .logo-wrapper {
  margin-top: -10px;
  margin-bottom: 10px;
}

app-root:empty + .index-loading .logo-wrapper img {
  max-width: 150px;
}

app-root:empty + .index-loading .loading {
  display: flex;
}

@keyframes dots {
  50% {
    transform: translateY(-.4rem);
  }
  100% {
    transform: translateY(0);
  }
}

app-root:empty + .index-loading .d {
  animation: dots 1.5s ease-out infinite;
}

app-root:empty + .index-loading .d-2 {
  animation-delay: .5s;
}

app-root:empty + .index-loading .d-3 {
  animation-delay: 1s;
} */