#alert-wrapper {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1255;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between alerts */
}

.alertify {
    position: relative;
    right: 20px; /* Adjust as needed */
    bottom: 40px; /* Adjust as needed */
    max-width: 375px;
    height: auto;
    min-height: 71px;
    max-height: 150px;
    border-radius: 4px;
    padding-left: 24px;
    color: #fff;
    font-size: 14px;
    z-index: 1255;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: #E6E6E6;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: space-between; /* Space between the message and the dismiss button */
    animation: slideIn 0.3s ease-out;
}

    /* Icon styling */
    .alertify .icon {
        margin-right: 10px; /* Space between icon and message */
        font-size: 30px; /* Adjust icon size as needed */
    }

    .alertify span {
        padding: 10px;
    }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Specific styles for different types */

.alertify-success {
    color: #000000;
}

    .alertify-success::before {
        content: ""; /* Required for pseudo-elements */
        position: absolute;
        top: 0;
        left: 0; /* Position the border to the left of the element */
        height: 100%;
        border-left: 8px solid #037847; /* Set the border style and color */
        box-sizing: border-box; /* Ensure the border is included in the width/height calculation */
        z-index: -1; /* Place the border behind the message content */
    }

    .alertify-success .icon {
        color: #037847;
    }

.alertify-error {
    color: #000000;
}

    .alertify-error::before {
        content: ""; /* Required for pseudo-elements */
        position: absolute;
        top: 0;
        left: 0; /* Position the border to the left of the element */
        height: 100%;
        border-left: 8px solid #DB0000; /* Set the border style and color */
        box-sizing: border-box; /* Ensure the border is included in the width/height calculation */
        z-index: -1; /* Place the border behind the message content */
    }

    .alertify-error .icon {
        color: #DB0000;
    }


.alertify-warning {
    color: #000000;
}

    .alertify-warning::before {
        content: ""; /* Required for pseudo-elements */
        position: absolute;
        top: 0;
        left: 0; /* Position the border to the left of the element */
        height: 100%;
        border-left: 8px solid #FF6B00; /* Set the border style and color */
        box-sizing: border-box; /* Ensure the border is included in the width/height calculation */
        z-index: -1; /* Place the border behind the message content */
    }

    .alertify-warning .icon {
        color: #FF6B00;
    }

.alertify-notify {
    color: #000000;
}

    .alertify-notify::before {
        content: ""; /* Required for pseudo-elements */
        position: absolute;
        top: 0;
        left: 0; /* Position the border to the left of the element */
        height: 100%;
        border-left: 8px solid #17a2b8; /* Set the border style and color */
        box-sizing: border-box; /* Ensure the border is included in the width/height calculation */
        z-index: -1; /* Place the border behind the message content */
    }

    .alertify-notify .icon {
        color: #17a2b8;
    }

.alertify-message {
    color: #000000;
}

    .alertify-message::before {
        content: ""; /* Required for pseudo-elements */
        position: absolute;
        top: 0;
        left: 0; /* Position the border to the left of the element */
        height: 100%;
        border-left: 8px solid #000000; /* Set the border style and color */
        box-sizing: border-box; /* Ensure the border is included in the width/height calculation */
        z-index: -1; /* Place the border behind the message content */
    }

    .alertify-message .icon {
        color: #000000;
    }


/* Style for dismiss button */
.alertify .dismiss-btn {
    position: relative;
    padding: 0 20px 0 20px;
    right: 0;
    background: none;
    border: none;
    color: #000;
    font-size: 30px;
    cursor: pointer;
}

/* Hide alert when dismissed */
.alertify.dismissed {
    opacity: 0;
    transform: translateY(10px);
}