
            <link rel="stylesheet" media="screen" type="text/css" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/css/pluginStyle.css" />
            <!-- Custom Color Picker -->
            <link rel="stylesheet" media="screen" type="text/css" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/colorpicker.css" />
            <link rel="stylesheet" type="text/css" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/css/printed-label.css" />
            <section class="panel-headings-section for-desktop">
              <input type="hidden" id="current_step" value="1">
              <!-- start --->
              <div class="owl-carousel panel-headings-wrapper">
                <div class="panel-heading active-h step1" data-target="type" data-id="1">
                    <i class="icon icon-label-cut"></i>
                    <p>Label Type/Size</p>
                    <p>1</p>
                </div>
                <div class="panel-heading step2" data-target="text" data-id="2">
                    <i class="icon icon-text"></i>
                    <p>Text</p>
                    <p>2</p>
                </div>
                <div class="panel-heading step3" data-target="font" data-id="3">
                    <i class="icon icon-font"></i>
                    <p>Font</p>
                    <p>3</p>
                </div>
                <div class="panel-heading step4" data-target="textColor" data-id="4">
                    <i class="icon icon-text-color"></i>
                    <p>Color</p>
                    <p>4</p>
                </div>



                <div class="panel-heading step5" id="amount" data-target="amount" data-id="5">
                    <i class="icon icon-amount"></i>
                    <p>Quantity</p>
                    <p>5</p>
                </div>
            </div>
        </section>
        <div class="sticky-trigger"></div>
<!---------- content start ------------>
<section class="main-contents">
    <div class="previewRowHeight"></div>
    <div class="proPreview proPreview-deg-ord-print">
        <div class="wrapper">
            <span class="close-preview" style="display:none;">X</span>
            <div class="previewWindow">
                <div id="myCanvas">
                    <div class="windowBody">
                        <div class="row heading">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <!-- <div class="windowHeading" onclick="">Label Preview</div> -->
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="rev-dwnl-sec pull-right">
                                    <div class="rev-sec quantitity_option">
                                        <span class="add-amount">Quantity Options</span>
                                        <!-- [woocommerce_rating id="1620" displaycount="true"]<span class='rev-cnt'>0 Reviews</span> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="previewRow">
                                    <div class="productPrevImg" style="text-align:center;">
                                        <div id="displaydesignW">
                                            <div class="" id="displaydesignnew" style="">
                                                <div class="icon_n_txt">
                                                    <div class="icon_on_label">
                                                        <img src="" class="icon_on_label_img">
                                                    </div>

                                                    <div id="texts" class="pull-left text-center">
                                                        <div class="row1" style=""></div>
                                                        <div class="row2" style=""></div>
                                                        <div class="row3" style=""></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="after">
                                                <img
                                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAAXCAYAAACWGfNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABW1JREFUeNrsXK9vlEEQvVuaS9OcIDU0FWBqQKKqqhAEVYWoowqBqu9dr76qAtWgEQ1BVCBIAxV18AeAQBEUfwAJPWauO5fH6+xxXO9E9+Ylm2+//X7dN/3m9c3O7jZ3d3cbzWazYdD6xcXFYNvv9xsppcFWC55nx6yuxa7Hc2T/oVS/9Xq9n91ud9i+v7/fCARqR6fTUYfomz+Zf5i/oN+hv3nH+Hqta9nb26vCVvIey8I996T6eVb2SnwB1o388BiSGxvebg6ktyHHP8h+G9uD7ALzAvnW+/a9s7AwwWBbPI5AHzP/8xz9pkPeR3nio7zbxqzslUqsiIoN60xqekxJ0c4BQtyU8k5KO7/IoF2UXnhBYO6g3z0LBU+BoMBgkWFOj2RXGektKl8ob8h7bc7CXglJDZUahqt8Q7wxsq1dJ9ttOXYs28V8LNkfPRCYY7U3dFhzQnRaFBsoNNiRPQFSA+RdWkZ8Yh/lj+1p2yshgaHKQxnpyUkMecnwO9J2pCRn92EWDgTmFdrf5jltibjQBz3U5FvGJTliVKI5kvrONO2V+IF2soWpnkG9jtN8/oEWVH1IkIFA4JL0zM+wiwg74rmbyVMzeG4NYDGV2w6EWw6mZi98ABKd1zGI/XXIotKmyQ9VdTten0JNsjsQmBbpaRcPqhp2Wi+U80K32hQevld+d+WVIzXHde2VeDgJDzUphbhGfrmf7lj2t/kBcO1SfOKBwFVovx5mEVnFIAmgAhoVtt1ghdfCLjJSbNqfN8gLXMdeqTSWzrvIyeJqBvadnLPpKTr4g7Ti0w4EfFgG1xtzVnJmi7RqUnjyLktI5JxIlXfGkR8T2St5A4pxa/16PPZHrlmRjY6x2xg1QLC2sUKBwCxJz/Mbb+A/C5OawOKLhNiGlA/StjKJvZKnzLifzvkBd6V6prMoUPHh+bX/UQKBWZIeznAaRQw1YdQMCXpnnb11pjz0v/ZKXqjKao1I64HUz6WsMRuX1F0MSwkExic9zkSiw5sYqVVIWJ7AIy8SV2tSzjMfjW2vocLj0ducnMjt61LOZH+Vkx3eeD7oWIyxKYHAmNAMLg8JY38rdSHd8FB2kIXFCLM0Tz+T2aoqPSnr49or8U04SQGM+UjKqdSXmeCQMFElQqdhOz7jQOD/lR6HdN5YtIrQLiUdmJPgmPLRqfLTOPZKo5QZxNVPpXrSuJzrdmXQHw6C9B4WfXiBwOSkh7MMOFSrDZyZ5ckLBeWmvHSiPPUveyVv5RM68blsXktbC88psbAXd0cfXiAwOemxyEDUJCY4M8szJ7z3hvaWEKPy1PNR9koea0JbR27y0lN03oO9HxXqLhC4HnDRgaHjZj+sTUzwNLFhKEpdZl5/XT7+UnmrZK9kO6bWYKTzof6DYYnJxOapOzzXxvEFAoHJYYt8osCoza94WBwvQVcguL8IMrepLD707LXAik2nd8j+K6lu8c1HSkVnSho88HZ8soHAdMLbTqfjzoSqgPDaSOSlaWZMjryIQG5/Ifua0Hgmx34N7UVEtignvlWy4wfZQnooMTmU5QxJaU29QCAwnRC3smEpCyiYkPhIlF3p78OFTeDaLam/kfrikPDAaMvSqOndx0hkHJ7yygT0g90fEggEph/i1pip5cVHkOC8VVA4o4s8lMPgJ1I/lbI86F7LN9R5aTo/bR1VGS/D4slLHKDsZVe88DcQCExX6dVCdl5kaHkAXBOPE6KjFK8cW29czvtfWZCKThF7L+UuX1BYQ/677P4oMbHtax3I8mt8noF5Q7fbbfZ6vf4E191i//KSg0J4v/MUzyr8S97ri2w+cZSIoS2SW75GFzG54ylE7OcT3Jdy/keAAQCudOn7kVlhqwAAAABJRU5ErkJggg==">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="" id="displaydesignnew_bck">
                                        <div id="back" class="hide">
                                            <em>Back Side</em>
                                            <div class="displaydesignnew_bck_vw" style="width:59px;height:78px;">
                                                <div class="icon_n_txt_bck">
                                                    <div id="texts_bck" class="text-center">
                                                        <div class="row1_bck"></div>
                                                        <div class="row2_bck"></div>
                                                        <div class="row3_bck"></div>
                                                    </div>
                                                    <div id="imgU_bck" style="display:none;">
                                                        <img id="previewHolder_bck">
                                                    </div>
                                                </div>
                                                <div class="firstset_bck"></div>
                                                <div class="secondset_bck"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="infos">
                                            <p>
                                                Please click <a onclick="repair()" style="color:red;text-decoration: underline;cursor: pointer;">here</a> if image not shown or appears to be broken.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-xs-12">
                                        <div id="hereallwillchnage">
                                            <div class="quantity">
                                                                                                <input id="quantity_5afbe1dedc150" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="" type="hidden">
                                            </div>

                                            <input type="hidden" id="quantity" name="quantity" value="1" />
                                            <input type="hidden" id="custom_data_1" name="custom_data_1" value="" />
                                            <!--size-->
                                            <input type="hidden" id="custom_data_2" name="custom_data_2" value="" />
                                            <!--label color-->
                                            <input type="hidden" id="custom_data_3" name="custom_data_3" value="" />
                                            <!--text color-->
                                            <input type="hidden" id="custom_data_4" name="custom_data_4" value="" />
                                            <!--Font-->
                                            <input type="hidden" id="custom_data_5" name="custom_data_5" value="" />
                                            <!--symbol-->
                                            <input type="hidden" id="custom_data_6" name="custom_data_6" value="" />
                                            <!--Label Cut/ Fold options-->
                                            <input type="hidden" id="custom_data_7" name="custom_data_7" value="" />
                                            <!---- price per label -->
                                            <input type="hidden" id="ppl" name="ppl" value="" />

                                            <!--amount-->
                                            <input type="hidden" id="custom_data_8" name="custom_data_8" value="" />
                                            <input type="hidden" id="custom_data_9" name="custom_data_9" value="" />
                                            <input type="hidden" id="custom_data_10" name="custom_data_10" value="" />
                                            <input type="hidden" id="sizetag" name="sizetag" value="N/A" />
                                            <input type="hidden" id="totalpricelabeladd2crt" name="totalpricelabeladd2crt" value="" />
                                            <input type="hidden" id="imageforcart" name="imageforcart"  value="" />
                                            <div class="btns-inline btn-cart-canvas" style="display:none;">
                                                <button type="button" name="add-to-cart" value="1620"  class="add-to-cart-btn designtoolbutton" onclick="if (!confirm('Are you sure? Once added to the cart, you cannot edit the image.')) return false; else submitDesign(2);">Add to cart</button>
                                                <span class="or">Or</span>
                                                <p class="dwn-pdf-btn fancybox-inline dwn-pdf-btn-brd"> <a href="#pdfLeadPopup" target="_blank" onclick="submitDesign(2, 'sbmtQT');">
                                                    <img
                                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkBAYNOQiZbZzzAAAAdUlEQVQoz82PMQ6CABRDX4CN0TMwuAKnwY2ds+HgjYgbEA5A8twMX0Ed7fTb3zYpBNjZRSWLlNMLJ+EL/spgavW8K9P3hpzeFsCWnnynzMLBm1fvnrdyGSyLi0X4uoaWchsAV/TTBv1h5mx9mK+Z8OLoEUabBxs7SqIhWWFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTA2VDEzOjU3OjA4KzAwOjAwNsR2EAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0wNlQxMzo1NzowOCswMDowMEeZzqwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"><span>Submit
                                                    Quote</span>
                                                </a>
                                            </p>
                                            <span class="or">Or</span>
                                            <button type="button" class="save-later-button" onclick="saveForLater()">Save for later</button>

                                        </div>
                                        <div class="btns-inline btn-prev-next">

                                            <button class="col-sm-6 btn btn-prev" onclick="prev_new();" disabled>Prev</button>
                                            <button class="col-sm-6 btn btn-next" onclick="nxt_new();">Next</button>
                                        </div>



                                        <div class="btns-inline btn-canvas-submit" style="display:none;">
                                         <button class="col-sm-12 btn btn-next">Preview & Submit</button>
                                     </div>
                                 </div>
                             </div>
                             <div class="col-xs-12">
                                <div class="productPrevCont">
                                    <div class="note-txt">
                                        <p>This image is only a preview. Colors and text may appear slightly different
                                        on the actual product.</p>
                                    </div>
                                    <div class="label-input-details-wrapper">
                                        <div class="label-input-details">
                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Size</span>
                                                <span class="productPrevContRowDes" id="selectprodsize">0.59 X 0.78</span>
                                            </div>

                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Label Color</span>
                                                <span class="productPrevContRowDes" id="labelcolor">White</span>
                                            </div>

                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Logo Color</span>
                                                <span class="productPrevContRowDes" id="logocolor">Black</span>
                                            </div>

                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Font</span>
                                                <span class="productPrevContRowDes" id="designfont">Open Sans</span>
                                            </div>

                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Symbol</span>
                                                <span class="productPrevContRowDes" id="symbolhere">NONE</span>
                                            </div>

                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Cut/Fold</span>
                                                <span class="productPrevContRowDes" id="labelcutnfold">NONE</span>
                                            </div>

                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Label Type</span>
                                                <span class="productPrevContRowDes" id="labelTypeSelect">NONE</span>
                                            </div>

                                            <div class="productPrevContRow">
                                                <span class="productPrevContRowTitle">Size Tag</span>
                                                <span class="productPrevContRowDes" id="sizetagchosen">N/A</span>
                                            </div>
                                        </div>
                                        <div class="toggle-less">See More</div>
                                    </div>

                                    <div class="productPrevContRow noteText"> <strong>Note:</strong> This product may
                                    take 8-10 days for design, printing and process. </div>
                                    <hr>
                                    <div class="productPrevContRow"> <span
                                        class="productPrevContRowTitle">Quantity</span> <span
                                        class="productPrevContRowDes" id="quantity_t">40 PIECES</span> </div>
                                        <div class="productPrevContRow"> <span class="productPrevContRowTitle">Price per label</span> <span class="productPrevContRowDes">$<span
                                            id="priceperlabel">0.67</span></span> 
                                        </div>
                                        <hr>
                                        <div class="productPrevContRow str-txt"> <span
                                            class="productPrevContRowTitle">Total</span> <span
                                            class="productPrevContRowDes">$<span id="totalprice">26.80</span></span>
                                        </div>
                                        <hr>
                                    </div>
                                </div>
                            </div>
                            <div class="viewall"><span>View Details</span> <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="panel-headings-section for-mob">
            <!-- start --->
            <div class="owl-carousel panel-headings-wrapper">
                <div class="panel-heading active-h mobilestep1" data-target="type" data-id="1">
                    <i class="icon icon-label-cut"></i>
                    <p>Label Type/Size</p>
                    <p>1</p>
                </div>


                <div class="panel-heading mobilestep2" data-target="text" data-id="2">
                    <i class="icon icon-text"></i>
                    <p>Text</p>
                    <p>2</p>
                </div>
                <div class="panel-heading mobilestep3" data-target="font" data-id="3">
                    <i class="icon icon-font"></i>
                    <p>Font</p>
                    <p>3</p>
                </div>

                <div class="panel-heading mobilestep4" data-target="textColor" data-id="4">
                    <i class="icon icon-text-color"></i>
                    <p>Color</p>
                    <p>4</p>
                </div>


                <div class="panel-heading mobilestep5" id="amount" data-target="amount" data-id="5">
                    <i class="icon icon-amount"></i>
                    <p>Quantity</p>
                    <p>5</p>
                </div>
            </div>
        </section>

        <div class="proCustomizations">
            <div>
                <!----- guide button ----->
                <div class="guideArea">
                    <a class="button" target="_blank" href="https://xpresalabels.com/site/faq/">Click here for guide & tips</a>
                    <img
                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgY2xhc3M9IiI+PGc+PGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjU2LDBDMTIwLjQ3NywwLDEwLjIyNCwxMTAuMjU1LDEwLjIyNCwyNDUuNzc4YzAsNjIuMTcxLDIzLjEyLDEyMS4xODYsNjUuMjA2LDE2Ni43MjVsLTEzLjcwNyw4OC4zNDIgICAgYy0wLjU1OCwzLjYwMSwwLjk1Myw3LjIwOCwzLjkxLDkuMzM2YzEuNjc3LDEuMjA3LDMuNjU3LDEuODIsNS42NDcsMS44MmMxLjUyLDAsMy4wNDYtMC4zNTcsNC40NDctMS4wODNsNzkuMjQxLTQxLjAzNiAgICBjMzEuODI1LDE0LjM4Niw2NS43ODgsMjEuNjc1LDEwMS4wMzIsMjEuNjc1YzEzNS41MjEsMCwyNDUuNzc4LTExMC4yNTUsMjQ1Ljc3OC0yNDUuNzc4QzUwMS43NzgsMTEwLjI1NSwzOTEuNTIzLDAsMjU2LDB6ICAgICBNMjU2LDQ3Mi4yMTFjLTMzLjk3MywwLTY2LjY0Ni03LjM0Ny05Ny4xMTQtMjEuODM1Yy0yLjczMS0xLjMtNS45MTQtMS4yNDUtOC42MDEsMC4xNDZsLTY2LjUyNCwzNC40NWwxMS41MS03NC4xNzcgICAgYzAuNDYzLTIuOTgyLTAuNDkzLTYuMDA3LTIuNTgyLTguMTg0Yy00MC43MDQtNDIuMzczLTYzLjEyMS05OC4wNzItNjMuMTIxLTE1Ni44MzVDMjkuNTY4LDEyMC45MjIsMTMxLjE0NSwxOS4zNDQsMjU2LDE5LjM0NCAgICBzMjI2LjQzMywxMDEuNTc3LDIyNi40MzMsMjI2LjQzM1MzODAuODU2LDQ3Mi4yMTEsMjU2LDQ3Mi4yMTF6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNTYsNzAuNzA4Yy0yOC4yMzYsMC01MS4yMDgsMjIuOTcyLTUxLjIwOCw1MS4yMDhjMCwyOC4yMzYsMjIuOTcyLDUxLjIwOCw1MS4yMDgsNTEuMjA4ICAgIGMyOC4yMzgsMCw1MS4yMDgtMjIuOTcyLDUxLjIwOC01MS4yMDhDMzA3LjIwOCw5My42NzgsMjg0LjIzNiw3MC43MDgsMjU2LDcwLjcwOHogTTI1NiwxNTMuNzggICAgYy0xNy41NywwLTMxLjg2NC0xNC4yOTQtMzEuODY0LTMxLjg2NFMyMzguNDMsOTAuMDUyLDI1Niw5MC4wNTJjMTcuNTcxLDAsMzEuODY0LDE0LjI5NCwzMS44NjQsMzEuODY0UzI3My41NywxNTMuNzgsMjU2LDE1My43OHogICAgIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zMTIuNzU4LDM1Ny43NGgtMTEuMDEzVjE5OS4xNDhjMC01LjM0Mi00LjMzMS05LjY3Mi05LjY3Mi05LjY3MmgtOTIuODI4Yy01LjM0MiwwLTkuNjcyLDQuMzMxLTkuNjcyLDkuNjcydjMyLjE0MyAgICBjMCw1LjM0Miw0LjMzMSw5LjY3Miw5LjY3Miw5LjY3MmgxMS4wMTN2MTE2Ljc3N2gtMTEuMDEzYy01LjM0MiwwLTkuNjcyLDQuMzMxLTkuNjcyLDkuNjcydjMyLjE0MyAgICBjMCw1LjM0Myw0LjMzMSw5LjY3Myw5LjY3Miw5LjY3M2gxMTMuNTE0YzUuMzQyLDAsOS42NzItNC4zMzEsOS42NzItOS42NzJ2LTMyLjE0M0MzMjIuNDMsMzYyLjA3MSwzMTguMDk5LDM1Ny43NCwzMTIuNzU4LDM1Ny43NCAgICB6IE0zMDMuMDg1LDM4OS44ODRoLTk0LjE3di0xMi44aDExLjAxM2M1LjM0MiwwLDkuNjcyLTQuMzMxLDkuNjcyLTkuNjcyVjIzMS4yOTFjMC01LjM0Mi00LjMzMS05LjY3Mi05LjY3Mi05LjY3MmgtMTEuMDEzICAgIHYtMTIuNzk4SDI4Mi40djE1OC41OTNjMCw1LjM0Miw0LjMzMSw5LjY3Miw5LjY3Miw5LjY3MmgxMS4wMTNWMzg5Ljg4NHoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+" />
                    <input type="hidden" name="seletsize" id="setselectsize">
                    <input type="hidden" name="selectedwidth" id="selectedwidth">
                    <input type="hidden" name="selectedheight" id="selectedheight">

                    <input type="hidden" name="usertextbox1" id="usertextbox1">
                    <input type="hidden" name="usertextbox2" id="usertextbox2">
                    <input type="hidden" name="usertextbox3" id="usertextbox3">

                    <input type="hidden" name="textbox1fontVal" id="textbox1fontVal">
                    <input type="hidden" name="textbox2fontVal" id="textbox2fontVal">
                    <input type="hidden" name="textbox3fontVal" id="textbox3fontVal">

                    <input type="hidden" name="usertextbox1_bck" id="usertextbox1_bck" value="">
                    <input type="hidden" name="usertextbox2_bck" id="usertextbox2_bck">
                    <input type="hidden" name="usertextbox3_bck" id="usertextbox3_bck">

                    <input type="hidden" name="sideOption" id="sideOption" value="One Sided">
                    <input type="hidden" name="textbox1_bckfontVal" id="textbox1_bckfontVal" value="auto">
                    <input type="hidden" name="textbox2_bckfontVal" id="textbox2_bckfontVal" value="auto">
                    <input type="hidden" name="textbox3_bckfontVal" id="textbox3_bckfontVal" value="auto">

                    <input type="hidden" name="userbgcolor" id="userbgcolor" value="ffffff">
                    <input type="hidden" name="usertextcolor" id="usertextcolor">
                    <input type="hidden" name="seliconhere" id="seliconhere">
                    <input type="hidden" name="selalignhere" id="selalignhere">

                    <input type="hidden" name="labelType" id="labelType">

                    <input type="hidden" name="selfonthere" id="selfonthere">
                    <input type="hidden" name="selfonthereName" id="selfonthereName">
                    <input type="hidden" name="lineSpecingCLast" id="lineSpecingCLast">
                    <input type="hidden" name="lineSpecingC" id="lineSpecingC">
                    <input type="hidden" name="fontpadTop" id="fontpadTop">
                    <input type="hidden" name="calculatedSize" id="calculatedSize">
                    <input type="hidden" name="backgroungcol" id="backgroungcol">
                    <input type="hidden" name="alignline1" id="alignline1">
                    <input type="hidden" name="alignline2" id="alignline2">
                    <input type="hidden" name="alignline3" id="alignline3">
                    <input type="hidden" name="iconSize" id="iconSize">
                    <input type="hidden" name="iconpricedisp" id="iconpricedisp">
                    <input type="hidden" name="iconPosition" id="iconPosition">
                    <input type="hidden" name="iconAlign" id="iconAlign">
                    <input type="hidden" name="usertextcolorprcie" id="usertextcolorprcie">
                    <input type="hidden" name="userlabelcutnfold" id="userlabelcutnfold">
                    <input type="hidden" name="newBgColor" id="newBgColor">
                    <input type="hidden" name="labelTypeSelectCustomData" id="labelTypeSelectCustomData">
                    <input type="hidden" name="newtxtColor" id="newtxtColor">
                    <input type="hidden" name="selectedPriceChart" id="selectedPriceChart">
                    <input type="hidden" name="pldoquantityforpdf" id="pldoquantityforpdf">
                    <input type="hidden" name="pldopriceperlabelforpdf" id="pldopriceperlabelforpdf">
                    <input type="hidden" name="pldototalpricelabelpdf" id="pldototalpricelabelpdf">
                    <input type="hidden" name="totalquantity" id="totalquantity" value="1000">
                    <input type="hidden" name="unitpricehere" id="unitpricehere">
                    <input type="hidden" id="custom_data_7" name="custom_data_7" value="" />
                    <input type="hidden" id="imageCreated" value="no">
                    <input type="hidden" name="datactdFromCanvas" id="datactdFromCanvas" value="">
                </div>




                <!----- Label size ----->


                <!----- Text ----->
                <div class="panel" data-div="text" id="inputTexts">
                   <h4 class="panel-title text-center">TEXT</h4>
                   <div class="panel-body-desig-order panel-body">

                    <div class="frm-algn-holder">
                        <p style="color: red" id="textErrorMsg"></p>
                        <div class="frm-sec col-lg-12">
                            <form action="" method="get">
                                <p>
                                    <label>Row 1</label>
                                    <input name="textbox1" id="textbox1" type="text" onfocus="clearDefaultText()" onblur="selecttext(1)" maxlength="22">
                                    <span class="selectFontSize">
                                        Font Size
                                        <select name="" onchange="manualFontChange(1, this.value);" id="textbox1Font">
                                            <option value="auto">Auto</option>
                                            <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                        </select>
                                    </span>
                                </p>
                                <span id="fontError1"></span>

                                <p>
                                    <label>Row 2</label>
                                    <input name="textbox2" id="textbox2" type="text" onblur="selecttext(2)" maxlength="22" value="">
                                    <span class="selectFontSize">
                                        Font Size
                                        <select name="" onchange="manualFontChange(2, this.value);" id="textbox2Font">
                                            <option value="auto">Auto</option>
                                            <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                        </select>
                                    </span>
                                </p>
                                <span id="fontError2"></span>

                                <p>
                                    <label>Row 3</label>
                                    <input name="textbox3" id="textbox3" type="text" onblur="selecttext(3)" maxlength="22" value="">
                                    <span class="selectFontSize">
                                        Font Size
                                        <select name="" onchange="manualFontChange(3, this.value);" id="textbox3Font">
                                            <option value="auto">Auto</option>
                                            <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                        </select>
                                    </span>
                                </p>
                                <span id="fontError3"></span>
                            </form>
                            <p id="charectorInfo"></p>
                        </div>

                        <div class="algn-sec col-lg-12">
                            <p>Alignment</p>
                            <ul>
                                <li><a href="javascript:void(0);" onclick="selectalign('l')"><img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/left-aligned.png" alt=""></a></li>
                                <li><a href="javascript:void(0);" onclick="selectalign('m')" class="selected"><img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/middle-aligned.png" alt=""></a></li>
                                <li><a href="javascript:void(0);" onclick="selectalign('r')"><img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/right-aligned.png" alt=""></a></li>
                            </ul>
                            <p><input id="calculatedFontSize" readonly type="text"></p>
                        </div>
                    </div>
                </div>


                <!----- Symbol ----->

                <h4 class="panel-title text-center">SYMBOL</h4>
                <div class="panel panel-body">

                    <div class="iconSection col-md-8">

                    </div>
                    <div class="algn-sec algn-sec-icon col-lg-4">
                        <a href="javascript:;" id="removeIcon" onclick="removeIcon();"
                        class="btn btn-warning pull-right">Remove Icon</a>
                        <p>Icon Alignment</p>
                        <br>
                        <ul style="overflow: hidden;">
                            <li><a href="javascript:void(0);" onclick="iconAlign('l')" class="selected"><img
                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/left-aligned.png"
                                alt="" /></a></li>
                                <li><a href="javascript:void(0);" onclick="iconAlign('r')"><img
                                    src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/right-aligned.png"
                                    alt="" /></a></li>
                                </ul>

                                <div class="sizeTags" style="margin-top:20px;">
                                    <label for="sizeTag">Size Tag:</label>
                                    <select id="sizeTag" class="form-control">
                                        <option>Choose</option>
                                        <option>XS</option>
                                        <option>S</option>
                                        <option>M</option>
                                        <option>L</option>
                                        <option>XL</option>
                                    </select>
                                </div>

                                <br>
                                <p id="iconcalcInfo"></p>
                            </div>

                        </div>
                    </div>


                    <!----- Font ----->
                    <div class="panel" data-div="font" id="fonts">
                        <div class="panel-body">
                            <h4 class="panel-title text-center">FONT</h4>
                            <div id="fontsLoader">

                            </div>
                        </div>

                        <!----- print Options ---->
                        <h4 class="panel-title text-center">PRINT OPTIONS</h4>
                        <div class="panel-body">

                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <div class="oneSide default" onclick="selectSideOptions(this, 'One Sided');">
                                        <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/onesided.png" alt="One Sided">
                                        <h4>One Sided</h4>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <div class="oneSide twoSide" onclick="selectSideOptions(this, 'Both Sided');">
                                        <img
                                        src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/bothside.png" alt="Both Sided">
                                        <h4>Both Sided</h4>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="panel-body panel-body-2">
                            <h4 class="panel-title text-center">Input texts for the back side:</h4>
                            <div class="frm-algn-holder">
                                <div class="frm-sec col-lg-12">
                                    <p style="color: red" id="textErrorMsg"></p>
                                    <form action="" method="get">
                                        <p>
                                            <label>Row 1</label>
                                            <input name="textbox1" id="textbox1_bck" type="text" onfocus="" value=""
                                            onchange="selecttext_new(1, this)" maxlength="22">
                                            <span class="selectFontSize">
                                                <span>Font Size:</span>
                                                <select name="" onchange="manualFontChange_bck(1, this);" id="textbox1Font_bck">
                                                    <option value="auto">Auto</option>
                                                    <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                </select>
                                            </span>
                                        </p>
                                        <!--<span id="fontError1"></span>-->
                                        <p>
                                            <label>Row 2</label>
                                            <input name="textbox2" id="textbox2_bck" type="text"
                                            onchange="selecttext_new(2, this)" maxlength="22" value="">
                                            <span class="selectFontSize">
                                                <span>Font Size:</span>
                                                <select name="" onchange="manualFontChange_bck(2, this);" id="textbox2Font_bck">
                                                    <option value="auto">Auto</option>
                                                    <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                </select>
                                            </span>
                                        </p>
                                        <span id="fontError2"></span>
                                        <p>
                                            <label>Row 3</label>
                                            <input name="textbox3" id="textbox3_bck" type="text"
                                            onchange="selecttext_new(3, this)" maxlength="22" value="">
                                            <span class="selectFontSize">
                                                <span>Font Size:</span>
                                                <select name="" onchange="manualFontChange_bck(3, this);" id="textbox3Font_bck">
                                                    <option value="auto">Auto</option>
                                                    <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                </select>
                                            </span>
                                        </p>
                                        <span id="fontError3"></span>
                                    </form>
                                    <p id="charectorInfo"></p>
                                </div>
                                <div class="algn-sec col-lg-12">
                                    <p>Text Alignment</p>
                                    <ul>
                                        <li><a href="javascript:void(0);" onclick="selectalign_bck('text-left')"><img
                                            src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/left-aligned.png"
                                            alt="" /></a></li>
                                            <li><a class="selected" href="javascript:void(0);"
                                                onclick="selectalign_bck('text-center')" class="selected"><img
                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/middle-aligned.png"
                                                alt="" /></a></li>
                                                <li><a href="javascript:void(0);" onclick="selectalign_bck('text-right')"><img
                                                    src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/right-aligned.png"
                                                    alt="" /></a></li>
                                                </ul>


                                            </div>
                                        </div>
                                        <div class="close-panel" onclick=""><span>X</span></div>
                                    </div>
                                </div>






                                <!------ label types (iron or adhesive) -------->
                                <div class="panel panel-primary" data-div="type" id="types" style="">
                                    <h4 class="panel-title text-center">LABEL TYPE</h4>
                                    <div class="panel-body">
                                        <div class="panel-body-desig-order">
                                            <div class="">
                                                <ul class="woven-list"> 
                                                    <li><img onclick="chooseType('Satin');" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/satin-new.jpg" alt="">
                                                        <h3>SATIN</h3>
                                                        <p>Smooth satin material with a sheen. Ideal for clothing, and items requiring a
                                                        smooth feel.</p>
                                                    </li>
                                                    <li><img onclick="chooseType('Taffeta');" src="https://xpresalabels.com/site/wp-content/uploads/2020/09/printed-taffeta.jpg" alt="">
                                                        <h3>TAFFETA</h3>
                                                        <p>Matte material similar to Tyvek. Great for products, warning labels or industrial
                                                        items.</p>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <h4 class="panel-title text-center">LABEL SIZE</h4>
<div class="panel-body-desig-order panel-body" data-div="label-cutnfold" id="label-cutnfolds" style="display: none;">
    <div id="label-cutnfolds-content" class="text-center">
        <div class="row-sec" style="">
                            <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:100px" id="asdug1" class="asdug" alt="" onclick="selectshape(1,'25','100','1', this, 0.5, 2, 1)"></span>
                        <h3>0.5" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des selected">
                        <span style="width:88.5px;height:29.5px" id="asdug2" class="asdug" alt="" onclick="selectshape(2,'88.5','29.5','1', this, 1.77, 0.59, 1)"></span>
                        <h3>1.77" X 0.59"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:50px" id="asdug3" class="asdug" alt="" onclick="selectshape(3,'50','50','1', this, 1, 1, 1)"></span>
                        <h3>1" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:100px" id="asdug4" class="asdug" alt="" onclick="selectshape(4,'50','100','1', this, 1, 2, 1)"></span>
                        <h3>1" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:100px" id="asdug5" class="asdug" alt="" onclick="selectshape(5,'100','100','2', this, 2, 2, 2)"></span>
                        <h3>2" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:200px" id="asdug6" class="asdug" alt="" onclick="selectshape(6,'100','200','5', this, 2, 4, 5)"></span>
                        <h3>2" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                <div id="divider">                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:50px" id="asdug7" class="asdug" alt="" onclick="selectshape(7,'19.5','50','1', this, 0.39, 1, 1)"></span>
                        <h3>0.39" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:62.5px" id="asdug8" class="asdug" alt="" onclick="selectshape(8,'19.5','62.5','1', this, 0.39, 1.25, 1)"></span>
                        <h3>0.39" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:75px" id="asdug9" class="asdug" alt="" onclick="selectshape(9,'19.5','75','1', this, 0.39, 1.5, 1)"></span>
                        <h3>0.39" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:100px" id="asdug10" class="asdug" alt="" onclick="selectshape(10,'19.5','100','1', this, 0.39, 2, 1)"></span>
                        <h3>0.39" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:50px" id="asdug11" class="asdug" alt="" onclick="selectshape(11,'25','50','1', this, 0.5, 1, 1)"></span>
                        <h3>0.5" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:62.5px" id="asdug12" class="asdug" alt="" onclick="selectshape(12,'25','62.5','1', this, 0.5, 1.25, 1)"></span>
                        <h3>0.5" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:75px" id="asdug13" class="asdug" alt="" onclick="selectshape(13,'25','75','1', this, 0.5, 1.5, 1)"></span>
                        <h3>0.5" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:29.5px;height:39px" id="asdug14" class="asdug" alt="" onclick="selectshape(14,'29.5','39','1', this, 0.59, 0.78, 1)"></span>
                        <h3>0.59" X 0.78"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:62.5px" id="asdug15" class="asdug" alt="" onclick="selectshape(15,'50','62.5','1', this, 1, 1.25, 1)"></span>
                        <h3>1" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:75px" id="asdug16" class="asdug" alt="" onclick="selectshape(16,'50','75','1', this, 1, 1.5, 1)"></span>
                        <h3>1" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:62.5px;height:50px" id="asdug17" class="asdug" alt="" onclick="selectshape(17,'62.5','50','1', this, 1.25, 1, 1)"></span>
                        <h3>1.25" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:62.5px;height:62.5px" id="asdug18" class="asdug" alt="" onclick="selectshape(18,'62.5','62.5','1', this, 1.25, 1.25, 1)"></span>
                        <h3>1.25" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:62.5px;height:100px" id="asdug19" class="asdug" alt="" onclick="selectshape(19,'62.5','100','1', this, 1.25, 2, 1)"></span>
                        <h3>1.25" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:50px" id="asdug20" class="asdug" alt="" onclick="selectshape(20,'75','50','1', this, 1.5, 1, 1)"></span>
                        <h3>1.5" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:62.5px" id="asdug21" class="asdug" alt="" onclick="selectshape(21,'75','62.5','1', this, 1.5, 1.25, 1)"></span>
                        <h3>1.5" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:75px" id="asdug22" class="asdug" alt="" onclick="selectshape(22,'75','75','1', this, 1.5, 1.5, 1)"></span>
                        <h3>1.5" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:88.5px;height:50px" id="asdug23" class="asdug" alt="" onclick="selectshape(23,'88.5','50','1', this, 1.77, 1, 1)"></span>
                        <h3>1.77" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:88.5px;height:62.5px" id="asdug24" class="asdug" alt="" onclick="selectshape(24,'88.5','62.5','1', this, 1.77, 1.25, 1)"></span>
                        <h3>1.77" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:88.5px;height:75px" id="asdug25" class="asdug" alt="" onclick="selectshape(25,'88.5','75','1', this, 1.77, 1.5, 1)"></span>
                        <h3>1.77" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:50px" id="asdug26" class="asdug" alt="" onclick="selectshape(26,'100','50','1', this, 2, 1, 1)"></span>
                        <h3>2" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:62.5px" id="asdug27" class="asdug" alt="" onclick="selectshape(27,'100','62.5','1', this, 2, 1.25, 1)"></span>
                        <h3>2" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:50px" id="asdug28" class="asdug" alt="" onclick="selectshape(28,'125','50','1', this, 2.5, 1, 1)"></span>
                        <h3>2.5" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:125px" id="asdug29" class="asdug" alt="" onclick="selectshape(29,'19.5','125','2', this, 0.39, 2.5, 2)"></span>
                        <h3>0.39" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:150px" id="asdug30" class="asdug" alt="" onclick="selectshape(30,'19.5','150','2', this, 0.39, 3, 2)"></span>
                        <h3>0.39" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:200px" id="asdug31" class="asdug" alt="" onclick="selectshape(31,'19.5','200','2', this, 0.39, 4, 2)"></span>
                        <h3>0.39" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:125px" id="asdug32" class="asdug" alt="" onclick="selectshape(32,'25','125','2', this, 0.5, 2.5, 2)"></span>
                        <h3>0.5" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:150px" id="asdug33" class="asdug" alt="" onclick="selectshape(33,'25','150','2', this, 0.5, 3, 2)"></span>
                        <h3>0.5" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:200px" id="asdug34" class="asdug" alt="" onclick="selectshape(34,'25','200','2', this, 0.5, 4, 2)"></span>
                        <h3>0.5" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:25px;height:250px" id="asdug35" class="asdug" alt="" onclick="selectshape(35,'25','250','2', this, 0.5, 5, 2)"></span>
                        <h3>0.5" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:125px" id="asdug36" class="asdug" alt="" onclick="selectshape(36,'50','125','2', this, 1, 2.5, 2)"></span>
                        <h3>1" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:150px" id="asdug37" class="asdug" alt="" onclick="selectshape(37,'50','150','2', this, 1, 3, 2)"></span>
                        <h3>1" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:62.5px;height:125px" id="asdug38" class="asdug" alt="" onclick="selectshape(38,'62.5','125','2', this, 1.25, 2.5, 2)"></span>
                        <h3>1.25" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:62.5px;height:150px" id="asdug39" class="asdug" alt="" onclick="selectshape(39,'62.5','150','2', this, 1.25, 3, 2)"></span>
                        <h3>1.25" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:100px" id="asdug40" class="asdug" alt="" onclick="selectshape(40,'75','100','2', this, 1.5, 2, 2)"></span>
                        <h3>1.5" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:125px" id="asdug41" class="asdug" alt="" onclick="selectshape(41,'75','125','2', this, 1.5, 2.5, 2)"></span>
                        <h3>1.5" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:87.5px;height:100px" id="asdug42" class="asdug" alt="" onclick="selectshape(42,'87.5','100','2', this, 1.75, 2, 2)"></span>
                        <h3>1.75" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:87.5px;height:125px" id="asdug43" class="asdug" alt="" onclick="selectshape(43,'87.5','125','2', this, 1.75, 2.5, 2)"></span>
                        <h3>1.75" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:50px" id="asdug44" class="asdug" alt="" onclick="selectshape(44,'100','50','2', this, 2, 1, 2)"></span>
                        <h3>2" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:62.5px" id="asdug45" class="asdug" alt="" onclick="selectshape(45,'100','62.5','2', this, 2, 1.25, 2)"></span>
                        <h3>2" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:75px" id="asdug46" class="asdug" alt="" onclick="selectshape(46,'100','75','2', this, 2, 1.5, 2)"></span>
                        <h3>2" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:125px" id="asdug47" class="asdug" alt="" onclick="selectshape(47,'100','125','2', this, 2, 2.5, 2)"></span>
                        <h3>2" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:62.5px" id="asdug48" class="asdug" alt="" onclick="selectshape(48,'125','62.5','2', this, 2.5, 1.25, 2)"></span>
                        <h3>2.5" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:75px" id="asdug49" class="asdug" alt="" onclick="selectshape(49,'125','75','2', this, 2.5, 1.5, 2)"></span>
                        <h3>2.5" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:100px" id="asdug50" class="asdug" alt="" onclick="selectshape(50,'125','100','2', this, 2.5, 2, 2)"></span>
                        <h3>2.5" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:50px" id="asdug51" class="asdug" alt="" onclick="selectshape(51,'150','50','2', this, 3, 1, 2)"></span>
                        <h3>3" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:19.5px;height:250px" id="asdug52" class="asdug" alt="" onclick="selectshape(52,'19.5','250','3', this, 0.39, 5, 3)"></span>
                        <h3>0.39" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:200px" id="asdug53" class="asdug" alt="" onclick="selectshape(53,'50','200','3', this, 1, 4, 3)"></span>
                        <h3>1" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:50px;height:250px" id="asdug54" class="asdug" alt="" onclick="selectshape(54,'50','250','3', this, 1, 5, 3)"></span>
                        <h3>1" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:62.5px;height:200px" id="asdug55" class="asdug" alt="" onclick="selectshape(55,'62.5','200','3', this, 1.25, 4, 3)"></span>
                        <h3>1.25" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:150px" id="asdug56" class="asdug" alt="" onclick="selectshape(56,'75','150','3', this, 1.5, 3, 3)"></span>
                        <h3>1.5" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:87.5px;height:150px" id="asdug57" class="asdug" alt="" onclick="selectshape(57,'87.5','150','3', this, 1.75, 3, 3)"></span>
                        <h3>1.75" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:125px" id="asdug58" class="asdug" alt="" onclick="selectshape(58,'100','125','3', this, 2, 2.5, 3)"></span>
                        <h3>2" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:150px" id="asdug59" class="asdug" alt="" onclick="selectshape(59,'100','150','3', this, 2, 3, 3)"></span>
                        <h3>2" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:100px" id="asdug60" class="asdug" alt="" onclick="selectshape(60,'125','100','3', this, 2.5, 2, 3)"></span>
                        <h3>2.5" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:125px" id="asdug61" class="asdug" alt="" onclick="selectshape(61,'125','125','3', this, 2.5, 2.5, 3)"></span>
                        <h3>2.5" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:62.5px" id="asdug62" class="asdug" alt="" onclick="selectshape(62,'150','62.5','3', this, 3, 1.25, 3)"></span>
                        <h3>3" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:75px" id="asdug63" class="asdug" alt="" onclick="selectshape(63,'150','75','3', this, 3, 1.5, 3)"></span>
                        <h3>3" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:100px" id="asdug64" class="asdug" alt="" onclick="selectshape(64,'150','100','3', this, 3, 2, 3)"></span>
                        <h3>3" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:50px" id="asdug65" class="asdug" alt="" onclick="selectshape(65,'175','50','3', this, 3.5, 1, 3)"></span>
                        <h3>3.5" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:62.5px" id="asdug66" class="asdug" alt="" onclick="selectshape(66,'175','62.5','3', this, 3.5, 1.25, 3)"></span>
                        <h3>3.5" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:50px" id="asdug67" class="asdug" alt="" onclick="selectshape(67,'200','50','3', this, 4, 1, 3)"></span>
                        <h3>4" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:62.5px" id="asdug68" class="asdug" alt="" onclick="selectshape(68,'200','62.5','3', this, 4, 1.25, 3)"></span>
                        <h3>4" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:50px" id="asdug69" class="asdug" alt="" onclick="selectshape(69,'225','50','3', this, 4.5, 1, 3)"></span>
                        <h3>4.5" X 1"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:62.5px;height:250px" id="asdug70" class="asdug" alt="" onclick="selectshape(70,'62.5','250','4', this, 1.25, 5, 4)"></span>
                        <h3>1.25" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:200px" id="asdug71" class="asdug" alt="" onclick="selectshape(71,'75','200','4', this, 1.5, 4, 4)"></span>
                        <h3>1.5" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:75px;height:250px" id="asdug72" class="asdug" alt="" onclick="selectshape(72,'75','250','4', this, 1.5, 5, 4)"></span>
                        <h3>1.5" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:87.5px;height:200px" id="asdug73" class="asdug" alt="" onclick="selectshape(73,'87.5','200','4', this, 1.75, 4, 4)"></span>
                        <h3>1.75" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:200px" id="asdug74" class="asdug" alt="" onclick="selectshape(74,'100','200','4', this, 2, 4, 4)"></span>
                        <h3>2" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:150px" id="asdug75" class="asdug" alt="" onclick="selectshape(75,'125','150','4', this, 2.5, 3, 4)"></span>
                        <h3>2.5" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:125px" id="asdug76" class="asdug" alt="" onclick="selectshape(76,'150','125','4', this, 3, 2.5, 4)"></span>
                        <h3>3" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:75px" id="asdug77" class="asdug" alt="" onclick="selectshape(77,'175','75','4', this, 3.5, 1.5, 4)"></span>
                        <h3>3.5" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:100px" id="asdug78" class="asdug" alt="" onclick="selectshape(78,'175','100','4', this, 3.5, 2, 4)"></span>
                        <h3>3.5" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:75px" id="asdug79" class="asdug" alt="" onclick="selectshape(79,'200','75','4', this, 4, 1.5, 4)"></span>
                        <h3>4" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:100px" id="asdug80" class="asdug" alt="" onclick="selectshape(80,'200','100','4', this, 4, 2, 4)"></span>
                        <h3>4" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:62.5px" id="asdug81" class="asdug" alt="" onclick="selectshape(81,'225','62.5','4', this, 4.5, 1.25, 4)"></span>
                        <h3>4.5" X 1.25"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:87.5px;height:250px" id="asdug82" class="asdug" alt="" onclick="selectshape(82,'87.5','250','5', this, 1.75, 5, 5)"></span>
                        <h3>1.75" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:200px" id="asdug83" class="asdug" alt="" onclick="selectshape(83,'125','200','5', this, 2.5, 4, 5)"></span>
                        <h3>2.5" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:125px" id="asdug84" class="asdug" alt="" onclick="selectshape(84,'150','125','5', this, 3, 2.5, 5)"></span>
                        <h3>3" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:150px" id="asdug85" class="asdug" alt="" onclick="selectshape(85,'150','150','5', this, 3, 3, 5)"></span>
                        <h3>3" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:125px" id="asdug86" class="asdug" alt="" onclick="selectshape(86,'175','125','5', this, 3.5, 2.5, 5)"></span>
                        <h3>3.5" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:75px" id="asdug87" class="asdug" alt="" onclick="selectshape(87,'200','75','5', this, 4, 1.5, 5)"></span>
                        <h3>4" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:100px" id="asdug88" class="asdug" alt="" onclick="selectshape(88,'200','100','5', this, 4, 2, 5)"></span>
                        <h3>4" X 2"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:75px" id="asdug89" class="asdug" alt="" onclick="selectshape(89,'225','75','5', this, 4.5, 1.5, 5)"></span>
                        <h3>4.5" X 1.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:100px;height:250px" id="asdug90" class="asdug" alt="" onclick="selectshape(90,'100','250','6', this, 2, 5, 6)"></span>
                        <h3>2" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:125px;height:250px" id="asdug91" class="asdug" alt="" onclick="selectshape(91,'125','250','6', this, 2.5, 5, 6)"></span>
                        <h3>2.5" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:250px" id="asdug92" class="asdug" alt="" onclick="selectshape(92,'200','250','6', this, 4, 5, 6)"></span>
                        <h3>4" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:150px;height:250px" id="asdug93" class="asdug" alt="" onclick="selectshape(93,'150','250','6', this, 3, 5, 6)"></span>
                        <h3>3" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:150px" id="asdug94" class="asdug" alt="" onclick="selectshape(94,'175','150','6', this, 3.5, 3, 6)"></span>
                        <h3>3.5" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:200px" id="asdug95" class="asdug" alt="" onclick="selectshape(95,'175','200','6', this, 3.5, 4, 6)"></span>
                        <h3>3.5" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:125px" id="asdug96" class="asdug" alt="" onclick="selectshape(96,'200','125','6', this, 4, 2.5, 6)"></span>
                        <h3>4" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:150px" id="asdug97" class="asdug" alt="" onclick="selectshape(97,'200','150','6', this, 4, 3, 6)"></span>
                        <h3>4" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:125px" id="asdug98" class="asdug" alt="" onclick="selectshape(98,'225','125','6', this, 4.5, 2.5, 6)"></span>
                        <h3>4.5" X 2.5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:175px;height:250px" id="asdug99" class="asdug" alt="" onclick="selectshape(99,'175','250','7', this, 3.5, 5, 7)"></span>
                        <h3>3.5" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:200px" id="asdug100" class="asdug" alt="" onclick="selectshape(100,'200','200','7', this, 4, 4, 7)"></span>
                        <h3>4" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:250px" id="asdug101" class="asdug" alt="" onclick="selectshape(101,'200','250','7', this, 4, 5, 7)"></span>
                        <h3>4" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:150px" id="asdug102" class="asdug" alt="" onclick="selectshape(102,'225','150','7', this, 4.5, 3, 7)"></span>
                        <h3>4.5" X 3"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:200px" id="asdug103" class="asdug" alt="" onclick="selectshape(103,'225','200','7', this, 4.5, 4, 7)"></span>
                        <h3>4.5" X 4"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:300px" id="asdug104" class="asdug" alt="" onclick="selectshape(104,'200','300','8', this, 4, 6, 8)"></span>
                        <h3>4" X 6"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:200px;height:400px" id="asdug105" class="asdug" alt="" onclick="selectshape(105,'200','400','8', this, 4, 8, 8)"></span>
                        <h3>4" X 8"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:250px" id="asdug106" class="asdug" alt="" onclick="selectshape(106,'225','250','8', this, 4.5, 5, 8)"></span>
                        <h3>4.5" X 5"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:300px" id="asdug107" class="asdug" alt="" onclick="selectshape(107,'225','300','8', this, 4.5, 6, 8)"></span>
                        <h3>4.5" X 6"</h3>
                        <h4></h4>
                    </div>
                </div>
                                <div class="col-lg-4">
                    <div class="desig-order-shrt-des ">
                        <span style="width:225px;height:400px" id="asdug108" class="asdug" alt="" onclick="selectshape(108,'225','400','8', this, 4.5, 8, 8)"></span>
                        <h3>4.5" X 8"</h3>
                        <h4></h4>
                    </div>
                </div>
                        </div>
        <p class="more-sizes"><a href="javascript:void(0)" onclick="showMore(this)">Show More</a></p>
    </div>
</div>
</div>
                                    <!----- Label types ----->
                                    <h4 class="panel-title text-center">FOLD</h4>

                                    <div class="panel-body-desig-order panel-body" data-div="cut-fold" id="cut-folds" style="display: none;">
                                        <div class="row-sec">
                                            <div class="col-lg-4 desig-order-shrt-des default selected" onclick="selectFrameType(1, 'Straight Cut - No Fold');">
                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/size-img-straight-cut.png" alt="">
                                                <h4>Straight Cut - No Fold</h4>
                                            </div>

                                            <div class="col-lg-4 desig-order-shrt-des" onclick="selectFrameType(2, 'End Fold - Left &amp; Right');">
                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/size-img-end-fold.png" alt="">
                                                <h4>End Fold - Left & Right</h4>
                                            </div>

                                            <div class="col-lg-4 desig-order-shrt-des" onclick="selectFrameType(3, 'Center-folded');">
                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/size-img-center-folded.png" alt="">
                                                <h4>Center-folded</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!----- Text Color ----->
                                <div class="panel color-bg-sec" data-div="textColor" id="textColors">
                                    <h4 class="panel-title text-center">TEXT COLOR</h4>
                                    <div class="panel-body">

                                        <p style="color: red" id="colorselectionError"></p>
                                        <div class="colorSelection">
                                            
                                        <span class="colorContainer" onclick="selecttextcolor('41b6e6','Turquoise','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #41b6e6">
                                            <input type="radio" name="radio-55" value="Turquoise" checked="checked">
                                            <span class="wpcf7-list-item-label">Turquoise</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('4f2c1d','Brown','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #4f2c1d">
                                            <input type="radio" name="radio-56" value="Brown" checked="checked">
                                            <span class="wpcf7-list-item-label">Brown</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('63513d','Light brown','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #63513d">
                                            <input type="radio" name="radio-57" value="Light brown" checked="checked">
                                            <span class="wpcf7-list-item-label">Light brown</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('a83d72','Dark pink','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #a83d72">
                                            <input type="radio" name="radio-58" value="Dark pink" checked="checked">
                                            <span class="wpcf7-list-item-label">Dark pink</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('f57eb6','Pink','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #f57eb6">
                                            <input type="radio" name="radio-59" value="Pink" checked="checked">
                                            <span class="wpcf7-list-item-label">Pink</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('470a68','Dark purple','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #470a68">
                                            <input type="radio" name="radio-510" value="Dark purple" checked="checked">
                                            <span class="wpcf7-list-item-label">Dark purple</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('7566a0','Purple','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #7566a0">
                                            <input type="radio" name="radio-511" value="Purple" checked="checked">
                                            <span class="wpcf7-list-item-label">Purple</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('006341','Green','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #006341">
                                            <input type="radio" name="radio-512" value="Green" checked="checked">
                                            <span class="wpcf7-list-item-label">Green</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('a4d65e','Apple green','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #a4d65e">
                                            <input type="radio" name="radio-513" value="Apple green" checked="checked">
                                            <span class="wpcf7-list-item-label">Apple green</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('e8e1c7','Off White','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #e8e1c7">
                                            <input type="radio" name="radio-514" value="Off White" checked="checked">
                                            <span class="wpcf7-list-item-label">Off White</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('ff6a39','Orange','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #ff6a39">
                                            <input type="radio" name="radio-515" value="Orange" checked="checked">
                                            <span class="wpcf7-list-item-label">Orange</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('c8102e','Red','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #c8102e">
                                            <input type="radio" name="radio-516" value="Red" checked="checked">
                                            <span class="wpcf7-list-item-label">Red</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('9b111e','Rubyred','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #9b111e">
                                            <input type="radio" name="radio-517" value="Rubyred" checked="checked">
                                            <span class="wpcf7-list-item-label">Rubyred</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('5b6770','Silvergrey','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #5b6770">
                                            <input type="radio" name="radio-518" value="Silvergrey" checked="checked">
                                            <span class="wpcf7-list-item-label">Silvergrey</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('ffcd00','Yellow','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #ffcd00">
                                            <input type="radio" name="radio-519" value="Yellow" checked="checked">
                                            <span class="wpcf7-list-item-label">Yellow</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('cbb677','Sparkling gold','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #cbb677">
                                            <input type="radio" name="radio-520" value="Sparkling gold" checked="checked">
                                            <span class="wpcf7-list-item-label">Sparkling gold</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('aa0114','Sparkling red','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #aa0114">
                                            <input type="radio" name="radio-521" value="Sparkling red" checked="checked">
                                            <span class="wpcf7-list-item-label">Sparkling red</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('a7a9ac','Sparkling silver','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #a7a9ac">
                                            <input type="radio" name="radio-522" value="Sparkling silver" checked="checked">
                                            <span class="wpcf7-list-item-label">Sparkling silver</span></span>
                                        </span>
                                        <span class="colorContainer" onclick="selecttextcolor('3f00ff','Sparkling blue','')"
                                        style="display: inline-block;">
                                        <span class="colorContainer-label " style="background-color: #3f00ff">
                                            <input type="radio" name="radio-523" value="Sparkling blue" checked="checked">
                                            <span class="wpcf7-list-item-label">Sparkling blue</span></span>
                                        </span>

                                        <div class="additionalColors">
                                            <h4 class="additionalColorCode">You can also Submit PMS/ PantoneCodes color code for better understanding</h4>
                                            <a target="_blank" href="https://www.xpresalabels.com/wp-content/uploads/2018/05/PantoneCodes.pdf" 
                                            class="pdflinkinPopup pdfShowgal">Click Here To Check Pantone Color Codes</a>
                                            <input type="text" id="pantoneText" class="customColorpantone" placeholder="Select Other Color">
                                        </div>
                                    </div>
                                </div>

                                <!----- Background color ----->

                                <h4 class="panel-title text-center">BACKGROUND COLOR</h4>
                                <div class="panel-body" id="backGroundColors" style="display: none;">

                                    <div class="colorSelection" id="limitedBgColors">
                                                                                    <span class="colorContainer" 
                                                onclick="selectcolor('000000', 'Black', '')">
                                                <span class="colorContainer-label" style="background-color: #000000">
                                                    <input type="radio" name="radio-51" value="Black" checked="checked">
                                                    <span class="wpcf7-list-item-label">Black</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer selected" 
                                                onclick="selectcolor('ffffff', 'White', '')">
                                                <span class="colorContainer-label" style="background-color: #ffffff">
                                                    <input type="radio" name="radio-52" value="White" checked="checked">
                                                    <span class="wpcf7-list-item-label">White</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('06038d', 'Blue', '')">
                                                <span class="colorContainer-label" style="background-color: #06038d">
                                                    <input type="radio" name="radio-53" value="Blue" checked="checked">
                                                    <span class="wpcf7-list-item-label">Blue</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('6cace4', 'Light Blue', '')">
                                                <span class="colorContainer-label" style="background-color: #6cace4">
                                                    <input type="radio" name="radio-54" value="Light Blue" checked="checked">
                                                    <span class="wpcf7-list-item-label">Light Blue</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('41b6e6', 'Turquoise', '')">
                                                <span class="colorContainer-label" style="background-color: #41b6e6">
                                                    <input type="radio" name="radio-55" value="Turquoise" checked="checked">
                                                    <span class="wpcf7-list-item-label">Turquoise</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('4f2c1d', 'Brown', '')">
                                                <span class="colorContainer-label" style="background-color: #4f2c1d">
                                                    <input type="radio" name="radio-56" value="Brown" checked="checked">
                                                    <span class="wpcf7-list-item-label">Brown</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('63513d', 'Light brown', '')">
                                                <span class="colorContainer-label" style="background-color: #63513d">
                                                    <input type="radio" name="radio-57" value="Light brown" checked="checked">
                                                    <span class="wpcf7-list-item-label">Light brown</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('a83d72', 'Dark pink', '')">
                                                <span class="colorContainer-label" style="background-color: #a83d72">
                                                    <input type="radio" name="radio-58" value="Dark pink" checked="checked">
                                                    <span class="wpcf7-list-item-label">Dark pink</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('f57eb6', 'Pink', '')">
                                                <span class="colorContainer-label" style="background-color: #f57eb6">
                                                    <input type="radio" name="radio-59" value="Pink" checked="checked">
                                                    <span class="wpcf7-list-item-label">Pink</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('470a68', 'Dark purple', '')">
                                                <span class="colorContainer-label" style="background-color: #470a68">
                                                    <input type="radio" name="radio-510" value="Dark purple" checked="checked">
                                                    <span class="wpcf7-list-item-label">Dark purple</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('7566a0', 'Purple', '')">
                                                <span class="colorContainer-label" style="background-color: #7566a0">
                                                    <input type="radio" name="radio-511" value="Purple" checked="checked">
                                                    <span class="wpcf7-list-item-label">Purple</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('006341', 'Green', '')">
                                                <span class="colorContainer-label" style="background-color: #006341">
                                                    <input type="radio" name="radio-512" value="Green" checked="checked">
                                                    <span class="wpcf7-list-item-label">Green</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('a4d65e', 'Apple green', '')">
                                                <span class="colorContainer-label" style="background-color: #a4d65e">
                                                    <input type="radio" name="radio-513" value="Apple green" checked="checked">
                                                    <span class="wpcf7-list-item-label">Apple green</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('e8e1c7', 'Off White', '')">
                                                <span class="colorContainer-label" style="background-color: #e8e1c7">
                                                    <input type="radio" name="radio-514" value="Off White" checked="checked">
                                                    <span class="wpcf7-list-item-label">Off White</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('ff6a39', 'Orange', '')">
                                                <span class="colorContainer-label" style="background-color: #ff6a39">
                                                    <input type="radio" name="radio-515" value="Orange" checked="checked">
                                                    <span class="wpcf7-list-item-label">Orange</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('c8102e', 'Red', '')">
                                                <span class="colorContainer-label" style="background-color: #c8102e">
                                                    <input type="radio" name="radio-516" value="Red" checked="checked">
                                                    <span class="wpcf7-list-item-label">Red</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('9b111e', 'Rubyred', '')">
                                                <span class="colorContainer-label" style="background-color: #9b111e">
                                                    <input type="radio" name="radio-517" value="Rubyred" checked="checked">
                                                    <span class="wpcf7-list-item-label">Rubyred</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('5b6770', 'Silvergrey', '')">
                                                <span class="colorContainer-label" style="background-color: #5b6770">
                                                    <input type="radio" name="radio-518" value="Silvergrey" checked="checked">
                                                    <span class="wpcf7-list-item-label">Silvergrey</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('ffcd00', 'Yellow', '')">
                                                <span class="colorContainer-label" style="background-color: #ffcd00">
                                                    <input type="radio" name="radio-519" value="Yellow" checked="checked">
                                                    <span class="wpcf7-list-item-label">Yellow</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('cbb677', 'Sparkling gold', '')">
                                                <span class="colorContainer-label" style="background-color: #cbb677">
                                                    <input type="radio" name="radio-520" value="Sparkling gold" checked="checked">
                                                    <span class="wpcf7-list-item-label">Sparkling gold</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('aa0114', 'Sparkling red', '')">
                                                <span class="colorContainer-label" style="background-color: #aa0114">
                                                    <input type="radio" name="radio-521" value="Sparkling red" checked="checked">
                                                    <span class="wpcf7-list-item-label">Sparkling red</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('a7a9ac', 'Sparkling silver', '')">
                                                <span class="colorContainer-label" style="background-color: #a7a9ac">
                                                    <input type="radio" name="radio-522" value="Sparkling silver" checked="checked">
                                                    <span class="wpcf7-list-item-label">Sparkling silver</span>
                                                </span>
                                            </span>
                                                                                        <span class="colorContainer" 
                                                onclick="selectcolor('3f00ff', 'Sparkling blue', '')">
                                                <span class="colorContainer-label" style="background-color: #3f00ff">
                                                    <input type="radio" name="radio-523" value="Sparkling blue" checked="checked">
                                                    <span class="wpcf7-list-item-label">Sparkling blue</span>
                                                </span>
                                            </span>
                                                                                    <div id="limitedBgColorsMsg"></div>
                                        <div class="additionalColors">
                                            <p></p>
                                            <div class="smlinf">
                                                <ul>
                                                    <li>Stock white for orders under 5000 pcs.</li>
                                                    <li>Custom background 5000 pcs minimum</li>
                                                    <li>Increase quantity to 10000 or more to get more colors in the above panel, or click on the below color box to choose custom colors</li>
                                                </ul>
                                            </div>

                                            <h4 class="additionalColorCode">You can also Submit PMS/ PantoneCodes color code for better understanding</h4>
                                            <a target="_blank" href="https://www.xpresalabels.com/wp-content/uploads/2018/05/PantoneCodes.pdf" class="pdflinkinPopup pdfShowgal">Click Here To Check Pantone Color Codes</a>
                                            <input type="text" id="pantoneBG" class="customColorpantone" placeholder="Select Other Color">
                                        </div>
                                    </div>
                                </div>


                            </div>






                            <!----- Amount ----->
                            <div class="panel cmnts-sec" data-div="amount" id="amounts">
                                <h4 class="panel-title text-center">QUANTITY</h4>
                                <div class="panel-body-table-sec panel-body">

                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="stripped-table">
                                        <thead>
                                            <tr>
                                                <th width="20%">&nbsp;</th>
                                                <th width="20%">Quantity</th>

                                                <th width="20%">Unit Price</th>
                                            </tr>
                                        </thead>

                                        <tbody id="priceContainerFull">
                                        </tbody>

                                    </table>

                                </div>
                            </div>

                            <div class="cart-sec">
                                <div class="row">

                                    <div class="info">When you create another label, the current design will be added to your shopping
                                    cart</div>
                                </div>
                            </div>
                        </div>

                        <!-- TABS -->
                        <div class="tab-pro-des">
                                                        <div id="horizontalTab">
                                <ul class="resp-tabs-list hor_1">
                                     <li>
                                        Description</li>                                         <li>Reviews</li>
                                         <li>Q & A</li> 
                                         <li>Discount</li>                                          <li>Product Photos</li>                                     </ul>
                                    <div class="resp-tabs-container hor_1">

                                        <div><p>When deciding to use clothing labels you want to make sure they are going to be the right size and material for the garment. Printed labels can easily been sewn in and are thin for comfort and flexibility. While the hang tags, are thicker stronger labels used for the exterior of the garment or product.</p>
<p>We offer <u>custom clothing labels</u> in various types of material. The most common type of material used for clothing tags is Satin Acetate. Satin Acetate is used when considering the softness of material or when cost is a major concern. Three different colors can be produced on satin acetate clothing tags. Hang tags also referred to as HangTags are printed on cardstock with options of matte, glossy or semi gloss. Thickness can be from 12pt. to 24pt. String and pin can be customized for your custom hang tag labels. Get the right printed tags and hang tags are the biggest steps in starting your clothing line, fashion labels, home accessories or industrial tags.</p>
<p>The durability of our Xpresa <u>Woven Labels</u> is never in doubt; they are produced with the highest quality and durability to withstand all environmental conditions. However, be advised that printed labels do not withstand as long as woven labels since they are produced using thread to recreate your artwork. Browse our samples of <u>printed labels</u> and see how <u>custom clothing labels</u> can change your brand!</p>
                                                <div class="qaPanelCustomProduct">
                                                                                                   <div class="qaPanelCustomProductItem" id="item1">
                                                <h4 class="show" data-id="item1">Label type </h4>
                                                <div class="qaPanelCustomProductAns item1">
                                                    <p>Printed Label – Labels printed on satin acetate, card stock or other printed paper based material. Flexo or Rotary stamping.</p>
<p>See our fold options in our quote forms. Please allow and indicate seam in our Additional Comments section.</p>
                                                </div>
                                            </div>
                                                                                       <div class="qaPanelCustomProductItem" id="item2">
                                                <h4 class="" data-id="item2">Turnaround/Lead time</h4>
                                                <div class="qaPanelCustomProductAns item2">
                                                    <p>Xpresa Labels is one of the oldest and most reputable online label manufacturers. We offer the fastest turn-around time and best quality options in the industry. Once we receive your Quote, we prepare a custom quote and samples within 24 hours. Our quote form will indicate pricing, instructions and lead times in writing. Once we receive your order commitment, we will prepare a proof (physical proof via .jpg) typically within 24 hours. Once we receive your approval, we will ship your order in 8-10 business days.</p>
                                                </div>
                                            </div>
                                                                                       <div class="qaPanelCustomProductItem" id="item3">
                                                <h4 class="" data-id="item3">Proofing</h4>
                                                <div class="qaPanelCustomProductAns item3">
                                                    <p>Once you have completed our quote form and your custom design and submitted an order as instructed in our quote, we prepare a proof which is a physical proof sent as a .jpg for a woven version and a software layout for <a href="https://www.xpresalabels.com/printed-labels/"><u>printed satin</u></a> or printed hang tags.</p>
<p>Having a design ready as a digital file usually is the simplest way, but you can utilize our Design Tool to Create a simple design, or provide a MS Paint, Clear Sketch or the font written in an email with requested positioning and layout, and we will do our best to reproduce your proof.</p>
<p>We do our best to recreate, but with a woven process, there are some size limitations based on the size of your labels.</p>
<p>Physical samples can be sent out but will delay your project by 7 days. Our physical .jpgs will have very clear details with measurements.</p>
                                                </div>
                                            </div>
                                                                            </div>
                                    </div>                            <div>
                                [woocommerce_reviews id="113" ]                            </div>
                            
                                <div>


                                    <div class="qaPanelCustomProduct">

                                                                                    <div class="qaPanelCustomProductItem">
                                                <h4>Sample Question?</h4>

                                                <div class="qaPanelCustomProductAns">

                                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                                </div>
                                            </div>






                                                                                        <div class="qaPanelCustomProductItem">
                                                <h4>Duis aute irure dolor in reprehenderit in voluptate?</h4>

                                                <div class="qaPanelCustomProductAns">

                                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                                                </div>
                                            </div>






                                                                                </div>
                                </div>

                            




                            <div><p>FREE SHIPPING, FREE SAMPLING and Promo Code FREESHIP</p>
</div>

                                                            <div class="proAddiImgCont">
                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/Cotton_Labels.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/Cotton_Labels-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Cotton Labels" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/Cotton_Labels-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Cotton_Labels-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Cotton_Labels-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/Mishka-Psychic-Love-Printed-Satin-new.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/Mishka-Psychic-Love-Printed-Satin-new-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Mishka Psychic Love Printed Satin new" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/Mishka-Psychic-Love-Printed-Satin-new-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Mishka-Psychic-Love-Printed-Satin-new-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Mishka-Psychic-Love-Printed-Satin-new-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-Reference-InterMix-Label.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-Reference-InterMix-Label-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Printed Canvas Reference-InterMix Label" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-Reference-InterMix-Label-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-Reference-InterMix-Label-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-Reference-InterMix-Label-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Printed Canvas" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Canvas-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-Clothing-labels-123-medical-1.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-Clothing-labels-123-medical-1-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Printed Satin- Clothing labels- 123- medical" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-Clothing-labels-123-medical-1-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-Clothing-labels-123-medical-1-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Printed Satin" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Satin-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/printed-warning-matte-taffeta-beco.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/printed-warning-matte-taffeta-beco-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="printed warning matte taffeta beco" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/printed-warning-matte-taffeta-beco-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/printed-warning-matte-taffeta-beco-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2018/06/printed-warning-matte-taffeta-beco-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                    
                                        <div class="proAddiImgItems">
                                            <a href="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Woven-Edge.jpg" rel="gallery1" class="fancybox">
                                                <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Woven-Edge-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Printed Woven Edge" srcset="https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Woven-Edge-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Woven-Edge-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2018/06/Printed-Woven-Edge-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                            </a>
                                        </div>

                                                                    </div>
                            
                        </div>
                    </div>



                </div>
            </div>
        </section>


        <script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jquery.textfill.min.js"></script>
        <script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/colorpicker.js"></script>
        <script>
            
                printPriceChart = {
                    1: {
                        1000: 0.13,
                        2000: 0.12,
                        2500: 0.12,
                        3000: 0.11,
                        5000: 0.10,
                        10000: 0.07,
                        25000: 0.05,
                        50000: 0.04
                    },
                    2: {
                        1000: 0.14,
                        2000: 0.13,
                        2500: 0.13,
                        3000: 0.12,
                        5000: 0.11,
                        10000: 0.08,
                        25000: 0.06,
                        50000: 0.05
                    },
                    3: {
                        1000: 0.19,
                        2000: 0.18,
                        2500: 0.17,
                        3000: 0.16,
                        5000: 0.14,
                        10000: 0.11,
                        25000: 0.07,
                        50000: 0.06,
                    },
                    4: {
                        1000: 0.25,
                        2000: 0.22,
                        2500: 0.2,
                        3000: 0.18,
                        5000: 0.15,
                        10000: 0.13,
                        25000: 0.09,
                        50000: 0,
                    },
                    5: {
                        1000: 0.35,
                        2000: 0.33,
                        2500: 0.3,
                        3000: 0.3,
                        5000: 0.26,
                        10000: 0.24,
                        25000: 0.28,
                        50000: 0.18
                    },
                    6: {
                        1000: 0.4,
                        2000: 0.38,
                        2500: 0.37,
                        3000: 0.35,
                        3500: 0.35,
                        5000: 0.32,
                        10000: 0.29,
                        25000: 0.33,
                        50000: 0.26
                    },
                    7: {
                        1000: 0.50,
                        2000: 0.45,
                        2500: 0.43,
                        3000: 0.43,
                        5000: 0.35,
                        10000: 0.33,
                        25000: 0.29,
                        50000: 0.25
                    },
                    8: {
                        1000: 0.6,
                        2000: 0.54,
                        2500: 0.50,
                        3000: 0.48,
                        5000: 0.44,
                        10000: 0.38,
                        25000: 0.33,
                        50000: 0.29
                    }
                }

                printPriceChart2 = {
                    1: {
                        5000: 0.10,
                        10000: 0.07,
                        25000: 0.05,
                        50000: 0.04
                    },
                    2: {
                        5000: 0.11,
                        10000: 0.08,
                        25000: 0.06,
                        50000: 0.05
                    },
                    3: {
                        5000: 0.14,
                        10000: 0.11,
                        25000: 0.07,
                        50000: 0.06,
                    },
                    4: {
                        5000: 0.15,
                        10000: 0.13,
                        25000: 0.09,
                        50000: 0,
                    },
                    5: {
                        5000: 0.26,
                        10000: 0.24,
                        25000: 0.28,
                        50000: 0.18
                    },
                    6: {
                        5000: 0.32,
                        10000: 0.29,
                        25000: 0.33,
                        50000: 0.26
                    },
                    7: {
                        5000: 0.35,
                        10000: 0.33,
                        25000: 0.29,
                        50000: 0.25
                    },
                    8: {
                        5000: 0.44,
                        10000: 0.38,
                        25000: 0.33,
                        50000: 0.29
                    }
                }

                printPriceChartN = {
                    1: {
                        1000: 0.13,
                        2000: 0.12,
                        2500: 0.12,
                        3000: 0.11,
                        5000: 0.10,
                        10000: 0.07,
                        25000: 0.05,
                        50000: 0.04
                    },
                    2: {
                        1000: 0.14,
                        2000: 0.13,
                        2500: 0.13,
                        3000: 0.12,
                        5000: 0.11,
                        10000: 0.08,
                        25000: 0.06,
                        50000: 0.05
                    },
                    3: {
                        1000: 0.19,
                        2000: 0.18,
                        2500: 0.17,
                        3000: 0.16,
                        5000: 0.14,
                        10000: 0.11,
                        25000: 0.07,
                        50000: 0.06,
                    },
                    4: {
                        1000: 0.25,
                        2000: 0.22,
                        2500: 0.2,
                        3000: 0.18,
                        5000: 0.15,
                        10000: 0.13,
                        25000: 0.09,
                        50000: 0,
                    },
                    5: {
                        1000: 0.35,
                        2000: 0.33,
                        2500: 0.3,
                        3000: 0.3,
                        5000: 0.26,
                        10000: 0.24,
                        25000: 0.28,
                        50000: 0.18
                    },
                    6: {
                        1000: 0.4,
                        2000: 0.38,
                        2500: 0.37,
                        3000: 0.35,
                        3500: 0.35,
                        5000: 0.32,
                        10000: 0.29,
                        25000: 0.33,
                        50000: 0.26
                    },
                    7: {
                        1000: 0.50,
                        2000: 0.45,
                        2500: 0.43,
                        3000: 0.43,
                        5000: 0.35,
                        10000: 0.33,
                        25000: 0.29,
                        50000: 0.25
                    },
                    8: {
                        1000: 0.6,
                        2000: 0.54,
                        2500: 0.50,
                        3000: 0.48,
                        5000: 0.44,
                        10000: 0.38,
                        25000: 0.33,
                        50000: 0.29
                    }
                }

                recommendVals = {1 : {1000:'', 2000:'', 2500:'', 3000:1, 5000:'', 10000:'', 20000:'', },2 : {1000:'', 2000:'', 2500:1, 3000:'', 5000:'', 10000:'', 20000:'', },};
                function MeasureText(text, fontName, size) {
    //get Font Size:
    //var fontName = document.getElementById("selfonthereName").value;
                    if (fontName == "") {
                        fontName = "Arial";
                    }
                    font = fontName;
                    var bold = "Normal";
    //This global variable is used to cache repeated calls with the same arguments
                    var str = text + ':' + bold + ':' + font + ':' + size;
                    if (typeof(__measuretext_cache__) == 'object' && __measuretext_cache__[str]) {
                        return __measuretext_cache__[str];
                    }

                    var div = document.createElement('DIV');
                    div.innerHTML = text;
                    div.style.position = 'absolute';
                    div.style.top = '-100px';
                    div.style.left = '-100px';
                    div.style.fontFamily = font;
                    div.style.fontWeight = bold ? 'bold' : 'normal';
                    div.style.fontSize = size + 'px';
                    div.style.lineHeight = 'normal';

                    document.body.appendChild(div);

                    var size = [div.offsetWidth, div.offsetHeight];
                    var sizeHeight = div.offsetHeight;

                    document.body.removeChild(div);

                    if (typeof(__measuretext_cache__) != 'object') {
                        var __measuretext_cache__;
                    }
                    __measuretext_cache__ = sizeHeight;

                    return sizeHeight;
                }

                function invertColor(hex, bw) {
                    if (hex.length === 3) {
                        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
                    }
                    if (hex.length !== 6) {
                        throw new Error('Invalid HEX color.');
                    }
                    var r = parseInt(hex.slice(0, 2), 16),
                    g = parseInt(hex.slice(2, 4), 16),
                    b = parseInt(hex.slice(4, 6), 16);
                    if (bw) {
                        return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ?
                        '#000000' :
                        '#FFFFFF';
                    }
                    r = (255 - r).toString(16);
                    g = (255 - g).toString(16);
                    b = (255 - b).toString(16);
                    return "#" + padZero(r) + padZero(g) + padZero(b);
                }

                function getTextHeight(text, fontsz) {
                    div = document.createElement('div');
                    div.innerHTML = text;
                    div.style.fontSize = fontsz + 'px';
                    return div.height;
                }

                function submitNewColor() {
    //document.getElementById(cont).value = this.getAttribute('data-val');
                    submitDesign(1);
                }

// Submit Ajax/////////////////////////////////////
                function submitDesign(a, ds) {

                    jQuery('.windowBody').addClass('loads');

                    jQuery('.windowBody').prepend("<div class='imgDesignPlaceholder'></div>");

                    var iconSize = document.getElementById("iconSize").value;
                    var valtxcolo = document.getElementById("usertextcolor").value;
                    var val = document.getElementById("setselectsize").value;
                    var colorval = document.getElementById("usertextcolor").value;
                    var bgcolor = document.getElementById("userbgcolor").value;
                    var mytext1 = document.getElementById("usertextbox1").value;
                    var mytext2 = document.getElementById("usertextbox2").value;
                    var mytext3 = document.getElementById("usertextbox3").value;
                    var seliconhere = document.getElementById("seliconhere").value;
                    var varalign = document.getElementById("selalignhere").value;
                    var userwidth = parseInt(document.getElementById("selectedwidth").value);
                    var userheight = document.getElementById("selectedheight").value;

                    var calculatedSize = document.getElementById("calculatedSize").value;
                    var fontpadTop = document.getElementById("fontpadTop").value;
                    var lineSpecingC = document.getElementById("lineSpecingC").value;
                    var lineSpecingCLast = document.getElementById("lineSpecingCLast").value;

                    var line1align = document.getElementById("alignline1").value;
                    var line2align = document.getElementById("alignline2").value;
                    var line3align = document.getElementById("alignline3").value;
                    var varfonthere = document.getElementById("selfonthere").value;
                    var cutnfoldoption = document.getElementById("userlabelcutnfold").value;
                    var iconPosition = parseInt(document.getElementById("iconPosition").value);

                    if (iconPosition == 0 || isNaN(iconPosition)) {
                        iconPosition = 10;
                    }
                    var pricebackcolcal = '0';
                    var priceiconcal = '0';
                    var prcietextcal = '0';

                    pricebackcolcal = document.getElementById("backgroungcol").value;
                    priceiconcal = document.getElementById("iconpricedisp").value;
                    prcietextcal = document.getElementById("usertextcolorprcie").value;

                    if (pricebackcolcal == '') {
                        pricebackcolcal = 0;
                    }
                    if (priceiconcal == '') {
                        priceiconcal = 0;
                    }
                    if (prcietextcal == '') {
                        prcietextcal = 0;
                    }


                    var quantityforpdfpldo = document.getElementById("totalquantity").value;
                    document.getElementById("custom_data_7").value = quantityforpdfpldo;
                    var priceperlabelforpdfpldo = document.getElementById("unitpricehere").value;
                    if (quantityforpdfpldo != '' && priceperlabelforpdfpldo != '') {
                        var totalpricelabelpdfpldo = quantityforpdfpldo * priceperlabelforpdfpldo;
                    }

    /* disable back color if quantity is under 10000 */
                    quantityforpdfpldo < 10000 ? jQuery('div#limitedBgColors span.colorContainer').not(
                        'div#limitedBgColors span:nth-child(2)').hide() : jQuery('div#limitedBgColors span.colorContainer').show();

    //auto text adjustment
                    var fontsize1 = ('auto' == document.getElementById('textbox1Font').value) ? 25 : document.getElementById(
                        'textbox1Font').value;
                    var fontsize2 = ('auto' == document.getElementById('textbox2Font').value) ? 25 : document.getElementById(
                        'textbox2Font').value;
                    var fontsize3 = ('auto' == document.getElementById('textbox3Font').value) ? 25 : document.getElementById(
                        'textbox3Font').value;
                    var font = (document.getElementById('selfonthereName').value === '') ? 'Montserrat, sans-seriff' : document
                    .getElementById('selfonthereName').value;
                    var color = (document.getElementById('usertextcolor').value === '') ? 'Montserrat, sans-seriff' : document
                    .getElementById('usertextcolor').value;

                    jQuery('.row1').css({
                        'font-size': fontsize1 + 'px',
                        'font-family': font
                    });
                    jQuery('.row2').css({
                        'font-size': fontsize2 + 'px',
                        'font-family': font
                    });
                    jQuery('.row3').css({
                        'font-size': fontsize3 + 'px',
                        'font-family': font
                    });

                    jQuery('#texts > div').css('color', '#' + color);
                    jQuery('div#displaydesignnew').css('background-color', '#' + bgcolor);

                    var h8 = jQuery('#selectedheight').val(),
                    rowHeights = [],
                    h8Sum = 0,
                    newFontSizes = [],
                    newf, textParentWidth, arrw;
                    var textline1 = document.getElementById('usertextbox1').value;
                    var textline2 = document.getElementById('usertextbox2').value;
                    var textline3 = document.getElementById('usertextbox3').value;

                    var row1TextWidth = getTextWidthNew(font, fontsize1, textline1);
                    var row2TextWidth = getTextWidthNew(font, fontsize2, textline2);
                    var row3TextWidth = getTextWidthNew(font, fontsize3, textline3);

                    var lineHeight1 = ("" !== document.querySelector('.row1').innerText) ? parseFloat(getComputedStyle(document
                        .querySelector('.row1')).lineHeight) : 0;
                    var lineHeight2 = ("" !== document.querySelector('.row2').innerText) ? parseFloat(getComputedStyle(document
                        .querySelector('.row2')).lineHeight) : 0;
                    var lineHeight3 = ("" !== document.querySelector('.row3').innerText) ? parseFloat(getComputedStyle(document
                        .querySelector('.row3')).lineHeight) : 0;


                    var maxmimumLength = parseInt(row1TextWidth) + parseInt(row2TextWidth) + parseInt(row3TextWidth);
                    var maxmimumHeight = parseInt(lineHeight1) + parseInt(lineHeight2) + parseInt(lineHeight3);

    //if img added calculate img height and width
                    (document.getElementById('seliconhere').value != '') ? imgHeight = imgWidth = 50: imgHeight = imgWidth = 0;

                    maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
                        row3TextWidth)) + imgWidth);

                    textParentWidth = jQuery('#texts').width();

                    arrw = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)];
                    jQuery('.icon_n_txt #texts > div').each(function() {
                        h8Sum = h8Sum + parseInt(jQuery(this).css('height'));
                        rowHeights.push(parseInt(jQuery(this).css('height')));
                    });


                    if (h8Sum >= h8 - 2) {
                        jQuery('.icon_n_txt #texts > div').css('line-height', h8 / 3 + 'px');
                    } else {
                        jQuery('.icon_n_txt #texts > div').css('line-height', 'normal');
                    }

                    var row1TextWidth = jQuery('.row1').outerWidth(),
                    row2TextWidth = jQuery('.row2').outerWidth(),
                    row3TextWidth = jQuery('.row3').outerWidth(),
                    arrfgh = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)],
                    maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
                        row3TextWidth))),
                    textParentWidth = jQuery('#texts').width();

                    checkNadjustText(arrw, maxmimumLength, textParentWidth, 'front');



    //--auto text adjustment
                    console.log(a);
                    var tme = 1500;
                    if (a === 2) {
                        tme = 4000;
                    }

    //jQuery('div#displaydesignW').attr('class', '');
                    if (seliconhere == '') {

                        setTimeout(function() {
                            html2canvas(jQuery("#displaydesignnew"), {
                                onrendered: function(canvas) {
                                    canvas.id = 'canvascr';

                                    jQuery('#displaydesignnew').next('canvas').remove();
                                    jQuery('#displaydesignnew').after(canvas);
                                    jQuery('#datactdFromCanvas').val(canvas.toDataURL("image/png"));

                    //jQuery('div#displaydesignW').attr('class', cls);

                                    jQuery('.imgDesignPlaceholder').remove();

                    //window.scrollTo(0, scrollPos);
                                }
                            });
                        }, tme);

                    } else {
                        getDataUri(seliconhere, colorval, function(dataUri) {


                            jQuery('.icon_on_label_img').attr('src', dataUri);
                            var imageHeight = jQuery('.icon_n_txt .icon_on_label img').height() / 2;
                            jQuery('.icon_n_txt .icon_on_label').css('top', 'calc(50% - ' + imageHeight + 'px)');

                            setTimeout(function() {
                                html2canvas(jQuery("#displaydesignnew"), {
                                    onrendered: function(canvas) {
                                        canvas.id = 'canvascr';

                                        jQuery('#displaydesignnew').next('canvas').remove();
                                        jQuery('#displaydesignnew').after(canvas);
                                        jQuery('#datactdFromCanvas').val(canvas.toDataURL("image/png"));

                        //jQuery('div#displaydesignW').attr('class', cls);

                                        jQuery('.imgDesignPlaceholder').remove();

                        //window.scrollTo(0, scrollPos);
                                    }
                                });
                            }, tme);

                        });
                    }


                    var sizes = userwidth + 'x' + userheight;

    /*********** merge two canvas ***************/
                    var dataURL;
                    if (jQuery('#back').hasClass('hide') == false && jQuery('#canvascr_bck').width() > 0) {

                        var canvasFront = document.getElementById('canvascr');


                        var newCanvas = document.createElement('canvas');
                        newCanvas.id = 'newCanvas';
                        newCanvas.width = canvasFront.width;
                        newCanvas.height = canvasFront.height * 2 + 10;
                        var ctxN = newCanvas.getContext('2d');
                        ctxN.fillStyle = "#FFF";
                        ctxN.fillRect(0, 0, canvasFront.width, canvasFront.height);
                        ctxN.drawImage(canvasFront, 0, 0);

                        var ctxN2 = newCanvas.getContext('2d');
                        var canvasBack = document.getElementById('canvascr_bck');
                        ctxN2.drawImage(canvasBack, 0, canvasBack.height);

        //ctxF.drawImage(ctxB, canvasFront.width, canvasFront.height*2);

                        dataURL = newCanvas.toDataURL("image/png");
                        jQuery('#datactdFromCanvas').val(dataURL);
        //var link = document.createElement('a');
        //link.download = "merged.png";
        //link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        //link.click();
                    }

                    if (a == 2 || a == 3) {
                        jQuery.ajax({
                            url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
                            type: 'post',
                            data: {
                                action: 'my_action',
                                keyword: val,
                                size: sizes,
                                usertext1: mytext1,
                                usertext2: mytext2,
                                usertext3: mytext3,
                                selectedwidth: userwidth,
                                selectedheight: userheight,
                                colorhere: colorval,
                                textcolorhere: valtxcolo,
                                selectedicon: seliconhere,
                                fontsize: calculatedSize,
                                topSpace: fontpadTop,
                                lineSpecing: lineSpecingC,
                                lineSpecingLast: lineSpecingCLast,
                                iconsize: iconSize,
                                alignment1: line1align,
                                alignment2: line2align,
                                alignment3: line3align,
                                selectedfont: varfonthere,
                                cutnfoldoptionsend: cutnfoldoption,
                                iconAlign: iconPosition,
                                quantityforpdfpldopdf: quantityforpdfpldo,
                                priceperlabelforpdfpldopdf: priceperlabelforpdfpldo,
                                totalpricelabelpdfpldopdf: totalpricelabelpdfpldo,
                                dataFromCanvas: jQuery('#datactdFromCanvas').val(),
                                sizetag: document.getElementById("sizetag").value
                            },
                            beforeSend: function() {

                            },
                            success: function(data) {
                                jQuery('input[name="Displaydesigns"]').val(JSON.parse(data));
                                jQuery('#imageCreated').val('yes');

                //console.log();

                                if ((a === 2)) {
                                    var img = new Image();
                                    img.src = JSON.parse(data);
                                    img.onerror = function() {
                                        alert(
                                            'There is an error saving your image, please refresh your browser and retry choosing the options'
                                            );
                                        location.reload();
                                        return false;
                                    }
                                }

                                if (data == 'fail') {
                                    alert('No records found');
                                } else {

                    //cls = jQuery('div#displaydesignW').attr('class');
                    //jQuery('div#displaydesignW').attr('class', '');

                                    setTimeout(function() {
                                        html2canvas(jQuery("#displaydesignnew"), {
                                            onrendered: function(canvas) {
                                                canvas.id = 'canvascr';

                                                jQuery('#displaydesignnew').next('canvas').remove();
                                                jQuery('#displaydesignnew').after(canvas);
                                //jQuery('div#displaydesignW').attr('class', cls);

                                            }
                                        });
                                    }, tme);

                                }

                            }
                        });
                    }



                    var calH8 = jQuery('.windowBody').outerHeight();
                    jQuery('.panel').css('height', calH8);
                    (a === 2) ? priceandallgen(ds): jQuery('.windowBody').removeClass('loads');;
                }

                function checkNadjustText(arrw, maxmimumLength, textParentWidth, side) {
                    side = (side == 'front') ? '' : '_bck';

    //console.log(side);

                    var newFontSizes = [],
                    font = document.getElementById('selfonthereName').value,
                    fontsize1 = (document.getElementById('textbox1' + side + 'fontVal').value == 'auto') ? 25 : document
                    .getElementById('textbox1' + side + 'fontVal').value,
                    fontsize2 = (document.getElementById('textbox2' + side + 'fontVal').value == 'auto') ? 25 : document
                    .getElementById('textbox2' + side + 'fontVal').value,
                    fontsize3 = (document.getElementById('textbox3' + side + 'fontVal').value == 'auto') ? 25 : document
                    .getElementById('textbox3' + side + 'fontVal').value;
                    textline1 = document.getElementById('usertextbox1' + side).value,
                    textline2 = document.getElementById('usertextbox2' + side).value,
                    textline3 = document.getElementById('usertextbox3' + side).value,
                    row1TextWidth = getTextWidth(font, newFontSizes[1], textline1),
                    row2TextWidth = getTextWidth(font, newFontSizes[2], textline2),
                    row3TextWidth = getTextWidth(font, newFontSizes[3], textline3);

    //console.log(maxmimumLength);
    //console.log(textParentWidth);

                    if (maxmimumLength > textParentWidth) {
                        for (var i = 0; i <= 2; i++) {
                            var trgtfntsz = parseFloat(jQuery('.row' + (i + 1) + side).css('font-size'));
                            newFontSizes[i + 1] = adjustText('.row' + (i + 1) + side, trgtfntsz, i + 1, side);
                        }
                        newFontSizes[1] = undefined == newFontSizes[1] ? fontsize1 : newFontSizes[1];
                        newFontSizes[2] = undefined == newFontSizes[2] ? fontsize2 : newFontSizes[2];
                        newFontSizes[3] = undefined == newFontSizes[3] ? fontsize2 : newFontSizes[3];

                        arrw = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)];
                        maxmimumLength = Math.round((Math.max(arrw[0], arrw[1], arrw[2])));

                        if (maxmimumLength < textParentWidth) {
                            checkNadjustText(arrw, maxmimumLength, textParentWidth, side);
                        }
                    }

                    function adjustText(selector, fontsize, num, side) {
                        var selectedValue = jQuery('#textbox' + num + 'Font' + side).val();
                        if (selectedValue === 'auto') {
                            for (var i = fontsize; i > 0; i--) {
                                fontsize = fontsize - 1;
                                var textWdth = parseFloat(getTextWidth(font, fontsize, jQuery(selector).text()));
                                textWdth = jQuery(selector).width();
                                if (textWdth >= textParentWidth) {
                                    fontsize = (fontsize == 0) ? 1 : fontsize;
                                    jQuery(selector).css('font-size', fontsize + 'px');
                                    var newf = parseFloat(jQuery(selector).css('font-size'));
                                } else {

                                }
                            }
                            return newf;
                        } else {
            //return newf;
                        }

                    }
                }

// calculate font width
                function getTextWidth(text, font) {
    //alert(font);
    // get font name
                    var fontName = document.getElementById("selfonthereName").value;
                    if (fontName == "") {
                        fontName = "arial";
                    }

                    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
                    var context = canvas.getContext("2d");
                    context.font = 'normal ' + font + 'pt ' + fontName;
                    var metrics = context.measureText(text);
    //alert(metrics.width);
                    return parseInt(metrics.width);
                }

                function getTextWidthNew(font, fontsize, txt) {

                    var formattedWidth;
                    if (txt == '') {
                        formattedWidth = '0px';
                    } else {
                        var text = document.createElement("span");
                        document.body.appendChild(text);
                        text.style.font = font;
                        text.style.fontSize = fontsize + "px";
                        text.style.height = 'auto';
                        text.style.width = 'auto';
                        text.style.position = 'absolute';
                        text.style.whiteSpace = 'no-wrap';
                        text.innerHTML = txt;

                        var width = Math.ceil(text.clientWidth);
                        formattedWidth = width + "px";
                    }

                    return formattedWidth;
    //document.body.removeChild(text);
                }

// find longest string
                function longestString(arr) {
                    var longest = arr.sort(function(a, b) {
                        return b.length - a.length
                    })[0];

                    return longest;
                }

                function clearDefaultText() {
                    var mytext1 = document.getElementById("textbox1").value;
                    if (mytext1 == "Your Text Here" || mytext1 == "Logo") {
                        document.getElementById("textbox1").value = "";
                    }
                }

                function selectshape(val, lwidth, lheight, priceChartId, ds, wdthorgnl, h8orgnl) {
                    if (priceChartId != '') {
                        document.getElementById('selectedPriceChart').value = priceChartId;
                    } else {
                        document.getElementById('selectedPriceChart').value = 1;
                    }

                    var dpi = 3;

                    var pixelwidth = lwidth * dpi;
                    var pixelheight = lheight * dpi;
                    jQuery(ds).parent().addClass('selected');

                    jQuery(ds).parents().eq(1).siblings().find('.desig-order-shrt-des').removeClass('selected');

                    if (document.getElementById("setselectsize")) {
                        document.getElementById("setselectsize").value = val;
                    }

                    var userwidth = pixelwidth;
                    var userheight = pixelheight;
                    document.getElementById("custom_data_1").value = wdthorgnl + 'X' + h8orgnl;
                    document.getElementById("selectprodsize").innerHTML = wdthorgnl + " X " + h8orgnl;
                    if (val == 1) {
                        if (document.getElementById("selectprodsize")) {

                            document.getElementById("iconSize").value = 35;
                            var charlimit = 22;
                            document.getElementById("textbox1").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox2").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox3").setAttribute('maxLength', charlimit);
                            document.getElementById("charectorInfo").innerHTML = "Maximum Character Limit For Every Line Is: " +
                            charlimit;
                            if (document.getElementById("textbox1").value == "Logo") {
                                document.getElementById("textbox1").value = "Your Text Here";
                            }
                        }

                    } else if (val == 2) {

                        if (document.getElementById("selectprodsize")) {
                            document.getElementById("iconSize").value = 45;
                            var charlimit = 22;
                            document.getElementById("textbox1").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox2").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox3").setAttribute('maxLength', charlimit);
                            document.getElementById("charectorInfo").innerHTML = "Maximum Character Limit For Every Line Is: " +
                            charlimit;
                            if (document.getElementById("textbox1").value == "Logo") {
                                document.getElementById("textbox1").value = "Your Text Here";
                            }

                        }

                    } else if (val == 3) {
                        if (document.getElementById("selectprodsize")) {
                            document.getElementById("iconSize").value = 27;
                            var charlimit = 18;
                            document.getElementById("textbox1").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox2").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox3").setAttribute('maxLength', charlimit);
                            document.getElementById("charectorInfo").innerHTML = "Maximum Character Limit For Every Line Is: " +
                            charlimit;
                            if (document.getElementById("textbox1").value == "Logo") {
                                document.getElementById("textbox1").value = "Your Text Here";
                            }

                        }

                    } else if (val == 4) {
                        if (document.getElementById("selectprodsize")) {
                            document.getElementById("iconSize").value = 22;
                            var charlimit = 6;
                            document.getElementById("textbox1").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox2").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox3").setAttribute('maxLength', charlimit);
                            document.getElementById("charectorInfo").innerHTML = "Maximum Character Limit For Every Line Is: " +
                            charlimit;
                            if (document.getElementById("textbox1").value == "Your Text Here") {
                                document.getElementById("textbox1").value = "Logo";
                            }
                        }

                    } else if (val == 5) {
                        if (document.getElementById("selectprodsize")) {
                            document.getElementById("iconSize").value = 25;
                            var charlimit = 22;
                            document.getElementById("textbox1").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox2").setAttribute('maxLength', charlimit);
                            document.getElementById("textbox3").setAttribute('maxLength', charlimit);
                            document.getElementById("charectorInfo").innerHTML = "Maximum Character Limit For Every Line Is: " +
                            charlimit;
                            if (document.getElementById("textbox1").value == "Logo") {
                                document.getElementById("textbox1").value = "Your Text Here";
                            }

                        }

                    }
                    if (document.getElementById("userbgcolor")) {
                        var colorval = document.getElementById("userbgcolor").value;
                    }

                    valtxcolo = document.getElementById("usertextcolor").value;
                    seliconhere = document.getElementById("seliconhere").value;

    //console.log(userheight);
                    document.getElementById("selectedwidth").value = userwidth;
                    document.getElementById("selectedheight").value = userheight;

                    jQuery('#displaydesignnew').width(jQuery('input#selectedwidth').val());
                    jQuery('#displaydesignnew').height(jQuery('input#selectedheight').val());

                    mytext1 = document.getElementById("usertextbox1").value;
                    mytext2 = document.getElementById("usertextbox2").value;
                    mytext3 = document.getElementById("usertextbox3").value;
                    calculatedSize = document.getElementById("calculatedSize").value;
                    fontpadTop = document.getElementById("fontpadTop").value;
                    lineSpecingC = document.getElementById("lineSpecingC").value;
                    lineSpecingCLast = document.getElementById("lineSpecingCLast").value;

                    for (var i = 0; i < 2; i++) {
                        jQuery('.after').css({
                            width: jQuery('input#selectedwidth').val() + 'px',
                            height: jQuery('input#selectedheight').val() - 10 + 'px',
                            'margin-top': -jQuery('.after img').height() + 1 + 'px'
                        });
                    }

                    selecttext();
                    madeBackToCanvas();



                }

                function selecttext(val) {
                    val = document.getElementById("setselectsize").value;
                    mytext1 = document.getElementById("textbox1").value;
                    document.getElementById("usertextbox1").value = mytext1;
                    mytext2 = document.getElementById("textbox2").value;
                    document.getElementById("usertextbox2").value = mytext2;
                    mytext3 = document.getElementById("textbox3").value;
                    document.getElementById("usertextbox3").value = mytext3;

                    jQuery('.row1').text(mytext1);
                    jQuery('.row2').text(mytext2);
                    jQuery('.row3').text(mytext3);


                    valtxcolo = document.getElementById("usertextcolor").value;
                    seliconhere = document.getElementById("seliconhere").value;
                    selectedFonthere = document.getElementById("selfonthereName").value;
                    if (selectedFonthere == "") {
                        selectedFonthere = "Arial";
                    }
    //  alert(MeasureText("asas as asa as asa", selectedFonthere, 60));
                    userwidth = document.getElementById("selectedwidth").value;
                    userheight = document.getElementById("selectedheight").value;

                    var colorval = document.getElementById("userbgcolor").value;

    // My Code starts

                    var frameWidth = parseInt(document.getElementById("selectedwidth").value);
                    var frameHeight = parseInt(document.getElementById("selectedheight").value);

                    if (!(frameWidth) || !(frameHeight)) {
                        document.getElementById("textErrorMsg").innerHTML = "Please select Frame size first !!";
                    } else {
                        document.getElementById("textErrorMsg").innerHTML = "";
                    }
                    var allInput = [mytext1, mytext2, mytext3]
                    var mytext1Length = mytext1.length;
                    var mytext2Length = mytext2.length;
                    var mytext3Length = mytext3.length;

                    var maxinputLength = Math.max(mytext1Length, mytext2Length, mytext3Length);
    //alert(mytext1Length);
    //console.log(mytext1Length);
                    var calculatedSize = 15;
                    var fontpadTop;
                    var lineSpecingC = 10;

                    var longestInputText = longestString(allInput);
    //console.log(getTextWidth(mytext1 , '12'));

                    var row1TextWidth = jQuery('.row1').outerWidth(),
                    row2TextWidth = jQuery('.row2').outerWidth(),
                    row3TextWidth = jQuery('.row3').outerWidth(),
                    arrfgh = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)],
                    maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
                        row3TextWidth))),
                    textParentWidth = jQuery('#texts').width();
                    checkNadjustText(arrfgh, maxmimumLength, textParentWidth, 'front');

                    submitDesign(1);
                    var prevAlign = document.getElementById("iconAlign").value;
                    if (prevAlign == '') {
                        prevAlign = 'l';
                    }

                    iconAlign(prevAlign);

                }

                function selectcolor(valc, valcn, valcp) {

                    val = document.getElementById("setselectsize").value;
                    mytext1 = document.getElementById("usertextbox1").value;
                    mytext2 = document.getElementById("usertextbox2").value;
                    mytext3 = document.getElementById("usertextbox3").value;
                    valtxcolo = document.getElementById("usertextcolor").value;
                    seliconhere = document.getElementById("seliconhere").value;
                    userwidth = document.getElementById("selectedwidth").value;
                    userheight = document.getElementById("selectedheight").value;
                    calculatedSize = document.getElementById("calculatedSize").value;
                    fontpadTop = document.getElementById("fontpadTop").value;
                    lineSpecingC = document.getElementById("lineSpecingC").value;
                    lineSpecingCLast = document.getElementById("lineSpecingCLast").value;

                    document.getElementById("custom_data_2").value = valcn;

                    document.getElementById("labelcolor").innerHTML = valcn;
                    if (valcp) {
                        document.getElementById("backgroungcol").value = valcp;
                    }


                    document.getElementById("userbgcolor").value = valc;

                    colorval = valc;
                    submitDesign(1);

                    if (document.getElementById("pantoneBG")) {
                        jQuery('#pantoneBG').attr('style', '');
                        jQuery('#pantoneBG').val('');
                    }

    //set price table
                    document.getElementById('totalquantity').value = 1000;
                    setPricingTable();

                    madeBackToCanvas();
                }

                function selecttextcolor(valtxcolo, valtxcolon, valtextcolprice) {
                    document.getElementById("usertextcolor").value = valtxcolo;
                    if (valtextcolprice) {
                        document.getElementById("usertextcolorprcie").value = valtextcolprice;
                    }

                    val = document.getElementById("setselectsize").value;
                    colorval = document.getElementById("userbgcolor").value;
                    mytext1 = document.getElementById("usertextbox1").value;
                    mytext2 = document.getElementById("usertextbox2").value;
                    mytext3 = document.getElementById("usertextbox3").value;
                    seliconhere = document.getElementById("seliconhere").value;
                    userwidth = document.getElementById("selectedwidth").value;
                    userheight = document.getElementById("selectedheight").value;
                    document.getElementById("logocolor").innerHTML = valtxcolon;
                    calculatedSize = document.getElementById("calculatedSize").value;
                    fontpadTop = document.getElementById("fontpadTop").value;
                    lineSpecingC = document.getElementById("lineSpecingC").value;
                    lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
                    document.getElementById("custom_data_3").value = valtxcolon;


                    if (colorval == valtxcolo) {
                        document.getElementById("colorselectionError").innerHTML =
                        "Similar to Label Color, please select a different one.";
                    } else {
                        document.getElementById("colorselectionError").innerHTML = "";
                    }

                    if (document.getElementById("pantoneText")) {
                        jQuery('#pantoneText').attr('style', '');
                        jQuery('#pantoneText').val('');
                    }

                    submitDesign(1);
                    madeBackToCanvas();

                }

                function selecticonhere(seliconhere, seliconname, seliconprice, ds) {
                    document.getElementById("seliconhere").value = seliconhere;
                    jQuery(ds).addClass('selected');
                    valtxcolo = document.getElementById("usertextcolor").value;
                    val = document.getElementById("setselectsize").value;
                    colorval = document.getElementById("userbgcolor").value;
                    mytext1 = document.getElementById("usertextbox1").value;
                    mytext2 = document.getElementById("usertextbox2").value;
                    mytext3 = document.getElementById("usertextbox3").value;
                    varalign = document.getElementById("selalignhere").value;
                    userwidth = document.getElementById("selectedwidth").value;
                    userheight = document.getElementById("selectedheight").value;
                    document.getElementById("symbolhere").innerHTML = seliconname;
                    calculatedSize = document.getElementById("calculatedSize").value;
                    fontpadTop = document.getElementById("fontpadTop").value;
                    lineSpecingC = document.getElementById("lineSpecingC").value;
                    lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
                    document.getElementById("iconpricedisp").value = seliconprice;
                    document.getElementById("custom_data_5").value = seliconname;

                    if (val != '') {
                        if (val == 1) {
                            document.getElementById("iconSize").value = '35';
                        } else if (val == 2) {
                            document.getElementById("iconSize").value = '45';
                        } else if (val == 3) {
                            document.getElementById("iconSize").value = '27';

                        } else if (val == 4) {
                            document.getElementById("iconSize").value = '22';
                        } else {
            // document.getElementById("iconSize").value = '55';
                        }
                    } else {

        //get alignmenment
                        var prevAlign = document.getElementById("selalignhere").value;
                        if (prevAlign == '') {
                            prevAlign = 'l';
                        }
        //alert(prevAlign);
                        selectalign(prevAlign);

                    }

                    selecttext();
                    jQuery('.icon_n_txt').addClass('withicon');
                }

                function selectalign(varalign) {
                    jQuery(this).addClass('selected');
                    var varalign;
                    document.getElementById("selalignhere").value = varalign;
                    valtxcolo = document.getElementById("usertextcolor").value;
                    val = document.getElementById("setselectsize").value;
                    colorval = document.getElementById("userbgcolor").value;
                    mytext1 = document.getElementById("usertextbox1").value;
                    mytext2 = document.getElementById("usertextbox2").value;
                    mytext3 = document.getElementById("usertextbox3").value;
                    seliconhere = document.getElementById("seliconhere").value;
                    userwidth = document.getElementById("selectedwidth").value;
                    userheight = document.getElementById("selectedheight").value;
                    calculatedSize = document.getElementById("calculatedSize").value;
                    fontpadTop = document.getElementById("fontpadTop").value;
                    lineSpecingC = document.getElementById("lineSpecingC").value;
                    lineSpecingCLast = document.getElementById("lineSpecingCLast").value;

                    var textalign;

                    function makeAlignment() {
        //jQuery('#texts').attr('class','');
                        jQuery("#texts").removeClass(function(index, css) {
                            return (css.match(/\btext-\S+/g) || []).join(' ');
                        });

                        if (varalign == 'l') {
                            jQuery('#texts').addClass('text-left');
                            textalign = 'start'
                        };
                        if (varalign == 'm') {
                            jQuery('#texts').addClass('text-center');
                            textalign = undefined
                        };
                        if (varalign == 'r') {
                            jQuery('#texts').addClass('text-right');
                            textalign = 'end'
                        };
                    }
                    makeAlignment();

                    iconAlignment = document.getElementById("iconAlign").value;
                    iconPosition = parseInt(document.getElementById("iconPosition").value);

                    var ckhIcon = document.getElementById("seliconhere").value;
                    var iconSize = document.getElementById("iconSize").value;
                    if (iconSize == '') {
                        iconSize = 45;
                    }
                    iconSize = parseInt(iconSize);

    // Alignment calculations
    // get line width
                    var line1Width = getTextWidth(mytext1, calculatedSize);
                    var line2Width = getTextWidth(mytext2, calculatedSize);
                    var line3Width = getTextWidth(mytext3, calculatedSize);

                    var line1align, line2align, line3align;
                    userwidth = userwidth * 1.5;

                    document.getElementById("alignline1").value = line1align;
                    document.getElementById("alignline2").value = line2align;
                    document.getElementById("alignline3").value = line3align;


                    setPricingTable();
                }

                function setPricingTable() {
                    selectedPriceChart = document.getElementById('selectedPriceChart').value;
                    var selectedQuantity = document.getElementById('totalquantity').value;

                    if (parseInt(selectedPriceChart) < 0) {
                        selectedPriceChart = 1;
                    }

    //console.log(printPriceChart[selectedPriceChart]);

                    if (selectedQuantity == '') {
                        selectedQuantity = 1000;
                    }



                    var priceChart = "<tr><td colspan='3'>There are some ERROR !! Please check after some time. </td></tr>";
                    var priceChartData = '';

                    var i = 0;
                    var printPC;


                    if (selectedQuantity < 5000) {
                        printPC = printPriceChart[selectedPriceChart];
                    } else {
                        printPC = printPriceChart2[selectedPriceChart];
                    }

                    for (var baseQuantity in printPC) {

                        if (baseQuantity == selectedQuantity) {
                            var selectedDisplay = "checked";
                        } else {
                            var selectedDisplay = " ";

                        }

        //var highlightClass = recommendVals[selectedPriceChart][baseQuantity] ? 'recommended' : '';
                        priceChartData +=
                        '<tr class=""><td width="20"><label class="customRadio"><input name="quantityhere" id="priceChartData_' +
                        i + '" type="radio" value="' + baseQuantity + '" ' + selectedDisplay + ' onchange="selectquantity(' +
                        baseQuantity + ',' + (printPriceChart[selectedPriceChart][baseQuantity]).toFixed(3) + ')" ppl="' + (
                            printPriceChart[selectedPriceChart][baseQuantity]).toFixed(3) +
                        '"><span class="checkmark"></span></label></td><td>' + baseQuantity + '</td><td width="20%">$' + (
                            printPriceChart[selectedPriceChart][baseQuantity]).toFixed(3) + '</td></tr>';

                        i++;

                    }
                    priceChart = priceChartData;
                    document.getElementById('priceContainerFull').innerHTML = priceChart;

                    var x = printPriceChart[selectedPriceChart][selectedQuantity];

                    selectquantity(selectedQuantity, x);


                }

                function selectfonthere(varfonthere, varfontherename, ds) {
                    jQuery(ds).addClass('selected').siblings().removeClass('selected');
                    jQuery(ds).siblings().removeClass('selected');
                    document.getElementById("selfonthere").value = varfonthere;
                    jQuery('div#texts').css('font-family', varfontherename);

                    document.getElementById("selfonthereName").value = varfontherename;

                    valtxcolo = document.getElementById("usertextcolor").value;
                    val = document.getElementById("setselectsize").value;
                    colorval = document.getElementById("userbgcolor").value;
                    mytext1 = document.getElementById("usertextbox1").value;
                    mytext2 = document.getElementById("usertextbox2").value;
                    mytext3 = document.getElementById("usertextbox3").value;
                    seliconhere = document.getElementById("seliconhere").value;
                    varalign = document.getElementById("selalignhere").value;
                    userwidth = document.getElementById("selectedwidth").value;
                    userheight = document.getElementById("selectedheight").value;
                    document.getElementById("designfont").innerHTML = varfontherename;
                    calculatedSize = document.getElementById("calculatedSize").value;
                    fontpadTop = document.getElementById("fontpadTop").value;
                    lineSpecingC = document.getElementById("lineSpecingC").value;
                    lineSpecingCLast = document.getElementById("lineSpecingCLast").value;

                    document.getElementById("custom_data_4").value = varfontherename;

                    selecttext();
                }

                function selectquantity(valquantity, vareachunit) {

                    if (valquantity != '') {

                        if (valquantity == 'ProofOnly' || valquantity == "FreeSamplePacket") {
                            document.getElementById('totalquantity').value = 1;
                            vartotalprice = parseFloat(vareachunit);
                            vartotalprice1 = parseFloat(vartotalprice);
                            document.getElementById("quantity").innerHTML = "1 PIECE";
                            document.getElementById("priceperlabel").innerHTML = vareachunit.toFixed(2);
                            document.getElementById("totalprice").innerHTML = (vareachunit).toFixed(2);
                            document.getElementById("totalquantity").value = 1;
                            document.getElementById("unitpricehere").value = vareachunit;
                            document.getElementById("totalpricelabeladd2crt").value = vartotalprice1;
                            document.getElementById("totalprice").innerHTML = vareachunit;
                            document.getElementById("custom_data_8").value = valquantity;
                        } else {
            //alert();
                            document.getElementById('totalquantity').value = valquantity;
                            vartotalprice = parseFloat(valquantity) * parseFloat(vareachunit);
                            vartotalprice1 = parseFloat(vartotalprice);
                            jQuery('input#quantity').val(valquantity);
                            jQuery('span#quantity_t').text(valquantity + ' PIECES');
                            document.getElementById("priceperlabel").innerHTML = vareachunit.toFixed(2);
                            document.getElementById("totalprice").innerHTML = (valquantity * vareachunit).toFixed(2);
                            document.getElementById("totalquantity").value = valquantity;
                            document.getElementById("unitpricehere").value = vareachunit;
                            document.getElementById("totalpricelabeladd2crt").value = vartotalprice1;
                        }
                        document.getElementById("ppl").value = vareachunit;
                    }

    /*if (valquantity >= 10000) {

        document.getElementById('limitedBgColors').classList.remove("limitedBgCl");
        document.getElementById('limitedBgColorsMsg').innerHTML = "";

    } else {
        document.getElementById('limitedBgColors').classList.add("limitedBgCl");
        document.getElementById('limitedBgColorsMsg').innerHTML = "<p>More Color options are available for 10,000+ Quantity.</p>";
    }*/

                    submitDesign(1);

                }
                var cls;

                function selectFrameType(foldopn, foldname) {
                    document.getElementById("labelcutnfold").innerHTML = foldname;
                    document.getElementById("userlabelcutnfold").value = foldname;
                    document.getElementById("custom_data_6").value = foldname;

                    var cals = foldname.split(' ');
    //console.log(cals);

                    jQuery('#displaydesignW').attr('class', '');
                    jQuery('#displaydesignW').addClass(cals[0]);
                    cls = cals[0];

    /*jQuery('div#prntlabellgoo').attr('class', '');
    jQuery('div#prntlabellgoo').addClass(cals[0]);*/

                    jQuery('.after').css({
                        width: jQuery('input#selectedwidth').val() + 'px',
                        height: jQuery('input#selectedheight').val() - 10 + 'px',
                        'margin-top': -jQuery('.after img').height() + 1 + 'px'
                    });
                }

                function removeIcon() {
                    document.getElementById("iconSize").value = '0';
                    document.getElementById("seliconhere").value = '';
                    jQuery('.icon_on_label_img').attr('src', '');
                    jQuery('.icon_n_txt').removeClass('withicon');
                    jQuery('.algn-sec ul li a').removeClass('selected');
                    selecttext();
                    submitDesign(1);
                }

                function iconAlign(v) {
                    var iconName = document.getElementById("seliconhere").value;
                    var line1align = parseInt(document.getElementById("alignline1").value);
                    var line2align = parseInt(document.getElementById("alignline2").value);
                    var line3align = parseInt(document.getElementById("alignline3").value);
                    var iconSize = parseInt(document.getElementById("iconSize").value);
                    var userwidth = parseInt(document.getElementById("selectedwidth").value);
                    userwidth = userwidth * 1.5;

                    if (iconName) {
                        jQuery("#texts").removeClass(function(index, css) {
                            return (css.match(/\bpull\S+/g) || []).join(' ');
                        });
                        if (v == "r") {
            //var textLine1 = (line1align-iconSize-10);
                            var iconAlign = userwidth - iconSize - 10;
                            document.getElementById("iconcalcInfo").innerHTML = "";
                            document.getElementById("iconPosition").value = iconAlign;
                            jQuery('.icon_on_label').css({
                                'left': 'auto',
                                'right': '10px'
                            });
                            jQuery('#texts').addClass('pull-left');

                        } else {
                            document.getElementById("iconPosition").value = 10;
                            jQuery('.icon_on_label').css({
                                'right': 'auto',
                                'left': '10px'
                            });
                            jQuery('#texts').addClass('pull-right');
                        }

                        document.getElementById("iconAlign").value = v;

                    } else {
                        document.getElementById("iconcalcInfo").innerHTML = "Please select a Symbol. ";

                    }
    //get alignmenment
                    var prevAlign = document.getElementById("selalignhere").value;
                    if (prevAlign == '') {
                        prevAlign = 'm';
                    }
    //alert(prevAlign);
    //console.log("2. Icon Alignment Set");
                    selectalign(prevAlign);
                }

                function priceandallgen(vn) {


    /*********** merge two canvas ***************/
                    var dataURL;
                    if (jQuery('#back').hasClass('hide') == false) {

                        var canvasFront = document.getElementById('canvascr');


                        var newCanvas = document.createElement('canvas');
                        newCanvas.id = 'newCanvas';
                        newCanvas.width = canvasFront.width;
                        newCanvas.height = canvasFront.height * 2 + 10;
                        var ctxN = newCanvas.getContext('2d');
                        ctxN.fillStyle = "#FFF";
                        ctxN.fillRect(0, 0, canvasFront.width, canvasFront.height);
                        ctxN.drawImage(canvasFront, 0, 0);

                        var ctxN2 = newCanvas.getContext('2d');
                        var canvasBack = document.getElementById('canvascr_bck');
                        ctxN2.drawImage(canvasBack, 0, canvasBack.height);

        //ctxF.drawImage(ctxB, canvasFront.width, canvasFront.height*2);

                        dataURL = newCanvas.toDataURL("image/png");
        //var link = document.createElement('a');
        //link.download = "merged.png";
        //link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        //link.click();
                    } else {
                        dataURL = '';
                    }


                    var1 = document.getElementById("custom_data_1").value;
                    var2 = document.getElementById("custom_data_2").value;
                    var3 = document.getElementById("custom_data_3").value;
                    var4 = document.getElementById("custom_data_4").value;
                    var5 = document.getElementById("custom_data_5").value;
                    var6 = document.getElementById("custom_data_6").value;
                    var9 = document.getElementById("custom_data_9").value;
                    var10 = document.getElementById("custom_data_10").value;
                    var7 = document.getElementById("totalpricelabeladd2crt").value;
                    var8 = document.getElementById("imageforcart").value;
                    qnt = document.getElementById("custom_data_7").value;
                    jQuery.ajax({
                        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
                        type: 'post',
                        data: {
                            action: 'my_action_print_add2cart',
                            ctsmdate1: var1,
                            ctsmdate2: var2,
                            ctsmdate3: var3,
                            ctsmdate4: var4,
                            ctsmdate5: var5,
                            ctsmdate6: var6,
                            ctsmdate7: var7,
                            imgMerged: dataURL,
                            ctsmdate9: var9,
                            ctsmdate10: var10,
                            qnt: qnt
                        },
                        beforeSend: function() {

                        },
                        success: function(data) {
                            data = JSON.parse(data);
            //console.log(data);
                            if (data == 'fail') {
                                alert('No records found');
                            } else {
                                jQuery('#hereallwillchnage').html(data.html);
                                if (data.buyNowLink != '') {
                                    jQuery('input[name="buyLink"]').val(data.buyNowLink);
                                    jQuery('input[value="Download Quote"]').removeClass('hide');
                                    jQuery('#iha5').remove();
                                }
                                if (vn != 'sbmtQT') {
                    //jQuery('.designtoolbutton').click();
                                    jQuery('button[value="1620"]').click();
                    //jQuery.get('https://www.xpresalabels.com/?post_type=product&add-to-cart=1620', function() {});
                                }


                            }
                        }
                    });
                }

                function priceandallgenanother() {
                    var1 = document.getElementById("custom_data_1").value;
                    var2 = document.getElementById("custom_data_2").value;
                    var3 = document.getElementById("custom_data_3").value;
                    var4 = document.getElementById("custom_data_4").value;
                    var5 = document.getElementById("custom_data_5").value;
                    var6 = document.getElementById("custom_data_6").value;
                    var7 = document.getElementById("totalpricelabeladd2crt").value;
                    var8 = document.getElementById("imageforcart").value;
                    jQuery.ajax({
                        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
                        type: 'post',
                        data: {
                            action: 'my_action_print_add2cart',
                            ctsmdate1: var1,
                            ctsmdate2: var2,
                            ctsmdate3: var3,
                            ctsmdate4: var4,
                            ctsmdate5: var5,
                            ctsmdate6: var6,
                            ctsmdate7: var7,
                            ctsmdate8: var8
                        },
                        beforeSend: function() {

                        },
                        success: function(data) {
                            if (data == 'fail') {
                                alert('No records found');
                            } else {
                                jQuery('#hereallwillchnage').html(data);
                //jQuery('.designtoolbutton').click();
                                jQuery('button[value="1620"]').click();
                                alert('Please wait while the page is redirect');
                                jQuery.get('https://www.xpresalabels.com/?post_type=product&add-to-cart=1620', function() {

                                });
                                window.location.assign("https://www.xpresalabels.com/printed-labels-design-and-order/");
                            }
                        }
                    });
                }

                function manualFontChange(tid, tval) {
                    if (tid == 1) {
                        document.getElementById('usertextbox1').value = tval;
                    } else if (tid == 2) {
                        document.getElementById('usertextbox2').value = tval;
                    } else if (tid == 3) {
                        document.getElementById('usertextbox3').value = tval;
                    }
    //console.log(tval);
                    selecttext(tid);
                    submitDesign(1);
                }

/******* png to datauri **********/
                function getDataUri(url, color, callback) {
                    color = (undefined == color) ? '#09f' : '#' + color;
                    var image = new Image();
                    image.onload = function() {
                        var canvas = document.createElement('canvas');
                        canvas.width = this.naturalWidth;
                        canvas.height = this.naturalHeight;
                        canvas.getContext('2d').drawImage(this, 0, 0);

                        canvas.getContext('2d').globalCompositeOperation = "source-in";

        // draw color
                        canvas.getContext('2d').fillStyle = color;
                        canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);

                        callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
                        callback(canvas.toDataURL('image/png'));
                    };
                    image.src = url;
                }

                jQuery(document).ready(function() {
    /** panel heading slider **/
                    jQuery('.panel-headings-wrapper').owlCarousel({
                        loop: false,
                        margin: 0,
                        nav: true,
                        dots: false,
                        mouseDrag: false,
                        responsive: {
                            0: {
                                items: 3
                            },
                            600: {
                                items: 3
                            },
                            1000: {
                                items: 5,
                            },
                            1200: {
                                items: 5,
                            },
                            1400: {
                                items: 5,
                            }
                        }
                    });

    /** download pdf **/
                    jQuery('.dwn-pdf-btn a').click(function() {
                        jQuery("input[name=labelsize]").val(jQuery('#custom_data_1').val());
                        jQuery("input[name=sizetagm]").val(jQuery('input#sizetag').val());
                        jQuery("input[name=labelcolor]").val(jQuery('#labelcolor').text());
                        jQuery("input[name=labellogocolor]").val(jQuery('#logocolor').text());
                        jQuery("input[name=labelfont]").val(jQuery('#designfont').text());
                        jQuery("input[name=labeltotalprice]").val('USD' +
                            jQuery('#totalpricelabeladd2crt').val());
                        jQuery("input[name=labelsymbol]").val(jQuery('#symbolhere').text());
        //jQuery("input[name=labelwoovenlabtype]").val(jQuery('#symbolhere').text());
                        jQuery("input[name=labelcutnfold]").val(jQuery('#labelcutnfold').text());
                        jQuery("input[name=Quantity]").val(jQuery('#quantity_t').text());
                        jQuery("input[name=Displaydesigns]").val(jQuery('#displaydesign div img').attr('src'));
                    });

                    jQuery('#generateimgdiv').textfill({
                        maxFontPixels: 16
                    });

    //selectshape(1,'14.75','19.5','1', '#asdug1', 0.59, 0.78);
                    selectshape(2, '44.25', '14.75', '1', '#asdug2', 1.77, 0.59, 1);
                    jQuery('.default.selected').click();

                    jQuery('#pantoneBG').ColorPicker({
                        onShow: function(colpkr) {
                            jQuery(colpkr).fadeIn(500);
                            return false;
                        },
                        onHide: function(colpkr) {
                            jQuery(colpkr).fadeOut(500);
                            return false;
                        },
                        onChange: function(hsb, hex, rgb) {
                            jQuery('#pantoneBG').css('backgroundColor', '#' + hex);
                            jQuery('#pantoneBG').css('color', invertColor(hex, 'true'));
                            document.getElementById('userbgcolor').value = hex;
                            document.getElementById('labelcolor').innerHTML = '#' + hex;
                            jQuery('#pantoneBG').val("RGB: " + rgb.r + ',' + rgb.g + ',' + rgb.b);

                            jQuery('.colorContainer').removeClass('selected');
                            madeBackToCanvas();

            //set price table
                            document.getElementById('totalquantity').value = 5000;
                            setPricingTable();

                        },
                        onHide: function(hsb, hex, rgb) {
                            submitDesign(1);
                        }

                    });

                    jQuery('#pantoneText').ColorPicker({
                        onShow: function(colpkr) {
                            jQuery(colpkr).fadeIn(500);
                            return false;
                        },
                        onHide: function(colpkr) {
                            jQuery(colpkr).fadeOut(500);
                            return false;
                        },
                        onChange: function(hsb, hex, rgb) {
                            jQuery('#pantoneText').css('backgroundColor', '#' + hex);
                            jQuery('#pantoneText').css('color', invertColor(hex, 'true'));
                            document.getElementById('usertextcolor').value = hex;
                            jQuery('#pantoneText').val("RGB: " + rgb.r + ',' + rgb.g + ',' + rgb.b);
                        },
                        onHide: function(hsb, hex, rgb) {
                            submitDesign(1);
                        }
                    });

                    document.getElementById("textbox1").value = "";
                    selecttext(1);
                    submitDesign(1);

    //code to add validation on print label design order "Add to Cart" button
                    jQuery('.designtoolbutton').click(function() {

                        var custom_data_1 = document.getElementById("custom_data_1").value;
                        var custom_data_2 = document.getElementById("custom_data_2").value;
                        var custom_data_3 = document.getElementById("custom_data_3").value;
                        var custom_data_4 = document.getElementById("custom_data_4").value;
                        var custom_data_5 = document.getElementById("custom_data_5").value;
                        var custom_data_6 = document.getElementById("custom_data_6").value;
                        var custom_data_7 = document.getElementById("custom_data_7").value;
                        var custom_data_8 = document.getElementById("custom_data_8").value;
                        var custom_data_9 = document.getElementById("custom_data_9").value;
                        var custom_data_10 = document.getElementById("custom_data_10").value;
                        var sizetag = document.getElementById("sizetag").value;


                        var ajaxurl = 'https://xpresalabels.com/site/wp-admin/admin-ajax.php';
                        jQuery.ajax({
            url: ajaxurl, //AJAX file path - admin_url('admin-ajax.php')
            type: "POST",
            data: {
                //action name
                action: 'wdm_add_user_custom_data_options',
                custom_data_1: custom_data_1,
                custom_data_2: custom_data_2,
                custom_data_3: custom_data_3,
                custom_data_4: custom_data_4,
                custom_data_5: custom_data_5,
                custom_data_6: custom_data_6,
                custom_data_7: custom_data_7,
                custom_data_9: custom_data_9,
                custom_data_10: custom_data_10,
                custom_data_8: custom_data_8,
                product_price: jQuery('input#totalpricelabeladd2crt').val(),
            },
            async: false,
            success: function(data) {

            }
        });
                    });

                    // jQuery('.panel-heading').click(function() {
                    //     submitDesign(3);
                    //     var trgt = jQuery(this).attr('data-target');
                    //     jQuery('div[data-div="' + trgt + '"]').show().siblings().not('.cart-sec, .guideArea').hide();
                    // });
                });

var scroll = false,
start_time, count = 0;
jQuery(window).scroll(function() {
    (scroll == false) ? jQuery('div#label-cutnfolds').prepend("<div class='imgDesignPlaceholder'></div>"): "";
    var _scrolled = jQuery(this).scrollTop();
    //var _scrolledDiv = jQuery('.aboutTesti').offset().top - jQuery('.aboutTesti').outerHeight();

    if (_scrolled >= 10 && scroll == false) {
        start_time = new Date().getTime();
        jQuery('.panel:not(.panel-primary)').css('display', 'none');
        scroll = true;

        /* Tab openning */
        jQuery(document.body).on('click', '.symbol-click', function() {
            var _this = jQuery(this);
            var _this_cat = _this.data('cat');
            jQuery(_this).addClass('selected').siblings().removeClass('selected');
            jQuery('#' + _this_cat).css('display', 'flex');
            jQuery('#' + _this_cat).siblings('div.designerIcons').css('display', 'none');
        });

        loadFunction('my_action', '#fontsLoader', 'myfonts'); //load Custom Label Sizes
        loadFunction('load_my_symbols', '.iconSection', 'mysymbols'); //load Custom Label Sizes
       // loadFunction('load_label_sizes', '#label-cutnfolds-content'); //load Custom Label Sizes
    }
    jQuery('.imgDesignPlaceholder').remove();
});

function loadFunction(action, selector, callrequest) {
    callrequest = (undefined === callrequest) ? '' : callrequest;
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        cache: true,
        datattype: 'json',
        data: {
            action: action,
            callRequest: callrequest
        },
        success: function(data) {
            jQuery(selector).html(data);

            var options = "";
            if (options != '') {
                //console.log(options[0]);
                request_time = new Date().getTime() - start_time;

                jQuery(selector).imagesLoaded(function() {
                    addEditedOption(options);
                    ///console.log(count);
                    (count === 2) ? setTimeout(function() {
                        jQuery('.loading').removeClass('loading');
                    }, request_time): '';
                    count = count + 1;
                });
            } else {
                jQuery('.loading').removeClass('loading');
            }
        }
    });
}

function showMore(ds) {
    jQuery('#divider').slideToggle();
    jQuery(ds).text(jQuery(ds).text() == 'Show More' ? "Show Less" : "Show More");
}

/** next tab **/
function nxt(d) {
    submitDesign(3);
    var parent = jQuery(d).closest(".panel").attr('data-div');
    jQuery('div[data-target="' + parent + '"]').parent().next().find('.panel-heading').click();

    var owl = jQuery('.panel-headings-wrapper');
    owl.trigger('next.owl.carousel');
}

function repair() {
    submitDesign(3);
}

 /* next */
function nxt_new() {
 var current_step=jQuery('#current_step').val();
 var next_step=parseInt(current_step)+1;
 var labelType=jQuery('#labelTypeSelectCustomData').val();
 if(labelType==''){
    alert('Please select label type to proceed');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.mobilestep1').addClass("active-h");
    jQuery('.step1').addClass("active-h");
    return false;
}
var background =jQuery('#custom_data_2').val();
if(background=='' && next_step>4){
  alert('Please select background color to proceed');
  jQuery('.panel-heading').removeClass('active-h');
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('#backGroundColors').show();
  jQuery('#backGroundColors').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
     scrollTop: jQuery("#backGroundColors").offset().top-400
 }, 1000);
  return false;
}
jQuery('.step'+next_step).trigger('click');
jQuery('.mobilestep'+next_step).addClass('active-h');
jQuery('#current_step').val(next_step);
if(next_step>1){
  jQuery('.btn-prev').removeAttr('disabled');
}
else{
    jQuery('.btn-prev').prop("disabled", true);

}
if(next_step==5 || next_step>5){
   jQuery('.btn-prev-next').hide();
   jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}
console.log('.step'+next_step);

}


function prev_new() {
 var current_step=jQuery('#current_step').val();
 var prev_step=parseInt(current_step)-1;
 jQuery('.step'+prev_step).trigger('click');
 jQuery('.mobilestep'+prev_step).addClass('active-h');
 jQuery('#current_step').val(prev_step);
 if(prev_step>1){
  jQuery('.btn-prev').removeAttr('disabled');
}
else{
    jQuery('.btn-prev').prop("disabled", true);
    
}
if(prev_step==5 || prev_step>5){
   jQuery('.btn-prev-next').hide();
   jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}
console.log(prev_step);

}


jQuery(document.body).on('click', '.panel-heading', function() {
//   return false;

    var step_id=jQuery(this).data('id');
    var labelType=jQuery('#labelTypeSelectCustomData').val();
    if(labelType=='' && step_id>1){
      alert('Please select label type to proceed');
      jQuery('.panel-heading').removeClass('active-h');
      jQuery('.step1').trigger("click");
      jQuery('.mobilestep1').trigger("click");
      jQuery('.mobilestep1').addClass("active-h");
      jQuery('.step1').addClass("active-h");
      return false;
  }
  var background =jQuery('#custom_data_2').val();
  if(background=='' && step_id>4){
      alert('Please select background color to proceed');
      jQuery('.panel-heading').removeClass('active-h');

      jQuery('.step4').trigger("click");

      jQuery('.mobilestep4').trigger("click");
      jQuery('.mobilestep4').addClass("active-h");
      jQuery('.step4').addClass("active-h");
      jQuery('#backGroundColors').show();
      jQuery('#backGroundColors').prev("h4").addClass("section-open");
      jQuery('html, body').animate({
       scrollTop: jQuery("#backgroundcolors").offset().top-400
   }, 1000);
      return false;
  }
  jQuery('#current_step').val(step_id);
 // var arr = {};
 // //createLogoCanvas(arr);
  submitDesign(3);
  var trgt = jQuery(this).attr('data-target');
  jQuery('div[data-div="' + trgt + '"]').show().siblings().not('.cart-sec, .guideArea').hide();
  if(step_id>1){
      jQuery('.btn-prev').removeAttr('disabled');
  }
  else{
    jQuery('.btn-prev').prop("disabled", true);
    
}
if(step_id==5 || step_id>5){
 jQuery('.btn-prev-next').hide();
 jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}

});


jQuery(document.body).on('click', '.btn-canvas-submit', function() {
    jQuery('.proPreview-deg-ord-print').addClass('model-preview');
    jQuery('.add-amount').addClass('change-quantity');
    jQuery('.close-preview').show();
    jQuery('.btn-cart-canvas').show();
    jQuery('.btn-prev-next').hide();
    jQuery('.btn-canvas-submit').hide();

});
jQuery(document.body).on('click', '.close-preview', function() {
    jQuery('.proPreview-deg-ord-print').removeClass('model-preview');
    jQuery('.add-amount').removeClass('change-quantity');
    jQuery('.btn-cart-canvas').hide();
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
    jQuery('.close-preview').hide();
    

});

function chooseType(labelname) {
    jQuery('#labelType, #labelTypeSelectCustomData, input[name="labelwoovenlabtype"]').val(labelname);
    jQuery('span#labelTypeSelect').text(labelname);
}

function saveForLater(p) {
    submitDesign(3);

    var labelSize = jQuery('div#label-cutnfolds-content .desig-order-shrt-des.selected').parent().index() + 1;

    var text1 = jQuery('input#textbox1').val();
    var text2 = jQuery('input#textbox2').val();
    var text3 = jQuery('input#textbox3').val();

    var text1Size = jQuery('select#textbox1Font').val();
    var text2Size = jQuery('select#textbox2Font').val();
    var text3Size = jQuery('select#textbox3Font').val();

    var textAlign = jQuery('div#inputTexts .algn-sec .selected').parent().index() + 1;

    var font = jQuery('.fontWrapper .selected').index() + 1;

    var labelFold = jQuery('div#cut-folds .row-sec .selected').index() + 1;

    var backColor = jQuery('#backGroundColors span.colorContainer.selected').index() + 1;

    var textColor = jQuery('#textColors span.colorContainer.selected').index() + 1;

    var symbolTitleClick = jQuery('.designerIconsCat .selected').index() + 1;
    var symbolClick = jQuery('.iconSection > div > a.selected').attr('data-arr');
    var iconAlign = jQuery('.algn-sec.algn-sec-icon.col-lg-4 li .selected').parent().index() + 1;

    var quantity = jQuery('input#custom_data_7').val();
    var ppl = jQuery('input#ppl').val();

    var arrToSave_pd = [];
    arrToSave_pd.push({
        labelFold: labelFold,
        labelSize: labelSize,
        text1: text1,
        text2: text2,
        text3: text3,
        text1Size: text1Size,
        text2Size: text2Size,
        text3Size: text3Size,
        textAlign: textAlign,
        font: font,
        backColor: backColor,
        textColor: textColor,
        symbolTitleClick: symbolTitleClick,
        symbolClick: symbolClick,
        iconAlign: iconAlign,
        quantity: quantity,
        ppl: ppl
    });

    //console.log(arrToSave_pd);
    //console.log(p);
    p = (p === undefined) ? '' : p;
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        cache: true,
        datattype: 'json',
        data: {
            action: 'saveForLater_PD',
            arrToSave_pd: arrToSave_pd,
            p: p
        },
        beforeSend: function() {

        },
        success: function(data) {
            //console.log(data);
            var d = data.split('/');
            //console.log(d);
            var myAccountPageUrl =
            'https://xpresalabels.com/site/my-account/';
            if (data != 0) {
                if (d[1] == 'login=false') {
                    jQuery.fancybox.open(
                        '<div class="message"> <h2>Please Login to continue</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                        myAccountPageUrl + '?' + d[0] +
                        '">Login</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                        myAccountPageUrl + '?' + d[0] + '">Sign up</a> </div></div></div>');
                } else if (d[0] == 'already added') {
                    jQuery.fancybox.open(
                        '<div class="message"> <h2>Want to replace previously saved item?</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="javascript:void(0)" data-fancybox-close onclick="saveForLater(3)">Yes</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" data-fancybox-close href="javascript:void(0)">No</a></div></div></div>'
                        );
                } else {
                    jQuery.fancybox.open(
                        '<div class="message"> <h2>Product saved!</h2><div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                        myAccountPageUrl +
                        '/saved-items/">View saved product</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" data-fancybox-close href="javascript:void(0)">Continue customizing</a></div></div></div>'
                        );
                }
            }
        }
    });

}

function addEditedOption(options) {

    jQuery('div#label-cutnfolds-content .row-sec .col-lg-3:nth-child(' + options[0].labelSize +
        ') .desig-order-shrt-des').addClass('selected').find('img').click();

    jQuery('input#textbox1').val(options[0].text1);
    jQuery('input#textbox2').val(options[0].text2);
    jQuery('input#textbox3').val(options[0].text3);

    jQuery('select#textbox1Font').val(options[0].textbox1Font);
    jQuery('select#textbox2Font').val(options[0].textbox2Font);
    jQuery('select#textbox3Font').val(options[0].textbox3Font);

    jQuery('select#textbox1Font, select#textbox2Font, select#textbox3Font').trigger('change');

    jQuery('div#inputTexts .algn-sec ul li:nth-child(' + options[0].textAlign + ') > a').addClass('selected').click();

    jQuery('.fontWrapper > a:nth-child(' + options[0].font + ')').addClass('selected').click();

    jQuery('#cut-folds .row-sec .desig-order-shrt-des:nth-child(' + options[0].labelFold + ')').addClass('selected')
    .click();

    jQuery('tbody#priceContainerFull input[value="' + options[0].quantity + '"]').attr('checked', true);
    selectquantity(parseInt(options[0].quantity), parseFloat(options[0].ppl));

    isNaN(options[0].backColor) ? changePantoneBG(options[0].backColor) : jQuery(
        '#backGroundColors .colorSelection > span:nth-child(' + options[0].backColor + ')').addClass('selected')
    .click();

    isNaN(options[0].textColor) ? changePantoneText(options[0].textColor) : jQuery(
        '#textColors .colorSelection > span:nth-child(' + options[0].textColor + ')').addClass('selected').click();



    jQuery('.designerIconsCat ul li:nth-child(' + options[0].symbolTitleClick + ')').addClass('selected').click();
    jQuery('.iconSection [data-arr="' + options[0].symbolClick + '"]').addClass('selected').click();
    jQuery('.algn-sec.algn-sec-icon.col-lg-4 li:nth-child(' + options[0].iconAlign + ')').addClass('selected').click();
}

//all images loaded count function
(function($) {
    $.fn.extend({
        imagesLoaded: function(callback, cycling) {
            var i, ic,
            c = true,
            $this = $(this),
            t = $this.find('img').andSelf(),
            l = t.length,
            img = [];
            for (i = 0; i < l; i++) {
                if (t[i].tagName === "IMG") {

                    ic = ('fileSize' in t[i] && t[i].fileSize < 0 && t[i].count > 10) ? true : t[i]
                    .complete;

                    c = (c && ic && t[i].height !== 0); // complete flag

                    if (ic === false) {
                        img.push(t[i]);
                        t[i].count = (t[i].count || 0) + 1;
                    }
                }
            }
            if (c) {
                if (typeof callback === "function") {
                    callback();
                }
            } else {
                setTimeout(function() {
                    $(img).imagesLoaded(callback, true);
                }, 200);
            }
            // maintain chainability
            if (!cycling) {
                return $this;
            }
        }
    });
})(jQuery);

function changePantoneText(color) {
    jQuery('#pantoneText').css('background-color', '#' + color);
    jQuery('#pantoneText').val('#' + color);
    selecttextcolor(color, '#' + color, '0.70');
}

function changePantoneBG(color) {
    jQuery('#pantoneBG').css('background-color', '#' + color);
    jQuery('#pantoneBG').val('#' + color);
    selectcolor(color, '#' + color, '');
}

jQuery('select#sizeTag').change(function() {
    var dsval = jQuery(this).val();
    (dsval !== 'Choose') ? (jQuery('span#sizetagchosen').text(dsval), jQuery('input#sizetag').val(dsval)) : (
        jQuery('span#sizetagchosen').text('N/A'), jQuery('input#sizetag').val('N/A'));
});

document.addEventListener('wpcf7mailsent', function(event) {
    if ('1709' == event.detail.contactFormId) {
        window.location.href = "https://www.xpresalabels.com/thank-you-quote/";
        //console.log(jQuery('form.wpcf7-form').serialize());
        //event.preventDefault();
    //     var usertextbox1Val = jQuery('input#usertextbox1').val();
    //     var usertextbox2Val = jQuery('input#usertextbox2').val();
    //     var usertextbox3Val = jQuery('input#usertextbox3').val();
    //     jQuery.ajax({
    //         type: 'POST',
    //         url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
    //         data: {
    //             data: jQuery('form.wpcf7-form').serialize() + '&usertextbox1Val=' + usertextbox1Val +
    //                 '&usertextbox2Val=' + usertextbox2Val + '&usertextbox3Val=' + usertextbox3Val,
    //             action: 'cf7FormSubmit_PD',
    //         },
    //         success: function(data) {
    //             console.log(data);
    //             window.open(
    //                 "https://xpresalabels.com/site/tcpdf/tcpdf/pdfprintlabeldesignorder.php",
    //                 '_blank');
    //             window.location.href = "https://xpresalabels.com/thank-you-quote/";
    //         }
    //     });
    }
}, false);

function selectSideOptions(d, printSide) {
    jQuery(d).addClass('selected');
    jQuery('.oneSide').not(d).removeClass('selected');
    jQuery('#printOptionChosen, #newPrintOption').val(printSide);
    jQuery('#labprintOption').text(printSide);
    jQuery('.warning').remove();
    jQuery('#sideOption').val(printSide);

    if (printSide == 'Both Sided') {
        if (jQuery('#userlabelcutnfold').val() == 'Center-folded') {
            jQuery('.panel-body.panel-body-2').addClass('full');
            jQuery('#back').addClass('show').removeClass('hide');
        } else {
            jQuery('#back').addClass('hide').removeClass('show');
            jQuery('div#printOptions .panel-body').append(
                '<span class="warning">Please choose different label. Both side printing is for "Center Folded" labels only.</span>'
                );
        }

    } else {
        jQuery('.panel-body.panel-body-2').removeClass('full');
        jQuery('#displaydesignnew_bck').removeClass('show').addClass('hide');
    }

    setPricingTable();
}

/************ back side functions ************/
function selecttext_new(p, t) {
    jQuery('#imgU_bck').hide();
    jQuery('#texts_bck').show();
    var v = jQuery(t).val();
    jQuery('#usertextbox' + p + '_bck').val(v);
    jQuery('.row' + p + '_bck').text(v);

    var n = jQuery(t).val();

    var row1TextWidth = jQuery('.row1_bck').outerWidth(),
    row2TextWidth = jQuery('.row2_bck').outerWidth(),
    row3TextWidth = jQuery('.row3_bck').outerWidth(),
    arrfgh = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)],
    maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
        row3TextWidth))),
    textParentWidth = jQuery('#texts_bck').width();
    checkNadjustText(arrfgh, maxmimumLength, textParentWidth, 'bck');

    madeBackToCanvas();
}

function manualFontChange_bck(p, t) {
    var n = jQuery(t).val();
    jQuery('#textbox' + p + '_bckfontVal').val(n);
    if (n == 'auto') {
        jQuery('.row' + p + '_bck').css('font-size', '25px');
        var row1TextWidth = jQuery('.row1_bck').outerWidth(),
        row2TextWidth = jQuery('.row2_bck').outerWidth(),
        row3TextWidth = jQuery('.row3_bck').outerWidth(),
        arrfgh = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)],
        maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
            row3TextWidth))),
        textParentWidth = jQuery('#texts_bck').width();
        checkNadjustText(arrfgh, maxmimumLength, textParentWidth, 'bck');

    } else {
        jQuery('.row' + p + '_bck').css('font-size', n + 'px');
    }
    madeBackToCanvas();
}



jQuery('.close-panel').click(function() {
    jQuery('.panel-body.panel-body-2').removeClass('full');
});

function selectalign_bck(cls) {
    jQuery('div#texts_bck').attr('class', '').addClass(cls);;
}

function getTextWidth(font, fontsize, txt) {
    var formattedWidth;
    if (txt == '') {
        formattedWidth = '0px';
    } else {
        var text = document.createElement("span");
        document.body.appendChild(text);
        text.style.font = font;
        text.style.fontSize = fontsize + "px";
        text.style.height = 'auto';
        text.style.width = 'auto';
        text.style.position = 'absolute';
        text.style.whiteSpace = 'no-wrap';
        text.innerHTML = txt;

        var width = Math.ceil(text.clientWidth);
        formattedWidth = width + "px";
        text.remove();
    }
    return formattedWidth;
}

function madeBackToCanvas() {
    jQuery('.displaydesignnew_bck_vw').css({
        'width': jQuery('#selectedwidth').val() + 'px',
        'height': jQuery('#selectedheight').val() + 'px',
        'background-color': '#' + jQuery('#userbgcolor').val(),
        'color': '#' + jQuery('#usertextcolor').val(),
        'font-family': jQuery('#selfonthereName').val(),
    });

    setTimeout(function() {
        html2canvas(jQuery(".displaydesignnew_bck_vw"), {
            onrendered: function(canvas) {
                canvas.id = 'canvascr_bck';

                jQuery('.displaydesignnew_bck_vw').next('canvas').remove();
                jQuery('.displaydesignnew_bck_vw').after(canvas);


                if (jQuery('.displaydesignnew_bck_vw').hasClass('Circle_h') && jQuery(
                    '#canvascr_bck').length > 0) {
                    var imgs = new Image();
                imgs.src =
                'https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/pattern-overlay.png';
                var c_n = document.getElementById("canvascr_bck");
                var ctx_n = c_n.getContext("2d");
                ctx_n.drawImage(imgs, 0, 0);
                ctx_n.globalCompositeOperation = 'destination-in';
                ctx_n.beginPath();
                ctx_n.arc(c_n.width / 2, c_n.height / 2, c_n.height / 2, 0, Math.PI * 2);
                ctx_n.closePath();
                ctx_n.fill();
            }


        }
    });
    }, 3000);


}
/************ back side functions ************/

jQuery(document).ready(function() {
    jQuery('.toggle-less').click(function() {
        var txt = jQuery(".label-input-details").is(':visible') ? 'See More' : 'See Less';
        jQuery(this).text(txt);
        jQuery(this).toggleClass('toggle');
        jQuery('.label-input-details').slideToggle();
    });
    //headerTopMargin();
});

// var targetTopHeader = '.header_top_holder';
var previewBox = '#previewRow';
var targetHSpace = '.previewRowHeight';

function previewBoxTopMargin() {
    // var tHeight = $(targetTopHeader).innerHeight();
    var bHeight = jQuery(previewBox).innerHeight();
    jQuery(targetHSpace).css('height', bHeight + "px");
};
jQuery(window).on('load resize', function() {
    previewBoxTopMargin();
});
jQuery('.add-amount').click(function() {
    jQuery('.panel-headings-wrapper .owl-item .panel-heading').removeClass("active-h");
    jQuery('.panel-headings-wrapper').trigger('to.owl.carousel', 10);
    jQuery('.mobilestep10').addClass("active-h");
    jQuery('.step10').addClass("active-h");
    jQuery('#amounts').slideDown().siblings().slideUp();
});
jQuery(document.body).on('click', '.change-quantity', function() {
    jQuery('.panel-headings-wrapper .owl-item .panel-heading').removeClass("active-h");
    jQuery('.panel-headings-wrapper').trigger('to.owl.carousel', 10);
    jQuery('.mobilestep10').addClass("active-h");
    jQuery('.step10').addClass("active-h");
    jQuery('#amounts').slideDown().siblings().slideUp();
    jQuery('.proPreview-deg-ord-print').removeClass('model-preview');

    jQuery('.btn-cart-canvas').hide();
    jQuery('.btn-prev-next').hide();
    jQuery('.btn-canvas-submit').show();
    jQuery('.close-preview').hide();
    jQuery('.add-amount').removeClass('change-quantity');
});

jQuery(document).on('click','.panel-title',function(){
   jQuery(this).toggleClass("section-open");
   console.log('test');
   jQuery(this).next("div").slideToggle();

});
jQuery(document.body).on('click', '.qaPanelCustomProductItem h4', function() {
 var div_to_show=jQuery(this).data('id');
   // jQuery('.qaPanelCustomProductItem h4').removeClass('show');
 jQuery('.qaPanelCustomProductItem').removeClass('open');
 jQuery('#'+div_to_show).addClass('open');
 jQuery('.'+div_to_show).show();
 jQuery(this).addClass('show');

});

jQuery(document.body).on('click', '.qaPanelCustomProductItem h4.show', function() {
 var div_to_show=jQuery(this).data('id');

 jQuery('.qaPanelCustomProductItem').removeClass('open');

 jQuery('.'+div_to_show).hide();
 jQuery(this).removeClass('show');

});
</script>
<script src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/pluginScript.js"></script>
<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/cnvs.js"></script>
{"id":95,"date":"2018-03-28T09:26:38","date_gmt":"2018-03-28T09:26:38","guid":{"rendered":"https:\/\/www.xpresalabels.com\/?page_id=95"},"modified":"2021-01-06T12:48:51","modified_gmt":"2021-01-06T12:48:51","slug":"printed-labels-design-and-order","status":"publish","type":"page","link":"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/","title":{"rendered":"Printed Labels Design And Order"},"content":{"rendered":"<p><br \/>\n<!--[printlabeldesignorder]--><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"designTool.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-95","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design Printed Labels and Tags- Order from Xpresa Labels<\/title>\n<meta name=\"description\" content=\"Order high quality printed labels from Xpresa Labels. Design and customize your printed label yourself with our FREE template. Get Live Quotes Now!\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Printed Labels and Tags- Order from Xpresa Labels\" \/>\n<meta property=\"og:description\" content=\"Order high quality printed labels from Xpresa Labels. Design and customize your printed label yourself with our FREE template. Get Live Quotes Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/\" \/>\n<meta property=\"og:site_name\" content=\"Xpresa Labels\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/xpresalabels\/\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-06T12:48:51+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@xpresalabels\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/\",\"url\":\"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/\",\"name\":\"Design Printed Labels and Tags- Order from Xpresa Labels\",\"isPartOf\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#website\"},\"datePublished\":\"2018-03-28T09:26:38+00:00\",\"dateModified\":\"2021-01-06T12:48:51+00:00\",\"description\":\"Order high quality printed labels from Xpresa Labels. Design and customize your printed label yourself with our FREE template. Get Live Quotes Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/xpresalabels.com\/site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Printed Labels Design And Order\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#website\",\"url\":\"https:\/\/xpresalabels.com\/site\/\",\"name\":\"Xpresa Labels\",\"description\":\"Custom Woven Clothing Labels and Tags\",\"publisher\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/xpresalabels.com\/site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#organization\",\"name\":\"Xpresa Labels\",\"url\":\"https:\/\/xpresalabels.com\/site\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg\",\"contentUrl\":\"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg\",\"width\":110,\"height\":80,\"caption\":\"Xpresa Labels\"},\"image\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/xpresalabels\/\",\"https:\/\/x.com\/xpresalabels\",\"https:\/\/linkedin.com\/company\/xpresa-labels--custom-woven-printed-labels\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design Printed Labels and Tags- Order from Xpresa Labels","description":"Order high quality printed labels from Xpresa Labels. Design and customize your printed label yourself with our FREE template. Get Live Quotes Now!","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Design Printed Labels and Tags- Order from Xpresa Labels","og_description":"Order high quality printed labels from Xpresa Labels. Design and customize your printed label yourself with our FREE template. Get Live Quotes Now!","og_url":"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/","og_site_name":"Xpresa Labels","article_publisher":"https:\/\/facebook.com\/xpresalabels\/","article_modified_time":"2021-01-06T12:48:51+00:00","twitter_card":"summary_large_image","twitter_site":"@xpresalabels","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/","url":"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/","name":"Design Printed Labels and Tags- Order from Xpresa Labels","isPartOf":{"@id":"https:\/\/xpresalabels.com\/site\/#website"},"datePublished":"2018-03-28T09:26:38+00:00","dateModified":"2021-01-06T12:48:51+00:00","description":"Order high quality printed labels from Xpresa Labels. Design and customize your printed label yourself with our FREE template. Get Live Quotes Now!","breadcrumb":{"@id":"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/xpresalabels.com\/site\/printed-labels-design-and-order\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/xpresalabels.com\/site\/"},{"@type":"ListItem","position":2,"name":"Printed Labels Design And Order"}]},{"@type":"WebSite","@id":"https:\/\/xpresalabels.com\/site\/#website","url":"https:\/\/xpresalabels.com\/site\/","name":"Xpresa Labels","description":"Custom Woven Clothing Labels and Tags","publisher":{"@id":"https:\/\/xpresalabels.com\/site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/xpresalabels.com\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/xpresalabels.com\/site\/#organization","name":"Xpresa Labels","url":"https:\/\/xpresalabels.com\/site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/","url":"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg","contentUrl":"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg","width":110,"height":80,"caption":"Xpresa Labels"},"image":{"@id":"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/xpresalabels\/","https:\/\/x.com\/xpresalabels","https:\/\/linkedin.com\/company\/xpresa-labels--custom-woven-printed-labels"]}]}},"_links":{"self":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/95","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/comments?post=95"}],"version-history":[{"count":0,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/95\/revisions"}],"wp:attachment":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/media?parent=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}