/**
 * Shoreline Loader Styles (Pre-React)
 * AUTO-GENERATED from constants.ts - DO NOT EDIT DIRECTLY
 * Run: yarn generate-loader
 */

body {
  font-family: sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
}

@media (max-width: 600px) {
  html {
    height: auto;
  }
}

/* Loader Container */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  z-index: 9999;
}

.sl-loader {
  width: 64px;
  height: 100px;
}

.sl-loader svg {
  width: 100%;
  height: 100%;
}

/* Animation Delays */
/* Level 0: delay 0s */
#sl-d,
#sl-e {
  animation: sl-fadeInOut 1.5s ease-in-out infinite;
  animation-delay: 0s;
}

/* Level 1: delay 0.2s */
#sl-f,
#sl-h {
  animation: sl-fadeInOut 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* Level 2: delay 0.4s */
#sl-g,
#sl-i {
  animation: sl-fadeInOut 1.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

/* Level 3: delay 0.6s */
#sl-j,
#sl-k {
  animation: sl-fadeInOut 1.5s ease-in-out infinite;
  animation-delay: 0.6s;
}

@keyframes sl-fadeInOut {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.2;
  }
}