Custom message Box

Question

Hi

  I want to display custom message using below code. How it can be done. I want Title shouldbe BOLD , Left SIde & Bold line should appear below after Title. Then Body & Ok.Cancel buttons.

As of now Title is appearing in Centre & line appears just below text . I want line should be full width.

function ShowPopup(heading, body, type) {
        swalInit.fire({
            title: `
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <span style="font-weight: bold; text-align: left;">${heading}</span>
            </div>
            <hr style="border: 1px solid #ddd; margin-top: 8px; margin-bottom: 15px; width: 100%;">`,
            html: `<p style="margin-top: 10px;">${body}</p>`,
            icon: type,
            position: 'center', // Adjust position as needed
            allowOutsideClick: false,
            confirmButtonText: 'OK',
            timer: 6000
        });
    }

Thanks