/* This css should be loaded first thing in each main page, ie. xcomponent html pages to style loading indicator or any initial look until rest of styles are loaded and apps are bootstraped */ 
/* Please only use minimal styles here so browser can download it as fast as possible */

@keyframes spinner-animation-stretch {
  0% {
    transform: scaleY(0.3);
    opacity: 0.2; }
  20% {
    transform: scaleY(0.65);
    opacity: 0.6; }
  50% {
    transform: scaleY(1);
    opacity: 1; }
  80% {
    transform: scaleY(0.6);
    opacity: 0.5; }
  100% {
    transform: scaleY(0);
    opacity: 0; } }

.spinner > div {
  height: 100%;
  background-color: #323232;
  animation: spinner-animation-stretch 1.2s infinite ease alternate;
  animation-fill-mode: both; }
  .spinner > div:nth-child(6n + 6) {
    animation-delay: 0.6s; }
  .spinner > div:nth-child(6n + 5) {
    animation-delay: 0.5s; }
  .spinner > div:nth-child(6n + 4) {
    animation-delay: 0.4s; }
  .spinner > div:nth-child(6n + 3) {
    animation-delay: 0.3s; }
  .spinner > div:nth-child(6n + 2) {
    animation-delay: 0.2s; }
  .spinner > div:nth-child(6n + 1) {
    animation-delay: 0.1s; }

.spinner-large {
  width: 33px;
  height: 84px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .spinner-large > div {
    -ms-flex: 0 0 3px;
    flex: 0 0 3px; }

.spinner-center {
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
}