<div  class="row storefront-rightbar notification">
  <div class="col-md-12">
     <h1 class="profile-heading mt-4 mb-0">Notification Management</h1>
     <span class="notification-details">Specify the email address or email addresses to send a notification for each action listed. Multiple email addresses can be specified for each action. If no email address is specified then the system default address will be used for that action. Once a new email address is entered, be certain to press the Save button to save your changes.</span>
     <div class="row">
        <div class="col-md-12">
           <div class="expandall-col">
              <a href="javascript:void(0);" class="expandAll mt-0 ml-auto"><i class="icon-expandall"></i><span class="txt">Expand all</span></a>
           </div>
           <div class="gateway-accordion overflow-none mt-2" id="gatewayAccordion">
              <div class="accordion custom-accordion">
                 <div class="card">
                    <div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#contractProvision" aria-expanded="false" aria-controls="contractProvision">
                       <div class="card-heading mr-auto">
                          <h2>Contract Provisioned</h2>
                          <div class="heading-b-txt">When Contract Service provisioned, it will send a email to the receiver</div>
                       </div>
                       <i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#contractProvision" aria-expanded="false" aria-controls="contractProvision" data-original-title="Expand"></i>
                    </div>
                    <div id="contractProvision" class="contractProvision body collapse" aria-labelledby="contractProvision" data-parent="#gatewayAccordion" style="">
                       <!--card body start-->
                       <div class="card-body bg-none p-0 pt-2 mainTags ">
                          <label>Customer <span class="asterisk">*</span></label>
                          <a href="javascript:void(0)" class="clear-link disabled">Clear All</a>
                          <div class="multiple-add-col">
                             <div class="search-input-col reseller-input">
                                <div class="tooltip-flyout" style="display:none">
                                   <i class="icon-action-arrow"></i>
                                   <div class="tagsinput"><span class="tag"><span class="tag-text">445674, A ...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
                                      </span>
                                      <span class="tag"><span class="tag-text">34, AX(go. ...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
                                      </span>
                                      <span class="tag"><span class="tag-text">Azure  (/ge...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
                                      </span>
                                      <span class="tag"><span class="tag-text">37246, AZT..</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
                                      </span>
                                      <span class="tag"><span class="tag-text">World Expo...</span><a href="javascript:void(0)"><i class="icon-cross"></i></a>
                                      </span>
                                   </div>
                                </div>
                                <div class="admin-custom-dropdown" data-placeholderTxt = "Input multiple email addresses here. Use a spaces, commas, semi-colons to separate email addresses">
                                   <i class="icon-cross" style="display: none;"></i>
                                   <!-- <input type="text" class="form-control form-control-padding" placeholder="Enter or search reseller (You can select Multiple Resellers)"> -->
                                   <div class="price-select" >
                                      <div class="admin-tags"></div>
                                      <div class="multiselect-listing" style="display: none;">
                                         <a class="dropdown-item " href="javascript:void(0);">
                                            <div class="custom-control custom-checkbox">
                                               <input type="checkbox" class="custom-control-input" id="customCheck1" name="example1">
                                               <label class="custom-control-label" for="customCheck1">ABLE Manufacturing West Coast</label>
                                            </div>
                                         </a>
                                         <a class="dropdown-item " href="javascript:void(0);">
                                            <div class="custom-control custom-checkbox">
                                               <input type="checkbox" class="custom-control-input" id="customCheck2" name="example1">
                                               <label class="custom-control-label" for="customCheck2">Allard0402 Shen21</label>
                                            </div>
                                         </a>
                                         <a class="dropdown-item " href="javascript:void(0);">
                                            <div class="custom-control custom-checkbox">
                                               <input type="checkbox" class="custom-control-input" id="customCheck3" name="example1">
                                               <label class="custom-control-label" for="customCheck3">Alfonso Capizzo</label>
                                            </div>
                                         </a>
                                         <a class="dropdown-item " href="javascript:void(0);">
                                            <div class="custom-control custom-checkbox">
                                               <input type="checkbox" class="custom-control-input" id="customCheck4" name="example1">
                                               <label class="custom-control-label" for="customCheck4">Allied Towing Service INC </label>
                                            </div>
                                         </a>
                                         <a class="dropdown-item " href="javascript:void(0);">
                                            <div class="custom-control custom-checkbox">
                                               <input type="checkbox" class="custom-control-input" id="customCheck5" name="example1">
                                               <label class="custom-control-label" for="customCheck5">AZ Custom Coatings (UPG)</label>
                                            </div>
                                         </a>
                                         <a class="dropdown-item " href="javascript:void(0);">
                                            <div class="custom-control custom-checkbox">
                                               <input type="checkbox" class="custom-control-input" id="customCheck6" name="example1">
                                               <label class="custom-control-label" for="customCheck6">Aurora Township (SOIL)</label>
                                            </div>
                                         </a>
                                         <a class="dropdown-item " href="javascript:void(0);">
                                            <div class="custom-control custom-checkbox">
                                               <input type="checkbox" class="custom-control-input" id="customCheck11" name="example1">
                                               <label class="custom-control-label" for="customCheck11">Acuity INC</label>
                                            </div>
                                         </a>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="last-update-text mt-2">Last Updated: 07/02/2021 07:02:09 AM PDT</div>
                          <div class="footer-btn py-2">
                             <input type="button" class="btn btn-outline ml-auto canclNoti" value="Cancel">
                             <input type="button" class="btn btn-primary saveNotification" value="Save">
                          </div>
                       </div>
                       <!--card body end-->
                    </div>
                 </div>
              </div>
              <div class="accordion custom-accordion">
                 <div class="card">
                    <div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#contractChanged" aria-expanded="false" aria-controls="contractChanged">
                       <div class="card-heading mr-auto">
                          <h2>Contract Changed</h2>
                          <div class="heading-b-txt">When Contract Service Changed, it will send a email to the receiver</div>
                       </div>
                       <i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#contractChanged" aria-expanded="false" aria-controls="contractChanged" data-original-title="Expand"></i>
                    </div>
                    <div id="contractChanged" class="contractChanged body collapse" aria-labelledby="contractChanged" data-parent="#gatewayAccordion" style="">
                       <!--card body start-->
                       <div class="card-body bg-none p-0 pt-2">
                          <label>Customer <span class="asterisk">*</span></label>
                          <div class="multiple-add-col">
                             <input type="text" class="form-control" placeholder="Input multiple email addresses here. Use a spaces, commas, semi-colons to separate email addresses.">
                          </div>
                          <div class="last-update-text mt-2">Last Updated: 07/02/2021 07:02:09 AM PDT</div>
                       </div>
                       <!--card body end-->
                    </div>
                 </div>
              </div>
              <div class="accordion custom-accordion">
                 <div class="card">
                    <div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#consolidatedInvoice" aria-expanded="false" aria-controls="consolidatedInvoice">
                       <div class="card-heading mr-auto">
                          <h2>Consolidate Invoiced</h2>
                          <div class="heading-b-txt">When Consolidate Invoice generated, it will send a email to the receiver</div>
                       </div>
                       <i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#consolidatedInvoice" aria-expanded="false" aria-controls="consolidatedInvoice" data-original-title="Expand"></i>
                    </div>
                    <div id="consolidatedInvoice" class="consolidatedInvoice body collapse" aria-labelledby="consolidatedInvoice" data-parent="#gatewayAccordion" style="">
                       <!--card body start-->
                       <div class="card-body bg-none p-0 pt-2">
                          <label>Customer <span class="asterisk">*</span></label>
                          <div class="multiple-add-col">
                             <input type="text" class="form-control" placeholder="Input multiple email addresses here. Use a spaces, commas, semi-colons to separate email addresses.">
                          </div>
                          <div class="last-update-text mt-2">Last Updated: 07/02/2021 07:02:09 AM PDT</div>
                       </div>
                       <!--card body end-->
                    </div>
                 </div>
              </div>
              <div class="accordion custom-accordion">
                 <div class="card">
                    <div class="card-header p-0 collapsed" data-toggle="collapse" data-target="#contractRenewal" aria-expanded="false" aria-controls="contractRenewal">
                       <div class="card-heading mr-auto">
                          <h2>Contract Renewal</h2>
                          <div class="heading-b-txt">When Consolidate Invoice generated, it will send a email to the receiver</div>
                       </div>
                       <i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#contractRenewal" aria-expanded="false" aria-controls="contractRenewal" data-original-title="Expand"></i>
                    </div>
                    <div id="contractRenewal" class="contractRenewal body collapse" aria-labelledby="contractRenewal" data-parent="#gatewayAccordion" style="">
                       <!--card body start-->
                       <div class="card-body bg-none p-0 pt-2">
                          <label>Customer <span class="asterisk">*</span></label>
                          <div class="multiple-add-col">
                             <input type="text" class="form-control" placeholder="Input multiple email addresses here. Use a spaces, commas, semi-colons to separate email addresses.">
                          </div>
                          <div class="last-update-text mt-2">Last Updated: 07/02/2021 07:02:09 AM PDT</div>
                       </div>
                       <!--card body end-->
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>