@keyframes ellipsis {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75% {
    content: "...";
  }

  100% {
    content: "";
  }
}

@keyframes fromLeft {
  from {
    transform: translate3d(-20px, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fromRight {
  from {
    transform: translate3d(20px, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.oneShellSplash {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

.oneShellLeft {
  animation: fromLeft 250ms ease-in;
}

.oneShellRight {
  animation: fromRight 250ms ease-in;
}

.oneShellSplash > img,
.oneShellSplash > svg {
  position: absolute;
  width: 25%;
}

.oneShellLoading {
  position: relative;
  right: 25px;
  top: 100px;
  width: 0;
}

.oneShellLoading::after {
  content: "";
  animation: ellipsis steps(1, end) 1s infinite;
}

.oneShellRemoval {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}