Message Popup

Question

Hi

  I have below message Popup. I want Title should appear on left with primary background & Horizonal line should be full width.

Image attached.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MBox.ascx.cs" Inherits="Payroll.MBox" %>

<script type="text/javascript">

    var swalInit = swal.mixin({
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-primary',
        cancelButtonClass: 'btn btn-light'
    });


    function ShowPopup(heading, body, type) {
        swalInit.fire({
/*            title: `<div style="border-bottom: 1px solid #ddd; padding-bottom: 10px;">${heading}</div>`,*/
            /*title: `<div style="font-weight: bold; text-align: left; border-bottom: 1px solid #ddd; padding-bottom: 10px; width: 100%;">${heading}</div>`,*/
            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
        });
    }


</script>

Thanks