/* From Uiverse.io by funkyjuice213 */ 
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.loader-bar {
  height: 25px;
  width: 6px;
  margin: 0 3px;
  border-radius: 20px;
  animation: loader 2s ease-in-out infinite;
}

.bar-1 {
  background: linear-gradient(to right, #00e6e6, #00ccff, #0099ff, #0066ff);
  animation-delay: 0s;
  box-shadow: 0px 0px 15px 3px #00e6e6;
}

.bar-2 {
  background: linear-gradient(to right, #00ccff, #0099ff, #0066ff, #00e6e6);
  animation-delay: 0.1s;
  box-shadow: 0px 0px 15px 3px #00ccff;
}

.bar-3 {
  background: linear-gradient(to right, #0099ff, #0066ff, #00e6e6, #00ccff);
  animation-delay: 0.2s;
  box-shadow: 0px 0px 15px 3px #0099ff;
}

.bar-4 {
  background: linear-gradient(to right, #0066ff, #00e6e6, #00ccff, #0099ff);
  animation-delay: 0.3s;
  box-shadow: 0px 0px 15px 3px #0066ff;
}

@keyframes loader {
  0% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }

  100% {
    transform: scaleY(1);
  }
}

/* Loader container styles */
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease-out;
}

.loader-container.hidden {
  opacity: 0;
  pointer-events: none;
}