Documentation and examples for opt-in styling of tables.
Product | SNX SKU# | Unit MSRP (USD) | Reseller Unit Price (USD) | Quantity | Warehouse | Reseller Ext. Unit Price (USD) |
---|---|---|---|---|---|---|
Azure Active Directory Premium P1 | 4126746 | 6.00 | 5.28 |
|
|
0.00 |
Azure Active Directory Premium P2 | 4126746 | 6.00 | 5.28 |
|
|
0.00 |
Azure Information Protection Premium P1 | 4126746 | 6.00 | 5.28 |
|
|
0.00 |
Azure Advanced Threat Protect for Users | 4126746 | 6.00 | 5.28 |
|
|
0.00 |
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="right-navtab">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
aria-labelledby="v-pills-home-tab">
<div class="ad-ip-table table-responsive bundle-config-table list-view-tile summary-tab-table">
<table class="table position-relative custom-table">
<thead class="thead-light">
<tr>
<th> </th>
<th>
<div class="column-expansion">
<span></span>
<a href="javascript:void(0);">
<i class="icon-expand-col expandCols"
data-toggle="tooltip" data-placement="top" title=""
data-original-title="Expand Columns"></i>
</a>
</div>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="main-header">
<th scope="col" width="17%">Product </th>
<th scope="col" width="9%" class="sku-section-collapsed text-center">SNX SKU#
</th>
<th scope="col" width="9%" class="sku-section-expanded"
style="display: none;">MFG Part# </th>
<th scope="col" width="10%" style="display: none;" class="sku-last-col">SNX Part#</th>
<th scope="col" width="8%" class="text-right">Unit MSRP <span
class="price-denom">(USD)</span></th>
<th scope="col" width="9%" class="text-right">Reseller Unit Price <span
class="price-denom">(USD)</span></th>
<th scope="col" width="13%" class="text-center">Quantity</th>
<th scope="col" width="12%" class="text-left">Warehouse</th>
<th scope="col" width="8%" class="text-right">Reseller Ext. Unit Price <span
class="price-denom">(USD)</span></th>
</tr>
</thead>
<tbody>
<tr class="prod-row">
<td><a href="" class="text-long" data-original-title="">Azure Active Directory
Premium P1</a>
</td>
<td class="text-center">4126746 </td>
<td style="display: none;"><span>E75DF1927F27</span> </td>
<td style="display: none;"><span>MST-E75DF1927F27 </span> </td>
<td class="text-right">6.00 </td>
<td class="text-right resellerDisc">
<span class="original-value">5.28 </span>
<span class="applied-discount-value" style="display: none;">
<!-- <span class="line-through">5.28 </span> -->
<span class="priceValue"><span class="redTxt">4.00</span></span>
</span>
</td>
<td class="text-center">
<div class="input-group snippet-group position-relative">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number disabled"
data-type="minus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title=""
data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number"
value="00">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
</td>
<td>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Select</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">0.00</td>
</tr>
<tr class="addOnRow addon-shadow" style="display: none;">
<td colspan="9" class="p-0 border-0">
<div class="add-on-section toggle-box closed">
<div class="mb-2">
<a href="javascript:void(0)" class="add-ons toggleAddOn active">
<i class="icon-arrow-bottom" data-toggle="tooltip"
data-placement="top" title=""
data-original-title="Expand"></i> <span>Add Ons (2)</span>
</a>
<span class="border-dash"></span>
</div>
<div class="addOnTable" style="display: none;">
<table class="table sub-prod-table" style="display: none;">
<tbody>
<tr>
<td width="40%"><a href="">MST Stream P2 for O365 Add-On</a>
</td>
<td width="11%" class="text-right">24.40</td>
<td width="15%" class="text-center">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
</td>
<td width="10%" class="text-right">24.40</td>
</tr>
<tr>
<td width="40%"><a href="">Office 365 Extra File Storage</a>
</td>
<td width="11%" class="text-right">10.08</td>
<td width="15%" class="text-center">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="5">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
</td>
<td width="10%" class="text-right">50.40</td>
</tr>
</tbody>
</table>
<div class="row add-on-tiles data col-custom-padding" tabindex="6"
style="overflow-y: hidden; outline: none;">
<div class="col-3 sub-add-on">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Office 365 Business Premium
</h6>
</div>
<div class="price-value">
$10.50 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 addToCart selected"><i
class="icon-tick" ></i> <i class="icon-cart"></i><span class="txt">Added</span></button>
</div>
</div>
</div>
<div class="col-3 sub-add-on">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Skype for Business PSTN
Domestic Calling
</h6>
</div>
<div class="price-value">
$2.60 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 addToCart selected"><i
class="icon-tick" ></i><i class="icon-cart"></i> <span class="txt">Added</span></button>
</div>
</div>
</div>
<div class="col-3 sub-add-on">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">MST Stream P2 for O365 Add-On
</h6>
</div>
<div class="price-value">
$180.40 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 addToCart"><i
class="icon-tick"></i> <i class="icon-cart"></i><span class="txt">Add to Cart</span></button>
</div>
</div>
</div>
<div class="col-3 sub-add-on">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Office 365 Extra File Storage
</h6>
</div>
<div class="price-value">
$12.35 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 addToCart"><i
class="icon-tick"></i> <i class="icon-cart"></i><span class="txt">Add to Cart</span></button>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Office 365 Business Premium
</h6>
</div>
<div class="price-value">
10.50 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Skype for Business PSTN
Domestic Calling
</h6>
</div>
<div class="price-value">
24.40 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">MST Stream P2 for O365 Add-On
</h6>
</div>
<div class="price-value">
10.08 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Office 365 Extra File Storage
</h6>
</div>
<div class="price-value">
4.80 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Office 365 Business Premium
</h6>
</div>
<div class="price-value">
10.50 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Skype for Business PSTN
Domestic Calling
</h6>
</div>
<div class="price-value">
24.40 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">MST Stream P2 for O365 Add-On
</h6>
</div>
<div class="price-value">
10.08 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="col-3 showAll sub-add-on mt-2" style="display: none;">
<div class="product-tile new-arrivals">
<div class="tiles-icon">
<img src="images/microsoft-icon.png">
<h6 class="arrival-heading">Office 365 Extra File Storage
</h6>
</div>
<div class="price-value">
4.80 <span>Per User/month</span>
</div>
<div class="tile-footer group-footer">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="minus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]"
class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]"
data-toggle="tooltip" data-placement="top"
title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
<button type="button"
class="btn btn-primary w-50 disabled">Add</button>
</div>
</div>
</div>
<div class="col-12">
<a href="javascript:void(0);"
class="float-right mt-2 view-all">View More</a>
<a href="javascript:void(0);"
class="float-right mt-2 view-less "
style="display: none;">View Less</a>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="prod-row">
<td><a href="" class="text-long">Azure Active Directory Premium P2</a>
<span class="infoIcon" style="display: none;"><i
class="icon-info-blue"></i> <i class="icon-flyout-arrow"><span
class="path1"></span><span class="path2"></span></i></span>
</td>
<td class="text-center">4126746 </td>
<td style="display: none;"><span>E75DF1927F27</span> </td>
<td style="display: none;"><span>MST-E75DF1927F27</span> </td>
<td class="text-right">6.00 </td>
<td class="text-right">5.28 </td>
<td class="text-center">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number disabled"
data-type="minus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title=""
data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number"
value="00">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
</td>
<td>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Select</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">0.00</td>
</tr>
<tr class="row-alert infoRow" style="display: none;">
<td colspan="9">
<span class="info-msg">The service exists in the existing contract and will
use the payment method set by the contract. The rest will use the
current payment method of choice.</span>
<a href="javascript:void(0);"><i class="icon-cross-s closeRow"></i></a>
</td>
</tr>
<tr class="prod-row">
<td><a href="" class="text-long">Azure Information Protection Premium P1</a>
<span class="errorIcon" style="display: none;"><i
class="icon-error-fill"></i> <i class="icon-flyout-arrow"><span
class="path1"></span><span class="path2"></span></i></span>
</td>
<td class="text-center">4126746 </td>
<td style="display: none;"><span>E75DF1927F27</span> </td>
<td style="display: none;"><span>MST-E75DF1927F27</span> </td>
<td class="text-right">6.00 </td>
<td class="text-right">5.28 </td>
<td class="text-center">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number disabled"
data-type="minus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title=""
data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number"
value="00">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
</td>
<td>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Select</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">0.00</td>
</tr>
<tr class="row-alert errorRow" style="display: none;">
<td colspan="9">
<span class="error-message errWithCust"> The specified service already
exists for the customer. Please go to Subscription Management and choose
the Contract Number <span class="text-blue">1052108</span> to edit/add
more service line(s).</span>
<span class="error-message errWithoutCust">The following services already
exist for the selected customer, please got to Subscription Management,
choose the contract number <span class="text-blue">1052108</span>, click
Edit at the service Line(s) and Click “Add Qty”. </span>
<a href="javascript:void(0);"><i class="icon-cross-s closeRow"></i></a>
</td>
</tr>
<tr class="prod-row">
<td><a href="" class="text-long">Azure Advanced Threat Protect for Users</a>
</td>
<td class="text-center">4126746 </td>
<td style="display: none;"><span>E75DF1927F27</span> </td>
<td style="display: none;"><span>MST-E75DF1927F27</span> </td>
<td class="text-right">6.00 </td>
<td class="text-right">5.28 </td>
<td class="text-center">
<div class="input-group snippet-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number disabled"
data-type="minus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title=""
data-original-title="Delete Quantity">
<img src="images/minus-icon.png">
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number"
value="00">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number"
data-type="plus" data-field="quant[1]" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Add Quantity">
<i class="icon-plus"></i>
</button>
</span>
</div>
</td>
<td>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Select</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>Select</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">0.00</td>
</tr>
</tbody>
</table>
</div>
<nav aria-label="navigation" class="pagination-col pagination-disabled">
<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>
<ul class="table-count-list m-auto">
<li class="left-arrow"><a href="javascript:void(0);"><i
class="icon-arrow-right"></i></a></li>
<li class="active"><a href="javascript:void(0);"><span>1</span></a></li>
<li class="right-arrow"><a href="javascript:void(0);"><i
class="icon-arrow-right"></i></a></li>
</ul>
<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>
</div>
</div>