#flash-message {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: red;
    border: 1px solid #a31818;
    border-radius: 5px;
    padding: 10px;
    display: none;
    animation: flash-message-animation 1s forwards;
    z-index: 9999; /* Set a high z-index to ensure it appears on top of all content */

  }
#flash-message-success {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: green;
    border: 1px solid #27ae60;
    border-radius: 5px;
    padding: 10px;
    display: none;
    animation: flash-message-animation 1s forwards;
    z-index: 9999; /* Set a high z-index to ensure it appears on top of all content */

  }
#flash-message-warning {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #ff9900;
    border: 1px solid #fdec00;
    border-radius: 5px;
    padding: 10px;
    display: none;
    animation: flash-message-animation 1s forwards;
    z-index: 9999; /* Set a high z-index to ensure it appears on top of all content */

  }

  .progress-bar {
    height: 4px;
    background-color: #27ae60;
    width: 100%;
    animation: progress-bar-animation 1s linear;
  }

  @keyframes progress-bar-animation {
    0% {
      width: 100%;
    }
    100% {
      width: 0%;
    }
  }

  @keyframes flash-message-animation {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .flashmessage {
      color: white; /* Set text color to white */
      font-weight:bold;
      padding: 3px 5px; /* Add padding to create space around the text */
      border-radius: 3px; /* Add rounded corners for a button-like effect */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }