.loader-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}


.loader {
  height: 100px !important;
  width: 100px;
  overflow: visible;
  background-color: transparent !important;
  z-index: 1000000;
}

#anon_loader, #custom_loader {
    position: absolute;
    top: 50%;
    left: 50%;
}

#anon_loader {
    height: 50px;
    animation: spin 2s infinite linear;
    font-size: 3em !important;
    transform-origin: 50% -8.5%;
    text-align: center;
}

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  font: 8vmin/ 50px cookie;
  text-align: center;
  animation: ani 2s ease-in-out infinite;
}

.cube__face {
  position: absolute;
  margin: -25px;
  width: 50px;
  height: 50px;
  transform: rotate3d(var(--i, 0), var(--j, 1), 0, var(--a, 0deg)) translateZ(25px);
  background-image: url("../images/BlankFace.png");
  background-size: cover;
  background-color: white;
}

  .cube__face:nth-child(n + 5) {
    --i: 1;
    --j: 0;
  }

  .cube__face:nth-child(1) {
    background-image: url("../images/Face.png");
  }

  .cube__face:nth-child(2) {
    --a: 90deg;
  }

  .cube__face:nth-child(3) {
    --a: 180deg;
  }

  .cube__face:nth-child(4) {
    --a: 270deg;
  }

  .cube__face:nth-child(5) {
    --a: 90deg;
  }

  .cube__face:nth-child(6) {
    --a: -90deg;
  }

@keyframes ani {
  to {
    transform: rotateY(1turn) rotateX(1turn);
  }
}

/* Balls Loader */

.loader-ball {
    animation: grow infinite 2s;
    background: var(--IMD-COLOR);
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin: 0 .2rem;
}

    .loader-ball:nth-child(1) {
        animation-delay: .0s;
    }

    .loader-ball:nth-child(2) {
        animation-delay: .2s;
    }

    .loader-ball:nth-child(3) {
        animation-delay: .4s;
    }

@keyframes grow {
    to {
        transform: scale(0);
    }
}