    <style>
        @media (max-width: 1220px) {
            .panels {
                overflow: scroll;
                min-width: 900px;
            }
        }
        
        .uplistfile {
            margin: 0 20px 0 20px;
            float: right;
            min-height: 88px;
        }

        .upListRow {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            border-top: 2px solid #60b7b9;
        }

        .upListRow > div {
            max-width: 100%;
            min-width: 100%;
            width: 100%;
        }

        .ULopt > span {
            max-height: 20px;
        }
    </style>
    <div id="editorPanelBox"></div>
        <div class="panels ">
    <?php 
        echo "&nbsp;&nbsp;&nbsp;&nbsp;سوابق قبلی این مشتری: ";
        if(isset($savabegh[0])){//print_r($savabegh);
            $invj=$savabegh[0]['invj'];
            $id=$savabegh[0]['id'];
            $listDoc=[];
            foreach($savabegh as $sab){
                if($invj!=$sab['invj']) {
                    $listDoc=implode(',',$listDoc);
                    echo "&nbsp; [<a href='https://pars.patraa.com/uploadFile/receipt/".$id."' target=_blank><span data-list=',".$listDoc.",' class='savabegh' style='font-size:12pt;font-weight:bold;color:#27b'>".$invj."</span></a>] ";
                    $invj=$sab['invj'];
                    $id=$sab['id'];
                    $listDoc=[];                    
                }
                array_push($listDoc,$sab['doc']);
            }
            $listDoc=implode(',',$listDoc);
            echo "&nbsp; [<a href='https://pars.patraa.com/uploadFile/receipt/".$id."' target=_blank><span data-list=',".$listDoc.",' class='savabegh' style='font-size:12pt;font-weight:bold;color:#27b'>".$invj."</span></a>] ";
        }else{echo "<span style='font-size:12pt;color:#b42'>این مشتری سوابقی ندارد.</span>";}
    ?>
    </div>
    <div class="panels">
        <style>
            .upListHead {
                display: flex;
                flex-direction: row;
                width: 100%;
                height: 40px;
                background: #f0f7f9;
                border-bottom:1px solid #ddd ;
            }

            .upListHead > div:nth-child(1) {
                right: 10px;
                display: flex;
                flex-direction: row;
            }
            .upListHead > div:nth-child(2) {
                min-width: 40px;
                max-width: 30px;
                left: 10px;
                right: auto;
                margin-left: 0;
                margin-right: auto;
            }
            .upListHead > div > span {
                display: block;
                text-align: center;
                line-height: 38px;
                font-weight: bold;
            }

            .upListHead > div > span:nth-child(1) {
                font-size: 11pt;
                color: #444;
                width: 30px;
            }
            .upListHead > div > span:nth-child(2) {
                font-size: 11pt;
                color: #666;
                text-align: right;
                margin-left: 20px;
            }
            .upListHead > div > span:nth-child(4) {
                font-size: 9pt;
                color: red;
            }
            .upListHead > div > span:nth-child(3) {
                font-size: 9pt;
                margin:0 10px 0 0;
                font-weight: none;
                color:#595;             
            }
            .upListHead > div > span:nth-child(5) {
                font-size: 9pt;
                margin:0 45px 0 0;
                font-weight: none;
                color:#888;             
            }
            .upListHead > div > span.tcomm, .headTitle p.tcomm  {
                font-size: 9pt;
                margin:0 45px;
                font-weight: none;
                color:#88b;             
            }
             .headTitle p.tcomm  {
                font-size: 12pt;
             }
            .upListHead ul {
                height: 37px;
                margin: auto ;
            }

            .upListHead ul li {
                display: inline-block;
                line-height: 35px;
                height: 100%;
                padding-left: 15px;
                padding-right: 15px;
                cursor: pointer;
                color: #999;
                border-left: 0px solid #ddd;
                border-right: 0px solid #ddd;
                background: #f2f3f6;
                border: 1px solid #305773;;
                color: #fff;
                border-radius: 5px;
                text-align: center;
                background-color: #305773;
                margin: 0 10px 10px 10px;
            }

            .upListHead ul li:hover {
                background-color: #ececef;
                border: 1px solid #d2d2d2;
                color: #444;
            }

            .upListHead ul li.active {
                font-weight: bold;
                color: #305773;;
                cursor: default;
                background: #fff;
            }
            .uploadFileBox, .uploadFileBox > div {
                height: fit-content;
                display: flex;
                flex-direction: row;
            }

            .uploadFileBox > div {
                flex-wrap: wrap;
                width: 100%;
            }

            .uploadFiles div {
                font-size: 10pt;
                bottom: 2px;
                direction: ltr;
                text-align: right;
                white-space: nowrap;
                width: 100%;
                text-align: center;
                margin: auto;
                left: 0;
                right: 0;
            }

            div form {
                display: block;
            }

            .uploadFileBox span {
                display: inline-block;
                cursor: pointer;
            }

            .uploadFileBox {
                position: relative;
            }

            .addUpFiles {
                position: relative;
                border-radius: 3px;
                background: #f0f7f9;
                margin: 5px;
                display: flex;
                flex-direction: row;
                min-width: 30px;
                height: 30px;
            }
            .uploadFileList {
                display: none;
            }

            .uploadFiles {
                position: relative;
                border-radius: 3px;
                background: white;
                margin: 10px 5px;
            }

            .uploadFiles a {
                text-decoration: none;
                color: inherit;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;

            }
            .uploadFiles.lorg a{

            }
            .uploadFiles.small a{

            }
            .addUpFiles span {
                display: block;
                width: 29px;
                height: 29px;
                background-image: var(--ICON);
                background-position: -236px -331px;
                margin: 0 auto;
            }

            .addUpFiles div {
                position: absolute;
                display: block;
                bottom: 0;
                left: 0px;
                width: 0%;
                height: 3px;
                background: #b34;
            }

            .uploadFiles span:nth-child(2)  {
                position: absolute;
                display: block;
                top: 2px;
                right: 2px;
                width: 18px;
                height: 18px;
                border-radius: 12px;
                background-color: rgba(255, 200, 200, .7);
                background-image: var(--ICON);
                background-position: -285px -374px;
            }
            .uploadFiles span:nth-child(3)  {
                position: absolute;
                display: block;
                top: 2px;
                left: 2px;
                width: 18px;
                height: 18px;
                border-radius: 12px;
                background-color: rgba(200, 255, 200, .7);
                background-image: var(--ICON);
                background-position: -242px -278px;
            }
            .imgBoxList .uploadFiles {
                -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.14);
                box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.14);
            }

            .imgBoxList .uploadFiles:hover, .addUpFiles:hover {
                -webkit-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.24);
                box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.24);
            }

            .uploadFiles span:hover {
                background-color: rgba(255, 240, 240, .9);
            }
            .upListBox {
                display: flex;
                flex-direction: row;
                min-height: 50px;
            }
            .imgBoxList {
                width: 100%;
                flex-direction: row;
            }

            .imgBoxList > div {
                display: inline-block;
                flex-direction: row;
                float: right;
            }

            .imgBoxList .uploadFiles.lorg img {
                height: 345px;
                margin: 20px 27px 3px 27px;
            }

            .imgBoxList .uploadFiles.small img,.imgBoxList .uploadFiles.pdf img {
                height: 45px;
                margin: 2px 27px;
            }

            .headTitle {
                position: relative;
                display: flex;
                padding: 5px 12px 0 110px
            }

            .headTitle div {
                position: absolute;
                left: 60px;
                line-height: 30px;
            }

            .headTitle div:before {
                content:"";
                position: absolute;
                border-radius: 5px;
                left: -30px;
                top: 3px;
                width: 25px;
                height: 25px;
            }

            @-webkit-keyframes NAME-motar-ANIMATION {
                0%, 49% {
                    background-color: #aaa;
                }
                50%, 100% {
                    background-color: aliceblue;
                }
            }
            @-webkit-keyframes NAME-Naati-ANIMATION {
                0%, 49% {
                    background-color: #26cf52;
                }
                50%, 100% {
                    background-color: aliceblue;
                }
            }
            @-webkit-keyframes NAME-dadkha-ANIMATION {
                0%, 49% {
                    background-color: #277fbf;
                }
                50%, 100% {
                    background-color: aliceblue;
                }
            }
            @-webkit-keyframes NAME-dadkha1-ANIMATION {
                0%, 49% {
                    background-color: #277fbf;
                }
                50%, 100% {
                    background-color: aliceblue;
                }
            }
            @-webkit-keyframes NAME-dadkha0-ANIMATION {
                0%, 49% {
                    background-color: #000;
                }
                50%, 100% {
                    background-color: aliceblue;
                }
            }            
            @-webkit-keyframes NAME-gheir-ANIMATION {
                0%, 49% {
                    background-color: #ef272f;
                }
                50%, 100% {
                    background-color: aliceblue;
                }
            }
            @-webkit-keyframes NAME-taksiri-ANIMATION {
                0%, 49% {
                    color: #ef272f;
                }
                50%, 100% {
                    color: aliceblue;
                }
            }
            .headTitle div.motar:before{
                -webkit-animation: NAME-motar-ANIMATION 1s infinite;  /* Safari 4+ */
                -moz-animation: NAME-motar-ANIMATION 1s infinite;  /* Fx 5+ */
                -o-animation: NAME-motar-ANIMATION 1s infinite;  /* Opera 12+ */
                animation: NAME-motar-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
                background-color: #ccc;
            }
             .headTitle div.dadkha:before{
                -webkit-animation: NAME-dadkha-ANIMATION 1s infinite;  /* Safari 4+ */
                -moz-animation: NAME-dadkha-ANIMATION 1s infinite;  /* Fx 5+ */
                -o-animation: NAME-dadkha-ANIMATION 1s infinite;  /* Opera 12+ */
                animation: NAME-dadkha-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */                
                background-color: #277fbf;
            }           
            .headTitle div.dadkha1:before{
                -webkit-animation: NAME-dadkha1-ANIMATION 1s infinite;  /* Safari 4+ */
                -moz-animation: NAME-dadkha1-ANIMATION 1s infinite;  /* Fx 5+ */
                -o-animation: NAME-dadkha1-ANIMATION 1s infinite;  /* Opera 12+ */
                animation: NAME-dadkha1-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */                
                background-color: #277fbf;
            }
            .headTitle div.dadkha0:before{
                -webkit-animation: NAME-dadkha0-ANIMATION 1s infinite;  /* Safari 4+ */
                -moz-animation: NAME-dadkha0-ANIMATION 1s infinite;  /* Fx 5+ */
                -o-animation: NAME-dadkha0-ANIMATION 1s infinite;  /* Opera 12+ */
                animation: NAME-dadkha0-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */                
                background-color: #000;
            }            
            .headTitle div.Naati:before{
                -webkit-animation: NAME-Naati-ANIMATION 1s infinite;  /* Safari 4+ */
                -moz-animation: NAME-Naati-ANIMATION 1s infinite;  /* Fx 5+ */
                -o-animation: NAME-Naati-ANIMATION 1s infinite;  /* Opera 12+ */
                animation: NAME-Naati-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
                background-color: #26cf52;
            }
            .headTitle div.gheir:before{
                -webkit-animation: NAME-gheir-ANIMATION 1s infinite;  /* Safari 4+ */
                -moz-animation: NAME-gheir-ANIMATION 1s infinite;  /* Fx 5+ */
                -o-animation: NAME-gheir-ANIMATION 1s infinite;  /* Opera 12+ */
                animation: NAME-gheir-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
                background-color: #ef272f;
            }
            span.taksiri{
                -webkit-animation: NAME-taksiri-ANIMATION 1s infinite;  /* Safari 4+ */
                -moz-animation: NAME-taksiri-ANIMATION 1s infinite;  /* Fx 5+ */
                -o-animation: NAME-taksiri-ANIMATION 1s infinite;  /* Opera 12+ */
                animation: NAME-taksiri-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
                color: #ef272f;
            }
            .headTitle p {
                margin: 0 20px 0 0;
                color: red;
            }
            .zoomIcon{
                left: 0;
                display: block;
                width: 33px;
                height: 33px;
                background-image: url('<?= ICON ?>');
                background-position: -110px -271px;
                background-repeat: no-repeat;
                float: left;
                margin: 3px 20px;
                cursor: pointer;
            }
            .taksiri{
                display: flex;
                flex-direction: row;
                margin-right: 30px;
                color:#667;
                line-height: 35px;
            }
            .taksiri input.TAK{
                margin: auto 10px; 

            }
            
            .UpDownNum{
                position: relative;
                display: inline-block;
            }
            .docUp,.docDn{
                position: absolute;
                background-image: var(--ICON);
                width: 18px;
                height: 18px;
                left:-22px;
                cursor: pointer;
            }
            .docUp{
                background-position: -166px -308px;
                top:7px;
            }
            .docDn{
                background-position: -198px -308px;
                top:23px;
            }            
            .khas{
                font-weight:normal;
                color:#436;
            }
            .open{
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-end;
            }
        </style>