#epro-loader {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: epro-fadeIn 0.8s ease forwards;
  overflow: hidden;
}

#epro-loader > .loader-container {
  width: 260px;
  height: 360px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12),
              inset 0 1px 2px rgba(255,255,255,0.7);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  z-index: 2;
}

#epro-loader .spinner-wrapper {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

#epro-loader #spinner-container {
  width: 50px;
	height: 50px;
	position: fixed;
	top: 40%;
	animation: epro-rotate-move 2s ease-in-out infinite;
}

#epro-loader .circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#epro-loader .circle-3 {
  background-color: var(--epro-color-default-red);
  animation: epro-circle-3-move 2s ease infinite, epro-index 6s ease infinite;
}

#epro-loader .circle-2 {
  background-color: var(--epro-color-default-green);
  animation: epro-circle-2-move 2s ease infinite, epro-index 6s -4s ease infinite;
}

#epro-loader .circle-1 {
  background-color: var(--epro-color-default-yellow);
  animation: epro-circle-1-move 2s ease infinite, epro-index 6s -2s ease infinite;
}

#epro-loader .loader-text {
  margin-top: 120px;
  font-weight: 800;
  color: var(--epro-color-default-blue);
  text-align: center;
  font-family: var(--epro-font-family-gotham);
  opacity: 0;
  animation: epro-fadeInText 0.8s ease forwards,
             epro-fadePulse 1.5s ease-in-out 0.8s infinite;
  font-size : 14px;
}

@keyframes epro-circle-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(-18px) scale(.45)}
  60% {transform: translateY(-90px) scale(.45)}
  80% {transform: translateY(-90px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@keyframes epro-circle-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(-16px, 12px) scale(.45)}
  60% {transform: translate(-80px, 60px) scale(.45)}
  80% {transform: translate(-80px, 60px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@keyframes epro-circle-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(16px, 12px) scale(.45)}
  60% {transform: translate(80px, 60px) scale(.45)}
  80% {transform: translate(80px, 60px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@keyframes epro-rotate-move {
  55% {transform: rotate(0deg)}
  80% {transform: rotate(360deg)}
  100% {transform: rotate(360deg)}
}

@keyframes epro-index {
  0%, 100% {z-index: 3}
  33.3% {z-index: 2}
  66.6% {z-index: 1}
}

@keyframes epro-fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes epro-fadeOut {
  from {opacity: 1}
  to {opacity: 0}
}

@keyframes epro-fadeInText {
  from {opacity: 0; transform: translateY(5px)}
  to {opacity: 1; transform: translateY(0)}
}

@keyframes epro-fadePulse {
  0%,100% {opacity: 0.5}
  50% {opacity: 1}
}