@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;}
    100% { opacity: 0;margin-top: -600px;}
  }

  .animation-fade-in-out {
    animation: fadeIn 0.5s ease-out , fadeOut 1s ease-in ;
    animation-delay: 0s, 5s;
  }

.custom-alert {
    position: fixed !important; /* Ensure alert is fixed in viewport */
    display: flex !important;
    top: 1% !important;
    right: 1% !important;
    z-index: 10000 !important;
    width: auto !important;
    max-width: 300px !important;
    border-radius: 5px !important;
    color: #000 !important;
    padding: 20px !important;
    margin: 0 !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .3) !important;
    background: linear-gradient(to top right, rgb(193, 179, 255), rgba(255, 255, 255, 1)) !important;
}

.custom-alert.success {
    background-color: #28a745;
}

.custom-alert.info {
    background-color: #17a2b8;
}

.custom-alert.warning {
    background-color: #ffc107;
    color: #212529;
    /* Change text color for better readability */
}

.custom-alert.error {
    background-color: #dc3545;
}

.custom-alert .close {
    color: #fff;
    text-shadow: none;
    opacity: 1;
}

.custom-alert p {
    margin: 0;
}

#btnXclose {
    margin-left: 220px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-alert {
        top: 1% !important;
        width: 98% !important;
        max-width: none !important;
        /* Removes the max-width */
    }
    .animation-fade-in-out {
        width: 100%;
      }

    #btnXclose {
        margin-left: auto;
        /* Center the close button on smaller screens */
        display: block;
        text-align: right;
        /* Aligns the close image to the right */
    }
}

@media (max-width: 480px) {
    .custom-alert {
        font-size: 0.9rem !important;
        /* Slightly smaller font on very small screens */
        padding: 15px !important;
        /* Smaller padding for more space */
    }

    .custom-alert p {
        margin: 5px 0;
        /* Less space around the text for compact look */
    }
}
