#app {
  height: 100%;
}

.admin_index {
  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: #2EA6FF;
  background-color: #fff;
}

.admin_index .loading {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.admin_index .loading .square {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
}

.admin_index .loading .square::before {
  /* content: ""; */
  width: 10px;
  height: 10px;
  border-radius: 15%;
  border: 3px solid #2EA6FF;
  animation: square-to-dot-animation 2s linear infinite;
}

.admin_index .loading .square:nth-child(1)::before {
  animation-delay: calc(150ms * 1);
}

.admin_index .loading .square:nth-child(2)::before {
  animation-delay: calc(150ms * 2);
}

.admin_index .loading .square:nth-child(3)::before {
  animation-delay: calc(150ms * 3);
}

.admin_index .loading .square:nth-child(4)::before {
  animation-delay: calc(150ms * 4);
}
.admin_index .loading .square:nth-child(5)::before {
  animation-delay: calc(150ms * 5);
}

@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;
  }
}

.admin_index .text {
  position: relative;
  font-size: 24px;
  margin-top: 40px;
}

.admin_index .text::after {
  /* content: '…'; */
  position: absolute;
  padding-left: 5px;
}

#preloader_1{
  position:relative;
}
#preloader_1 span{
  display:block;
  bottom:0px;
  width: 4px;
  height: 4px;
  background:#2EA6FF;
  position:absolute;
  animation: preloader_1 1.5s  infinite ease-in-out;
  border-radius: 20%;
}  
#preloader_1 span:nth-child(2){
  left:11px;
  animation-delay: .2s;  
}
#preloader_1 span:nth-child(3){
  left:22px;
  animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
  left:33px;
  animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
  left:44px;
  animation-delay: .8s;
}
#preloader_1 span:nth-child(6){
  left:55px;
  animation-delay: 1s;
}
@keyframes preloader_1 {
  0% {height:5px;transform:translateY(0px);background:#56a6ea;}
  25% {height:20px;transform:translateY(8px);background:#2EA6FF;}
  50% {height:5px;transform:translateY(0px);background:#56a6ea;}
  100% {height:5px;transform:translateY(0px);background:#56a6ea;}
}


#preloader_4{
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#preloader_4 span{
  position:absolute;
  width:20px;
  height:20px;
  margin-bottom: 20px;
  background:#3498db;
  opacity:0.5;
border-radius:20px;
  -animation: preloader_4 1s infinite ease-in-out;
 
}
#preloader_4 span:nth-child(2){
  left:20px;
  animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
  left:40px;
  animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
  left:60px;
  animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
  left:80px;
  animation-delay: .8s;
}
#preloader_4 span:nth-child(6){
  left:100px;
  animation-delay: 1s;
}
@keyframes preloader_4 {
  0% {
    opacity: 0.3; 
    transform:translateY(0px);    
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
  50% {
    opacity: 1; 
    transform: translateY(-10px); 
    background:#f1c40f;  
    box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
  100%  {
    opacity: 0.3; 
    transform:translateY(0px); 
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}