#loading-container {
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 9999;
}
#loading-indicator {
    position: fixed;
    width: 120px;
    height: 120px;
    border: 1em solid;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: #1abc9c;
    border-bottom-color: #3498db;
    border-radius: 50%;
    animation: coloredspin 4s linear infinite;
  }
  

@keyframes spin {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes coloredspin {
  0%{
    transform: rotate(0deg) scale(1);
    border-top-color: #1abc9c;
    border-bottom-color: #1abc9c;
  }
  25% {
    border-top-color: #2ecc71;
    border-bottom-color: #2ecc71;
  }
  50% {
    transform: rotate(360deg) scale(1.05);
    border-top-color: #3498db;
    border-bottom-color: #3498db;
  }
  75% {
    border-top-color: #9b59b6;
    border-bottom-color: #9b59b6;
  }
  100%{
    transform: rotate(720deg) scale(1);
    border-top-color: #1abc9c;
    border-bottom-color: #1abc9c;
  }
}

@keyframes appear {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}