<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;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .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;
    }
    .yes{
        display: flex;
    }
    .no{
        display: none;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .success-animation { 
        width: 100%;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center; 
    }
    .modal-footer2 button{
        padding: 10px;
        background: #DE3341;
        color: #fff;
    }
    .modal-footer2 button:hover{
        background: #bb1e2c;
        color: #fff;
    }
    .modal-body p{
        text-align: justify;
    }
    .plate-btn{
        width: 100%;
        display: flex;
        justify-content: space-around;
        gap:10px;
        padding-top: 10px;
    }
    .plate-btn button{
        width: 100%;
    }
    .plate-btn .btn2{
        background: #1E5F67;
    }
    .plate-btn .btn2:hover{
        background: #184e55;
    }

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

</style>
<div class="modal2" id="theModal">
    <div class="modal-content2">
        <div class="modal-header">
            <svg class="confirm-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
              <circle class="confirm-mark__circle" cx="26" cy="26" r="25" fill="none" />
              <text x="26" y="32" text-anchor="middle" class="confirm-mark__text">?</text>
            </svg>
            <span class="text-succes mt-4"><?php echo $msgTitle;?> </span>   
        </div>   
      <div class="modal-body">
        <p>
            <?php echo $msgBody;?>
        </p>

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

                <button name="send-result-btn" class="btn btn2"> 
                    <?php echo $msgActionBtn;?>
                </button>
            </div>
        </div>
      </form> 
    </div>
</div>


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


