#app {
  height: 100%;
}

.fantastic-admin-home {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  user-select: none;
  color: #736477;
  background-image: linear-gradient(
    45deg,
    rgb(51, 138, 249),
    rgb(47, 248, 255)
  );
}

.fantastic-admin-home .loading {
  --r1: 154%;
  --r2: 68.5%;

  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
        var(--r1) var(--r2) at top,
        #0000 79.5%,
        #85f7fb 80%
      )
      center left,
    radial-gradient(var(--r1) var(--r2) at bottom, #85f7fb 79.5%, #0000 80%)
      center center,
    radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #85f7fb 80%) center
      right,
    #d0f4ff;
  background-size: 50.5% 220%;
  background-position: -100% 0%, 0% 0%, 100% 0%;
  background-repeat: no-repeat;
  animation: p9 2s infinite linear;
}

@keyframes p9 {
  33% {
    background-position: 0% 33%, 100% 33%, 200% 33%;
  }
  66% {
    background-position: -100% 66%, 0% 66%, 100% 66%;
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%;
  }
}

@keyframes square-to-dot-animation {
  15%,
  25% {
    border-radius: 100%;
    width: 0;
    height: 0;
    margin: 5px;
    border-width: 5px;
  }

  40% {
    border-radius: 15%;
    width: 10px;
    height: 10px;
    margin: initial;
    border-width: 3px;
  }
}

.fantastic-admin-home .text {
  position: relative;
  font-size: 24px;
  margin-top: 20px;
}

.fantastic-admin-home .text::after {
  content: "…";
  position: absolute;
  padding-left: 5px;
}