<style>

.modal2 {
    /*display: none;*/
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter:blur(3px);
}

    .modal-content2 {
        background-color: #fff;
        margin: auto;
        padding: 20px;
        border-radius: 8px;
        width: 80%;
        max-width: 500px;
        animation: fadeIn 0.3s;
        margin-top:130px;
    }
    .modal-header{
        padding: 15px;

    }
    .modal-body{
        padding: 15px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .modal-body p{
        text-align: justify-all;
        font-family: sans-serif;
    }
    .modal-body span{
        font-weight: bold;
        font-size: 16px;
        font-family: sans-serif;
        line-height: 4px;
    }
    /*.modal-body label{
        padding: 5px;
        background: #f2f2f2;
        font-size: 13px;
    }*/
    .modal-footer{
        padding-bottom: 10px;
    }

    .modal-header2, .modal-footer2 {
        font-weight: bold;
    }

    .modal-footer2{
        /*border-top: 1px solid #ddd;*/
        display: flex;
        justify-content: space-between;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media(max-width: 992px){
        .modal-content2{
            width: 90%;
            margin-top:100px;
        }
        .modal-body p{
            font-size: 14px;
        }
        .modal-body span{
            font-size: 14px;
        }
        .modal-footer2{
            display: flex;
            justify-content: space-between;
            gap:20px;
        }
        .modal-footer2 button{
            font-size: 12px;
        }
    }

</style>
<div class="modal2" id="theModal">
    <div class="modal-content2">
        <div class="modal-header">
            <span class="text-danger"><?php echo $msgTitle;?> 
                <i class="fa fa-exclamation-triangle"></i>
            </span>
        </div>
      <div class="modal-body">
        <p>
            <?php echo $msgBody;?>
        </p>

      </div>
      <form action="" method="POST">
        <div class="modal-footer2">
            <span class="mt-4">
                <button type="button" class="btn btn-secondary" 
                    onclick="closeModal2()"><?php echo $msgCloseBtn;?></button>
            </span>
        </div>
      </form> 
    </div>
    

</div>


<script>
    function closeModal2(){
        document.getElementById('theModal').style.display="none";
    }
</script>


