/* Start: Swal Alert */
.invalid-feedback {
  color: var(--tw-danger);
  font-size: small;
}

.swal2-popup {
  color: var(--tw-text-light);
}

.swal2-title {
  color: var(--tw-text-light-inverse);
}

/* End: Swal Alert */
/* Start: Temporary css to fix a missing css in metronic tailwind */
.modal-body,
.modal-footer {
  padding-inline-start: 1.25rem;
  padding-inline-end: 1.25rem;
  padding-block-start: .625rem;
  padding-block-end: .625rem
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--tw-gray-200)
}

/* End: Temporary css to fix a missing css in metronic tailwind */
/* Start: Loader Animation */
.loader {
  background: linear-gradient(to right, var(--tw-primary), var(--tw-secondary));
  background-size: 200% 100%;
  animation: loading-bar 2s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;

  /* Smooth edges */
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent);
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent);
}

@keyframes loading-bar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* End: Loader Animation */