@keyframes pulse {
    0% {
     opacity: 100%;
    }

    20% {
      opacity:20%;
    }
    50% {
      opacity:50%;
    }

    75% {
      opacity:75%;
    }

    100% {
        opacity:100%;
    }
  }

@keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }


#appLoading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

#app .loading_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#app .loading_container .company_title{
    font-size: 28px;
    font-weight: 500;
    color: #646464;
}

#app .logo_wrapper{
    width: 108px;
    height: 108px;
    border-radius: 64px;
    overflow: hidden;
    animation: pulse 1.5s cubic-bezier(0.4,0,.6,1) infinite;
}

#app .logo_wrapper>img{
    width: 100%;
}


#app .loading_group_wrapper{
    width: 56px;
    height: 56px;
    margin: 36px 0;
}

.loading_group_wrapper>.loading_group{
    position: relative;
    height: 100%;
    animation: spin 1s linear infinite;
}


#app .loading_group_wrapper .loading_circle{
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    animation: pulse 2s cubic-bezier(0.4,0,.6,1) infinite;
}

#app .loading_group_wrapper .loading_circle.one{
    background-color: #6a72ff;
    top: 0;
    left: 0;
}
#app .loading_group_wrapper .loading_circle.two{
    background-color: #a8adff;
    left: 0;
    bottom: 0;
    animation-delay:500ms;
}
#app .loading_group_wrapper .loading_circle.three{
    background-color: #b1b5ff;
    right: 0;
    top: 0;
    animation-delay:1000ms;
}
#app .loading_group_wrapper .loading_circle.four{
    background-color: #666eff;
    right: 0;
    bottom: 0;
    animation-delay:1500ms;
}