{"comment":"<div class='pcc-comment<%= (!!first) ? \" pcc-comment-first\" : \"\" %><%= (!!last) ? \" pcc-comment-last\" : \"\" %><%= (editMode !== undefined) ? \" pcc-comment-edit-container\" : \"\" %>'>\n <% if (editMode !== undefined) { %>\n <textarea class='pcc-comment-edit'><%- prevText %></textarea>\n <div class='pcc-pull-right'>\n <button data-pcc-comment='cancel' title='<%= language.cancelButton %>'><%= language.cancelButton %></button>\n <button data-pcc-comment='done' title='<%= language.doneButton %>'><%= language.doneButton %></button>\n </div>\n <div class='pcc-clear'></div>\n <%} else { %>\n <% if (isMine === true) { %>\n <div data-pcc-comment-menu>\n <div class='pcc-icon pcc-icon-list pcc-comment-menu-trigger'></div>\n <button class='pcc-icon pcc-icon-edit' data-pcc-comment-edit title='<%= language.editButton %>'></button>\n <button class='pcc-icon pcc-icon-delete' data-pcc-comment-delete title='<%= language.deleteButton %>'></button> \n <div class=\"pcc-clear\"></div>\n </div>\n <% } %>\n <div class='pcc-comment-text'><%- comment.getText() %></div>\n <div class='pcc-comment-footer pcc-clearfix'>\n <div class='pcc-comment-date pcc-pull-left'><%- date %></div>\n <div class='pcc-comment-owner pcc-pull-right'><%- owner %></div>\n </div>\n <% } %>\n</div>\n","contextMenu":"<div class=\"pcc-pull-right\">\n <button class=\"pcc-icon pcc-icon-list\" title=\"<%= annotationOptions %>\" data-pcc-toggle=\"context-menu-options\"></button>\n <button class=\"pcc-icon pcc-icon-updown\" title=\"<%= moveContext %>\" data-pcc-move-context-menu></button>\n</div>\n<div class=\"pcc-pull-left\" data-pcc-toggle-id=\"context-menu-options\"<% if (menuOptions.collapseLeftSide === true) { %> style=\"width:auto\"<% } %>>\n\n <div class=\"pcc-tabset\">\n\n <% if (menuOptions.showTabArea === true) { %>\n <div class=\"pcc-tabs\">\n\n <% if (menuOptions.showMainTab) { %>\n <div class=\"pcc-active\" data-pcc-toggle=\"context-menu-tab1\" title=\"<%= fillColorMenuItem %>\">\n <% if (mark.getType() === 'EllipseAnnotation') { %>\n <span class=\"pcc-icon pcc-icon-annotate-ellipse-filled\"></span>\n\n <% } else if (mark.getType().search('Stamp') !== -1) { %>\n <span class=\"pcc-icon pcc-icon-annotate-stamp\"></span>\n\n <% } else if (mark.getType() === 'LineAnnotation' && mark.getEndHeadType() === 'None') { %>\n <span class=\"pcc-icon pcc-icon-annotate-line\"></span>\n\n <% } else if (mark.getType() === 'LineAnnotation' && mark.getEndHeadType() === 'FilledTriangle') { %>\n <span class=\"pcc-icon pcc-icon-annotate-arrow\"></span>\n\n <% } else if (mark.getType() === 'TextSelectionRedaction') { %>\n <span class=\"pcc-icon pcc-icon-redact-textselection\"></span>\n\n <% } else { %>\n <span class=\"pcc-icon pcc-icon-annotate-rectangle-filled\"></span>\n <% } %>\n </div>\n <% } %>\n\n <% if (menuOptions.showBorderColorTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab2\" title=\"<%= borderColorMenuItem %>\">\n <% if (mark.getType() === 'EllipseAnnotation') { %>\n <span class=\"pcc-icon pcc-icon-annotate-ellipse\"></span>\n <% } else { %>\n <span class=\"pcc-icon pcc-icon-annotate-rectangle\"></span>\n <% } %>\n </div>\n <% } %>\n\n <% if (menuOptions.showFontTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab3\" title=\"<%= fontMenuItem %>\"\n <% if (menuOptions.activateFontTab === true) { %> class=\"pcc-active\"<% } %>>\n <span class=\"pcc-icon pcc-icon-annotate-text\"></span>\n </div>\n <% } %>\n\n <% if (menuOptions.showLayerTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab4\" title=\"<%= layerOrder %>\"\n <% if (menuOptions.activateLayerTab === true) { %> class=\"pcc-active\"<% } %>>\n <span class=\"pcc-icon pcc-icon-layer-front\"></span>\n </div>\n <% } %>\n\n <% if (menuOptions.showESignTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab5\" class=\"pcc-active\" title=\"<%= currentSignature %>\">\n <span class=\"pcc-icon pcc-icon-esign\"></span>\n </div>\n <% } %>\n \n <% if (menuOptions.showLinkTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab6\" class=\"pcc-active\">\n <span class=\"pcc-icon pcc-icon-link\"></span> \n </div>\n <% } %>\n \n <% if (menuOptions.showImageTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab7\" class=\"pcc-active\">\n <span class=\"pcc-icon pcc-icon-image-stamp\"></span> \n </div>\n <% } %>\n\n <% if (menuOptions.showLinkStylesTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab1\">\n <span class=\"pcc-icon pcc-icon-annotate-rectangle-filled\"></span> \n </div>\n <% } %>\n </div>\n <% } %>\n\n <% if (showAllEditControls) { %>\n <div class=\"pcc-pull-right\">\n <button data-pcc-delete-mark class=\"pcc-icon pcc-icon-delete\" title=\"<%= deleteMarks %>\"></button></br>\n <button data-pcc-add-comment-context-menu class=\"pcc-icon pcc-icon-comment\" title=\"<%= addComment %>\"></button>\n </div>\n <% } %>\n \n <% if(menuOptions.showTabArea) { %>\n <div data-pcc-toggle-id=\"context-menu-tab1\" \n class=\"pcc-tab-content<% if (menuOptions.activateMainTab === true) {%> pcc-open<% } %>\">\n\n <% if (mark.getColor || mark.getFillColor) { %>\n <div class=\"pcc-select pcc-select-color\" data-pcc-fill-color data-pcc-toggle=\"dropdown-fill-color\" title=\"<%= fillColorMenuItem %>\">\n <div class=\"pcc-label\">\n <% if (mark.getColor) { %>\n <div class=\"pcc-swatch\" style=\"background:<%= mark.getColor() %>\"></div>\n <% } else if (mark.getFillColor) { %>\n <div class=\"pcc-swatch <%= (mark.getFillColor() === 'transparent') ? 'pcc-transparent-effect' : '' %>\" <%= (mark.getFillColor() === 'transparent') ? '' : 'style=\"background:' + mark.getFillColor() +'\"'%>></div>\n <% } %>\n </div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-fill-color\" class=\"pcc-dropdown\">\n <div style=\"background:#ff0000\"></div>\n <div style=\"background:#ffff00\"></div>\n <div style=\"background:#f7941d\"></div>\n <div style=\"background:#00ff00\"></div>\n <div style=\"background:#00ffff\"></div>\n <div style=\"background:#ff00ff\"></div>\n <div style=\"background:#6666ff\"></div>\n <div style=\"background:#cccccc\"></div>\n <div style=\"background:#ffffff\"></div>\n <div style=\"background:#cc0000\"></div>\n <div style=\"background:#999900\"></div>\n <div style=\"background:#a3620a\"></div>\n <div style=\"background:#00a651\"></div>\n <div style=\"background:#0000ff\"></div>\n <div style=\"background:#92278f\"></div>\n <div style=\"background:#3333cc\"></div>\n <div style=\"background:#888888\"></div>\n <div style=\"background:#000000\"></div>\n <% if (menuOptions.showTransparentFillColor) { %>\n <div data-pcc-color-key=\"transparent\" class=\"pcc-transparent-effect\"></div>\n <% } %>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getOpacity) { %>\n <div class=\"pcc-select pcc-select-opacity\" data-pcc-fill-opacity data-pcc-toggle=\"dropdown-fill-opacity\" title=\"<%= fillOpacityMenuItem %>\">\n <div class=\"pcc-icon pcc-icon-opacity\"></div>\n <div class=\"pcc-label\"><%= Math.round(parseInt(mark.getOpacity() / 2.55, 10) / 10) * 10 %>%</div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-fill-opacity\" class=\"pcc-dropdown\">\n <div><span class=\"pcc-option pcc-option0\"></span> <%= opacityOptions.item0 %></div>\n <div><span class=\"pcc-option pcc-option10\"></span> <%= opacityOptions.item1 %></div>\n <div><span class=\"pcc-option pcc-option20\"></span> <%= opacityOptions.item2 %></div>\n <div><span class=\"pcc-option pcc-option30\"></span> <%= opacityOptions.item3 %></div>\n <div><span class=\"pcc-option pcc-option40\"></span> <%= opacityOptions.item4 %></div>\n <div><span class=\"pcc-option pcc-option50\"></span> <%= opacityOptions.item5 %></div>\n <div><span class=\"pcc-option pcc-option60\"></span> <%= opacityOptions.item6 %></div>\n <div><span class=\"pcc-option pcc-option70\"></span> <%= opacityOptions.item7 %></div>\n <div><span class=\"pcc-option pcc-option80\"></span> <%= opacityOptions.item8 %></div>\n <div><span class=\"pcc-option pcc-option90\"></span> <%= opacityOptions.item9 %></div>\n <div><span class=\"pcc-option pcc-option100\"></span> <%= opacityOptions.item10 %></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getThickness) { %>\n <div class=\"pcc-select pcc-select-border\" data-pcc-border-width data-pcc-toggle=\"dropdown-border\" title=\"<%= borderWidth %>\">\n <div class=\"pcc-icon pcc-icon-border-width\"></div>\n <div class=\"pcc-label\"><%= mark.getThickness() %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-border\" class=\"pcc-dropdown\">\n <div><span class=\"pcc-option pcc-option1\"></span> <%= borderWidthOptions.item1 %></div>\n <div><span class=\"pcc-option pcc-option2\"></span> <%= borderWidthOptions.item2 %></div>\n <div><span class=\"pcc-option pcc-option3\"></span> <%= borderWidthOptions.item3 %></div>\n <div><span class=\"pcc-option pcc-option4\"></span> <%= borderWidthOptions.item4 %></div>\n <div><span class=\"pcc-option pcc-option5\"></span> <%= borderWidthOptions.item5 %></div>\n <div><span class=\"pcc-option pcc-option6\"></span> <%= borderWidthOptions.item6 %></div>\n <div><span class=\"pcc-option pcc-option7\"></span> <%= borderWidthOptions.item7 %></div>\n <div><span class=\"pcc-option pcc-option8\"></span> <%= borderWidthOptions.item8 %></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getLabel) { %>\n <div class=\"pcc-select pcc-select-stamp-label\" data-pcc-stamp-label data-pcc-toggle=\"dropdown-stamp-label\" title=\"<%= selectLabel %>\">\n <div class=\"pcc-label\"><%= mark.getLabel() %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-stamp-label\" class=\"pcc-dropdown\">\n <div><%= stampLabelApproved %></div>\n <div><%= stampLabelReviewed %></div>\n <div><%= stampLabelRejected %></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getReason && reasons.enableRedactionReasonSelection) { %>\n <div class=\"pcc-select pcc-select-redaction-reason\" data-pcc-redaction-reason data-pcc-toggle=\"dropdown-stamp-label\" title=\"<%= selectLabel %>\">\n <div class=\"pcc-label\"><%= menuOptions.redactionReasonLabel %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-stamp-label\" class=\"pcc-dropdown\">\n <% _.each(reasons.reasons, function(reason, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= reason.reason %></div>\n <% }); %>\n </div>\n </div>\n <% if (menuOptions.enableCustomRedactionReason) { %>\n <input type=\"text\" data-pcc-redaction-reason-input value=\"<%= mark.getReason()%>\">\n <% } %>\n <% } %>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab2\" class=\"pcc-tab-content\">\n <div class=\"pcc-select pcc-select-color\" data-pcc-border-color data-pcc-toggle=\"dropdown-border-color\" title=\"<%= borderColorMenuItem %>\">\n <div class=\"pcc-label\">\n <div class=\"pcc-swatch <%= (mark.getBorderColor && mark.getBorderColor() === 'transparent') ? 'pcc-transparent-effect' : '' %>\" <%= (mark.getBorderColor && mark.getBorderColor() !== 'transparent') ? 'style=\"background:' + mark.getBorderColor() +'\"' : '' %>></div>\n </div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-border-color\" class=\"pcc-dropdown\">\n <div style=\"background:#ff0000\"></div>\n <div style=\"background:#ffff00\"></div>\n <div style=\"background:#f7941d\"></div>\n <div style=\"background:#00ff00\"></div>\n <div style=\"background:#00ffff\"></div>\n <div style=\"background:#ff00ff\"></div>\n <div style=\"background:#6666ff\"></div>\n <div style=\"background:#cccccc\"></div>\n <div style=\"background:#ffffff\"></div>\n <div style=\"background:#cc0000\"></div>\n <div style=\"background:#999900\"></div>\n <div style=\"background:#a3620a\"></div>\n <div style=\"background:#00a651\"></div>\n <div style=\"background:#0000ff\"></div>\n <div style=\"background:#92278f\"></div>\n <div style=\"background:#3333cc\"></div>\n <div style=\"background:#888888\"></div>\n <div style=\"background:#000000\"></div>\n <% if (menuOptions.showTransparentBorderColor) { %>\n <div data-pcc-color-key=\"transparent\" class=\"pcc-transparent-effect\"></div>\n <% } %>\n </div>\n </div>\n\n <div class=\"pcc-select pcc-select-border\" data-pcc-border-width data-pcc-toggle=\"dropdown-border\" title=\"<%= borderWidth %>\">\n <div class=\"pcc-icon pcc-icon-border-width\"></div>\n <div class=\"pcc-label\"><%= mark.getBorderThickness ? mark.getBorderThickness() : '' %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-border\" class=\"pcc-dropdown\">\n <div><span class=\"pcc-option pcc-option1\"></span> <%= borderWidthOptions.item1 %></div>\n <div><span class=\"pcc-option pcc-option2\"></span> <%= borderWidthOptions.item2 %></div>\n <div><span class=\"pcc-option pcc-option3\"></span> <%= borderWidthOptions.item3 %></div>\n <div><span class=\"pcc-option pcc-option4\"></span> <%= borderWidthOptions.item4 %></div>\n <div><span class=\"pcc-option pcc-option5\"></span> <%= borderWidthOptions.item5 %></div>\n <div><span class=\"pcc-option pcc-option6\"></span> <%= borderWidthOptions.item6 %></div>\n <div><span class=\"pcc-option pcc-option7\"></span> <%= borderWidthOptions.item7 %></div>\n <div><span class=\"pcc-option pcc-option8\"></span> <%= borderWidthOptions.item8 %></div>\n </div>\n </div>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab3\"\n class=\"pcc-tab-content<% if (menuOptions.activateFontTab) { %> pcc-open<% } %>\">\n\n <% if (mark.getFontStyle && mark.getType() !== 'TextRedaction') { %>\n <div class=\"pcc-row\">\n <button class=\"pcc-icon pcc-icon-text-bold<%= _.indexOf(mark.getFontStyle(), 'Bold') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Bold\" title=\"<%= fontBoldText %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-text-italic<%= _.indexOf(mark.getFontStyle(), 'Italic') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Italic\" title=\"<%= fontItalic %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-text-underline<%= _.indexOf(mark.getFontStyle(), 'Underline') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Underline\" title=\"<%= fontUnderline %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-text-strikeout<%= _.indexOf(mark.getFontStyle(), 'Strikeout') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Strikeout\" title=\"<%= fontStrikeout %>\"></button>\n\n <% if (mark.getHorizontalAlignment) { %>\n <button class=\"pcc-icon pcc-icon-text-<%= mark.getHorizontalAlignment().toLowerCase() %>\" \n data-pcc-font-align title=\"<%= paragraphAlignTitle %>\"></button>\n <% } %>\n </div>\n <% } %>\n <div class=\"pcc-row\">\n\n <% if (mark.getFontColor) { %>\n <div class=\"pcc-select pcc-select-color\" data-pcc-font-color data-pcc-toggle=\"dropdown-font-color\" title=\"<%= fontColorMenuItem %>\">\n <div class=\"pcc-label\">\n <div class=\"pcc-swatch\" style=\"background:<%= mark.getFontColor ? mark.getFontColor() : '' %>\"></div>\n </div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-font-color\" class=\"pcc-dropdown\">\n <div style=\"background:#ff0000\"></div>\n <div style=\"background:#ffff00\"></div>\n <div style=\"background:#f7941d\"></div>\n <div style=\"background:#00ff00\"></div>\n <div style=\"background:#00ffff\"></div>\n <div style=\"background:#ff00ff\"></div>\n <div style=\"background:#6666ff\"></div>\n <div style=\"background:#cccccc\"></div>\n <div style=\"background:#ffffff\"></div>\n <div style=\"background:#cc0000\"></div>\n <div style=\"background:#999900\"></div>\n <div style=\"background:#a3620a\"></div>\n <div style=\"background:#00a651\"></div>\n <div style=\"background:#0000ff\"></div>\n <div style=\"background:#92278f\"></div>\n <div style=\"background:#3333cc\"></div>\n <div style=\"background:#888888\"></div>\n <div style=\"background:#000000\"></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getType() !== 'RectangleRedaction') { %>\n <div class=\"pcc-select pcc-select-font\" data-pcc-font-name data-pcc-toggle=\"dropdown-font\" title=\"<%= selectFont %>\">\n <div class=\"pcc-label\"><%= mark.getFontName ? mark.getFontName() : '' %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-font\" class=\"pcc-dropdown\">\n <div><%= fontArial %></div>\n <div><%= fontComicSans %></div>\n <div><%= fontCourier %></div>\n <div><%= fontCourierNew %></div>\n <div><%= fontGeneva %></div>\n <div><%= fontGeorgia %></div>\n <div><%= fontHelvetica %></div>\n <div><%= fontTimes %></div>\n <div><%= fontTimesNewRoman %></div>\n <div><%= fontVerdana %></div>\n </div>\n </div>\n\n <div class=\"pcc-select pcc-select-font-size\" data-pcc-font-size data-pcc-toggle=\"dropdown-font-size\" title=\"<%= fontSize %>\">\n <div class=\"pcc-label\"><%= mark.getFontSize ? mark.getFontSize() : '' %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-font-size\" class=\"pcc-dropdown\">\n <div>8</div>\n <div>9</div>\n <div>10</div>\n <div>11</div>\n <div>12</div>\n <div>14</div>\n <div>16</div>\n <div>20</div>\n <div>22</div>\n <div>24</div>\n <div>26</div>\n <div>28</div>\n <div>36</div>\n <div>48</div>\n <div>72</div>\n </div>\n </div>\n <% } %>\n </div>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab4\"\n class=\"pcc-tab-content<% if (menuOptions.activateLayerTab === true) { %> pcc-open<% } %>\">\n\n <button data-pcc-move-mark=\"ToFront\" class=\"pcc-icon pcc-icon-layer-front\" title=\"<%= moveToFrontMenuItem %>\"></button>\n <button data-pcc-move-mark=\"Forward\" class=\"pcc-icon pcc-icon-layer-forward\" title=\"<%= moveForwardMenuItem %>\"></button>\n <button data-pcc-move-mark=\"Backward\" class=\"pcc-icon pcc-icon-layer-backward\" title=\"<%= moveBackwardMenuItem %>\"></button>\n <button data-pcc-move-mark=\"ToBack\" class=\"pcc-icon pcc-icon-layer-back\" title=\"<%= moveToBackMenuItem %>\"></button>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab5\" class=\"pcc-tab-content<% if (menuOptions.activateESignTab) { %> pcc-open<% } %>\">\n <div data-pcc-esign-preview></div> \n </div>\n \n <div data-pcc-toggle-id=\"context-menu-tab6\" class=\"pcc-tab-content<% if (menuOptions.activateLinkTab) { %> pcc-open<% } %>\">\n <div class='pcc-hyperlink-header'>\n <a href=\"<%= menuOptions.linkText %>\" target=\"_blank\" data-pcc-link-navigate>\n <span class=\"pcc-icon pcc-icon-external-link\" title=\"<%= hyperlinkNavigate %>\"></span>\n </a>\n <label class=\"pcc-hyperlink-label\"><%= hyperlink %></label> \n </div>\n <input type=\"text\" data-pcc-link-input>\n </div>\n \n <div data-pcc-toggle-id=\"context-menu-tab7\" class=\"pcc-tab-content<% if (menuOptions.activateImageTab) { %> pcc-open<% } %>\">\n <img src=\"<%= menuOptions.currentImage %>\" alt=\"Image Stamp Preview\" class=\"pcc-image-stamp-preview\" data-pcc-image-stamp-preview>\n </div>\n <% } %>\n </div>\n\n <% if (mark.getType().match(/annotation/i)) { %>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"includeInBurnedDocument\" class=\"pcc-checkbox<% if (mark.getData('Accusoft-burnAnnotation')) { %> pcc-checked<% } %>\">\n <span></span><label><%= includeInBurnedDocument %></label>\n </div>\n </div>\n <% } %>\n</div>\n","copyOverlay":"<div class=\"pcc-overlay-inner pcc-overlay-center pcc-copy-overlay\">\n <button class=\"pcc-overlay-closer\" data-pcc-page-redaction=\"cancel\">×</button>\n <div class=\"pcc-copy-container\">\n <textarea class=\"pcc-copy-textarea\"></textarea>\n <div class=\"pcc-copy-label\"><%=options.language.copyInstruction%></div>\n </div>\n \n</div>","downloadOverlay":" <div class=\"pcc-overlay-inner\" data-download-overlay>\n <button class=\"pcc-overlay-closer\">×</button>\n <div class=\"pcc-download-menu\">\n <% if (options && options.mode === 'pending') { %>\n <div class=\"pcc-center\">\n <span><%= options.language.burnInPending %></span>\n <span class=\"pcc-load\"></span>\n </div>\n <div class=\"pcc-center pcc-margin-top\">\n <button class=\"pcc-overlay-cancel pcc-secondary\"><%= options.language.cancelButton %></button>\n </div>\n <% } else if (options && options.mode === 'complete') { %>\n <div class=\"pcc-center\"><%= options.language.burnInComplete %></div>\n <div class=\"pcc-center pcc-margin-top\">\n <button class=\"pcc-overlay-cancel pcc-secondary\"><%= options.language.cancelButton %></button>\n <button class=\"pcc-overlay-download\"><%= options.language.saveButton %></button>\n </div>\n <% } else if (options && options.mode === 'error') { %>\n <div class=\"pcc-center\"><%= options.language.burnInError %></div>\n <div class=\"pcc-center pcc-margin-top\">\n <button class=\"pcc-overlay-cancel pcc-secondary\"><%= options.language.cancelButton %></button>\n <button class=\"pcc-overlay-retry\"><%= options.language.retryButton %></button>\n </div>\n <% } %>\n </div>\n</div>","esignOverlay":"<div class=\"pcc-overlay-inner pcc-overlay-center\">\n<!-- <button class=\"pcc-overlay-closer\" data-pcc-esign=\"cancel\">×</button>-->\n\n <div class=\"pcc-viewset <% if(activeTab === 'manage') { %>pcc-tall<% } %>\">\n <div class=\"pcc-view-content <% if(activeTab !== 'freehand') { %>pcc-hide<% } %>\">\n <div data-pcc-esign=\"draw\" class=\"pcc-esign-draw-pad\"></div>\n <div class=\"pcc-esign-draw-line\"></div>\n </div>\n\n \n <div class=\"pcc-view-content <% if(activeTab !== 'text') { %>pcc-hide<% } %>\">\n <div class=\"pcc-row pcc-center\">\n <div>Type your signature:</div>\n <input type=\"text\" data-pcc-esign=\"textInput\" />\n </div>\n <div data-pcc-signature-previews></div>\n </div>\n \n <div class=\"pcc-view-content <% if(activeTab !== 'manage') { %>pcc-hide<% } %> pcc-tall\">\n <div data-pcc-esign=\"manageView\" class=\"pcc-esign-manage\">\n <div class='pcc-text-center pcc-margin-top'><%= esignNoSignaturesAvailable %></div>\n </div>\n </div>\n </div>\n \n <div class=\"pcc-layer-up-relative\">\n \n <% if(activeTab === 'manage') { %>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"drawNew\" title=\"<%= esignNewDraw %>\"><%= esignNewDraw %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"typeNew\" title=\"<%= esignNewType %>\"><%= esignNewType %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"cancel\" title=\"<%= doneButton %>\"><%= doneButton %></button>\n </div>\n </div>\n <% } else { %> \n <div class=\"pcc-row\">\n <% if (categories && categories.length) { %>\n <div class=\"pcc-pull-right pcc-width-50\">\n <div class=\"pcc-select pcc-select-esign-category pcc-align-right pcc-width-100\" data-pcc-esign-category data-pcc-toggle=\"dropdown-esign-category\" title=\"<%= fillOpacityMenuItem %>\">\n <span class=\"pcc-hide pcc-show-lg-inline\"><%= category %></%></span>\n <div class=\"pcc-label\"><%= categories[0] %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-esign-category\" class=\"pcc-dropdown pcc-dropup pcc-align-right\">\n <% _.forEach(categories, function(category) { %>\n <div><%= category %></div>\n <% }); %>\n </div>\n </div>\n </div>\n <% } %>\n <div data-pcc-checkbox=\"esignSave\" data-pcc-esign-save=\"true\" class=\"pcc-checked pcc-checkbox pcc-width-50\">\n <span></span><label><%= esignSaveForLater %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"cancel\" title=\"<%= cancelButton %>\"><%= cancelButton %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"clear\" title=\"<%= clearButton %>\"><%= clearButton %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"save\" title=\"<%= saveButton %>\"><%= saveButton %></button>\n </div>\n </div>\n <% } %>\n </div>\n\n</div>\n","hyperlinkMenu":"<div class='pcc-hyperlink pcc-clearfix pcc-hyperlink-<%= mode %>'>\n <% if (mode === \"edit\") { %>\n <span class=\"pcc-hyperlink-label\"><%= language.hyperlink %></span>\n <div class=\"pcc-hyperlink-right\">\n <button data-pcc-hyperlink=\"done\" class=\"pcc-hyperlink-icon pcc-hyperlink-icon-done\" title=\"<%= language.doneButton %>\"></button>\n <button data-pcc-hyperlink=\"delete\" class=\"pcc-hyperlink-icon pcc-hyperlink-icon-delete\" title=\"<%= language.deleteButton %>\"></button>\n </div>\n <div class=\"pcc-hyperlink-input\">\n <button data-pcc-hyperlink=\"clear\">×</button>\n <input type=\"text\">\n </div>\n <%} else if (mode === \"view\" && link) { %>\n <% if (hrefType === \"page\") { %>\n <a href=\"<%= link %>\" data-pcc-link-navigate data-href-type=\"<%= hrefType %>\"><%= language.documentHyperlinkGotoPage + link %>.</a>\n <%} else { %>\n <% if (hyperlinkType === \"textHyperlink\") { %>\n <button data-pcc-hyperlink=\"edit\" class=\"pcc-hyperlink-icon pcc-hyperlink-icon-edit\" title=\"<%= language.editButton %>\"></button>\n <% } %>\n <a href=\"<%= link %>\" data-pcc-link-navigate target=\"_blank\"><%= link %></a>\n <% } %>\n <% } %>\n</div>\n","imageStampOverlay":"<div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\" data-pcc-image-stamp=\"closer\">×</button>\n\n <h1><%= imageStampOverlayHeader %></h1>\n\n <div class=\"pcc-image-stamp-list\">\n <% if (waiting) {%>\n <div class=\".pcc-load\"><%= imageStampLoading %></div> \n <% } else if (imageStampList.imageStamps.length) { %>\n\n <ul class=\"grid columns-3\">\n <% _.each(imageStampList.imageStamps, function(imageStampObj, index) { %>\n <li class=\"pcc-image-stamp-list-item <%= ((index+1) % 2 === 0) ? 'even' : 'odd' %>\" data-image-stamp-id=\"<%= imageStampObj.id%>\">\n <img src=\"<%= imageStampObj.url %>\" alt=\"<%= imageStampObj.displayName %>\" title=\"<%= imageStampObj.displayName%>\">\n </li>\n <% }); %> \n <% } %>\n </ul>\n </div>\n\n <% if (!waiting && sortBy && sortBy.length) { %>\n <div class=\"pcc-select pcc-select-image-stamp-sort\" data-pcc-image-stamp-sort data-pcc-toggle=\"dropdown-image-stamp-sort\" title=\"\">\n <span><%= imageStampSortBy %></span>\n <div class=\"pcc-label\"><%= (typeof sortName !== 'undefined') ? sortName : imageStampDropSelect%><div class=\"pcc-arrow-down\"></div></div>\n\n <div data-pcc-toggle-id=\"dropdown-image-stamp-sort\" class=\"pcc-dropdown pcc-dropup pcc-align-right\">\n <% _.forEach(sortBy, function(sortByOption) { %>\n <div data-image-stamp-sort-item='<%= sortByOption %>'><%= sortByOption %></div>\n <% }); %>\n </div>\n </div>\n <% } %> \n</div>\n","overwriteOverlay":"<div class=\"pcc-overlay pcc-annotation-overwrite-dlg\">\n <div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\">×</button>\n\n <div class=\"pcc-overlay-mask\"><%= mask %></div>\n\n <div class=\"pcc-overlay-prompt\">\n <%= prompt %>\n </div>\n <ul>\n <li data-action=\"save\"><%= save %></li>\n <li data-action=\"saveAs\"><%= saveAs %></li>\n <li data-action=\"noSave\"><%= noSave %></li>\n </ul>\n </div>\n</div>","pageRedactionOverlay":"<div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\" data-pcc-page-redaction=\"cancel\">×</button>\n\n <% if (typeof(show) !== 'undefined' && show === 'form') { %>\n\n <div class=\"pcc-row\">\n <div class=\"pcc-col-12\">\n <div class=\"pcc-row\">\n <h3><%= pageRedactionOverlay.title %></h3>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"pageRedaction\" data-pcc-page-redaction=\"redactAllPages\">\n <span></span><label><%= pageRedactionOverlay.allPages %></label>\n </div>\n </div>\n <div class=\"pcc-row\" data-pcc-page-redaction-field=\"excludeRange\">\n <div class=\"pcc-col-4 pcc-text-center\">\n <label class=\"secondary\"><%= pageRedactionOverlay.exclude %></label>\n </div>\n <div class=\"pcc-col-8\">\n <input type=\"text\" data-pcc-page-redaction-range=\"exclude\" class=\"pcc-full\" placeholder=\"<%= rangePlaceholder %>\">\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"pageRedaction\" data-pcc-page-redaction=\"redactCurrentPage\" class=\"pcc-checked\">\n <span></span><label><%= pageRedactionOverlay.currentPage %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"pageRedaction\" data-pcc-page-redaction=\"redactRange\" class=\"pcc-col-4\">\n <span></span><label><%= pageRedactionOverlay.range %></label>\n </div>\n <div class=\"pcc-col-8\">\n <input type=\"text\" data-pcc-page-redaction-range=\"include\" class=\"pcc-full\" placeholder=\"<%= rangePlaceholder %>\">\n </div>\n </div>\n <div class=\"pcc-row\">\n <% if (reasons && reasons.enableRedactionReasonSelection) { %>\n <div class=\"pcc-col-4\">\n <label class=\"primary\"><%= pageRedactionOverlay.reason %></label>\n </div>\n <div class=\"pcc-col-8\">\n <div class=\"pcc-row\">\n <div class=\"pcc-select pcc-select-redaction-reason\" data-pcc-redaction-reason data-pcc-toggle=\"dropdown-stamp-label\" title=\"<%= selectLabel %>\">\n <div class=\"pcc-label\"><%= pageRedactionOverlay.selectReason %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-stamp-label\" class=\"pcc-dropdown\">\n <% _.each(reasons.reasons, function(reason, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= reason.reason %></div>\n <% }); %>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <input type=\"text\" data-pcc-redaction-reason-input>\n </div>\n </div>\n <% } %>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <button data-pcc-page-redaction=\"submit\" class=\"pcc-pull-right\"><%= pageRedactionOverlay.submit %></button>\n <button data-pcc-page-redaction=\"cancel\" class=\"pcc-pull-left\"><%= pageRedactionOverlay.cancel %></button>\n </div>\n\n <% } else if (typeof(show) !== 'undefined' && show === 'status') { %>\n\n <div class=\"pcc-row\">\n <div data-pcc-page-redaction=\"resultCount\"><%= pageRedactionOverlay.requestingAttributesOf %></div>\n </div>\n <div class=\"pcc-row pcc-percent\">\n <div class=\"pcc-label\">\n <div class=\"pcc-load\"></div>\n <div data-pcc-page-redaction=\"resultPercent\"></div>\n </div>\n <div data-pcc-page-redaction=\"loader\" class=\"pcc-bar\"></div>\n </div>\n <button data-pcc-page-redaction=\"cancel\" class=\"pcc-center\"><%= pageRedactionOverlay.cancel %></button>\n\n <% } %>\n\n <div class=\"pcc-clearfix\"></div>\n\n</div>\n","printOverlay":"<div class=\"pcc-overlay-inner\">\n\n <div class=\"pcc-row\">\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <h3 class=\"page-title\"><%= printTitle %></h3>\n </div>\n </div>\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <button class=\"pcc-overlay-closer\" data-pcc-print=\"cancel\">×</button>\n </div>\n </div>\n </div>\n <% if (typeof(show) !== 'undefined' && show === 'form') { %>\n <div class=\"pcc-row\">\n <!-- Pages-->\n <div class=\"pcc-col-6\">\n <div class=\"pcc-print-pages\">\n <div class=\"pcc-row\">\n <h4><%= printPages %></h4>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"printPage\" data-pcc-print-page=\"printAllPages\" class=\"pcc-checked\">\n <span></span><label><%= printAll %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"printPage\" data-pcc-print-page=\"printCurrentPage\">\n <span></span><label><%= printCurrent %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"printPage\" data-pcc-print-page=\"printRange\">\n <span></span><input type=\"text\" data-pcc-print=\"range\" placeholder=\"<%= rangePlaceholder %>\"\n title=\"<%= printRange %>\">\n </div>\n </div>\n </div>\n </div>\n <!-- Orientation-->\n <div class=\"pcc-col-6\">\n <div class=\"pcc-print-orientation pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= printOrientation %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"orientation\" class=\"pcc-print-select\">\n <option value=\"portrait\"><%= printPortrait %></option>\n <option value=\"landscape\"><%= printLandscape %></option>\n </select>\n </div>\n </div>\n <!--Paper Sizes-->\n <div class=\"pcc-print-paper-sizes pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= paperSize %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"paperSize\" class=\"pcc-print-select\">\n <!-- US and International-->\n <option value=\"letter\"><%= paperSizes.letter %></option>\n <option value=\"legal\"><%= paperSizes.legal %></option>\n <option value=\"tabloid\"><%= paperSizes.tabloid %></option>\n <option value=\"foolscap\"><%= paperSizes.foolscap %></option>\n <!-- A formats-->\n <option value=\"a3\"><%= paperSizes.a3 %></option>\n <option value=\"a4\"><%= paperSizes.a4 %></option>\n <option value=\"a5\"><%= paperSizes.a5 %></option>\n <!-- Architectural-->\n <option value=\"a6\"><%= paperSizes.a6 %></option>\n <option value=\"a\"><%= paperSizes.a %></option>\n <option value=\"b\"><%= paperSizes.b %></option>\n <option value=\"c\"><%= paperSizes.c %></option>\n <option value=\"d\"><%= paperSizes.d %></option>\n <option value=\"e\"><%= paperSizes.e %></option>\n <option value=\"e1\"><%= paperSizes.e1 %></option>\n\n </select>\n </div>\n </div>\n <% if (!canPrintMarks) { %>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printMargins\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printAutoFitMargins %></label>\n </div>\n </div>\n <% } %>\n\n </div>\n </div>\n\n <% if (canPrintMarks) { %>\n <div class=\"pcc-print-more-options pcc-row pcc-hide\">\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <span><%= printShow %></span>\n </div>\n <!--Annotations-->\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printAnnotations\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printAnnotations %></label>\n </div>\n </div>\n\n <!--Redactions-->\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printRedactions\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printRedactions %></label>\n </div>\n </div>\n\n <!--printRedactionViewMode-->\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printRedactionViewMode\" class=\"pcc-checkbox\">\n <span></span><label><%= printRedactionViewMode %></label>\n </div>\n </div>\n\n </div>\n\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printMargins\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printAutoFitMargins %></label>\n </div>\n </div>\n <div class=\"pcc-print-comments pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= printComments %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"printComments\" class=\"pcc-print-select\">\n <option value=\"none\"><%= printCommentsNone %></option>\n <option value=\"followingPage\"><%= printCommentsAfterEachPage %></option>\n <option value=\"documentEnd\"><%= printCommentsAtEnd %></option>\n </select>\n </div>\n </div>\n <div class=\"pcc-print-marks pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= printReasons %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"printReasons\" class=\"pcc-print-select\">\n\n <option value=\"none\"><%= printReasonsNone %></option>\n <option value=\"followingPage\"><%= printReasonsAfterEachPage %></option>\n <option value=\"documentEnd\"><%= printReasonsAtEnd %></option>\n </select>\n </div>\n </div>\n </div>\n </div>\n <% } %> <!--if (canPrintMarks)-->\n\n\n <div class=\"pcc-row\">\n <% if (canPrintMarks) { %>\n <div class=\"pcc-col-6\">\n <div class=\"pcc-toggle-options\" data-pcc-print=\"optionsToggle\">\n <label><%= printMoreOptions %></label>\n <span class=\"pcc-arrow-down\"></span>\n </div>\n </div>\n <div class=\"pcc-col-6\">\n <% } else { %>\n <div class=\"pcc-col-12\">\n <% } %> <!--if (canPrintMarks)-->\n <div class=\"pcc-row\">\n <button data-pcc-print=\"submit\" class=\"pcc-pull-right\"><%= printButton %></button>\n </div>\n </div>\n </div>\n\n <% } else { %>\n\n <div class=\"pcc-row\">\n <div data-pcc-print=\"resultCount\"><%= printPreparingPage %></div>\n </div>\n <div class=\"pcc-row pcc-percent\">\n <div class=\"pcc-label\">\n <div class=\"pcc-load\"></div>\n <div data-pcc-print=\"resultPercent\"></div>\n </div>\n <div data-pcc-print=\"loader\" class=\"pcc-bar\"></div>\n </div>\n <button data-pcc-print=\"cancel\" class=\"pcc-center\"><%= cancelButton %></button>\n\n <% } %>\n</div>","print":"<!DOCTYPE html>\n<html moznomarginboxes mozdisallowselectionprint>\n<head>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n <!-- <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"> -->\n\n <link rel=\"stylesheet\" href=\"//assets.edocr.com/1462/viewer-assets/fonts.css\">\n <link rel=\"stylesheet\" href=\"//assets.edocr.com/1462/viewer-assets/viewercontrol.css\">\n <script src=\"//assets.edocr.com/1462/viewer-assets/viewercontrol.js\"></script>\n\n <style type=\"text/css\">\n html, body { margin: 0px; padding: 0px; }\n\n /*Printing Paper Sizes*/\n /*default */\n .portrait .page { width: 8.5in; height: 11in; margin: 0 auto !important; }\n .portrait .pageIE { width: 7.3in; height: 9.5in; margin: 0 auto !important; }\n .portrait .pageSafari { width: 6.9in; height: 8.9in; margin: 0 auto !important; }\n .portrait .nomargins { width: 8.5in !important; height: 11in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .nomargins.pageSafari { width: 7.2in !important; height: 9.32in !important; }\n\n .landscape .page { height: 8.5in; width: 11in; margin: 0 auto !important; }\n .landscape .pageIE { height: 7in; width: 9.05in; margin: 0 auto !important; }\n .landscape .pageSafari { height: 6.5in; width: 8.4in; margin: 0 auto !important; }\n .landscape .nomargins { height: 8.5in !important; width: 11in !important; }\n .landscape .nomargins.pageSafari { height: 7.2in !important; width: 9.32in !important; }\n /*default end*/\n\n /*letter */\n .portrait .letter.page { width: 8.5in; height: 11in; margin: 0 auto !important; }\n .portrait .letter.pageIE { width: 7.3in; height: 9.5in; margin: 0 auto !important; }\n .portrait .letter.pageSafari { width: 6.9in; height: 8.9in; margin: 0 auto !important; }\n .portrait .letter.nomargins { width: 8.5in !important; height: 11in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .letter.nomargins.pageSafari { width: 7.2in !important; height: 9.32in !important; }\n\n .landscape .letter.page { height: 8.5in; width: 11in; margin: 0 auto !important; }\n .landscape .letter.pageIE { height: 7in; width: 9.05in; margin: 0 auto !important; }\n .landscape .letter.pageSafari { height: 6.5in; width: 8.4in; margin: 0 auto !important; }\n .landscape .letter.nomargins { height: 8.5in !important; width: 11in !important; }\n .landscape .letter.nomargins.pageSafari { height: 7.2in !important; width: 9.32in !important; }\n /*letter end*/\n\n /*legal*/\n .portrait .legal.page { width: 8.5in; height: 14in; margin: 0 auto !important; }\n .portrait .legal.pageIE { width: 7.3in; height: 12.5in; margin: 0 auto !important; }\n .portrait .legal.pageSafari { width: 6.9in; height: 11.9in; margin: 0 auto !important; }\n .portrait .legal.nomargins { width: 8.5in !important; height: 14in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .legal.nomargins.pageSafari { width: 7.2in !important; height: 12.32in !important; }\n\n .landscape .legal.page { height: 8.5in; width: 14in; margin: 0 auto !important; }\n .landscape .legal.pageIE { height: 7in; width: 12.05in; margin: 0 auto !important; }\n .landscape .legal.pageSafari { height: 6.5in; width: 11.4in; margin: 0 auto !important; }\n .landscape .legal.nomargins { height: 8.5in !important; width: 14in !important; }\n .landscape .legal.nomargins.pageSafari { height: 7.2in !important; width: 12.32in !important; }\n /*legal end*/\n\n /*Foolscap*/\n .portrait .foolscap.page { width: 8in; height: 13in; margin: 0 auto !important; }\n .portrait .foolscap.pageIE { width: 6.8in; height: 11.5in; margin: 0 auto !important; }\n .portrait .foolscap.pageSafari { width: 6.4in; height: 10.9in; margin: 0 auto !important; }\n .portrait .foolscap.nomargins { width: 8in !important; height: 13in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .foolscap.nomargins.pageSafari { width: 6.7in !important; height: 11.32in !important; }\n\n .landscape .foolscap.page { height: 8in; width: 13in; margin: 0 auto !important; }\n .landscape .foolscap.pageIE { height: 6.5in; width: 11.05in; margin: 0 auto !important; }\n .landscape .foolscap.pageSafari { height: 6in; width: 10.4in; margin: 0 auto !important; }\n .landscape .foolscap.nomargins { height: 8in !important; width: 13in !important; }\n .landscape .foolscap.nomargins.pageSafari { height: 6.7in !important; width: 11.32in !important; }\n /*Foolscap end*/\n\n /*Tabloid*/\n .portrait .tabloid.page { width: 11in; height: 17in; margin: 0 auto !important; }\n .portrait .tabloid.pageIE { width: 9.8in; height: 15.5in; margin: 0 auto !important; }\n .portrait .tabloid.pageSafari { width: 9.4in; height: 14.9in; margin: 0 auto !important; }\n .portrait .tabloid.nomargins { width: 11in !important; height: 17in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .tabloid.nomargins.pageSafari { width: 9.7in !important; height: 15.32in !important; }\n\n .landscape .tabloid.page { height: 11in; width: 17in; margin: 0 auto !important; }\n .landscape .tabloid.pageIE { height: 9.5in; width: 15.05in; margin: 0 auto !important; }\n .landscape .tabloid.pageSafari { height: 8in; width: 13.4in; margin: 0 auto !important; }\n .landscape .tabloid.nomargins { height: 11in !important; width: 17in !important; }\n .landscape .tabloid.nomargins.pageSafari { height: 9.7in !important; width: 15.32in !important; }\n /*Tabloid end*/\n\n /*A3 */\n .portrait .a3.page { width: 11.7in; height: 16.5in; margin: 0 auto !important; }\n .portrait .a3.pageIE { width: 10.5in; height: 15in; margin: 0 auto !important; }\n .portrait .a3.pageSafari { width: 10.1in; height: 14.4in; margin: 0 auto !important; }\n .portrait .a3.nomargins { width: 11.7in !important; height: 16.5in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a3.nomargins.pageSafari { width: 10.4in !important; height: 14.82in !important; }\n\n .landscape .a3.page { height: 11.7in; width: 16.6in; margin: 0 auto !important; }\n .landscape .a3.pageIE { height: 10.2in; width: 14.55in; margin: 0 auto !important; }\n .landscape .a3.pageSafari { height: 9.7in; width: 13.9in; margin: 0 auto !important; }\n .landscape .a3.nomargins { height: 11.7in !important; width: 16.5in !important; }\n .landscape .a3.nomargins.pageSafari { height: 10.4in !important; width: 14.82in !important; }\n /*A3 end*/\n\n /*A4*/\n .portrait .a4.page { width: 8.27in; height: 11.7in; margin: 0 auto !important;}\n .portrait .a4.pageIE { width: 7.1in; height: 10in; margin: 0 auto !important; }\n .portrait .a4.pageSafari { width: 6.7in; height: 9.4in; margin: 0 auto !important; }\n .portrait .a4.nomargins { width: 8.27in !important; height: 11.7in !important;}\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a4.nomargins.pageSafari { width: 7.2in !important; height: 10in !important; }\n\n .landscape .a4.page { height: 8.27in; width: 11.7in; margin: 0 auto !important; }\n .landscape .a4.pageIE { height: 6.8in; width: 9.75in; margin: 0 auto !important; }\n .landscape .a4.pageSafari { height: 6.3in; width: 9.1in; margin: 0 auto !important; }\n .landscape .a4.nomargins { height: 8.27in !important; width: 11.7in !important; }\n .landscape .a4.nomargins.pageSafari { height: 6.85in !important; width: 10.02in !important; }\n /*A4 end*/\n\n /*A5 */\n .portrait .a5.page { width: 5.8in; height: 8.3in; margin: 0 auto !important; }\n .portrait .a5.pageIE { width: 4.6in; height: 6.8in; margin: 0 auto !important; }\n .portrait .a5.pageSafari { width: 4.2in; height: 6.2in; margin: 0 auto !important; }\n .portrait .a5.nomargins { width: 5.8in !important; height: 8.3in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a5.nomargins.pageSafari { width: 4.5in !important; height: 6.62in !important; }\n\n .landscape .a5.page { height: 5.8in; width: 8.3in; margin: 0 auto !important; }\n .landscape .a5.pageIE { height: 4.3in; width: 6.35in; margin: 0 auto !important; }\n .landscape .a5.pageSafari { height: 3.8in; width: 6.7in; margin: 0 auto !important; }\n .landscape .a5.nomargins { height: 5.8in !important; width: 8.3in !important; }\n .landscape .a5.nomargins.pageSafari { height: 4.5in !important; width: 6.62in !important; }\n /*A5 end*/\n\n /*A6 */\n .portrait .a6.page { width: 4.1in; height: 5.8in; margin: 0 auto !important; }\n .portrait .a6.pageIE { width: 2.9in; height: 4.3in; margin: 0 auto !important; }\n .portrait .a6.pageSafari { width: 2.5in; height: 3.7in; margin: 0 auto !important; }\n .portrait .a6.nomargins { width: 4.1in !important; height: 5.8in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a6.nomargins.pageSafari { width: 2.8in !important; height: 3.82in !important; }\n\n .landscape .a6.page { height: 4.1in; width: 5.8in; margin: 0 auto !important; }\n .landscape .a6.pageIE { height: 2.6in; width: 3.85in; margin: 0 auto !important; }\n .landscape .a6.pageSafari { height: 2.1in; width: 3.2in; margin: 0 auto !important; }\n .landscape .a6.nomargins { height: 4.1in !important; width: 5.8in !important; }\n .landscape .a6.nomargins.pageSafari { height: 2.8in !important; width: 4.12in !important; }\n /*A6 end*/\n\n /*Arch A */\n .portrait .a.page { width: 9in; height: 12in; margin: 0 auto !important; }\n .portrait .a.pageIE { width: 7.8in; height: 10.5in; margin: 0 auto !important; }\n .portrait .a.pageSafari { width: 7.4in; height: 9.9in; margin: 0 auto !important; }\n .portrait .a.nomargins { width: 9in !important; height: 12in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a.nomargins.pageSafari { width: 7.7in !important; height: 10.32in !important; }\n\n .landscape .a.page { height: 9in; width: 12in; margin: 0 auto !important; }\n .landscape .a.pageIE { height: 7.5in; width: 10.05in; margin: 0 auto !important; }\n .landscape .a.pageSafari { height: 7in; width: 9.4in; margin: 0 auto !important; }\n .landscape .a.nomargins { height: 9in !important; width: 12in !important; }\n .landscape .a.nomargins.pageSafari { height: 7.7in !important; width: 10.32in !important; }\n /*Arch A end*/\n\n /*Arch B */\n .portrait .b.page { width: 12in; height: 18in; margin: 0 auto !important; }\n .portrait .b.pageIE { width: 10.8in; height: 16.5in; margin: 0 auto !important; }\n .portrait .b.pageSafari { width: 10.4in; height: 15.9in; margin: 0 auto !important; }\n .portrait .b.nomargins { width: 12in !important; height: 18in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .b.nomargins.pageSafari { width: 10.7in !important; height: 16.32in !important; }\n\n .landscape .b.page { height: 12in; width: 18in; margin: 0 auto !important; }\n .landscape .b.pageIE { height: 10.5in; width: 16.05in; margin: 0 auto !important; }\n .landscape .b.pageSafari { height: 10in; width: 15.4in; margin: 0 auto !important; }\n .landscape .b.nomargins { height: 12in !important; width: 18in !important; }\n .landscape .b.nomargins.pageSafari { height: 10.7in !important; width: 16.32in !important; }\n /*Arch B end*/\n\n /*Arch C */\n .portrait .c.page { width: 18in; height: 24in; margin: 0 auto !important; }\n .portrait .c.pageIE { width: 16.8in; height: 22.5in; margin: 0 auto !important; }\n .portrait .c.pageSafari { width: 16.4in; height: 21.9in; margin: 0 auto !important; }\n .portrait .c.nomargins { width: 18in !important; height: 24in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .c.nomargins.pageSafari { width: 16.7in !important; height: 22.32in !important; }\n\n .landscape .c.page { height: 18in; width: 24in; margin: 0 auto !important; }\n .landscape .c.pageIE { height: 16.5in; width: 22.05in; margin: 0 auto !important; }\n .landscape .c.pageSafari { height: 16in; width: 21.4in; margin: 0 auto !important; }\n .landscape .c.nomargins { height: 18in !important; width: 24in !important; }\n .landscape .c.nomargins.pageSafari { height: 16.7in !important; width: 22.32in !important; }\n /*Arch C end*/\n\n /*Arch D */\n .portrait .d.page { width: 24in; height: 36in; margin: 0 auto !important; }\n .portrait .d.pageIE { width: 22.8in; height: 34.5in; margin: 0 auto !important; }\n .portrait .d.pageSafari { width: 22.4in; height: 33.9in; margin: 0 auto !important; }\n .portrait .d.nomargins { width: 24in !important; height: 36in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .d.nomargins.pageSafari { width: 22.7in !important; height: 34.32in !important; }\n\n .landscape .d.page { height: 24in; width: 36in; margin: 0 auto !important; }\n .landscape .d.pageIE { height: 22.5in; width: 34.05in; margin: 0 auto !important; }\n .landscape .d.pageSafari { height: 22in; width: 35.4in; margin: 0 auto !important; }\n .landscape .d.nomargins { height: 24in !important; width: 36in !important; }\n .landscape .d.nomargins.pageSafari { height: 22.7in !important; width: 34.32in !important; }\n /*Arch D end*/\n\n /*Arch E */\n .portrait .e.page { width: 36in; height: 48in; margin: 0 auto !important; }\n .portrait .e.pageIE { width: 34.8in; height: 46.6in; margin: 0 auto !important; }\n .portrait .e.pageSafari { width: 34.4in; height: 45.9in; margin: 0 auto !important; }\n .portrait .e.nomargins { width: 36in !important; height: 48in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .e.nomargins.pageSafari { width: 34.7in !important; height: 46.32in !important; }\n\n .landscape .e.page { height: 36in; width: 48in; margin: 0 auto !important; }\n .landscape .e.pageIE { height: 34.5in; width: 46.05in; margin: 0 auto !important; }\n .landscape .e.pageSafari { height: 34in; width: 45.4in; margin: 0 auto !important; }\n .landscape .e.nomargins { height: 35in !important; width: 48in !important; }\n .landscape .e.nomargins.pageSafari { height: 34.7in !important; width: 46.32in !important; }\n /*Arch E end*/\n\n /*Arch E1 */\n .portrait .e1.page { width: 30in; height: 42in; margin: 0 auto !important; }\n .portrait .e1.pageIE { width: 28.8in; height: 40.5in; margin: 0 auto !important; }\n .portrait .e1.pageSafari { width: 28.4in; height: 39.9in; margin: 0 auto !important; }\n .portrait .e1.nomargins { width: 30in !important; height: 42in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .e1.nomargins.pageSafari { width: 28.7in !important; height: 40.32in !important; }\n\n .landscape .e1.page { height: 30in; width: 42in; margin: 0 auto !important; }\n .landscape .e1.pageIE { height: 28.5in; width: 40.05in; margin: 0 auto !important; }\n .landscape .e1.pageSafari { height: 28in; width: 39.4in; margin: 0 auto !important; }\n .landscape .e1.nomargins { height: 30in !important; width: 42in !important; }\n .landscape .e1.nomargins.pageSafari { height: 28.7in !important; width: 40.32in !important; }\n /*Arch E1 end*/\n\n .igAnchor, .igViewerGraphics, .igViewerScroller{\n width: 100% !important; height: 100% !important;\n }\n\n @page {\n size: {{orientation}};\n margin: 0cm;\n white-space: pre;\n }\n\n .commentPage, .reasonPage {\n font-family: Arial, Helvetica, sans-serif;\n margin: 0 .25in 0 .25in !important;\n page-break-after: always;\n }\n\n .commentPage h1, .reasonPage h1 {\n font-size: 28px;\n margin: .25in 0 0 0 !important;\n padding: 0;\n }\n\n .commentPage ul, .reasonPage ul {\n font-size: 14px;\n font-weight: normal;\n margin: 0 0 0 .3in;\n padding: 0;\n }\n\n .redactionReasonPageHeader ul {\n padding: 5px;\n }\n\n .redactionReasonPageHeader li {\n list-style-type: none;\n }\n\n .pageConversations, .pageReasons {\n page-break-inside: avoid;\n margin: 0 !important;\n padding: .25in 0 0 .1in !important;\n }\n\n .pageConversations h2, .pageConversations h3, .pageReasons h2 {\n margin: 0 0 5px 0;\n padding: 0;\n }\n\n .commentPage hr, .reasonPage hr {\n margin: .0 0 .05in 0;\n }\n\n @media print {\n .page, .pageIE, .pageSafari { page-break-after: always; }\n /* required for Firefox to print all pages */\n * { position: static !important; float: none !important; }\n }\n </style>\n\n</head>\n<body class='' id='print'>\n <script type=\"text/javascript\">\n var options = {\n vsID: '{{viewingSessionId}}',\n pages: '{{pages}}',\n handler: '{{handler}}',\n orientation: '{{orientation}}',\n paperSize:'{{paperSize}}',\n isIE: {{isIE}},\n isSafari: {{isSafari}},\n includeAnnotations: '{{includeAnnotations}}',\n includeRedactions: '{{includeRedactions}}',\n includeComments: '{{includeComments}}',\n includeReasons: '{{includeReasons}}',\n margins: '{{margins}}',\n redactionViewMode: '{{redactionViewMode}}'\n };\n\n options.pages = options.pages.split(',');\n\n PCCViewer.PrintControl(document.body, options);\n </script>\n</body>\n</html>\n","redactionReason":"<div class='pcc-redaction-reason pcc-clearfix pcc-redaction-reason-edit'>\n <span class=\"pcc-redaction-reason-label\"><%= language.redactionReasonApply %></span>\n <div class=\"pcc-redaction-reason-right\">\n <button data-pcc-redaction-reason=\"done\" class=\"pcc-redaction-reason-icon pcc-redaction-reason-icon-done\" title=\"<%= language.doneButton %>\"></button>\n </div>\n <div class=\"pcc-redaction-reason-input\">\n <button data-pcc-redaction-reason=\"clear\">×</button>\n <input type=\"text\" value=\"<%= mark.getReason()%>\">\n </div>\n\n</div>","unsavedChangesOverlay":"<div class=\"pcc-overlay pcc-annotation-unsaved-dlg\">\n <div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\">×</button>\n\n <div class=\"pcc-overlay-mask\"><%= mask %></div>\n \n <div class=\"pcc-overlay-prompt\">\n <%= prompt %>\n </div>\n \n <ul>\n <li data-action=\"save\" ><%= save %></li>\n <li data-action=\"saveAs\" ><%= saveAs %></li>\n <li data-action=\"noSave\"><%= noSave %></li>\n </ul>\n </div>\n</div>","viewer":"<div data-pcc-nav-trigger class=\"pcc-tab-item pcc-trigger pcc-hide\"><span class=\"pcc-icon pcc-icon-view\"></span> <%= viewLabel %></div>\n\n<div class=\"pcc-tabset pcc-nav-tabset\" data-pcc-nav>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"view\" data-pcc-removable-id=\"viewTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-view\"></span> <%= viewLabel %></div>\n <div class=\"pcc-tab-pane pcc-tab-vertical pcc-left\">\n <div class=\"pcc-left\">\n <button data-pcc-mouse-tool=\"AccusoftSelectText\" class=\"pcc-icon pcc-icon-texttool pcc-disabled\" title=\"<%= selectText %>\" data-pcc-removable-id=\"copyPaste\"></button>\n <button data-pcc-mouse-tool=\"AccusoftPanAndEdit\" class=\"pcc-icon pcc-icon-pantool pcc-active\" title=\"<%= panTool %>\"></button>\n <button data-pcc-toggle=\"dialog-thumbnails\" class=\"pcc-icon pcc-icon-thumbnails\" title=\"<%= thumbnails %>\"></button>\n <button data-pcc-mouse-tool=\"AccusoftMagnifier\" class=\"pcc-icon pcc-icon-magnifiertool\" title=\"<%= magnifierTool %>\"></button>\n <button data-pcc-mouse-tool=\"AccusoftSelectToZoom\" class=\"pcc-icon pcc-icon-rectanglezoomtool\" title=\"<%= rectangleZoom %>\"></button>\n <button data-pcc-rotate-document class=\"pcc-icon pcc-icon-rotate-doc-cw\" title=\"<%= rotateDocument %>\"></button>\n <button data-pcc-rotate-page class=\"pcc-icon pcc-icon-rotate-page-cw\" title=\"<%= rotatePage %>\"></button>\n </div>\n </div>\n <div class=\"pcc-tab-preview\">\n <div class=\"pcc-center\">\n <button data-pcc-end-preview><%= previewEnd %></button>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"search\" data-pcc-removable-id=\"searchTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-search\"></span> <%= search %></div>\n <div class=\"pcc-tab-pane pcc-tab-advanced\">\n <div class=\"pcc-left\">\n <button class=\"pcc-icon pcc-icon-list pcc-search-menu-button\" title=\"<%= searchOptions %>\" data-pcc-toggle=\"dialog-search\"></button>\n <div class=\"pcc-search-group pcc-search-group-input\">\n <button title=\"<%= previousSearches %>\" data-pcc-toggle=\"dropdown-search-box\">\n <span class=\"pcc-arrow-down\"></span>\n </button>\n <input type=\"text\" data-pcc-search=\"input\" placeholder=\"<%= searchDocument %>\"\n autocorrect=\"off\" autocapitalize=\"off\">\n <button title=\"<%= clearSearch %>\" data-pcc-search=\"clear\" class=\"pcc-close\">×</button>\n <button title=\"<%= fixedSearchTerms %>\" data-pcc-toggle=\"dropdown-search-fixed-box\" class=\"pcc-search-fixed pcc-hide\">\n <span class=\"pcc-icon pcc-icon-pushpin pcc-search-fixed-icon\"></span>\n </button>\n </div>\n <div class=\"pcc-search-group pcc-search-group-buttons\">\n <button data-pcc-search=\"submit\" title=\"<%= search %>\">\n <span class=\"pcc-icon pcc-icon-search\"></span>\n </button>\n <button data-pcc-search=\"cancel\" class=\"pcc-hide\" title=\"<%= cancelButton %>\">\n <span class=\"pcc-icon pcc-icon-x\"></span>\n </button>\n <button data-pcc-toggle=\"advanced-options\" class=\"pcc-hide pcc-show-sm\" title=\"<%= advancedSearch %>\">\n <span class=\"pcc-icon pcc-icon-wrench\"></span>\n </button>\n </div>\n\n <div class=\"pcc-advanced-search-group\" data-pcc-toggle-id=\"advanced-options\">\n <button data-pcc-search=\"exactWord\" class=\"pcc-icon pcc-icon-exactword\" title=\"<%= matchExact %>\"></button>\n <button data-pcc-search=\"matchCase\" class=\"pcc-icon pcc-icon-matchcase\" title=\"<%= matchCase %>\"></button>\n <button data-pcc-search=\"matchWholeWord\" class=\"pcc-icon pcc-icon-wholeword\" title=\"<%= wholeWord %>\"></button>\n <button data-pcc-search=\"beginsWith\" class=\"pcc-icon pcc-icon-beginswith\" title=\"<%= beginsWith %>\"></button>\n <button data-pcc-search=\"endsWith\" class=\"pcc-icon pcc-icon-endswith\" title=\"<%= endsWith %>\"></button>\n <button data-pcc-search=\"wildcard\" class=\"pcc-icon pcc-icon-wildcard\" title=\"<%= useWildcards %>\"></button>\n </div>\n </div>\n\n <div class=\"pcc-dropdown pcc-dropdown-search-box\" data-pcc-toggle-id=\"dropdown-search-box\">\n <div class=\"pcc-toolbar\"><%= previousSearches %></div>\n <div data-pcc-previous-search><span class=\"pcc-placeholder\"><%= noPreviousSearches %></span></div>\n <hr>\n <div class=\"pcc-toolbar\" data-pcc-search=\"toggleAllPresets\"><span>✔</span> <%= toggleAll %></div>\n <div class=\"pcc-predefined-search\" data-pcc-predefined-search></div>\n </div>\n\n <div class=\"pcc-dropdown pcc-dropdown-search-box\" data-pcc-toggle-id=\"dropdown-search-fixed-box\">\n <div class=\"pcc-toolbar\"><%= fixedSearchTerms %></div>\n <div class=\"pcc-predefined-search\" data-pcc-predefined-fixed-search></div>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"annotate\" data-pcc-removable-id=\"annotateTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-annotate\"></span> <%= annotateLabel %></div>\n <div class=\"pcc-tab-pane pcc-tab-advanced\">\n <div class=\"pcc-pull-right\">\n <button data-pcc-toggle=\"dialog-save-annotations\" class=\"pcc-icon pcc-icon-save\" title=\"<%= saveAnnotations %>\"></button>\n <button data-pcc-lock-editable-layer data-pcc-toggle=\"dialog-load-annotations\" class=\"pcc-icon pcc-icon-load\" title=\"<%= loadAnnotations %>\"></button>\n <button data-pcc-comments-panel class=\"pcc-icon pcc-icon-comment\" title=\"<%= commentsPanel %>\"></button>\n <button data-pcc-toggle=\"dialog-download\" data-pcc-removable-id=\"download\" class=\"pcc-icon pcc-icon-download\" title=\"<%= download %>\"></button>\n </div>\n <div class=\"pcc-left\">\n\n <% if (annotationsMode === \"LayeredAnnotations\") { %>\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" class=\"pcc-icon pcc-icon-list\" title=\"<%= annotationLayerReview.annotationLayers %>\"></button>\n <span class=\"pcc-separator\"></span>\n <% } %>\n\n <button data-pcc-mouse-tool=\"AccusoftArrowAnnotation\" data-pcc-default-fill-color=\"#0000ff\"\n class=\"pcc-icon pcc-icon-annotate-arrow\" title=\"<%= arrowAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftLineAnnotation\" data-pcc-default-fill-color=\"#ff0000\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-annotate-line\" title=\"<%= lineAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftRectangleAnnotation\" data-pcc-default-fill-color=\"#ff0000\"\n class=\"pcc-icon pcc-icon-annotate-rectangle\" title=\"<%= rectangleAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftEllipseAnnotation\" data-pcc-default-fill-color=\"#ff0000\"\n class=\"pcc-icon pcc-icon-annotate-ellipse\" title=\"<%= ellipseAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftFreehandAnnotation\" data-pcc-default-fill-color=\"#ff0000\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-annotate-freehand\" title=\"<%= freehandAnnotation %>\"></button>\n\n <button data-pcc-toggle=\"more-annotation-tools\" class=\"pcc-icon pcc-icon-triangle-down pcc-mobile-overflow-trigger\" title=\"<%= moreTools %>\"></button>\n\n <div class=\"pcc-more-annotation-tools pcc-mobile-overflow\" data-pcc-toggle-id=\"more-annotation-tools\">\n <button data-pcc-mouse-tool=\"AccusoftPolylineAnnotation\" data-pcc-default-fill-color=\"#000000\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-annotate-polyline\" title=\"<%= polylineAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftTextAnnotation\" data-pcc-default-fill-color=\"#ffffff\"\n class=\"pcc-icon pcc-icon-annotate-text\" title=\"<%= textAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftHighlightAnnotation\" data-pcc-default-fill-color=\"#ffff00\"\n class=\"pcc-icon pcc-icon-highlight\" title=\"<%= highlightAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftStrikethroughAnnotation\" class=\"pcc-icon pcc-icon-text-strikeout\" title=\"<%= strikethroughAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftTextHyperlinkAnnotation\"\n class=\"pcc-icon pcc-icon-link\" title=\"<%= textHyperlinkAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftStampAnnotation\" data-pcc-default-fill-color=\"#ff0000\" data-pcc-default-label=\"<%= stampLabelApproved %>\"\n class=\"pcc-icon pcc-icon-annotate-stamp\" title=\"<%= stampAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftImageStampAnnotation\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-image-stamp\" title=\"<%= imageStampAnnotion %>\" disabled></button>\n\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"redact\" data-pcc-removable-id=\"redactTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-redact\"></span> <%= redactLabel %></div>\n <div class=\"pcc-tab-pane\">\n <div class=\"pcc-pull-right\">\n <button data-pcc-toggle=\"dialog-save-annotations\" class=\"pcc-icon pcc-icon-save\" title=\"<%= saveAnnotations %>\"></button>\n <button data-pcc-lock-editable-layer data-pcc-toggle=\"dialog-load-annotations\" class=\"pcc-icon pcc-icon-load\" title=\"<%= loadAnnotations %>\"></button>\n <button data-pcc-comments-panel class=\"pcc-icon pcc-icon-comment\" title=\"<%= commentsPanel %>\"></button>\n <button data-pcc-toggle=\"dialog-download\" data-pcc-removable-id=\"download\" class=\"pcc-icon pcc-icon-download\" title=\"<%= download %>\"></button>\n </div>\n <div class=\"pcc-left\">\n <% if (annotationsMode === \"LayeredAnnotations\") { %>\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" class=\"pcc-icon pcc-icon-list\" title=\"<%= annotationLayerReview.annotationLayers %>\"></button>\n <span class=\"pcc-separator\"></span>\n <% } %>\n\n <button data-pcc-mouse-tool=\"AccusoftRectangleRedaction\" data-pcc-default-fill-color=\"#000000\"\n class=\"pcc-icon pcc-icon-redact-rectangle\" title=\"<%= rectangleRedaction %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftTextSelectionRedaction\" data-pcc-default-fill-color=\"#000000\"\n class=\"pcc-icon pcc-icon-redact-textselection\" title=\"<%= textSelectionRedaction %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-redact\" title=\"<%= pageRedactionButton %>\" data-pcc-page-redaction=\"launch\"></button>\n\n <span class=\"pcc-separator\"></span>\n\n <button data-pcc-redactionViewMode class=\"pcc-icon pcc-icon-redactionViewMode\" title=\"<%= redactionViewMode %>\"> </button>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"esign\" data-pcc-removable-id=\"esignTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-esign\"></span> <%= esignLabel %></div>\n <div class=\"pcc-tab-pane\">\n <div class=\"pcc-pull-right\">\n <button data-pcc-comments-panel class=\"pcc-icon pcc-icon-comment\" title=\"<%= commentsPanel %>\"></button>\n <button data-pcc-toggle=\"dialog-download\" data-pcc-removable-id=\"download\" class=\"pcc-icon pcc-icon-download\" title=\"<%= download %>\"></button>\n </div>\n <div class=\"pcc-left\">\n <button class=\"pcc-icon pcc-icon-list\" title=\"<%= esignManage %>\" data-pcc-esign=\"manage\"></button>\n <button class=\"pcc-icon pcc-icon-freehandSign\" title=\"<%= esignFreehand %>\" data-pcc-esign=\"freehandLaunch\"></button>\n <button class=\"pcc-icon pcc-icon-textSign\" title=\"<%= esignText %>\" data-pcc-esign=\"textLaunch\"></button>\n <button class=\"pcc-icon pcc-icon-place pcc-disabled\" title=\"<%= esignPlaceSignature %>\" data-pcc-mouse-tool=\"AccusoftPlaceSignature\" data-pcc-esign=\"place\" disabled></button>\n <button class=\"pcc-icon pcc-icon-datestamp\" title=\"<%= esignPlaceDateSignature %>\" data-pcc-mouse-tool=\"AccusoftPlaceDateSignature\" data-pcc-esign=\"placeDate\"></button>\n </div>\n </div>\n </div>\n <div class=\"pcc-slideshow-controls\"></div>\n <div class=\"pcc-status-bar\">\n <button data-pcc-first-page class=\"pcc-icon pcc-icon-firstpage\" title=\"<%= firstPage %>\"></button>\n <button data-pcc-prev-page class=\"pcc-icon pcc-icon-prevpage\" title=\"<%= previousPage %>\"></button>\n <input type=\"number\" value=\"1\" data-pcc-pageSelect autocorrect=\"off\" autocapitalize=\"off\"> <%= of %> <span data-pcc-pagecount>1</span>\n <button data-pcc-next-page class=\"pcc-icon pcc-icon-nextpage\" title=\"<%= nextPage %>\"></button>\n <button data-pcc-last-page class=\"pcc-icon pcc-icon-lastpage\" title=\"<%= lastPage %>\"></button>\n </div>\n\n</div>\n\n<div class=\"pcc-tabset pcc-tools-tabset show-for-large\">\n <button data-pcc-zoom-out class=\"pcc-icon pcc-icon-zoomout\" title=\"<%= zoomOut %>\"></button>\n\n <ul class='pcc-scale-dropdown'>\n <li data-pcc-scale='800'><%= scaleOptions.scale800 %></li>\n <li data-pcc-scale='400'><%= scaleOptions.scale400 %></li>\n <li data-pcc-scale='200'><%= scaleOptions.scale200 %></li>\n <li data-pcc-scale='150'><%= scaleOptions.scale150 %></li>\n <li data-pcc-scale='125'><%= scaleOptions.scale125 %></li>\n <li data-pcc-scale='100'><%= scaleOptions.scale100 %></li>\n <li data-pcc-scale='75'><%= scaleOptions.scale75 %></li>\n <li data-pcc-scale='50'><%= scaleOptions.scale50 %></li>\n <div class='pcc-separator' />\n <li data-pcc-fit='FullWidth'><%= fullWidth %></li>\n <li data-pcc-fit='FullHeight'><%= fullHeight %></li>\n <li data-pcc-fit='FullPage'><%= fullPage %></li>\n </ul>\n <button data-pcc-zoom-level class='pcc-icon pcc-active'></button>\n\n <button data-pcc-zoom-in class=\"pcc-icon pcc-icon-zoomin\" title=\"<%= zoomIn %>\"></button>\n <button data-pcc-fit-content class=\"pcc-icon pcc-icon-fitcontent\" title=\"<%= fitContent %>\"></button>\n <button data-pcc-fullscreen class=\"pcc-icon pcc-icon-fullscreen pcc-hide pcc-show-lg\" title=\"<%= fullScreen %>\"></button>\n <div data-pcc-show-text data-open=\"view-doc-text\" class=\"pcc-view-text-only\">Show Text</div>\n\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-thumbnails\" data-pcc-toggle-id=\"dialog-thumbnails\">\n <div class=\"pcc-thumbnail-controls\">\n <div class=\"pcc-slider\" data-pcc-slider=\"thumb-size\">\n <div class=\"pcc-slider-track\">\n <div class=\"pcc-slider-thumb pcc-icon pcc-icon-circle\"></div>\n </div>\n </div>\n </div>\n <div class=\"pcc-thumbnail-container\" data-pcc-thumbs ></div>\n <div class=\"pcc-drag-handle\" data-pcc-drag-handle></div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-download\" data-pcc-toggle-id=\"dialog-download\">\n <div class=\"pcc-row\">\n <h4><%= fileDownloadAs %></h4>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-select pcc-select-download\" data-pcc-toggle=\"dropdown-download\">\n <div class=\"pcc-label\"><%= fileDownloadOriginalDocument %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-download\" class=\"pcc-dropdown\">\n <% _.forEach(downloadFormats, function(downloadFormat, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= downloadFormat %></div>\n <% }); %>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <h4><%= fileDownloadInclude %></h4>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-6\">\n <div data-pcc-checkbox=\"burnMarks\" data-pcc-download-annotations data-pcc-esign-save=\"true\" class=\"pcc-checkbox pcc-disabled\">\n <span></span><label><%= fileDownloadAnnotations %></label>\n </div>\n </div>\n <div class=\"pcc-col-6\">\n <div data-pcc-toggle=\"dropdown-download-annotations-format\" class=\"pcc-select pcc-disabled\">\n <div class=\"pcc-label\"><%= fileDownloadAllAnnotations %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-download-annotations-format\" class=\"pcc-dropdown\">\n <% _.forEach(annotationFormats, function(annotationFormat, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= annotationFormat %></div>\n <% }); %>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"burnMarks\" data-pcc-download-redactions data-pcc-esign-save=\"true\" class=\"pcc-checkbox pcc-disabled\">\n <span></span><label><%= fileDownloadRedactions %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"burnMarks\" data-pcc-download-esignatures data-pcc-esign-save=\"true\" class=\"pcc-checkbox pcc-disabled\">\n <span></span><label><%= fileDownloadESignature %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-6\">\n <button data-pcc-download=\"preview\"><%= preview %></button>\n </div>\n <div class=\"pcc-col-6\">\n <button data-pcc-download=\"download\"><%= download %></button>\n </div>\n </div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-search\" data-pcc-toggle-id=\"dialog-search\">\n <div class=\"pcc-dialog-wrapper\">\n <div class=\"pcc-search-header pcc-clear\">\n <div class=\"pcc-pull-right\">\n <button class=\"pcc-icon pcc-icon-list\" title=\"<%= searchResults %>\" data-pcc-search-container-toggle=\"results\"></button>\n <button class=\"pcc-icon pcc-icon-search-quick-actions pcc-hide\" title=\"<%= searchQuickActions.title %>\" data-pcc-search-container-toggle=\"quick-actions\"></button>\n <button class=\"pcc-icon pcc-icon-filter pcc-hide\" title=\"<%= filter %>\" data-pcc-search-container-toggle=\"filter\"></button>\n </div>\n <div class=\"pcc-left\">\n <span data-pcc-search=\"resultCount\"><%= searchResultsNone %></span>\n </div>\n </div>\n\n <div class=\"pcc-search-quick-actions-container pcc-hide pcc-clear\" data-pcc-search-container=\"quick-actions\">\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"quickActionSearchTerms\">\n <div class=\"pcc-section-title\"><%= searchQuickActions.searchResults %></div>\n <div class=\"pcc-section-content\"><%= searchFilters.noTerms %></div>\n </div>\n\n <div data-pcc-section=\"searchQuickActions\">\n <div class=\"pcc-row\">\n <button data-pcc-search-quick-action=\"redact\" class=\"\" title=\"Redact\"><%= searchQuickActions.redactAll %></button>\n </div>\n\n </div>\n\n <div data-pcc-section=\"searchQuickActionRedactOptions\" class=\"pcc-hide\">\n <div class=\"pcc-select pcc-select-redaction-reason\" data-pcc-redaction-reason data-pcc-qa-toggle=\"dropdown-quick-action-redaction-reason\" title=\"<%= searchQuickActions.redactionDropdownTitle %>\">\n <div class=\"pcc-label\" data-pcc-redaction-reason-dropdown-label><%= searchQuickActions.redactionReasonDropdownSelect%></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-qa-toggle-id=\"dropdown-quick-action-redaction-reason\" class=\"pcc-dropdown\">\n <% _.each(reasons.reasons, function(reason, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %> <%= (reason.reason === redactionReasonClear) ? 'pcc-must-hide' : '' %>\" <%= (reason.reason === redactionReasonClear) ? 'data-clear-item' : '' %>><%= reason.reason %></div>\n <% }); %>\n </div>\n </div>\n\n <div class=\"pcc-row\">\n <input type=\"text\" data-pcc-qa-redaction-reason-input class=\"pcc-hide\">\n </div>\n\n <button data-pcc-search-quick-action=\"redactReasonUpdateDone\" class=\"\" title=\"<%= searchQuickActions.redactReasonUpdateDone %>\"><%= searchQuickActions.redactReasonUpdateDone %></button>\n\n </div>\n\n </div>\n\n <div class=\"pcc-search-filter-container pcc-hide pcc-clear\" data-pcc-search-container=\"filter\">\n <div class=\"pcc-search-areas\">\n <span>Search in: </span>\n <button class=\"pcc-icon pcc-icon-page pcc-active\" data-pcc-search-in=\"document\" title=\"<%= searchFilters.searchInDocument %>\"></button>\n <button class=\"pcc-icon pcc-icon-comment pcc-active\" data-pcc-search-in=\"comments\" title=\"<%= searchFilters.searchInComments %>\"></button>\n <button class=\"pcc-icon pcc-icon-annotate pcc-active\" data-pcc-search-in=\"annotations\" title=\"<%= searchFilters.searchInAnnations %>\"></button>\n <button class=\"pcc-icon pcc-icon-redact-pen pcc-active\" data-pcc-search-in=\"redactions\" title=\"<%= searchFilters.searchInRedactions %>\"></button>\n <button class=\"pcc-icon pcc-icon-esign pcc-active\" data-pcc-search-in=\"signatures\" title=\"<%= searchFilters.searchInSignatures %>\"></button>\n </div>\n\n <div class=\"pcc-section pcc-expand pcc-hide\" data-pcc-section=\"searchFixedTerms\">\n <div class=\"pcc-section-title\"><%= searchFilters.fixedSearchTerms %></div>\n <div class=\"pcc-section-content\"><%= searchFilters.noTerms %></div>\n </div>\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"searchTerms\">\n <div class=\"pcc-section-title\"><%= searchFilters.searchTerms %></div>\n <div class=\"pcc-section-content\"><%= searchFilters.noTerms %></div>\n </div>\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"searchMarks\">\n <div class=\"pcc-section-title\"><%= searchFilters.markupFilters %></div>\n <div class=\"pcc-section-content\">\n\n <div class=\"pcc-search-filter pcc-filter-marks pcc-checked\" data-pcc-search-in-marks=\"markText\">\n <span class=\"pcc-checkbox\"></span><%= searchFilters.searchMarkText %>\n </div>\n <div class=\"pcc-search-filter pcc-filter-marks pcc-checked\" data-pcc-search-in-marks=\"showAllTypes\">\n <span class=\"pcc-checkbox\"></span><%= searchFilters.graphicalMarks %>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"searchRedactionReasons\">\n <div class=\"pcc-section-title\">Redaction Reasons</div>\n <div class=\"pcc-section-content\" data-pcc-filter-redaction-reasons></div>\n </div>\n </div>\n\n <div class=\"pcc-row pcc-row-results-status pcc-hide\" data-pcc-search=\"status\">\n <div class=\"pcc-percent\">\n <div class=\"pcc-label\">\n <div data-pcc-search=\"loader\" class=\"pcc-load\"></div>\n </div>\n <div class=\"pcc-bar\"></div>\n </div>\n </div>\n\n <div class=\"pcc-row pcc-clear pcc-search-nav\">\n <div class=\"pcc-col-6\">\n <button class=\"pcc-full\" disabled data-pcc-search=\"prevResult\"><%= previous %></button>\n </div>\n <div class=\"pcc-col-6\">\n <button class=\"pcc-full\" disabled data-pcc-search=\"nextResult\"><%= next %></button>\n </div>\n </div>\n\n <div class=\"pcc-search-results-container pcc-hide\" data-pcc-search-container=\"results\">\n <div class=\"pcc-row pcc-row-results-header\">\n <div class=\"pcc-col-2 pcc-center\"><%= page %></div>\n <div class=\"pcc-col-10 pcc-center\"><%= results %></div>\n <div class=\"pcc-col-2 pcc-center pcc-hide\"><%= type %></div>\n </div>\n <div class=\"pcc-row pcc-row-results\" data-pcc-search=\"results\" tabindex=\"1\"></div>\n </div>\n </div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-load-annotations\" data-pcc-toggle-id=\"dialog-load-annotations\">\n <div class=\"pcc-annotation-load-msg\"></div>\n <div class=\"pcc-select pcc-select-load-annotations\" data-pcc-toggle=\"dropdown-load-annotations\">\n <div class=\"pcc-label\"><%= loadAnnotations %> <span class=\"pcc-hide\"></span></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-load-annotations\" class=\"pcc-dropdown\" data-pcc-load-annotations=\"list\"></div>\n </div>\n <div class=\"pcc-annotation-load-status-msg\"></div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-load-annotation-layers\" data-pcc-toggle-id=\"dialog-load-annotation-layers\">\n\n <div class=\"pcc-annotation-layers-title\">\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" data-pcc-load-annotation-layers=\"back\" class=\"pcc-icon pcc-icon-prevpage pcc-pull-left\"></button>\n <%= annotations.load.title %>\n </div>\n\n <div class=\"pcc-annotation-layers-load-msg\"></div>\n <div class=\"pcc-annotation-layers-load-status-msg\"></div>\n\n <div class=\"pcc-annotation-layer-load-section pcc-dropdown-load-annotation-layers\">\n <div class=\"pcc-annotation-layer-load-section-title\">\n <%= annotationLayerEditTitle %>\n </div>\n <div class=\"pcc-annotation-layer-load-section-content\">\n <div class=\"pcc-select pcc-select-load-annotation-layers\" data-pcc-toggle=\"dropdown-load-annotation-layers\">\n <div class=\"pcc-label\"><%= annotationLayersLoad %> <span class=\"pcc-hide\"></span></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-load-annotation-layers\" class=\"pcc-dropdown\" data-pcc-load-annotation-layers=\"dropdownlist\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-annotation-layer-load-section pcc-section pcc-overflow\">\n <div class=\"pcc-annotation-layer-load-section-title\">\n <%= annotationLayerReviewTitle %>\n </div>\n <div class=\"pcc-annotation-layer-load-section-content\">\n <div data-pcc-load-annotation-layers=\"list\"></div>\n </div>\n </div>\n\n <button disabled=\"disabled\" data-pcc-load-annotation-layers=\"done\"><%= doneButton %></button>\n\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-save-annotations\" data-pcc-toggle-id=\"dialog-save-annotations\">\n <div class=\"pcc-annotation-save-msg\"></div>\n <input type=\"text\" disabled=\"disabled\">\n <button disabled=\"disabled\"><%= saveButton %></button>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-annotation-layer-review\" data-pcc-toggle-id=\"dialog-annotation-layer-review\">\n <div class=\"pcc-dialog-wrapper\">\n <div class=\"pcc-annotation-layer-review-section\" data-pcc-annotation-layer-review-section=\"current\">\n <div class=\"pcc-annotation-layer-review-section-title\">\n <%= annotationLayerReview.myAnnotations %>\n <div class=\"pcc-pull-right\">\n <div class=\"pcc-select pcc-select-annotation-layer-review-current\" data-pcc-toggle=\"dropdown-annotation-layer-review-current\">\n <button class=\"pcc-icon pcc-icon-light pcc-icon-hamburger-menu\" title=\"<%= options %>\"></button>\n <div data-pcc-toggle-id=\"dropdown-annotation-layer-review-current\" class=\"pcc-dropdown\">\n <button data-pcc-lock-editable-layer data-pcc-annotation-layer-edit=\"current\"><%= annotationLayerReview.editName %></button>\n <button data-pcc-lock-editable-layer data-pcc-toggle=\"dialog-load-annotations\"><%= loadAnnotations %></button>\n <button data-pcc-toggle=\"dialog-save-annotations\" data-pcc-save-annotation-layers><%= saveAnnotations %></button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pcc-annotation-layer-review-section-content\"></div>\n </div>\n\n <div class=\"pcc-annotation-layer-review-section\" data-pcc-annotation-layer-review-section=\"other\">\n <div class=\"pcc-annotation-layer-review-section-title\">\n <%= annotationLayerReview.annotationsForReview %>\n <div class=\"pcc-pull-right\">\n <div class=\"pcc-select pcc-select-annotation-layer-review-other\" data-pcc-toggle=\"dropdown-annotation-layer-review-other\">\n <button class=\"pcc-icon pcc-icon-light pcc-icon-hamburger-menu\" title=\"<%= options %>\"></button>\n <div data-pcc-toggle-id=\"dropdown-annotation-layer-review-other\" class=\"pcc-dropdown\">\n <button data-pcc-toggle=\"dialog-load-annotations\" data-pcc-toggle-mode=\"review\"><%= loadAnnotations %></button>\n\n <button data-pcc-annotation-layer-review=\"showAll\"><%= showAllAnnotations %></button>\n <button data-pcc-annotation-layer-review=\"hideAll\"><%= hideAllAnnotations %></button>\n\n <button data-pcc-annotation-layer-review=\"mergeMode\"><%= mergeAnnotations %></button>\n <button data-pcc-annotation-layer-review=\"mergeAll\"><%= mergeAllAnnotations %></button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pcc-hide pcc-toggle-all-visibility\">\n <button data-pcc-load-annotation-layers=\"showAllReview\">Show All</button>\n <button data-pcc-load-annotation-layers=\"hideAllReview\">Hide All</button>\n </div>\n <div class=\"pcc-annotation-layer-review-section-content\"></div>\n </div>\n\n <div class=\"pcc-annotation-layer-review-merge-actions pcc-hide\" data-pcc-annotation-layer-review-merge-actions>\n <button class=\"pcc-annotation-layer-review-merge\" data-pcc-annotation-layer-review=\"merge\"><%= annotationLayerReview.mergeSelected %></button>\n <button class=\"pcc-muted pcc-annotation-layer-review-merge-cancel\" data-pcc-annotation-layer-review=\"mergeCancel\"><%= cancelButton %></button>\n </div>\n </div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-annotation-layer-save\" data-pcc-toggle-id=\"dialog-annotation-layer-save\">\n <div class=\"pcc-dialog-wrapper\">\n <div class=\"pcc-annotation-layers-title\">\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" class=\"pcc-icon pcc-icon-prevpage pcc-pull-left\"></button>\n <%= annotations.save.title %>\n </div>\n <div class=\"pcc-annotation-save-msg\"><%= annotations.save.as %></div>\n <input type=\"text\">\n <button class=\"pcc-disabled\" data-pcc-save-layer><%= saveButton %></button>\n </div>\n</div>\n\n<div data-pcc-notify data-pcc-toggle-id=\"notify\">\n <p></p><button data-pcc-toggle=\"notify\">×</button>\n</div>\n\n<div data-pcc-pageList></div>\n<div data-pcc-context-menu class=\"pcc-context-menu\"></div>\n<div class=\"pcc-overlay-fade\"></div>\n<div class=\"pcc-overlay\" data-pcc-print=\"overlay\"></div>\n<div class=\"pcc-overlay pcc-overlay-page-redaction\" data-pcc-page-redaction=\"overlay\"></div>\n<div class=\"pcc-overlay pcc-overlay-esign\" data-pcc-esign=\"overlay\"></div>\n<div class=\"pcc-overlay pcc-overlay-image-stamp\" data-pcc-image-stamp=\"overlay\"></div>\n<div class=\"pcc-overlay\" data-pcc-overlay></div>\n\n<div class=\"pcc-breakpoint-trigger\" data-pcc-breakpoint-trigger></div>\n"}
An Overview of Mobile Systems and Ecosystems CSE 3203 Overview of Mobile Systems Jack G. Zheng Fall 2018 https://www.edocr.com/v/dao4xlgy/jgzheng/Mobile-System-Overview http://jackzheng.net/teaching/cse3203 Mobile is the internet Mobile is the new central ecosystem of tech Mobile means an ecosystem and that ecosystem will swallow 'PCs' 2 Benedict Evans https://www.ben-evans.com/benedictevans/2015/12/15/16-mobile-theses St. Peter's Basilica at the Vatican http://photoblog.nbc news.com/_news/2 013/03/14/1731231 6-witnessing-papal- history-changes- with-digital-age 3 Content Overview What is a mobile system? What is a mobile ecosystem? What does it consists of? Operator/Carrier Connection Device OS/platform Application Services Application development 4 Mobile System A mobile system is an system of applications and services that centered around mobile devices for computing and information needs Mobile devices (hardware): movable, easy-to- carry, and fully functional devices A mobile system is not just a hardware concept but also includes software and services Software: OS, applications Service: network, data/information, web, business, etc. 5 Fast Growing of Mobile Systems The Internet and Web grows fast; this growth is driven by the mobile usage Key reports and forecast from Cisco https://www.cisco.com/c/dam/assets/sol/sp/vni/forecast_highlights_mobile/index.html The infographic https://www.cisco.com/c/en/us/solutions/service-provider/visual- networking-index-vni/vni-infographic.html http://blogs.cisco.com/sp/top-5-surprises-from-the-2017-mobile-vni-study Cisco Mobile Visual Networking Index (VNI) Forecast: https://www.cisco.com/c/en/us/solutions/service-provider/visual-networking-index- vni/index.html#~mobile-forecast Exponential growth of mobile usage for the past 5 years FCC mobile wireless competition report https://www.fcc.gov/reports- research/reports/mobile-wireless-competition-reports https://www.gsmaintelligence.com: live numbers KPCB Internet Trends https://www.kleinerperkins.com/perspectives/internet-trends-report- 2018 Mobile is the new central ecosystem of information transaction needs http://ben-evans.com/benedictevans/2015/12/15/16-mobile-theses 6 https://www.kleinerperkins.com/perspecti ves/internet-trends-report-2018 https://www.cisco.com/c/en/us/solutions/service- provider/visual-networking-index-vni/vni-infographic.html http://www.extremetech.com/mobile/247026- android-surpasses-windows-used-operating- system-worldwide Mobile Ecosystem An ecosystem is a bigger system that consists of various players or parts (smaller systems) which sustain and grow together. A mobile ecosystem is a collection of mobile devices, systems, services, plus development tools, companies, and users, that sustain and grow together. The mobile ecosystem generally includes the following layers; each layer consists players, standards, tools, etc. adapted from the book Mobile Design and Development, Chapter 2 https://books.google.com/books?id=LyMeulBTkH0C 8 Applications and Services App Dev Platforms/Frameworks OS Devices (Hardware) Platforms Connectivity (Operators) Some more resources and perspectives: https://www.slideshare.net/iivanoo/lecture01 -11910341 https://www.slideshare.net/pragatiogal/mobil e-ecosystem-9716726 https://learndatamodeling.com/blog/what-is- mobile-ecosystem/ http://ben- evans.com/benedictevans/2015/11/7/mobile -ecosystems-and-the-death-of-pcs Connectivity The connectivity layer provides the basic connection infrastructure for mobile systems Mobile operators/carriers Connections and networks (standards) Devices for connections 9 Operators/Carriers A mobile network operator or MNO, also known as a carrier, is a provider of wireless communications services that owns or controls all the elements necessary to deliver services to an end user Major responsibilities Create and maintain the mobile infrastructure: towers, satellites, cables, access points, etc. Provide connection services and Internet/data services 10 Top operators in the world by subscriptions https://en.wikipedia.org/wiki/List_of_mobile_network_operators Note: by revenue, at&t and Verizon are the two biggest telecom companies in the world. Rank Company Country Total subscriptions (in millions) 1 China Mobile China 901.9 (May 2018) 2 Vodafone UK 535.8 (March 2018) 3 Airtel India 450.7 (March 2018) 4 China Unicom China 297.0 (April 2018) 5 Amrica Mvil Mexico 279.1 (March 2018) 6 China Telecom China 276.1 (May 2018) 7 Telefnica Spain 271.9 (June 2018) The Big 4 in US By subscriptions https://en.wikipedia.org/wiki/List_of_United_States_wireless_com munications_service_providers Verizon Wireless: 152.7 million (Q2 2018) AT&T Mobility: 147.3 million (Q2 2018) T-Mobile US: 75.6 million (Q2 2018)* Sprint Corporation: 53.7 million (Q2 2018)* 11 * T-Mobile and Spring proposed a merger in Jun 2018 https://www.digitaltrends.com/m obile/t-mobile-sprint-merger/ Market share: https://www.fcc.gov/20th- mobile-wireless-competition- report-quick-facts Connections and Networks Wide area Cellular networks: GSM, HSPA, LTE Provide direction connection and maintained by mobile operators Broadband wireless access Local area Wireless LAN, WiFi Can be set up by private or public providers Nearme or personal area Direct connections: Bluetooth, NFC, IR Personal area network, near-me area network 12 Cellular Network Generations 1G 2G 3G 4G Name 1st Generation Mobile Network 2nd Generation Mobile Network 3rd Generation Mobile Network 4th Generation Mobile Network Introduced in year 1980s 1993 2001 2009 Technology AMPS (Advanced Mobile Phone System), NMT, TACS IS-95, GSM IMT2000, WCDMA LTE, WiMAX Multiple Address/Access system FDMA TDMA, CDMA CDMA CDMA Switching type Circuit switching Circuit switching for Voice and Packet switching for Data Packet switching except for Air Interface Packet switching Speed (data rates) 2.4 Kbps to 14.4 kbps 14.4 Kbps 3.1 Mbps 100 Mbps Special Characteristic First wireless communication Digital version of 1G technology Digital broadband, speed increments Very high speeds, All IP Features Voice only Multiple users on single channel Multimedia features, Video Call High Speed, real time streaming Supports Voice only Voice and Data Voice and Data Voice and Data 13 https://www.qualcomm.com/documents/evolution-mobile-technologies-1g-2g-3g-4g-lte Cellular Networks Market Share 14 https://www.gsmaintelligence.com/research/2016/11/the-mobile-economy-north- america-2016/587/ Platforms A platform is the defining feature of a mobile system A platform defines and supports all major features and activities of a mobile system Usually include devices, hardware components, OS, application development and management frameworks Major platforms Android (open source) Apple iOS (proprietary) Others: Windows (sort of ), etc. 15 Type of Devices A mobile device is a general term for any type of portable/movable devices with computing power, connectivity and interactivity. Common features include: Portable (or movable) Computing power: general or specific purpose, with storage. Various connection methods (WiFi, cellular) Various interaction methods (touchscreen, remote control, connected I/O) The core type of mobile devices is the smart phone Estimated 2.5 billion smartphone users worldwide https://www.statista.com/statistics/330695/number-of- smartphone-users-worldwide/ Other device types Laptop, netbook, ultrabook Tablet https://www.zdnet.com/article/tablet-computers-an-overview/ Handheld e-reader, PDA, gaming console, music player (iPod) Wearable: watch, glasses, headsets, pens, etc. Movable attached/integrated: cars, drones, bikes, robot, etc. Human augmenter (implants) Home: TV, home automation, TV box, projector, etc.? IoT devices? Anything else? 16 Globally, 75% of mobile connections will be 'smart' connections by 2021, up from 46% in 2016. In the United States, 99% of mobile connections (excluding LPWA) will be 'smart' connections by 2021, up from 80% in 2016. https://www.cisco.com/c/dam/assets/sol/sp/vni/forecast_highlights_m obile/index.html Smartphone Smartphones are phones with additional functionalities supported by high computing power (way beyond a "phone"); they typically run an operating system and more applications, have a larger screen size (resolution), and have touchscreens. Superphone https://en.wikipedia.org/wiki/Superphone Should it be called a smartphone? https://blog.untitledkingdom.com/we-need-a- new-name-for-smartphone-c4258efd6e43 General features High computing power: CPU, GPU Large storage/memory Touch screen Integrated peripherals Speaker, mic, camera, light, projector (Motorola Droid) Integrated connectivity WiFi, Bluetooth, USB, etc. Integrated sensors Motion, environment, position, location Long lasting battery Evolution of phones https://www.tigermobiles.com/evolution 17 Smartphones will be responsible for 48% of all fixed and mobile traffic by 2021 https://blogs.cisco.com/sp/top-5- surprises-from-the-2017-mobile-vni-study Device Manufacturers Apple A proprietary platform with its own device, OS, and app frameworks Android An open platform with a family of device manufacturers 18 More data source: http://www.appbrain.com/stats/top-manufacturers Worldwide Smartphone Market, Top 5 Company, Q2 2018 (shipments in millions) Vendor 2Q18 Shipments 2Q18 Market Share 2Q17 Shipments 2Q17 Market Share Year-Over- Year Change 1. Samsung 71.5 20.9% 79.8 22.9% -10.4% 2. Huawei 54.2 15.8% 38.5 11.0% 40.9% 3. Apple 41.3 12.1% 41.0 11.8% 0.7% 4. Xiaomi 31.9 9.3% 21.4 6.2% 48.8% 5. OPPO 29.4 8.6% 28.0 8.0% 5.1% Others 113.7 33.2% 139.5 40.1% -18.5% Total 342.0 100.0% 348.2 100.0% -1.8% Source: IDC Worldwide Quarterly Mobile Phone Tracker, July 31, 2018 https://www.idc.com/getdoc.jsp?containerId=prUS44188018 (Smart) Hardware Components Core Motherboard, SoC, CPU, GPU, memory, storage I/O Display, touchscreen Connector: SIM, USB, SD card, etc. Physical key/button: switch, volume Communication Network/communication transmitter/receiver Radio, WiFi, Bluetooth Integrated peripherals Speaker, mic, camera, light Sensors, GPS 19 Mobile OS Operating System (OS) is a base infrastructure software component of a computing system. It controls all basic operations of the device and support higher level applications. A mobile operating system, or mobile OS, is an operating system that is specifically designed to run on mobile devices. A mobile OS runs on limited resources (computing power and storage) emphasizing communication. http://www.webopedia.com/TERM/M/mobile_operating_system.html Note: OS was once tightly coupled with the hardware devices; but they had become a separate layer as devices became smart. While some computers such as typical laptops are 'mobile', the operating systems usually used on them are not considered mobile ones, as they were originally designed for desktop computers that historically did not have or need specific mobile features. Some mobile devices can run desktop OS. This distinction is becoming blurred in some newer operating systems that are hybrids made for both uses. https://en.wikipedia.org/wiki/Mobile_operating_system 20 Mobile OS Market Share Multiple sources show Android and iOS are the dominant mobile OS currently Android is consistently above 80% world wide In US iOS is slightly more than Android http://gs.statcounter.co m/os-market- share/mobile/united- states-of- america#monthly- 201707-201807 21 For more data sources: https://www.netmarketshare.com/operating-system-market-share.aspx?id=platformsMobile https://en.wikipedia.org/wiki/Usage_share_of_operating_systems#Mobile_devices https://en.wikipedia.org/wiki/Mobile_operating_system#Market_share http://www.businessinsider.com/smartphone-market- share-android-ios-windows-blackberry-2016-8 Applications and Services Applications, or mobile apps, are user facing functional software used on mobile devices Services are delivered through apps Growing types of applications that are integrated into the device Functional apps: financial, payment, socialization Device integrated apps: GPS Gaming Communication 22 App Store An app store (or app marketplace) is a type of digital distribution platform for computer software, often in a mobile context. Much like the online store, but the products are the apps Major ones Google Play Apple App Store Other notables Amazon Appstore https://en.wikipedia.org/wiki/List_of_mobile_software _distribution_platforms 23 App Development Platform Platform A platform defines and supports all major app features and activities Usually includes hardware and operating systems Sometimes also includes application development and management frameworks Major mobile platforms: Android, Apple (iOS), Windows (mainly laptops) Development tools and frameworks. These include: Programming language SDK (run time, compilers, etc.) Code editor or IDE App frameworks Libraries and services App distribution/update methods App store: including official app store and third party app store Direct internet access or download 24 App Development Choices Platform native app These apps can only run on its target platform. The development tools and frameworks for each platform is different and no compatible. Major development platforms: Android, Apple iOS, Windows Cross platform Cross platform apps can run on multiple platforms using one set of development tools and frameworks. Further categorized as Cross platform native app Hybrid web app Web app (app like website) or mobile friendly website 25 Mobile App Development Options 26 https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid: _Understanding_Your_Mobile_Application_Development_Options A program designed to run directly on a specific mobile operating system. A web based application that runs in any web browser especially that designed for mobile devices. Applications developed using Web development technologies and wrapped in a mobile app container * New to the diagram: cross- platform native app (Xamarin) * New to the diagram: app like web site https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options http://www.telerik.com/blogs/everything-you-wanted-to-know-about-native-hybrid-and-web-apps-but-were-afraid-to-ask http://www.sitepoint.com/native-hybrid-or-web-apps/ http://www.ymedialabs.com/hybrid-vs-native-mobile-apps-the-answer-is-clear/ Comparison of the Three Development Options Native Apps Mobile Web Hybrid Device features Can fully utilize platform/OS features if allowed, such as camera, location, sensors, and interactions with file systems and other apps. Access to devices features are limited to the browser environment. Can utilize platform/OS features if provided by the SDK, which are usually provided as JavaScript APIs. UX/UI Best; smooth interaction as UI is very responsive. Not as good as native app; may have delays. Looks like an app, but may have performance issues. Development Platform Applications are platform dependent. They have to be written and/or compiled to a specific OS*. Example: - Andriod (Java) ( Android ) - iOS (Objective C, Swift) - Windows (.Net, C#) - * Xamarin (all) Web applications are cross platform and can use standard languages such as HTML/CSS/JavaScript. Programs runs in browsers, although they may have slightly differences in different browsers. Hybrid applications are developed using standard web technologies, but complied to each specific platform. Distribution / Installation App Store, or direct downloaded; need installation Web; no installation App Store, or direct downloaded; need installation Cross-Platform Native App This solution uses a common development environment for all platforms, but wraps (compiles) them to a target platform. Wrapping all native OS libraries Similar to hybrid, but the apps are native apps, not relying on browser engines. Example development framework Xamarin: Using C# and .Net for development https://visualstudio.microsoft.com/vs/features/mobile-app-development/ React Native https://facebook.github.io/react-native/ https://www.altexsoft.com/blog/engineering/xamarin-vs-react-native-vs-ionic-cross- platform-mobile-frameworks-comparison/ Is Xamarin hybrid? The short answer is no. https://www.quora.com/Is-Xamarin-hybrid-development http://www.cygnet-infotech.com/blog/phonegap-or-titanium-or-xamarin-which-cross- platform-should-you-choose Others http://www.appcelerator.com http://monocross.net 28 Application Framework The main aim of frameworks is to increase productivity by reducing efforts which eventually saves lot of time for developers to resolve any other important issues in the app or game. These frameworks provides inbuilt tools for developers to work instantly on difficult and lengthy part of coding. Vendor frameworks Android SDK Cocoa Touch Major third party frameworks Ionic jQuery mobile: http://jquerymobile.com Sencha Touch Titanium Appcelerator Framework7 More: http://mobile-frameworks-comparison-chart.com/ 29 Services and Service Providers Mobile backend as a service (MBaaS), also known as "backend as a service" (BaaS) is a model for providing web app and mobile app developers with a way to link their applications to backend cloud storage and APIs exposed by back end applications while also providing features such as user management, push notifications, and integration with social networking services. Top providers Kinvey Sencha Parse Azure https://docs.microsoft.com/en-us/azure/app- service-mobile/ 30 Mobile User Experience User experience a person's perceptions and responses that result from the use or anticipated use of a product, system or service encompasses all aspects of the end-user's interaction with the company, its services, and its products. Mobile user experience User experience toward mobile devices Use of mobile devices and wearables, and applications or services running on such devices. Key differences Portable Screen Screen size is generally smaller http://www.statista.com/chart/2269/smartphone-shipments-by-screen-size/ Screen resolution is lower and density is higher http://developer.android.com/about/dashboards/index.html Fragmented market: properties vary a lot among devices Orientation: vertical screens accounts for 29% of usage Interaction method: touch is different form pointing device https://www.nngroup.com/articles/mouse-vs-fingers-input-device/ Connection and speed Mobile device connection is less stable, inconsistent, and slower Variable connectivity Device capability Mobile devices have much more functionality integrated: cam, mic, sensors, GPS, etc. Computing limited https://www.nngroup.com/articles/mobile-ux/ 31 Good Resources Community resources http://www.ctia.org https://mobileecosystemfor um.com https://research.google.co m/pubs/MobileSystems.ht ml https://www.hindawi.com/j ournals/misy/ Influencers http://www.slideshare.net/ fling http://ben-evans.com News http://www.ubergizmo.co m/topic/cellphones/ http://www.ubergizmo.co m/topic/tablets/ http://mobileecosystemfor um.com/mef-minute/ 32 Data, Stats, and Reports Organizational reports Cisco Visual Networking Index http://www.cisco.com/c/en/us/solutions/service- provider/visual-networking-index-vni/index.html KPCB Internet Trends http://www.kpcb.com/internet-trends https://www.fcc.gov/reports-research https://www.ctia.org/the-wireless-industry/infographics-library General stats http://www.netmarketshare.com http://gs.statcounter.com http://marketshare.hitslink.com Browser: https://en.wikipedia.org/wiki/Usage_share_of_web_browsers Other Reports http://mobiforge.com http://www.visionmobile.com/reports/ http://www.pewinternet.org http://www.appcelerator.com/enterprise/resource-center/research/ https://www.slideshare.net/comScoremarcom/presentations Android devices: http://developer.android.com/about/dashboards/index.html 33 KSU Courses The BSIT "Mobile and Web" elective track This program is rated #3 in The 10 Best Online Mobile App Development Degrees https://www.bestvalueschools.com/cheap/online/ mobile-computing-degrees-bachelors/ CSE 3203 Mobile System Overview IT 4213 Mobile Web Development 34
An introduction of mobile systems and applications in the first class of CSE 3203 at Kennesaw State University - updated in Aug 2018.
Associate Professor at Kennesaw.edu
You must log in to comment
Embed as ...
Default Viewer
"Follow Profile"
"Follow Collection"
Thumbnail