
<style>
    #drop {
        border: 2px dashed #bbb;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding: 25px;
        text-align: center;
        font: 20pt bold, "Vollkorn";
        color: #bbb
    }

    .table {
        max-width: none;
    }

    .table tbody tr td.dropzone {
        border: 2px dashed #bbb;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding: 25px;
        /*font: 20pt bold, "Vollkorn";*/
        color: #bbb;
        background: #d7d7d7 !important;
        padding-top: 5px;
    }

    .panel-default {
        max-height: 85px;
        border-color: #ddd;
        padding: 0px;
        position: relative;
        margin: 0px;
    }

    .panel-body {
        padding: 15px;
        padding-top: 15px;
    }

    .tabs {
        max-height: 300px;
        min-height: 300px;
        overflow-y: auto;
    }

    .custompanel {
        margin-bottom: 10px;
    }

    .delcol {
        cursor: pointer;
        position: absolute;
        left: 95%;
        font-size: 20px;
    }

    .divimportdata {
        max-height: 350px;
    }

    #importdata tbody {
        overflow: auto;
        max-height: 350px;
    }

    #importdata tbody td {
        width: 50% !important;
        overflow: auto;
        padding: 0px;
        padding-bottom: 2px;
        text-align: left !important;
        height: 35px;
    }

    #importdata tbody tr {
        width: 100% !important;
    }

    .morewidth {
        text-align: center;
        padding-top: 15px;
        color: white;
    }

    .tooltipster-base.tooltipster-sidetip.tooltipster-top.tooltipster-fade {
        max-width: 300px;
        max-height: 200px;
    }

    .loading-overlay-showing>.loading-overlay::before {
        color: #b6b6b6;
        content: "Processing your order...";
        font-size: 16px;
        position: absolute;
        text-align: center;
        top: 36%;
        width: 100%;
    }

    .table {
        min-height: none;
    }

</style>
<div class="page-inner">
    <div class="page-title">
        <h3>Import</h3>
    </div>
    <!--
<a id=abb1 style="display: none;"></a>
<a id=abb2 style="display: none;"></a>
-->
    <div class="row">
        <div class="col-md-12">
            <div id="drop"> Drop a spreadsheet file here to see sheet data
            </div>
            <div > or upload it manual 
                <label class="btn btn-default">
                    Upload File 
                    <input type="file" name="xlfile" id="xlf"style="display:none"  /> 
                </label>
                <a id=abb class="btn btn-complete" style="margin-top: -10px;display:none">Download the file that has been skipped
                </a>
            </div>
            <!--
<div class="row" id="tableimport" style="display: none;">
<div class="col-md-8 divimportdata  table-responsive">
<table style="width: 100%" class="table" id=importdata>
<thead>
<tr>
<th>Data</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftpanel">
</td>
<td class="rightpanel">
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search Fields .." id="searchallfields">
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1"><i class="fa fa-building"></i></a></li>
<li><a href="#tabs-2"><i class="fa fa-money"></i></a></li>
<li><a href="#tabs-3"><i class="fa fa-clock-o"></i></a></li>
<li><a href="#tabs-4"><i class="fa fa-user"></i></a></li>
<li><a href="#tabs-5"><i class="fa fa-file-o"></i></a></li>
<li id=searchdiv style="color: white"><span id=nbofmatches>0</span> matches</li>
</ul>
<div id="tabs-1" class="tabs">
<div class="panel panel-default custompanel dragged" data-field='name' data-column-name='organization_Name'>
<div class="panel-body"><i class='fa fa-building'></i> Name</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='name' data-column-name='organization_Owner_Name'>
<div class="panel-body"><i class='fa fa-building'></i> Owner_Name</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='address' data-column-name='organization_Address'>
<div class="panel-body"> <i class='fa fa-building'></i> Address</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='notes' data-column-name='organization_Notes'>
<div class="panel-body"> <i class='fa fa-building'></i> Notes</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='creation' data-column-name='organization_cr'>
<div class="panel-body"> <i class='fa fa-building'></i> Creation Date</div>
</div>
</div>
<div id="tabs-2" class="tabs">
<div class="panel panel-default custompanel dragged" data-field='title' data-column-name='deals_Title'>
<div class="panel-body"><i class='fa fa-money'></i> Title</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='organization' data-column-name='deals_Organization_id'>
<div class="panel-body"><i class='fa fa-money'></i> Organization</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='person' data-column-name='deals_contperson'>
<div class="panel-body"><i class='fa fa-money'></i> Person</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='state' data-column-name='deals_state'>
<div class="panel-body"><i class='fa fa-money'></i> State</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='stage' data-column-name='deals_progress'>
<div class="panel-body"><i class='fa fa-money'></i> Stage</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='value' data-column-name='deals_Value'>
<div class="panel-body"><i class='fa fa-money'></i> Value</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='reason' data-column-name='deals_reason'>
<div class="panel-body"><i class='fa fa-money'></i> Reason</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='lost' data-column-name='deals_lost'>
<div class="panel-body"><i class='fa fa-money'></i> Lost Time</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='won' data-column-name='deals_won'>
<div class="panel-body"><i class='fa fa-money'></i> Won Time</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='currency' data-column-name='deals_currency'>
<div class="panel-body"><i class='fa fa-money'></i> Currency</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='creation' data-column-name='deals_cr'>
<div class="panel-body"> <i class='fa fa-money'></i>Creation Date</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='notes' data-column-name='deals_Notes'>
<div class="panel-body"> <i class='fa fa-money'></i> Notes</div>
</div>
</div>
<div id="tabs-4" class="tabs">
<div class="panel panel-default custompanel dragged" data-field='name' data-column-name='customer_name'>
<div class="panel-body"><i class="fa fa-user"></i> Customer Name</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='phone' data-column-name='customer_phone'>
<div class="panel-body"> <i class="fa fa-user"></i> Phone</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='organization' data-column-name='customer_Organization_id'>
<div class="panel-body"><i class="fa fa-user"></i> Customer Organization</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='phone' data-column-name='customer_MP'>
<div class="panel-body"><i class="fa fa-user"></i> Mobile Phone</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='phone' data-column-name='customer_WP'>
<div class="panel-body"><i class="fa fa-user"></i> Work Phone</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='email' data-column-name='customer_email'>
<div class="panel-body"> <i class='fa fa-user'></i> Email</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='notes' data-column-name='customer_Notes'>
<div class="panel-body"> <i class='fa fa-user'></i> Notes</div>
</div>
</div>
<div id="tabs-3" class="tabs">
<div class="panel panel-default custompanel dragged" data-field='title' data-column-name='activity_title'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Title</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='organization' data-column-name='activity_Organization_id'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Organization</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='person' data-column-name='activity_contactperson'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Person</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='deal' data-column-name='activity_deal_id'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Deal</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='due' data-column-name='activity_start'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Due Date</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='done' data-column-name='activity_doneat'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Done at</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='due' data-column-name='activity_duration'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Due Duration</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='type' data-column-name='activity_Type'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Type</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='notes' data-column-name='activity_Notes'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Note</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='done' data-column-name='activity_checked'>
<div class="panel-body"><i class="fa fa-clock-o"></i> Done </div>
</div>
</div>
<div id="tabs-5" class="tabs">
<div class="panel panel-default custompanel dragged" data-field='notes' data-column-name='note_note'>
<div class="panel-body"><i class="fa fa-file-o"></i> Notes </div>
</div>
<div class="panel panel-default custompanel dragged" data-field='organization' data-column-name='note_Organization_id'>
<div class="panel-body"><i class="fa fa-file-o"></i> Organization</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='person' data-column-name='note_contactperson'>
<div class="panel-body"><i class="fa fa-file-o"></i> Person</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='deal' data-column-name='note_deal_id'>
<div class="panel-body"><i class="fa fa-file-o"></i> Deal</div>
</div>
<div class="panel panel-default custompanel dragged" data-field='creation' data-column-name='note_start'>
<div class="panel-body"><i class="fa fa-file-o"></i> Creation Date</div>
</div>
</div>
<div id="tabs-6" style='display: none;padding: 15px;max-height: 300px;min-height: 300px;overflow: auto'>
</div>
</div>
</div>
</div>
<div style="display: none;" id=importbtn>
<a class="importdatadb btn btn-complete">Import</a> 
<a class="cancelimport btn btn-default" style="margin-top:10px">Cancel</a>
</div>
-->
        </div>
    </div>
</div>
