.containerAnimatedLogoDappler {
  --darkColor: #1e1f36;
  --lightPurple: #8286dd;
  --baseWidth: 300px;
  --baseDist: calc(var(--baseWidth) / 30);
  --horizontalDist: calc(2.2 * var(--baseDist));
  position: relative;
  width: var(--baseWidth);
  height: var(--baseWidth);
  background-color: var(--lightPurple);
  border-radius: 16px;
  /* color: var(--lightPurple); */
  /* background-color: lightpink; */
}

.containerAnimatedLogoDappler > * > .dotSmall {
  position: absolute;
  width: var(--baseDist);
  height: var(--baseDist);
  border-radius: 50%;
  background: var(--darkColor);
  border-color: var(--darkColor);
}
.containerAnimatedLogoDappler > .line1 > .dotSmall {
  left: calc(15 * var(--baseDist) - 3 * var(--horizontalDist));
  transform: translateX(-50%);
}

.containerAnimatedLogoDappler > .line1 > .dotSmall:nth-child(1) {
  top: calc(11.25 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line1 > .dotSmall:nth-child(2) {
  top: calc(13.75 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line1 > .dotSmall:nth-child(3) {
  top: calc(16.25 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line1 > .dotSmall:nth-child(4) {
  top: calc(18.75 * var(--baseDist));
}

.containerAnimatedLogoDappler > .line2 > .dotSmall {
  left: calc(15 * var(--baseDist) - 2 * var(--horizontalDist));
  transform: translateX(-50%);
}

.containerAnimatedLogoDappler > .line2 > .dotSmall:nth-child(1) {
  top: calc(10 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line2 > .dotSmall:nth-child(2) {
  top: calc(12.5 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line2 > .dotSmall:nth-child(3) {
  top: calc(15 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line2 > .dotSmall:nth-child(4) {
  top: calc(17.5 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line2 > .dotSmall:nth-child(5) {
  top: calc(20 * var(--baseDist));
}

.containerAnimatedLogoDappler > .line3 > .dotSmall {
  left: calc(15 * var(--baseDist) - var(--horizontalDist));
  transform: translateX(-50%) scale(1.7);
}

.containerAnimatedLogoDappler > .line3 > .dotSmall:nth-child(1) {
  top: calc(8.75 * var(--baseDist));
  animation-delay: 0.6s;
}
.containerAnimatedLogoDappler > .line3 > .dotSmall:nth-child(2) {
  top: calc(11.25 * var(--baseDist));
  animation-delay: 0.5s;
}
.containerAnimatedLogoDappler > .line3 > .dotSmall:nth-child(3) {
  top: calc(13.75 * var(--baseDist));
  animation-delay: 0.4s;
}
.containerAnimatedLogoDappler > .line3 > .dotSmall:nth-child(4) {
  top: calc(16.25 * var(--baseDist));
  animation-delay: 0.3s;
}
.containerAnimatedLogoDappler > .line3 > .dotSmall:nth-child(5) {
  top: calc(18.75 * var(--baseDist));
  animation-delay: 0.2s;
}
.containerAnimatedLogoDappler > .line3 > .dotSmall:nth-child(6) {
  top: calc(21.25 * var(--baseDist));
  animation-delay: 0.1s;
}

.containerAnimatedLogoDappler > .line4 > .dotSmall {
  left: calc(15 * var(--baseDist));
  transform: translateX(-50%);
}
.containerAnimatedLogoDappler > .line4 > .dotSmall:nth-child(1) {
  top: calc(7.5 * var(--baseDist));
  transform: translateX(-50%) scale(1.7);
  animation-delay: 0.7s;
}

.containerAnimatedLogoDappler > .line4 > .dotSmall:nth-child(2) {
  top: calc(10 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line4 > .dotSmall:nth-child(3) {
  top: calc(12.5 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line4 > .dotSmall:nth-child(4) {
  top: calc(15 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line4 > .dotSmall:nth-child(5) {
  top: calc(17.5 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line4 > .dotSmall:nth-child(6) {
  top: calc(20 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line4 > .dotSmall:nth-child(7) {
  top: calc(22.5 * var(--baseDist));
  transform: translateX(-50%) scale(1.7);
  animation-delay: 1.6s;
}

.containerAnimatedLogoDappler > .line5 > .dotSmall {
  left: calc(15 * var(--baseDist) + 1 * var(--horizontalDist));
  transform: translateX(-50%);
}

.containerAnimatedLogoDappler > .line5 > .dotSmall:nth-child(1) {
  top: calc(8.75 * var(--baseDist));
  transform: translateX(-50%) scale(1.7);
  animation-delay: 0.8s;
}
.containerAnimatedLogoDappler > .line5 > .dotSmall:nth-child(2) {
  top: calc(11.25 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line5 > .dotSmall:nth-child(3) {
  top: calc(13.75 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line5 > .dotSmall:nth-child(4) {
  top: calc(16.25 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line5 > .dotSmall:nth-child(5) {
  top: calc(18.75 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line5 > .dotSmall:nth-child(6) {
  top: calc(21.25 * var(--baseDist));
  transform: translateX(-50%) scale(1.7);
  animation-delay: 1.5s;
}

.containerAnimatedLogoDappler > .line6 > .dotSmall {
  left: calc(15 * var(--baseDist) + 2 * var(--horizontalDist));
  transform: translateX(-50%);
}

.containerAnimatedLogoDappler > .line6 > .dotSmall:nth-child(1) {
  top: calc(10 * var(--baseDist));
  transform: translateX(-50%) scale(1.7);
  animation-delay: 0.9s;
}
.containerAnimatedLogoDappler > .line6 > .dotSmall:nth-child(2) {
  top: calc(12.5 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line6 > .dotSmall:nth-child(3) {
  top: calc(15 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line6 > .dotSmall:nth-child(4) {
  top: calc(17.5 * var(--baseDist));
}
.containerAnimatedLogoDappler > .line6 > .dotSmall:nth-child(5) {
  top: calc(20 * var(--baseDist));
  transform: translateX(-50%) scale(1.7);
  animation-delay: 1.4s;
}

.containerAnimatedLogoDappler > .line7 > .dotSmall {
  left: calc(15 * var(--baseDist) + 3 * var(--horizontalDist));
  transform: translateX(-50%) scale(1.7);
}

.containerAnimatedLogoDappler > .line7 > .dotSmall:nth-child(1) {
  top: calc(11.25 * var(--baseDist));
  animation-delay: 1s;
}
.containerAnimatedLogoDappler > .line7 > .dotSmall:nth-child(2) {
  top: calc(13.75 * var(--baseDist));
  animation-delay: 1.1s;
}
.containerAnimatedLogoDappler > .line7 > .dotSmall:nth-child(3) {
  top: calc(16.25 * var(--baseDist));
  animation-delay: 1.2s;
}
.containerAnimatedLogoDappler > .line7 > .dotSmall:nth-child(4) {
  top: calc(18.75 * var(--baseDist));
  animation-delay: 1.3s;
}
.containerAnimatedLogoDappler > * > .dotSmall {
  animation-duration: 1.7s;
  animation-iteration-count: infinite;
  animation-name: resizeDappler;
}

@keyframes resizeDappler {
  50% {
    transform: translateX(-50%) scale(1);
  }
}

.bgLoadContainer {
  color: #8286dd;
  border-color: #8286dd;
  background-color: #8286dd;
}

.fontDappler {
  font-family: "Inter, Roboto, Helvetica, Arial, sans-serif";
  font-size: 12;
  font-weight: 400;
  line-height: 1.5;
}

.containerProgressBar {
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: -25px;
  left: 0;
  background-color: var(--darkColor);
  color: var(--lightPurple);
  z-index: 10;
  border-radius: 4px;
  overflow: hidden;
}