/* Container for the toast */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    /* Common styling for both success and error toast messages */
    .toast-message {
        display: flex;
        align-items: center;
        background-image:url(asset/img/crypto-bg.jpg);
        border-radius: 12px;
        padding: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        font-family: 'Outfit', sans-serif !important;
        /* Subtle shadow for depth */
        border: 0.25px solid;
        max-width: 400px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in-out;
        /* Fade-in/out transition */
    }

    /* Success message design */
    .toast-message.success {
        border-color: #2d8b41;
        /* Green border for success */
        background-color: #fff;
        /* Light green background */
        color: #2d8b41;
        /* Dark green text */
    }

    /* Error message design */
    .toast-message.error {
        border-color: #c0392b;
        /* Red border for error */
        background-color: #fff;
        /* Light red background */
        color: #c0392b;
        /* Dark red text */
    }

    /* Icon styling */
    .toast-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        margin-right: 10px;
    }

    .toast-message.success .toast-icon {
        background-color: #eefced;
        /* Light green circle for success */
    }

    .toast-message.error .toast-icon {
        background-color: #fceded;
        /* Light red circle for error */
    }

    .icon-checkmark,
    .icon-error {
        font-size: 26px !important;
        /* Make the icon bigger */
    }

    .icon-checkmark {
        color: #31C75F;
        /* Green checkmark */
    }

    .icon-error {
        color: #fa0707;
        /* Red exclamation */
    }

    /* Content inside the toast */
    .toast-content {
        display: flex;
        flex-direction: column;
    }

    .toast-content strong {
        font-weight: bold;
        margin-bottom: 2px;
        margin-right: 5px;
        color: black;
    }

    .toast-content p {
        margin: 0;
        color: black;
    }

    /* Fade in and out animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            visibility: visible;
        }

        to {
            opacity: 1;
            visibility: visible;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
            visibility: visible;
        }

        to {
            opacity: 0;
            visibility: hidden;
        }
    }