#message-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100; /* Ensure it is above other elements */
    width: 100%; /* Make it full width */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* Allow clicks to pass through */
}

.message {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Ensure text starts from the left */
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    opacity: 0; /* Start with opacity 0 for fade-in effect */
    transition: opacity 0.5s ease, top 0.5s ease; /* Ensure the fade-in, fade-out, and position transitions are smooth */
    word-wrap: break-word; /* Ensure long words break to the next line */
    margin-top: 10px; /* Add some space between messages */
    pointer-events: auto; /* Allow interaction with the message */
    max-width: 90%; /* Ensure the message doesn't exceed 90% of the screen width */
}

    .message .icon {
        margin-right: 10px;
        width: 24px; /* Increased width of the icon */
        height: 24px; /* Increased height of the icon */
    }

    .message .close-btn {
        background: none;
        border: none;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        margin-left: 10px;
    }

    .message.error {
        background-color: #511612; /* Red */
    }

        .message.error .icon {
            content: url('/images/Messages/Error.png'); /* Replace with your error icon path */
        }

    .message.warning {
        background-color: #553200; /* Orange */
    }

        .message.warning .icon {
            content: url('/images/Messages/Warning.png'); /* Replace with your warning icon path */
        }

    .message.success {
        background-color: #193A1A; /* Green */
    }

        .message.success .icon {
            content: url('/images/Messages/Success.png'); /* Replace with your success icon path */
        }

    .message.info {
        background-color: #0B3251; /* Blue */
    }

        .message.info .icon {
            content: url('/images/Messages/Info.png'); /* Replace with your info icon path */
        }

    .message.fade-in {
        opacity: 1; /* Fade in to full opacity */
    }

    .message.fade-out {
        opacity: 0; /* Fade out to zero opacity */
    }
.page-item.active .page-link {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}