<!-- 
    Globals
    -------
    ApplyGroupID - The Module ID (e.g Payment)
    ApplyID - The current Sub Module ID (e.g Deposit)
    ApplyName - The Sub Module Name
    SubmitRID - The Request ID That will process the Page Data

    Dynamic Data (Control Based)
    ------------
    id - the id of the controll
    title - the title or description
    action - Javascript handler to run
    data - other data
    logo - font awsome or mbri
 -->

<!-- 
     Note:
     1. <_??_> represent placeholder for control that recieves content
  -->
  
<!-- Page -->
<Page>
    <div class="zoomInShort2 animated indpage {{class}}" data-cache="{{cache}}" data-clear="{{clear}}"
        id="indpage_{{ApplyGroupID}}_{{ApplyID}}_{{NowPageNum}}" data-name="{{name}}">
        <div class="PageData w3-hide">
            {"ApplyID":{{ApplyID}},"ApplyGroupID":{{ApplyGroupID}},"ApplyName":"{{ApplyName}}","Title":"{{title}}","Data":"{{data}}","ID":"{{id}}",
            "Name":"{{name}}","NowPageNum":{{NowPageNum}},"NextPageNum":{{NextPageNum}}}
        </div>
        <div class="pbanner {{type}} zoomInShort animated fast delay-0-2s" style="background-image:url({{banner}})">
        </div>
        <!-- <a href="javascript:void(0)" onclick="Application.LoadPage(null,{{ApplyID}},{{ApplyGroupID}})"
            class="pitem applybtn w3-medium">
            <span class="mbri-home pitemind w3-display-right appcolor"></span>
            <div class="logodesign  zoomInShort animated delay-0-1s">
                <div class="logoinner {{ApplyColor}} w3-display-container w3-example"><span
                        class="w3-display-middle {{ApplyLogo}}"></span></div>
            </div>
            <div class="detdesign zoomInShort animated delay-0-2s">
                <div class="maininfo w3-large">{{ApplyName}}</div>
                <div class="otherinfo appcolor"></div>
            </div>
        </a> -->
        <!-- <div class="w3-large pbannertitle">{{ApplyName}}</div> -->
        <div class="menu-bx-cont-title appcolor w3-hide"><span>{{title}}</span></div>
        <div class="menu-bx-cont-descr"><span class="fadeIn animated delay-1s w3-large"
                style="opacity: 0;animation-fill-mode:both">{{data}}</span></div>
        <div class="menu-bx-page-ind-bx" data-indicator="{{indicator}}">
            <!-- <div class="menu-bx-page-ind-bx-item w3-card"></div>
            <div class="menu-bx-page-ind-bx-item w3-card active"></div>
            <div class="menu-bx-page-ind-bx-item w3-card"></div> -->
        </div>

        <!-- <div class="tcolline-line-outer-h" style="position:relative;min-width:100%;margin-bottom:10px">
            <div class="tcolline-line-inner-h" style="width: 70%;
        left: 15%;"></div>
        </div> -->

        <div class="w3-row  zoomInShort animated fast delay-0-3s">
            <form name="{{name}}" id="{{id}}" action="javascript:void(0)" class="{{fclass}}" onsubmit="{{action}}">

                <_??_>
            </form>
        </div>
    </div>

</Page>

<!-- Form -->
<Form>
    <form name="{{id}}" id="{{id}}" action="javascript:void(0)" onsubmit="{{action}}" {{attr}}>
        <_??_>
    </form>
</Form>
<!-- Form -->

<!-- A Column (2 Columns) -->
<Column>
    <div class="w3-col {{size}} bbwa-column {{class}}" style="{{style}}">
        <_??_>
    </div>
</Column>

<!-- Group Box (Usually Inside a Column) -->
<GroupBox>
    <div class="bbwa-groupbox {{class}}" id="">
        <h1 class="bbwa-groupbox-title">{{title}}</h1>
        <_??_>
    </div>
</GroupBox>

<!-- Select/Dropdown Element -->
<ComboBox>
    <div class="custom-select bbwa-textbox noSelect" title="{{title}}">
        <i class="bbwa-textbox-logo {{logo}}"></i>
        <select name="{{id}}" {{attr}} onchange="{{action}}" title="{{title}}" id="{{id}}">{{data}}</select>
        <div class="required appcolor tooltip {{drop}}" tooltip="Required"><i class="fas fa-star"></i>
        </div>
    </div>
</ComboBox>


<!-- Textbox -->
<TextBox>
    <div class="bbwa-textbox real-textbox {{class}} noSelect" style="{{style}}" title="{{title}}">
        <i class="bbwa-textbox-logo {{logo}}"></i><input title="{{title}}" name="{{id}}" id="{{id}}"
            placeholder="{{title}}" class="bbwa-textbox-input gen-text-shadow {{iclass}} noSelect" value="{{data}}"
            {{attr}} style="{{istyle}}" type="{{type}}" oninput="{{oninput}}" min="{{min}}" max="{{max}}" step="{{step}}"  />
        <div class="required appcolor tooltip" tooltip="{{title}}"><i class="fas fa-star"></i></div>
    </div>
</TextBox>

<!-- Button -->
<Button>
    <button class="bbwa-button w3-display-container tooltip {{class}} noSelect" id="{{id}}" onclick="{{action}}"
        tooltip="{{title}}" {{attr}} data-timeout="" style="{{style}}" type="{{type}}">
        <i style="vertical-align: middle;" class="{{logo}}"></i><span style="vertical-align: middle;">{{title}}</span>
        <span style="vertical-align: middle;right:5px"
            class="bbwa-button-timeout w3-padding-small w3-display-right w3-circle w3-white appcolor w3-card"
            id="timmer_{{id}}">{{timeout}}</span></button>
</Button>

<AppButton>
    <button id="{{id}}" style="z-index:104;overflow: visible;{{style}}"
        class="w3-button tooltip w3-card heartBeat2 gen-back-menu-btn appbgcolor w3-circle {{class}} noSelect"
        onclick="{{action}}" tooltip="{{title}}" {{attr}} type="{{type}}">
        <div class="w3-display-container"><i class="{{logo}} w3-large fa-fw w3-display-middle"></i></div>
    </button>
</AppButton>



<Hidden>
    <input type="hidden" id="{{id}}" value="{{data}}" />
</Hidden>

<!-- Multiple Checkbox GroupBox Checkboxes -->
<CheckBoxes>
    <div class="bbwa-checkbox-group {{class}} noSelect">
        <div class="w3-row">
            <_??_>
        </div>
    </div>
</CheckBoxes>

<!-- CheckBox -->
<CheckBox>
    <div class="w3-col bbwa-checkbox-cont noSelect" style="line-height: 1.05em; {{style}}">
        <div class="bbwa-checkbox {{class}} noSelect" style="{{istyle}}">
            <input type="radio" id="{{id}}" onchange="{{action}}" name="{{name}}" {{attr}} />
            <div class="bbwa-checkbox-logo w3-example"><i class="fas fa-check"></i></div>
            <div class="bbwa-checkbox-text w3-center" style="overflow: hidden;">
                <i class="bbwa-textbox-logo {{logo}} w3-medium"
                    style="vertical-align:middle;display:inline-block;width:20px;font-size: 1.6em;"></i>
                <span style="vertical-align:middle;display:inline-block;width:calc(100% - 30px);overflow: hidden;">
                    <div style="font-size:1.3em;" class="bbwa-checkbox-title">{{title}}</div>
                    <div class="bbwa-checkbox-descr">{{data}}</div>
                </span>
            </div>
            <div class="bbwa-checkbox-marker w3-padding-small appbgcolor w3-display-right w3-round w3-example zoomIn"
                id="{{id}}_Marker">{{marker}}</div>
            <div class="appcolor bbwa-checkbox-disabled w3-display-topleft zoomIn" style="top:-5px;"><span
                    class="mbri-lock"></span></div>
            <input type="hidden" id="{{id}}_MarkerValue" value="{{value}}" />
        </div>

    </div>
</CheckBox>

<!--  -->

<TabHead>
    <div class="bbwa-textbox w3-row bbwa-linkbox {{class}} noSelect" style="{{style}}">
        <_??_>
    </div>
</TabHead>
<TabButton>
    <div class="w3-center bbwa-tabbutton w3-col {{size}} noSelect" style="{{style}}"><input type="radio" id="{{id}}"
            {{attr}}
            onchange="if(this.checked){let alreadyp = _('{{action}}'); alreadyp.parentElement.insertAdjacentElement('afterbegin',alreadyp);}"
            name="{{data}}" /><a href="#"><span class="{{logo}}"
                style="vertical-align:middle"></span>&nbsp;&nbsp;{{title}}</a></div>
</TabButton>

<TabAction>
    <div class="w3-center bbwa-tabbutton w3-col {{size}}" style="{{style}}"><input type="radio" id="{{id}}" {{attr}}
            onchange="if(this.checked){{{action}}}" name="{{name}}" /><a href="#"><span class="{{logo}}"
                style="vertical-align:middle"></span>&nbsp;&nbsp;{{title}}</a></div>
</TabAction>

<TabBody>
    <div>
        <_??_>
    </div>
</TabBody>

<TabContent>
    <div class="animate-normal bounceInUpElem bbwa-tabbox" id="{{id}}">
        <_??_>
    </div>
</TabContent>


<Passport>
    <div class="bbwa-passport bbwa-textbox {{type}}">
        <div class="required appcolor tooltip" tooltip="Required"><i class="fas fa-star"></i></div>
        <button type="button" class="cameratoggle w3-card"
            onclick="_Camera.getStream('{{id}}_video',function(obj){obj.parentElement.classList.add('showcamera');},this)"><i
                class="fas fa-camera fa-fw"></i></button>
        <button type="button" class="cameratogglebk w3-card"
            onclick="this.parentElement.classList.remove('showcamera')"><i class="fas fa-upload fa-fw"></i></button>
        <button type="button" class="bbw-passport-change form-file-btn w3-card" {{attr}} data-required="{{required}}"
            data-file-id="{{id}}"
            onclick="_BrowseSetFile('{{id}}',{MinSize:{{minsize}},MaxSize:{{maxsize}},Accept:'{{accept}}',OnError:errorpw})">
            <i class="{{logo}} fa-fw"></i> <span>{{title}}</span>
        </button>
        <img src="{{data}}" id="{{id}}" class="disp" />
        <img src="{{default}}" id="{{id}}_Def" />
        <video autoplay id="{{id}}_video" class="disp"></video>
        <button type="button" class="capture-btn w3-card w3-display-bottommiddle"
            onclick="_Camera.takePhoto('{{id}}_video','{{id}}',function(obj){obj.parentElement.classList.remove('showcamera');},this)"></button>
    </div>
</Passport>

<DynamicBox>
    <div class="bbwa-dynamicbox {{class}} zoomInShort" id="{{id}}" style="{{style}}">
        <button type="button" class="bbwa-actionbtn bbwa-actionbtn-top fadeInDown" title="Remove Entering"
            onclick="this.parentElement.parentElement.removeChild(this.parentElement)"><i
                class="fas fa-times"></i></button>
        <_??_>
            <button type="button" class="bbwa-actionbtn bbwa-actionbtn-bottom zoomInShort"
                onclick="Control.DynamicBox.Add(this.parentElement)"><i class="fas fa-plus"></i></button>
    </div>
</DynamicBox>

<FileUpload>

    <div class="bbwa-textbox w3-padding bbwa-Image-Upload noSelect" style="min-height:50px;overflow: auto;">
        <div class="required appcolor tooltip" tooltip="Required"><i class="fas fa-star"></i></div>
        <div>{{title}}</div>
        <div id="{{id}}ss" class="bbwa-Image-Upload-cont">{{data}}</div>
        <button type="button" class="bbwa-button normal bbwa-icon-only form-file-btn w3-display-right"
            data-required="{{required}}" data-file-id="{{id}}" tooltip="Select Scanned copies of all your Credentials"
            onclick="_BrowseInto('{{id}}ss',{FileID:'{{id}}',MinSize:{{minsize}},MaxSize:{{maxsize}},Accept:'{{accept}}',OnError:errorpw,Multiple:{{multiple}}})"><i
                class="{{logo}}"></i><span>{{title}}</span></button>
        <input type="hidden" id="{{id}}_FileType" value="{{accept}}" />
    </div>

    <span style="clear:left;display:block"></span>
</FileUpload>

<TextPad>
    <div class="bbwa-textbox {{class}}" title="{{title}}">
        <i class="bbwa-textbox-logo fas {{logo}}"></i><textarea title="{{title}}" {{attr}} name="{{id}}" id="{{id}}"
            placeholder="{{title}}" class="bbwa-textbox-input gen-text-shadow">{{data}}</textarea>
        <div class="required appcolor tooltip" tooltip="Required"><i class="fas fa-star"></i></div>
    </div>
</TextPad>

<ListBox>
    <div class="bbwa-textbox bbwa-listboxcont {{class}}">
        <ul class="bbwa-listbox {{ulclass}}" id="{{id}}">
            <_??_>
        </ul>
    </div>
</ListBox>

<Paragraph>
    <p class="{{class}}" style="{{style}}" id="{{id}}" {{attr}}>{{data}}<_??_>
    </p>
</Paragraph>

<BlockText>
    <div class="{{class}}" id="{{id}}">{{data}}</div>
</BlockText>

<BoxButton>
    <div id="{{id}}" onclick="{{action}}"
        class="bbwa-textbox {{class}} w3-padding w3-round-small w3-display-container bbwa-boxbtn"
        style="display:inline-block;cursor: pointer;{{style}}"><i class="{{logo}} w3-large bxbtn-logo"
            style="vertical-align: middle;display:inline-block;width:20px"></i>&nbsp; <div
            style="vertical-align: middle;display: inline-block;max-width: calc(100% - 30px);">
            <div class="bbwa-boxbtn-title">{{title}}</div>
            <div class="bbwa-boxbtn-data">{{data}}</div>
            <div class="bbwa-checkbox-marker w3-padding-small appbgcolor w3-display-right w3-round w3-example zoomIn"
                id="{{id}}_Marker">{{marker}}</div>
        </div>&nbsp;<i class="mbri-arrow-next w3-display-right bbwa-boxbtn-hasaction appcolor"
            style="vertical-align: middle;right:10px"></i></div>
</BoxButton>


<Box>
    <div id="{{id}}" class="bbwa-textbox {{class}}" style="{{style}}" {{attr}}>
        {{data}}<_??_>
    </div>
</Box>

<Container>
    <div id="{{id}}" class="{{class}}" style="{{style}}" {{attr}}>
        <_??_>
    </div>
</Container>

<Link>
<a href="{{action}}" target="{{target}}" class="{{class}} noSelect" style="{{style}}" title="{{title}}"
    {{attr}}>{{data}}<_??_></a>
</Link>

<Filler>
    <div id={{id}} class="{{class}} noSelect">
        <h1 class="appcolor w3-xlarge">{{title}}</h1>
        <div>
            <_??_>
        </div>
        <input type="hidden" id="{{id}}_Container" value="{{container" }} />
    </div>
</Filler>

<!-- Popup -->
<Popup>
    <div class="w3-hide popup-container {{class}}" id="{{id}}" {{attr}}>
        <h1 class="appcolor" style="font-size: 27px; width: calc(100% - 40px); margin:10px auto ; max-width: 400px;">
            {{title}}</h1>
        <_??_>
    </div>
</Popup>
<!-- Popup -->


<!-- Special Controls -->
<!-- -------------------- -->
<!-- Payment Box -->
<PaymentBox>
    <div class="w3-row paycont">
        <_??_>
    </div>
</PaymentBox>

<PaymentLabel>
    <div class="w3-col m6 l4 s6 indpaybx {{class}}" style="{{style}}">
        <div class="bbwa-iconbox" style="position:relative" onclick="{{action}}" title="Pay {{title}}">
            <div class="main-icon gen-text-shadow"><i
                    class="fas {{status}} fa-check-circle w3-text-green  w3-display-topright"
                    style="right:-10px;top:-10px"></i><i
                    class="fas {{status}} fa-exclamation-circle w3-text-red  w3-display-topright"
                    style="right:-10px;top:-10px"></i></div>
            <div class="main-content">
                <div style="min-height:70px;padding:10px;text-align:left"
                    class=" w3-border-bottoms w3-border-dark-grey gen-nowrap gen-overflow-hidden">
                    <div>{{title}}</div>
                    <div>{{level}}</div>
                    <div>{{semester}}</div>
                </div>
                <div class=" {{status}} gen-text-shadow bar w3-card"
                    style="border-radius:0px 0px 4px 4px; padding:8px 3px;overflow:hidden"><span
                        class="w3-tiny">NGR</span>&nbsp;<span class="">{{amount}}</span>&nbsp;<span
                        class="w3-tiny">{{policy}}</span></div>
            </div>
        </div>
    </div>
</PaymentLabel>
<!-- Payment Box -->

<!-- Represent an inhouse browser -->
<Browser>
    <div class="browserloading">Loading ....</div>
    <iframe src="{{data}}" onload="parentElement.classList.add('browserloaded')" id="{{id}}" class="bifr {{class}}"
        style="{{style}}">

    </iframe>
</Browser>

<!-- Note -->
<Note>
    <div class="bbwa-note appbgcolorfade {{class}} card-1-1" {{attr}}>
        {{data}}<_??_>
    </div>
</Note>

<!-- Start button -->

<StartButton>
    <button class="startbtn card-1 {{class}}" id="{{id}}" style="{{style}}" title="{{title}}"
        action="{{action}}">{{data}}</button>
</StartButton>


<!-- Start button -->

<!-- CardList -->
<CardList>
    <div class="cardlist">
        <_??_>
    </div>
</CardList>
<!-- CardList -->

<!-- Card -->
<Card>
    <button class="card {{class}}" type="button" onclick="{{action}}">
        <div class="card-img"><img src="{{image}}" alt="{{title}}" /></div>
        <div class="card-cont">
            <div class="mainbx">
                <div class="card-title">{{title}}</div>
                <div class="card-data overflow-dot">{{data}}</div>
            </div>
            <div class="timebx">
                {{time}}
            </div>

        </div>
    </button>
</Card>
<!-- Card -->

<!-- speadsheet -->
<Spreadsheet>
    <section class="spreadsheet_container " style="{{style}}">
        <h4>{{title}}</h4>
        <div id="{{id}}" class="spreadsheet bbwa-spreadsheet w3-card-4" style="grid-template-columns: {{column}};-ms-grid-columns: {{column}}; column-gap: {{col-gap}}; row-gap: {{row-gap}};">
            <_??_>
        </div>
    </section>
</Spreadsheet>

<!-- speadsheet -->

<!-- Spreadsheet row -->
<Row>
    <div class="spreadsheet_row">
        <_??_>
    </div>
</Row>
<!-- Spreadsheet row -->


<!-- AIM PrintPDF -->
<Printer>
    <div class="w3-container {{aim-printer-text-color}} aim-printer-text-color animate-fast animate-fill-both"
        id="aim-printpdf"
        style="padding:0px;height:100%;position: fixed;height: 100%; width: 100%; z-index: 100000; display:none;top:0px;font-family: inherit">
        <!-- Small Sidebar -->
        <div id="aim-printpdf-small-menu"
            class="w3-hide-large w3-card-4 w3-round w3-opacity w3-hover-opacity-off w3-animate-left"
            style="width:200px;position:absolute;z-index:2;margin-top:30px;margin-left:10px">
            <div class="aim-printer-bg-color w3-text-white w3-round" style="padding:15px;background-color:#333"
                id="aim-printpdf-header">
                <!-- Close Button -->
                <div class="w3-left">
                    <button
                        class="w3-btn w3-circle w3-border {{aim-printer-text-color}} aim-printer-text-color  w3-hover-white w3-hover-opacity w3-white  w3-ripple aim-printer-close"
                        style="padding:3px; width:40px;height:40px" title="Close"><i
                            class="fa fas fa-times"></i></button>
                </div>
                <!-- Show Main Sidebar Button -->
                <div class="w3-right w3-margin-right">
                    <button id="aim-printpdf-show-sidebar"
                        class="w3-btn w3-circle w3-border w3-text-black  w3-hover-white w3-hover-opacity w3-white  w3-ripple"
                        style="padding:3px; width:40px;height:40px" title="Settings"><i
                            class="fa fas fa-cogs"></i></button>
                </div>
                <!-- Download Button -->
                <div class="w3-right w3-margin-right">
                    <button
                        class="w3-btn w3-circle w3-border w3-text-black  w3-hover-white w3-hover-opacity w3-white aim-printer-download-btn w3-ripple"
                        style="padding:3px; width:40px;height:40px" title="Download"><i
                            class="fa fas fa-download"></i></button>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <!-- Small Sidebar End-->

        <!-- Main Sidebar -->
        <div id="aim-printpdf-sidebar"
            class="w3-sidebar w3-card-4 w3-text-white aim-printer-text-color w3-colapse w3-hide-medium w3-hide-small"
            style="width:300px;height:calc(100% - 20px);background-color:#1f1f1f">

            <!-- Main Sidebar Header-->
            <div class="aim-printer-bg-color w3-margin-bottom w3-card" style="padding:15px;background-color:#333"
                id="aim-printpdf-header">
                <!-- Show Small Sidebar Button -->
                <div class="w3-left w3-margin-right">
                    <button id="aim-printpdf-show-small-menu"
                        class="w3-btn w3-circle w3-border w3-text-black  w3-hover-white w3-hover-opacity w3-white  w3-ripple w3-hide-large"
                        style="padding:3px; width:40px;height:40px" title="Minimize"><i
                            class="fa fas fa-chevron-left"></i></button>
                </div>
                <!-- Close Button -->
                <div class="w3-left">
                    <button
                        class="w3-btn w3-circle w3-border w3-text aim-printer-text-color  w3-hover-white w3-hover-opacity w3-white  w3-ripple aim-printer-close"
                        style="padding:3px; width:40px;height:40px" title="Close"><i
                            class="fa fas fa-times"></i></button>
                </div>
                <!-- Download Button -->
                <div class="w3-left w3-margin-left">
                    <button
                        class="w3-btn w3-circle w3-border w3-text-black  w3-hover-white w3-hover-opacity w3-white aim-printer-download-btn w3-ripple"
                        style="padding:3px; width:40px;height:40px" title="Download"><i
                            class="fa fas fa-download"></i></button>
                </div>

                <!-- PrintPDF Logo -->
                <div class="w3-right w3-xlarge" title="Aim PrintPDF"><i class="fa fas fa-print"></i> <span
                        class="w3-large">PDF</span></div>
                <div style="clear:both"></div>
            </div>
            <!-- Main Sidebar Header End-->

            <!-- Paper and Font Size Setting Section-->
            <div class="w3-padding">
                <!-- Paper Setting-->
                <!-- Label -->
                <div class="w3-large w3-padding"><i
                        class="fa fas fa-file-alt {{aim-printer-text-color}} aim-printer-text-color"></i> Paper
                </div>

                <div class="w3-row w3-card" style="padding-left:0px;height:40px">
                    <!-- Paper Type Dropdown -->
                    <div class="w3-col s6" style="padding-left:0px" title="Select Paper Type">
                        <select id="aim-printpdf-papertype" class="w3-select w3-border-none "
                            style="font-weight:bold;height:40px">
                            {{PaperType}}
                        </select>
                    </div>


                    <div class="w3-col s6" style="padding:0px">

                        <!-- Papersize Button (Portrait) -->
                        <button id="aim-printpdf-portrait"
                            class="{{aim-printer-color}} aim-printer-bg-color w3-left aim-printpdf-orientation"
                            style="padding:0px;width:50%;height:40px;margin:0px;border:0px"
                            title="Paper Orientation - Portrait"><i class="fa fas fa-file-alt"></i></button>

                        <!-- Papersize Button (Landscape) -->
                        <button id="aim-printpdf-landscape"
                            class="{{aim-printer-color}} aim-printer-bg-color w3-left aim-printpdf-orientation w3-opacity w3-card-4 w3-hover-greyscale"
                            style="padding:0px;width:50%;height:40px;margin:0px;border:0px"
                            title="Paper Orientation - Landscape"><i class="fa fas fa-file-alt"
                                style="transform:rotate(-90deg)"></i></button>
                    </div>

                    <!--<div class="w3-quarter">
                   
               </div>-->
                </div>

                <!-- Font Size Setting -->
                <!-- Label and Font Size Indicator -->
                <div class="w3-large w3-margin-top w3-padding"><i
                        class="fa fas fa-text-width {{aim-printer-text-color}} aim-printer-text-color"></i> Font
                    Size (<strong class="{{aim-printer-text-color}} aim-printer-text-color"
                        id="aim-printpdf-fontsize">10</strong>)</div>

                <div class="" style="padding-left:0px">
                    <!-- Font Size Slider -->
                    <div style="width: 230px; margin:auto; position:relative; height:30px;padding-top:10px"
                        title="Drag to Set Font Size">
                        <!-- Inner Bar -->
                        <div style="width:100%; height:10px;"
                            class="{{aim-printer-color}} aim-printer-bg-color w3-round w3-opacity-max w3-card">
                        </div>
                        <!-- Slider Button-->
                        <button id="aim-printpdf-fontslider"
                            class="w3-button w3-circle {{aim-printer-color}} aim-printer-bg-color w3-card w3-text-white w3-hover-red w3-hover-border-red"
                            style="width:20px;height:20px;position:absolute;padding:2px;top:5px;"></button>
                    </div>

                    <div style="clear:both"></div>
                </div>
            </div>
            <!-- Paper and Font Size Setting Section End-->

            <hr style="margin:10px 0px; border-color:#333" class="">

            <!-- Margin Settings Section -->
            <div class="w3-padding">
                <div class="w3-large w3-padding"><i
                        class="fa fas fa-outdent {{aim-printer-text-color}} aim-printer-text-color"></i> Margin
                </div>
                <div class=" w3-display-container" id="aim-printpdf-margin-box" style="height:250px;width:250px">
                    <!-- Top Margin -->
                    <div class="w3-display-topmiddle w3-center" style="width: 40px; height:40px;"><strong
                            class="{{aim-printer-text-color}} aim-printer-text-color" id="aim-printpdf-marginvalue-top"
                            style="-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:0.9em">4</strong>
                    </div>
                    <!-- Top Margin Line -->
                    <hr id="aim-printpdf-marginline-top"
                        style="border-style:dashed !important; position:absolute;top:30px;cursor:ns-resize;width:100%; height:4px; margin:0px;border-color:rgb(128, 128, 128)"
                        class="w3-border-red- w3-border-none w3-hover-border-grey" title="Drag to Set Margin Top" />

                    <!-- Left Margin -->
                    <div class="w3-display-left  w3-center" style="width: 40px; height:40px;"><strong
                            style="position:absolute;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:0.9em"
                            class="w3-display-left {{aim-printer-text-color}} aim-printer-text-color"
                            id="aim-printpdf-marginvalue-left">4</strong></div>
                    <!-- Left Margin Line -->
                    <hr id="aim-printpdf-marginline-left"
                        style="border-left-style:dashed !important; position:absolute;left:30px;cursor:ew-resize;height:100%; width:4px; margin:0px; border:1px;border-color:rgb(128, 128, 128)"
                        class="w3-border-red- w3-hover-border-grey" title="Drag to Set Margin Left" />

                    <!-- Right Margin -->
                    <div class="w3-display-right w3-center" style="width: 40px; height:40px;"><strong
                            style="position:absolute;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:0.9em"
                            class="w3-display-right {{aim-printer-text-color}} aim-printer-text-color"
                            id="aim-printpdf-marginvalue-right">4</strong></div>
                    <!-- Right Margin Line -->
                    <hr id="aim-printpdf-marginline-right"
                        style="border-left-style:dashed !important; position:absolute;left:220px;cursor:ew-resize;height:100%; width:4px; margin:0px; border:1px;border-color:rgb(128, 128, 128)"
                        class="w3-border-red- w3-hover-border-grey" title="Drag to Set Margin Right" />

                    <!-- Bottom Margin -->
                    <div class="w3-display-bottommiddle w3-center" style="width: 40px; height:40px;"><strong
                            class="{{aim-printer-text-color}} aim-printer-text-color w3-display-bottommiddle"
                            style="position:absolute;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:0.9em"
                            id="aim-printpdf-marginvalue-bottom">4</strong></div>
                    <!-- Bottom Margin Line -->
                    <hr id="aim-printpdf-marginline-bottom"
                        style="border-style:dashed !important; position:absolute;top:220px;cursor:ns-resize;width:100%; height:4px; margin:0px;border-color:rgb(128, 128, 128)"
                        class="w3-border-red- w3-border-none w3-hover-border-grey" title="Drag to Set Margin Bottom" />

                </div>
            </div>
            <!-- Margin Settings Section End -->
        </div>
        <!-- Main Sidebar End -->

        <!-- Main Printer Container -->
        <div class="w3-main w3-light-grey" style="margin-left:300px;height:calc(100% - 20px)">
            <div class="w3-display-container" id="aim-printpdf-container" style="height:100%">
                <div class="w3-display-middle" id="aim-printpdf-loading" style="width:50px;height:50px;opacity:0">
                    <div class="w3-display-container" style="width:100%;height:100%">
                        <div id="aim-printpdf-loading1"
                            class="w3-circle {{aim-printer-color}} aim-printer-bg-color w3-display-topleft w3-card"
                            style="width:10px;height:10px;position:absolute;"> </div>
                        <div id="aim-printpdf-loading2"
                            class="w3-circle {{aim-printer-color}} aim-printer-bg-color w3-display-topmiddle w3-card"
                            style="width:10px;height:10px;position:absolute;"> </div>
                        <div id="aim-printpdf-loading3"
                            class="w3-circle {{aim-printer-color}} aim-printer-bg-color w3-display-topright w3-card"
                            style="width:10px;height:10px;position:absolute;"> </div>
                    </div>
                </div>
                <iframe id="aim-printpdf-iframe" src="" style="width:100%;height:100%;border:0px"></iframe>
                <!-- <object id="aim-printpdf-iframe" data="" style="width:100%;height:100%;border:0px"></object> -->

            </div>
            <div style="clear:both"></div>
            <iframe id="aim-printpdf-iframedl" style="display:none" src=""></iframe>
        </div>
        <!-- Main Printer Container Ends-->

        <!-- Footer-->
        <div class="{{aim-printer-color}} aim-printer-bg-color w3-small" id="aim-printpdf-footer"
            style="position:absolute;bottom:0px;height:20px;z-index:3;width:100%">
            <div class="w3-left w3-margin-left w3-hide-small w3-hide-medium"> <span
                    style="margin:0px 8px;font-weight:400"><i class="fa fas fa-file-pdf-o"></i></span><span
                    style="margin:0px 8px;font-weight:400" id="aim-footer-papertype">A4</span><span
                    style="margin:0px 8px;font-weight:400" id="aim-footer-orientation">Portrait</span><span
                    style="margin:0px 8px;font-weight:400">Font: <span style=""
                        id="aim-footer-fontsize">10</span>pt</span> <span style="margin:0px 8px;font-weight:400">Margin:
                    T <span style="" id="aim-footer-margintop">4</span>pt, R <span style=""
                        id="aim-footer-marginright">4</span>pt, B <span style=""
                        id="aim-footer-marginbottom">4</span>pt, L <span style=""
                        id="aim-footer-marginleft">4</span>pt</span> </div>
            <div class="w3-right w3-margin-right w3-rigth-align"> <span style="margin:0px 8px;font-weight:400"
                    id="aim-printpdf-footer-status">Course Registration Form</span><span
                    style="margin:0px 8px;font-weight:400" id="aim-printer-version">Aim PrintPDF V2</span> <span
                    style="margin:0px 8px;font-weight:400"><i class="fa fas fa-print"></i></span> </div>
        </div>
    </div>
</Printer>