#messageContainer {
    position: fixed;  /* Fixed position so it stays on top */
    top: 20px;
    left: 40%;         /* Horizontally center */
    z-index: 9999;     /* Ensure messages are above other content */
    width: 50%;       /* Allow the container to fit the content's width */
    padding: 0;        /* No padding for the container */
    margin: 0;
}

/* General message styling */
.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 10px; /* Round the corners */
    position: relative; /* For positioning the close button */
    font-size: 16px; /* Adjust font size */
    display: flex;
    align-items: center;
    width: auto;  /* Messages only as wide as the content */
    max-width: 800px; /* Optional: Limit max width if necessary */
   
}

/* Info message specific styles */
.info {
    color: #00529B;
    background-color: #BDE5F8;

}

/* Close button */
.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 18px;
    cursor: pointer;
    background: none;
    border: none;
    color: #333;
    font-weight: bold;
}

/* Optional: Styling for success, warning, error, validation messages */
.success {
    color: #3c763d;
    background-color: #dff0d8;

}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;

}

.error {
    color: #a94442;
    background-color: #f2dede;

}

.validation {
    color: #383d41;
    background-color: #fce9a2;
 
}