@keyframes marquee {
    0% { left: 0; }
    40% { left: 0 }
    100% { left: -100%; }
}

@keyframes pulse {
	10% {transform: scale(1.1)}
}

@keyframes pulse-opacity {
	20% {opacity: 0.2;}
	60% {opacity: 1;}
	100% {opacity: 1;}
}

@keyframes pulse-vertical {
	0% {transform: scale(1) rotate(90deg);}
	50% {opacity: 0.01;}
	10% {transform: scale(1) rotate(90deg);}
	100% {transform: scale(1) rotate(90deg); opacity: 1;}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
        background-position: 200% 50%;
        rotate: (45deg);
        
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes sand-timer-rotate {  
    0% { transform: rotate(0deg); }
    16% { transform: rotate(180deg); }
    84% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes sand-timer-rotate {  
    0% { -webkit-transform: rotate(0deg); }
    16% { -webkit-transform: rotate(180deg); }
    84% { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes alert-bell-scale {  
    0% { transform: scale(1.2); }
    12% { transform: scale(1.8); }
    60% { transform: scale(1); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1.2); }
}

@-webkit-keyframes alert-bell-scale {  
    0% { -webkit-transform: scale(1.2); }
    12% { -webkit-transform: scale(1.8); }
    60% { -webkit-transform: scale(1); }
    70% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1.2); }
}

@keyframes heart-beat-animation {
  0% {
    transform: scale(0.8);
  }

  5% {
    transform: scale(0.9);
  }

  10% {
    transform: scale(0.8);
  }

  15% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(0.8);
  }
}

@keyframes heart-beat-reverse-animation {
  0% {
    transform: scale(1);
  }

  5% {
    transform: scale(1.05);
    filter: brightness(1.2);
  }

  10% {
    transform: scale(1);
    filter: brightness(1);
  }

  15% {
    transform: scale(1.1);
    filter: brightness(1.5);
  }

  50% {
    transform: scale(1);
    filter: brightness(1);
  }

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

  
@-webkit-keyframes beatHeart {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes beatHeart {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes flip-y {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

@-webkit-keyframes flip-y {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
  }
}

@keyframes glower {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.an-refresh-rotate {
  animation: rotate 1s linear infinite;
}
.an-pulse-opacity {
  animation: pulse-opacity 2s linear infinite;
}
.an-pulse-opacity-fast {
  animation: pulse-opacity 1s ease-in infinite;
}
.an-pulse {
  animation: pulse 2s linear infinite;
}
.an-heart {
  animation: heart-beat-animation 2s linear infinite;
}
.an-heart-reverse {
  animation: heart-beat-reverse-animation 2s linear infinite;
}

/* Keyframes for the shimmer animation */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Keyframes for the waving flag animation */
@keyframes waveFlag {
  0% {
    transform: rotateY(-10deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotateY(20deg) translate3d(20px, -1px, 0);
  }

  100% {
    transform: rotateY(10deg) translate3d(0, 0, 0);
  }
}


/* Keyframes for the waving flag animation */
@keyframes panelBackgroundFade {
  0% {
    background: #7d7d7d47;
  }

  50% {
    background: #3a3a3a;
  }

  100% {
    background: #3a3a3a;
  }
}

.panel-bg-pulse {
  animation: panelBackgroundFade 1.5s ease-in-out infinite;
}

.flag-number {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 120px; /* Large font size */
  color: white; /* The fill color of the number */
  
  /* The text stroke for legibility */
  -webkit-text-stroke: 4px black;
  
  /* Ensures number is above the shimmer animation */
  position: relative;
  z-index: 2;
}
.flag-name {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 36px; /* Large font size */
  color: white; /* The fill color of the number */
  
  /* The text stroke for legibility */
  -webkit-text-stroke: 1.5px black;
  
  /* Ensures number is above the shimmer animation */
  position: relative;
  z-index: 2;
}

/* The class to apply to the flag for the shimmer effect */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}

/* The pseudo-element that creates the light sweep for the shimmer */
.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg,
      transparent 25%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 75%);
  transform: translateX(-100%);
  animation: shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* The class to apply to the flag for the waving animation */
.wave-effect {
  animation: waveFlag 1.5s ease-in-out infinite alternate;
  transform-origin: top left;
  /* Makes the top-left corner the pivot point */
}

.loader-message {
  transition: transform 0.5s ease, opacity 0.5s ease;
  position: relative;
  display: inline-block;
  width: -webkit-fill-available;
}

.loader-message.fade-out {
    transform: translateY(20px);
    opacity: 0;
}

.loader-message.fade-in {
    transform: translateY(-20px);
    opacity: 0;
    animation: slideInFade 0.5s forwards;
}

@keyframes slideInFade {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}