

/*MODAL ANIMATIONS*/
.modal {
    animation: fadeOut 0.3s;
}

.modal-container.show-modal .modal {
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }

@keyframes fadeSlideFromBottom {
  from {transform: translateY(100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}

@keyframes fadeSlideFromTop {
  from {transform: translateY(-100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}

@keyframes zoomIn {
  from {transform: scale(0); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

@keyframes rotateIn {
  from {transform: rotate(-360deg); opacity: 0;}
  to {transform: rotate(0); opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
  }

@keyframes fadeOutToTop {
  from {transform: translateY(0); opacity: 1;}
  to {transform: translateY(-100%); opacity: 0;}
}

@keyframes fadeOutToBottom {
  from {transform: translateY(0); opacity: 1;}
  to {transform: translateY(100%); opacity: 0;}
}

@keyframes zoomOut {
  from {transform: scale(1); opacity: 1;}
  to {transform: scale(0); opacity: 0;}
}

@keyframes rotateOut {
  from {transform: rotate(0); opacity: 1;}
  to {transform: rotate(360deg); opacity: 0;}
}

/*INLAY ALERT ANIMATIONS*/
/* Slide in from the right */
@keyframes slide-in-right {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}
.slide-in-right {
  animation: slide-in-right 0.5s ease-out forwards;
}

/* Fade in */
@keyframes fade-in {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}
.fade-in {
  animation: fade-in 0.5s ease-in forwards;
}

/* fade-from-top */
@keyframes fade-from-top {
  from {transform: translateY(-100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-from-top {
  animation: fade-from-top 0.5s ease-out forwards;
}

/* fade-from-bottom */
@keyframes fade-from-bottom {
  from {transform: translateY(100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-from-bottom {
  animation: fade-from-bottom 0.5s ease-out forwards;
}

/* fade-from-left */
@keyframes fade-from-left {
  from {transform: translateX(-100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-from-left {
  animation: fade-from-left 0.5s ease-out forwards;
}

/* fade-from-right */
@keyframes fade-from-right {
  from {transform: translateX(100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-from-right {
  animation: fade-from-right 0.5s ease-out forwards;
}

/* fade-zoom-in */
@keyframes fade-zoom-in {
  from {transform: scale(0); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}
.fade-zoom-in {
  animation: fade-zoom-in 0.5s ease-out forwards;
}

/* spin-in */
@keyframes spin-in {
  from {transform: rotate(-360deg); opacity: 0;}
  to {transform: rotate(0); opacity: 1;}
}
.spin-in {
  animation: spin-in 0.5s ease-out forwards;
}

/* fade-slide-up */
@keyframes fade-slide-up {
  from {transform: translateY(50px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-slide-up {
  animation: fade-slide-up 0.5s ease-out forwards;
}

/* fade-slide-down */
@keyframes fade-slide-down {
  from {transform: translateY(-50px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-slide-down {
  animation: fade-slide-down 0.5s ease-out forwards;
}

/* blink-in */
@keyframes blink-in {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
  50% {opacity: 1;}
}
.blink-in {
  animation: blink-in 0.5s ease-out forwards;
}

/* expand-open */
@keyframes expand-open {
  from {transform: scaleY(0); opacity: 0;}
  to {transform: scaleY(1); opacity: 1;}
}
.expand-open {
  animation: expand-open 0.5s ease-out forwards;
}


/* Progress bar */
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #FFA500;
  width: 0;
  transition: none;
  animation-name: fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Progress bar fill animation */
@keyframes fill {
  from { width: 0; }
  to { width: 100%; }
}
