.flash-border {
  position: relative;
  padding: 10px; /* Adjust to fit content */
  border: 4px solid transparent; /* Base border */
  z-index: 9999; /* Ensure it's above other elements */
  border-radius: 12px; /* Rounded corners for the element */
}

.flash-border::before {
  content: "";
  position: absolute;
  top: -4px; /* Match the border width */
  left: -4px;
  width: calc(100% + 8px); /* Match the border width */
  height: calc(100% + 8px); /* Match the border width */
  border: 4px solid transparent; /* Invisible border */
  border-radius: 16px; /* Makes the animation border round */
  border-top: 4px solid #5c1b94; /* Start color */
  border-right: 4px solid #c48ef3;
  border-bottom: 4px solid #5c1b94;
  border-left: 4px solid #c48ef3;
  animation: border-move 3s linear 1; /* Single cycle animation */
  z-index: 9999; /* Ensure the animation is above the message */
}

@keyframes border-move {
  0% {
    clip-path: inset(0 0 100% 0); /* Top edge */
    border-color: #5c1b94; /* Start with purple */
  }
  25% {
    clip-path: inset(0 0 0 100%); /* Right edge */
    border-color: #c48ef3; /* Light purple */
  }
  50% {
    clip-path: inset(100% 0 0 0); /* Bottom edge */
    border-color: #5c1b94; /* Back to purple */
  }
  75% {
    clip-path: inset(0 100% 0 0); /* Left edge */
    border-color: #c48ef3; /* Light purple */
  }
  100% {
    clip-path: inset(0 0 100% 0); /* Loop back */
    border-color: #5c1b94; /* End with purple */
  }
}