<script>
    $(document).ready(function (e) {
        print_Custom('mycustomheader');
    });
</script>


{literal}
<style>

.border h2 {
    font-size: 20px;
}

    @page {
        /* size: 8.5cm 24cm; */
        margin: 0;
    }

    @font-face {
        font-family: 'Expo Arabic Book';
        src: url('../views/default/assets/fontsSand/ExpoArabic-Book.eot');
        src: url('../views/default/assets/fontsSand/ExpoArabic-Book.eot?#iefix') format('embedded-opentype'),
        url('../views/default/assets/fontsSand/ExpoArabic-Book.woff2') format('woff2'),
        url('../views/default/assets/fontsSand/ExpoArabic-Book.woff') format('woff'),
        url('../views/default/assets/fontsSand/ExpoArabic-Book.ttf') format('truetype'),
        url('../views/default/assets/fontsSand/ExpoArabic-Book.svg#ExpoArabic-Book') format('svg');
        font-weight: normal;
        font-style: normal;
    }


    html {
        font-size: 10px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        font-family: 'Expo Arabic Book', sans-serif;
    }

    body {
        font-family: 'Expo Arabic Book', sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;


        margin: 0;
    }
    p,h1,h2,h3,h4,h5,h6,span{
        font-family:  'Expo Arabic Book', sans-serif;
    }


    @media print {
        #items th {
            background: #c8e3f5!important;
        }
    }

    * { margin: 0; padding: 0; }
    #page-wrap {
        width: 21cm;
        padding:20px 10px;
        /* margin: 0 auto; */
        background-color: #fff;
        height: 14.3cm;
        /* float: right; */
        /* overflow: hidden; */
        webkit-print-color-adjust: exact;
        -moz-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    table { border-collapse: collapse; }
    table td, table th { border: 1px solid black; padding: 0px 11px 5px}
    .info-bill{
        width:40%;
        margin: 25px 5px
    }
    .info-table{clear:both;margin-top: 0!important}
    .img-company img{float:right;width:50%;padding: 2px;border:1px solid #ddd;border-radius: 5px}


    .info-bill,.info-company,.info-table {

        -webkit-print-color-adjust: exact;
        -moz-print-color-adjust: exact;
        print-color-adjust: exact;
        margin-top: 10px
    }
    .info-bill .head h3,.info-table .head h3,.info-company .head h3{
        display: inline-block;
        padding-right: 5px}

    .info-table .head h3{
        background-color: transparent;
        width:70%
    }
    .info-company .head h3{background-color: transparent!important}

    .border{border:1px solid #008bd2}
    table{width:100%}
    #items { clear: both; width: 100%; margin:0; border:1px solid #9c9999;
        -webkit-print-color-adjust: exact;
        -moz-print-color-adjust: exact;
        print-color-adjust: exact;
    }





    .red th{font-size: 17px}
    /*@media print,(max-width: 991px){
        table.info{width:100%!important;margin-bottom: 10px}
    }*/

    .head h4{display: inline-block}
    .head-block h4{display:block}
    span{font-size:16px}
    .f-left{
        float: left;
    }
    .border{
        border:3px solid #000;
        padding:35px 20px 15px;
        border-radius: 7px;
        position: relative;
        margin-top: 20px;
    }
    .border::before{
        content: " ";
        position: absolute;
        z-index: 0;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border: 1px solid #000;
        border-radius: 7px;
    }
    .head{
        border: 2px solid #000;
        position: absolute;
        z-index: 2;
        border-radius: 10px;
        text-align: center;
        font-size: 17px;
        background-color: #fff;
        left: 45%;
        top: -22px;
        padding: 5px;
    }
    p{
        text-align: center;
        font-size: 18px;
        margin: 10px;
        font-weight: bold;
    }
</style>
{/literal}


<div id="page-wrap">

    <div style="width: 40%;float: right;text-align: center">
        <img src="{$path}/images/logoSand.png" width="200">
    </div>

    <div style="clear:both"></div>




    <div class="border">

        <h2 class="head">سند قبض<br>
            Receipt Voucher
        </h2>

        <div class="square" style="width: 100px;float: right;margin-bottom: 15px;">
            <h4><span class="f-right">{$Programsettingdata->currancy}</span> <span class="f-left">{if $Programsettingdata->currancy == "جنيه"}LE{else}S.R.{/if} </span></h4>
            <div style="border:1px solid #000;width:100px;height:25px;text-align: center">{$clientdebtchangeData->clientdebtchangeamount}</div>
        </div>

        <div style="width: 60%;float:left;text-align: left;padding-top: 20px;">
            <h3>  التاريخ :<span>&nbsp;&nbsp;{$clientdebtchangeData->clientdebtchangedate}&nbsp;&nbsp;</span></h3>

        </div>

        <div style="clear:both"></div>


        <div style="width: 100%;margin-bottom: 10px;">
            <h2><span class="f-right">استلمنا من المكرم /</span> {$clientdebtchangeData->clientname} <span class="f-left">Received From</span></h2>
        </div>
        <div style="width: 100%;margin-bottom: 10px;">
            <h2><span class="f-right">مبلغا وقدره /</span> {$ar_number} {$Programsettingdata->currancy}<span class="f-right">  <span class="f-left">The Sum of</span></h2>
        </div>


        <div style="clear:both"></div>
        <div style="width: 100%;margin-bottom: 10px;">
            <h2><span class="f-right">وذلك قيمة /</span> {$clientdebtchangeData->comment} <span class="f-left">Against </span></h2>
        </div>

        <div style="clear:both"></div>
        <div style="width: 48%;float: right;margin-left: 20px;margin-bottom: 15px;">
            <h2><span class="f-right">المديونيه قبل / </span>{$clientdebtchangeData->clientdebtchangeafter}</h2>
        </div>
        <div style="width: 49%;float: right;margin-bottom: 15px;">
            <h2><span class="f-right"> المديونيه بعد /</span>{$clientdebtchangeData->clientdebtchangebefore}</h2>
        </div>
        <div style="clear:both"></div>

        <div style="width: 48%;float: right;margin-left: 20px;margin-bottom: 15px;">
            <h2><span class="f-right">المستلم / </span> <span class="f-right">........................................................................................... </span></h2>
        </div>
        <div style="width: 49%;float: right;margin-bottom: 15px;">
            <h2><span class="f-right"> التوقيع /</span><span class="f-right"> ........................................................................................... </span></h2>
        </div>
        <div style="clear:both"></div>



    </div style="margin-top:30px">
    <p>الجوف - طبر جل - المنطقة الصناعية : {$Programsettingdata->phone}</p>
</div>




