<div class="row">
  <div class="config-tabs mx-auto">
     <div class="custom-tab-col">
        <div class="overview-tabs m-0 mx-auto action-tabs">
           <a href="javascript:void(0);" class="active" data-active="configuration">Configurations</a>
           <a href="javascript:void(0);" data-active="quotes" class="prod">Quotes</a>
        </div>
     </div>
  </div>
     
  <div class="col-12" id="myTabContent">
     <div class="   selectedTab configuration" id="configuration" >
        <h1 class="prod-tile-head mt-3">Saved Configurations</h1>
        <div class="row my-3 align-items-center">
           <div class="col-auto pr-0 filter-btn" style="display: none;">
              <button type="button" class="btn btn-outline filterBtn">
              <i class="icon-filter"></i> Filters <span class="count" style="display: none;">(<span class="filterCount">0</span>)</span>
              </button>
           </div>
           <div class="col-md-6 input-group align-items-center customer-search">
              <div class="search-w-dropdown">
                 <i class="icon-search"></i>
                 <div class="input-group-prepend">
                    <button type="button" class="btn btn-outline-secondary dropdown-toggle cust-dropdown" data-toggle="dropdown">
                    <span>Contract Number</span> <i class="icon-arrow-bottom ml-auto"></i>
                    </button>
                   <div class="dropdown-menu">
                       <a class="dropdown-item" href="#">Contract Number</a>
                       <a class="dropdown-item" href="#">Customer Name</a>
                       <a class="dropdown-item" href="#">Contract Status</a>
                       <a class="dropdown-item" href="#">Invoice Number</a>
                       <a class="dropdown-item" href="#">Reseller PO</a>
                       <a class="dropdown-item" href="#">Customer PO</a>
                       <a class="dropdown-item" href="#">Service Name</a>
                       <a class="dropdown-item" href="#">Vendor Name</a>
                    </div>
                 </div>
                 <span class="border-mid-sep">|</span>
                 <input type="text" class="form-control cust-input-search" placeholder="Search">
              </div>
           </div>
           <div class="col-auto pl-0 d-none">
              <a class="refine-link" href="javascript:void(0);"><i class="icon-refine"></i> <span class="ml-1 ">Refine</span></a>
           </div>
          
        </div>
        <div class="applied-filter mb-3"  style="display: none;">
           <div class="filterResDiv">
           <span class="filter-head">Applied Filters</span>
        </div>
           <div class="applied-filter-right "><a class="clearAllFilter" href="javascript:void(0);"><span>Clear All</span></a> </div>
           <div class="filter-more" style="display: none;">
              <span class='viewMoreFilter'>View More <i class="icon-arrow-bottom"></i></span> <span class='viewLessFilter'>View Less <i class="icon-arrow-bottom"></i></span>
            </div>
        </div>
        <div class="list-view-tile summary-tab-table">
        <table class="table custom-table">
           <thead class="thead-light">
              <tr>
                 <th scope="col">Config#</th>
                 <th scope="col">Config Name</th>
                 <th scope="col">Customer Name</th>
                 <th scope="col">Description</th>
                 <th scope="col">Created</th>
                 <th scope="col">Actions</th>
              </tr>
           </thead>
           <tbody>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">Microsoft Office 365</a>
                 <td>Acme Co.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">Microsoft</a>
                 <td>Barone LLC.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">G-Suite</a>
                 <td>Biffco Enterprises Ltd.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">Google Workspace</a>
                 <td>Big Kahuna Burger Ltd.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/20200</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">Office 365</a>
                 <td>Binford Ltd.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">Dropbox</a>
                 <td>Barone LLC.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">G-Suite</a>
                 <td>Biffco Enterprises Ltd.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">G-Suite</a>
                 <td>Google Workspace</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">Google Workspace</a>
                 <td>Big Kahuna Burger Ltd.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/20200</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
              <tr>
                 <td>20201214070655|3KiZaH@6~qK2 </td>
                 <td><a href="javascript:void(0);">Dropbox</a>
                 <td>Binford Ltd.</td>
                 <td>Office 365 configuration for Digital Signature Service</td>
                 <td>06/28/2020</td>
                 <td>
                    <a href="javascript:void(0);"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit"></i></a>
                    <a href="javascript:void(0);" data-toggle="modal" data-target="#alertModal"><i class="icon-delete ml-2" data-toggle="tooltip" data-placement="top" title="Delete"></i></a>
                 </td>
              </tr>
           </tbody>
        </table>
     </div>
        <nav aria-label="navigation" class="pagination-col">
           <span class="item-dropdown-col">
              View
              <div class="items-dropdown">
                 <i class="icon-arrow-bottom"></i>
                 <select>
                    <option>5</option>
                    <option>10</option>
                    <option>15</option>
                    <option>20</option>
                 </select>
              </div>
              <span class="view-text">Items Per Page</span>
           </span>
           <div class="pagination-holder m-auto">
           </div>
           <ul class="next-prev-page">
              <li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
              <li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
              <li><span class="page-count">1 of 12</span></li>
              <li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
              <li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
           </ul>
        </nav>
     </div>
     <div class=" selectedTab quotes" id="quotes"   style="display: none;">
        <h1 class="prod-tile-head mt-3">Saved Quotes</h1>
        <div class="row my-3 align-items-center">
           <div class="col-auto pr-0 filter-btn" style="display: none;">
              <button type="button" class="btn btn-outline filterBtn">
              <i class="icon-filter"></i> Filters
              </button>
           </div>
           <div class="col-md-6 input-group align-items-center customer-search">
              <div class="search-w-dropdown">
                 <i class="icon-search"></i>
                 <div class="input-group-prepend">
                    <button type="button" class="btn btn-outline-secondary dropdown-toggle cust-dropdown" data-toggle="dropdown">
                    <span>Contract Number</span> <i class="icon-arrow-bottom ml-auto"></i>
                    </button>
                    <div class="dropdown-menu">
                       <a class="dropdown-item" href="#">Contract Number</a>
                       <a class="dropdown-item" href="#">Customer Name</a>
                       <a class="dropdown-item" href="#">Contract Status</a>
                       <a class="dropdown-item" href="#">Invoice Number</a>
                       <a class="dropdown-item" href="#">Reseller PO</a>
                       <a class="dropdown-item" href="#">Customer PO</a>
                       <a class="dropdown-item" href="#">Service Name</a>
                       <a class="dropdown-item" href="#">Vendor Name</a>
                    </div>
                    
                 </div>
                 <span class="border-mid-sep">|</span>
                 <input type="text" class="form-control cust-input-search" placeholder="Search">
              </div>
           </div>
           <div class="col-auto pl-0 d-none">
              <a class="text-secondary refine-link" href="javascript:void(0);"><i class="icon-refine"></i> <span class="ml-1 ">Refine</span></a>
           </div>
          
        </div>
        <div class="list-view-tile summary-tab-table">
        <table class="table custom-table">
           <thead class="thead-light">
              <tr>
                 <th scope="col">Confirmation#</th>
                 <th scope="col">Reconfig</th>
                 <th scope="col">Reseller PO#</th>
                 <th scope="col">Customer PO#</th>
                 <th scope="col">PO Date</th>
                 <th scope="col" class="text-right">PO Total <span class="price-denom">(USD)</span></th>
                 <th scope="col">PO Status</th>
                 <th scope="col">Created By</th>
                 <th scope="col">Invoice</th>
              </tr>
           </thead>
           <tbody>
              <tr>
                 <td>1047277744</td>
                 <td><a href="javascript:void(0);">Reconfig</a></td>
                 <td>123456</td>
                 <td>--</td>
                 <td>07/31/2020</td>
                 <td class="text-right">11.00</td>
                 <td><span class="cancel-lbl">Cancelled</span></td>
                 <td>--</td>
                 <td>--</td>
              </tr>
              <tr>
                 <td>1047345617</td>
                 <td><a href="javascript:void(0);">Reconfig</a></td>
                 <td>12321DS</td>
                 <td>--</td>
                 <td>07/31/2020</td>
                 <td class="text-right">11.00</td>
                 <td><span class="cancel-lbl">Cancelled</span></td>
                 <td>David Zhang</td>
                 <td>--</td>
              </tr>
           </tbody>
        </table>
     </div>
        <nav aria-label="navigation" class="pagination-col ">
           <span class="item-dropdown-col">
              View
              <div class="items-dropdown">
                 <i class="icon-arrow-bottom"></i>
                 <select>
                    <option>5</option>
                    <option>10</option>
                    <option>15</option>
                    <option>20</option>
                 </select>
              </div>
              <span class="view-text">Items Per Page</span>
           </span>
           <div class="pagination-holder m-auto">
           </div>
           <ul class="next-prev-page">
              <li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
              <li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
              <li><span class="page-count">1 of 12</span></li>
              <li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
              <li class="last-page"><a href="javascript:void(0);">Last <i class="icon-left-arrow-double pr-1"></i></a></li>
           </ul>
        </nav>
     </div>
     
  </div>
</div>