#loading-dots-wrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color: var(--color-logo-bg, #ffffff);
  justify-content: center;
  align-items: center;
}

.loading-dots-container {
  --dot-size: 24px;
  display: inline-flex;
  column-gap: calc(var(--dot-size) / 2);
}

.loading-dot {
  border-radius: 50%;
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: #495057;
  animation: flash 1s alternate infinite;
}

.loading-dot-left {
  animation-delay: 0s;
}

.loading-dot-middle {
  animation-delay: 0.25s;
}

.loading-dot-right {
  animation-delay: 0.5s;
}

@keyframes flash {
  0% {
    background-color: #495057;
  }
  50%, 100% {
    background-color: #e9ecef;
  }
}