/******* Loading containers **********/

.loadingWrapper {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--loading-wrapper-background-color);
  width: 100%;
  height: 100%;
  transition: all ease 0.6s;
}

.waiting {
  position: relative;
  height: 100%;
  text-align: center;
}

.loading-container {
  position: absolute;
  width: 100%;
  top: 40%
}

@keyframes green1 {
  from {
    fill: var(--keyframes-green1-from-fill-color);}
  to {fill: var(--keyframes-green1-to-fill-color);}
}

@keyframes green2 {
  from {fill: var(--keyframes-green2-from-fill-color);}
  to {fill: var(--keyframes-green2-to-fill-color);}
}

@keyframes green3 {
  from {fill: var(--keyframes-green3-from-fill-color);}
  to {fill: var(--keyframes-green3-to-fill-color);}
}

@keyframes blue1 {
  from {fill: var(--keyframes-blue1-from-fill-color);}
  to {fill: var(--keyframes-blue1-to-fill-color);}
}

@keyframes blue2 {
  from {fill: var(--keyframes-blue2-from-fill-color);}
  to {fill: var(--keyframes-blue2-to-fill-color);}
}

@keyframes blue3 {
  from {fill: var(--keyframes-blue3-from-fill-color);}
  to {fill: var(--keyframes-blue3-to-fill-color);}
}

.color {
  animation-duration: .3s;
  animation-direction: alternate;
  /* webkit-animation-direction: alternate; */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.color-1 {
  fill: var(--color-1-fill-color);
  animation-name: green1;
  animation-delay: 0s;
}

.color-2 {
  fill: var(--color-2-fill-color);
  animation-name: green2;
  animation-delay: .5s;

}

.color-3 {
  fill: var(--color-3-fill-color);
  animation-name: green3;
  animation-delay: 1s;
}

.color-4 {
  fill: var(--color-4-fill-color);
  animation-name: blue1;
  animation-delay: 1.5s;
}

.color-5 {
  fill: var(--color-5-fill-color);
  animation-name: blue2;
  animation-delay: 2s;
}
.color-6 {
  fill: var(--color-6-fill-color);
  animation-name: blue3;
  animation-delay: 2.5s;
}
