body {
  width: 100%;
}

@keyframes rotate {
  0%,
  5% {
    transform: rotate(0deg);
  }

  95%,
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes ball1 {
  0%,
  20% {
    top: calc(var(--spinner-size) * 0.2);
    left: calc(var(--spinner-size) * 0.2);
  }

  40%,
  50% {
    top: 50%;
    left: 50%;
  }

  80%,
  100% {
    top: calc(var(--spinner-size) * 0.2);
    left: calc(var(--spinner-size) * 0.2);
  }
}

@keyframes ball2 {
  0%,
  20% {
    top: calc(var(--spinner-size) * 0.2);
    left: calc(var(--spinner-size) * 0.8);
  }

  40%,
  50% {
    top: 50%;
    left: 50%;
  }

  80%,
  100% {
    top: calc(var(--spinner-size) * 0.2);
    left: calc(var(--spinner-size) * 0.8);
  }
}

@keyframes ball3 {
  0%,
  20% {
    top: calc(var(--spinner-size) * 0.8);
    left: calc(var(--spinner-size) * 0.2);
  }

  40%,
  50% {
    top: 50%;
    left: 50%;
  }

  80%,
  100% {
    top: calc(var(--spinner-size) * 0.8);
    left: calc(var(--spinner-size) * 0.2);
  }
}

@keyframes ball4 {
  0%,
  20% {
    top: calc(var(--spinner-size) * 0.8);
    left: calc(var(--spinner-size) * 0.8);
  }

  40%,
  50% {
    top: 50%;
    left: 50%;
  }

  80%,
  100% {
    top: calc(var(--spinner-size) * 0.8);
    left: calc(var(--spinner-size) * 0.8);
  }
}

.loader__wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.loader {
  --spinner-size: 26px;
  position: relative;
  width: var(--spinner-size);
  height: var(--spinner-size);
  animation: rotate 0.9s ease-in-out infinite;
}

.loader__dot {
  position: absolute;
  display: block;
  width: calc(var(--spinner-size) * 0.4);
  height: calc(var(--spinner-size) * 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.loader__dot--1 {
  top: calc(var(--spinner-size) * 0.2);
  left: calc(var(--spinner-size) * 0.2);
  z-index: 3;
  background-color: #8599ad;
  animation: ball1 0.9s ease-in-out infinite;
}

.loader__dot--2 {
  top: calc(var(--spinner-size) * 0.2);
  left: calc(var(--spinner-size) * 0.8);
  z-index: 4;
  background-color: #454d54;
  animation: ball2 0.9s ease-in-out infinite;
}

.loader__dot--3 {
  top: calc(var(--spinner-size) * 0.8);
  left: calc(var(--spinner-size) * 0.2);
  z-index: 2;
  background-color: #454d54;
  animation: ball3 0.9s ease-in-out infinite;
}

.loader__dot--4 {
  top: calc(var(--spinner-size) * 0.8);
  left: calc(var(--spinner-size) * 0.8);
  z-index: 1;
  background-color: #8599ad;
  animation: ball4 0.9s ease-in-out infinite;
}

.layout-init-text__wrapper {
  font-family: 'Helvetica Neue', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Noto Sans', ubuntu, cantarell, sans-serif;
  line-height: 24px;
  font-style: normal;
  font-weight: normal;
  font-display: swap;

  @media (min-width: 1424px) {
    margin-top: 48px;
  }

  @media (max-width: 1423.98px) {
    margin-top: 32px;
  }

  @media (max-width: 992px) {
    margin-top: 24px;
  }

  @media (max-width: 389.98px) {
    margin-top: 16px;
  }
}

.layout-init-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: white;
  transition: transform 0.5s ease-in;

  .layout-init-loading__spinner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.layout-init-loading.slide-up {
  transform: translateY(-100%);
}