Modal

<div class="modal fade show aha-card-modal aui-quickviewpopup" id="modal1" tabindex="-1" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg aha-card-modal" >
        <div class="modal-content">
            <div class="aui-quik-close d-flex">
                <button type="button" class="close aha-modal-close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="row no-gutters align-items-start">
                    <div class="col-12 col-sm-3 modal-head-img">
                        <img src="..." class="mx-auto mx-sm-0 modal-card-img col-sm-12 p-0 d-block" alt="card head" />
                    </div>
                    <div class="col-12 col-sm-9 modal-card-body">
                        <div class="d-block modal-card-title p-0 mb-4">
                            <h3 class="h3 m-0" aria-describedby="BLS Course Videos in Streaming Format (for Instructors)">BLS Course Videos in Streaming Format (for Instructors)</h3>
                        </div>
                        <div class="modal-card-detail d-flex mb-2">
                            <div aria-describedby="Product Number : 15-1414">Product Number : 15-1414</div>
                            <div class="aui-lft-line" aria-describedby="ISBN : 978-1-61669-643-6">ISBN: 978-1-61669-653-5</div>
                        </div>
                        <div class="py-2 py-sm-3 aui-quickviw-label">
                            <div class="tag" aria-label="Heartsaver"><img src="..." alt="heart saver" /><span>Heartsaver</span></div>
                            <div class="tag" aria-label="eLearning"><img src="..." alt="heart saver" /><span>eLearning</span></div>
                            <div class="tag" aria-label="Online Course"><img src="..." alt="heart saver" /><span>Online Course</span></div>
                            <div class="tag" aria-label="Online Course"><img src="..." alt="heart saver" /><span>Online Course</span></div>
                        </div>
                        <div class="aui-sec-id">
                            <p class="m-0"><label for="securityId">Security ID:</label><input type='text' id="securityId" /><span class="aui-verifytxt">Verify</span></p>
                        </div>
                        <div class="aui-quickviw-ship mt-4">
                            <p class="m-0">INTERNATIONAL shipping to addresses outside the United State is not available at this time.</p>
                        </div>
                        <div class="row mt-3 mt-sm-5">
                            <div class="aui-quickpop-bot d-flex col-12 col-sm-12 justify-content-between align-items-center flex-row-reverse flex-sm-row">
                                <div class="aui-quickviw-price">
                                    <span class="modal-card-price">$ 200</span>
                                    <span class="modal-card-spec-price ml-3">$ 350</span>
                                </div>
                                <div class="form-inline flex-nowrap">
                                    <label class="mr-3" for="inlineFormCustomSelect">Quantity</label>
                                    <select class="custom-select form-control-sm pl-3 pr-4" id="inlineFormCustomSelect">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                    </select>
                                </div>
                                <div class="d-flex justify-content-end mt-4 mt-lg-0">
                                    <button type="button" class="btn btn-round btn-primary modal-addcart" aria-label="Add to Cart">Add to Cart</button>
                                </div> 
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade show" id="modal-card" tabindex="-1" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg aha-card-modal">
        <div class="modal-content">
            <div class="modal-body p-0">
                <button type="button" class="close aha-modal-close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div class="row no-gutters">
                    <div class="col-12 col-sm-4 modal-head-img">
                        <img src="..." class="mx-auto mx-sm-0 modal-card-img col-sm-12 p-0 d-block" alt="card head" />
                    </div>
                    <div class="col-12 col-sm-8 modal-card-body">
                        <a href="#" class="d-block modal-card-title p-0 pr-sm-5 mb-2">
                            <h3 class="h3" aria-describedby="BLS Course Videos in Streaming Format (for Instructors)">BLS Course Videos in Streaming Format (for Instructors)</h3>
                        </a>
                        <div class="modal-card-detail">
                            <div class="mb-2">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade show aui-modal" id="modalTemplate3" tabindex="-1" aria-labelledby="modalTitle" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="modalTitle">Upload Documents</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" class="aha-icon-cross"></span>
            </button>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-group row required">
                    <label for="title" class="col-md-5">Title</label>
                    <div class="col-md-7">
                        <input required class="form-control" type="text" id="title" />
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="selectProgram" class="col-md-5">Selected Program</label>
                    <div class="col-md-7">
                        <input required class="form-control" type="text" id="selectProgram" value="Primary" disabled />
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="selectStd" class="col-md-5">Select Standard</label>
                    <div class="col-md-7">
                    <select class="form-control" id="selectStd">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    </div>
                </div>
                <div class="form-group row required">
                    <label for="description" class="col-md-5">Description</label>
                    <div class="col-md-7">
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="message" class="col-md-5">Message (If any)</label>
                    <div class="col-md-7">
                        <textarea class="form-control" id="message" rows="3"></textarea>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <div class="col-md-7 offset-md-5">
                <button class="btn btn-primary btn-round">Submit</button>
            </div>
        </div>
    </div>
</div>
</div>

<div class="modal fade show aui-modal" id="modalTemplate4" tabindex="-1" aria-labelledby="modalLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
        <div class="modal-body p-0">
            <div class="text-center">
                <p>Are you sure you want to delete this file?</p>
                <div class="mt-4">
                    <button class="btn btn-primary btn-round btn-sm mx-2">Yes</button>
                    <button class="btn btn-secondary btn-round btn-sm mx-2" data-dismiss="modal" aria-label="Close">No</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div class="modal fade show aui-org-modal aui-modal" id="modaltemplate5" tabindex="-1" aria-labelledby="ordermodal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h1 class="h4" id="ordermodal">Who are you ordering for today?</h1>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true" class="aha-icon-cross"></span>
            </button>
        </div>
        <div class="modal-body p-0">
            <p>If you do to see your Training Center or company below, you can select Myself or create a new organization account.</p>
            <div class="mt-4" role="radiogroup">
                <div class="form-group form-radio">
                    <input type="radio" name="radio" id="opt1" value="opt1" />
                    <label for="opt1">None. I'm buying for myself</label>
                </div>
                <div class="form-group form-radio">
                    <input type="radio" name="radio" id="opt2" value="opt2" />
                    <label for="opt2">Columbia Asia</label>
                </div>
                <div class="form-group form-radio">
                    <input type="radio" name="radio" id="opt3" value="opt3" />
                    <label for="opt3">Company A</label>
                </div>
                <div class="form-group form-radio">
                    <input type="radio" name="radio" id="opt4" value="opt4" />
                    <label for="opt4">Company B</label>
                </div>
                <div class="form-group form-radio">
                    <input type="radio" name="radio" id="opt5" value="opt5" />
                    <label for="opt5">Create New Organization</label>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary btn-round">Continue</button>
        </div>
    </div>
</div>
</div>

<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="orgNew" tabindex="-1" aria-labelledby="orgModal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="orgModal">New Organization</h4>
        </div>
        <form>
            <div class="modal-body p-0">
                <p>Enter or select your AHA Training Center ID number</p>
                <div class="form-group row required">
                    <label class="col-md-5 col-lg-4 col-form-label" for="trainingCenterId">Training Center ID Number</label>
                    <div class="col-md-7 col-lg-8">
                    <input type="text" class="form-control" id="trainingCenterId" required />
                    </div>
                </div>
            </div>
            <div class="modal-footer mt-4">
                <div class="w-100">
                    <div class="d-flex flex-row-reverse mb-4">
                        <button class="btn btn-primary btn-round">Next</button>
                        <button class="btn btn-secondary btn-round mr-4">Cancel</button>
                    </div>
                    <div class="d-flex flex-row-reverse">
                        <a href="#" class="font-red">I don't have a TC ID Number <i class="aha-icon-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="newOrganizationModal" tabindex="-1" aria-labelledby="newOrgModal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="newOrgModal">New Organization</h4>
        </div>
        <form>
            <div class="modal-body p-0">
                <div class="form-group row required">
                    <label class="col-md-5 col-lg-4 col-form-label" for="companyName">Company Name</label>
                    <div class="col-md-7 col-lg-8">
                    <input type="text" class="form-control" id="companyName" required />
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-5 col-lg-4 col-form-label" for="UsTaxId">US Tax ID</label>
                    <div class="col-md-7 col-lg-8">
                    <input type="text" class="form-control" id="UsTaxId" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="select" class="col-md-5 col-lg-4 col-form-label" for="taxStatus">Tax Exempt Status</label>
                    <div class="col-md-7 col-lg-8">
                        <select class="form-control" id="taxStatus">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer mt-4">
                <div class="w-100">
                    <div class="d-flex flex-row-reverse">
                        <button class="btn btn-primary btn-round">Next</button>
                        <button class="btn btn-secondary btn-round mr-4">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="modal2" tabindex="-1" aria-labelledby="newOrgModalTitle" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="newOrgModalTitle">New Organization</h4>
        </div>
        <form>
            <div class="modal-body p-0">
                <div class="d-block mb-4">Do you have a <a>Training Central</a> account? Please enter the Training Center Purchase code you would you like to use for <b>Company AB</b>. This allows us to automatically send your eLearning and eBook inventory to your Training Central account after Purchase.</div>
                <div class="form-group row">
                    <label for="select" class="col-md-5 col-lg-4 col-form-label" for="purchaseCode">Purchase Code</label>
                    <div class="col-md-7 col-lg-8">
                        <select class="form-control" id="purchaseCode">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer mt-4">
                <div class="w-100">
                    <div class="d-flex flex-row-reverse mb-4">
                        <button class="btn btn-primary btn-round">Next</button>
                        <button class="btn btn-secondary btn-round mr-4">Cancel</button>
                    </div>
                    <div class="d-flex flex-row-reverse">
                        <a href="#" class="font-red">I don't have a TC ID Number <i class="aha-icon-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="org9" tabindex="-1" aria-labelledby="newOrgModalTitle1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="newOrgModalTitle1">New Organization</h4>
        </div>
        <form>
            <div class="modal-body p-0">
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label for="billTo">Bill To</label>
                        <input type="text" class="form-control" id="billTo" />
                    </div>
                    <div class="col-sm-6">
                        <label for="department">Department</label>
                        <input type="text" class="form-control" id="department" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6 aui-required">
                        <label for="billingEmailAddress">Billing Email Address</label>
                        <input type="text" class="form-control" id="billingEmailAddress" />
                    </div>
                    <div class="col-sm-6">
                        <label for="billingEmailAddressCC">Billing Email CC</label>
                        <input type="text" class="form-control" id="billingEmailAddressCC" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6 aui-required">
                        <label for="phNo">Phone Number</label>
                        <input type="text" class="form-control" id="phNo" />
                    </div>
                    <div class="col-sm-6 aui-required">
                        <label for="streetAddress">Street Address</label>
                        <input type="text" class="form-control" id="streetAddress" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label for="aptSuites">Apt, Suites, Others</label>
                        <input type="text" class="form-control" id="aptSuites" />
                    </div>
                    <div class="col-sm-6">
                        <label for="inputCity">City</label>
                        <input type="text" class="form-control" id="inputCity" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6 aui-required">
                        <label for="stateRegion">State/Region</label>
                        <select class="form-control" id="stateRegion">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="col-sm-6 aui-required">
                        <label for="inputLastname">Postal Code</label>
                        <input type="number" class="form-control" id="inputLastname" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6 aui-required">
                        <label for="inputCountryName">Country</label>
                        <select class="form-control" id="inputCountryName">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer mt-4">
                <div class="w-100">
                    <div class="d-flex flex-row-reverse">
                        <button class="btn btn-primary btn-round">Next</button>
                        <button class="btn btn-secondary btn-round mr-4">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="tncModal" tabindex="-1" aria-labelledby="tncModal" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="tncModal">Terms and Condition</h4>
        </div>
        <form>
            <div class="modal-body p-0">
                <div class="d-flex mb-4">Please accept the Terme and Condition and Privacy Policy to continue.</div>
                <div class="form-group form-radio">
                    <input type="radio" name="radio" id="radio1" value="option1" />
                    <label for="radio1">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </label>
                </div>
                <div class="form-group form-radio">
                    <input type="radio" name="radio" id="radio2" value="option2" />
                    <label for="radio2">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </label>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" value="" id="check1" />
                    <label for="check1">
                        Send me communication about AHA training and products for CPR and first aid.
                    </label>
                </div>
            </div>
            <div class="modal-footer mt-4">
                <div class="w-100">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary btn-round">Accept and Continue</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<div class="modal fade show aui-org-modal aui-new-org aui-modal" id="cc" tabindex="-1" aria-labelledby="modalLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="modalLabel">Warning: Credit Card Purchase Limit</h4>
        </div>
        <form>
            <div class="modal-body p-0">
                <div class="d-flex flex-wrap mb-4">Your cart subtotal has exceeded the maximum allowed credit card purchase amount of <b class="mx-2">$10,000.00</b>. Please remove items from your cart, or for eligible accounts, select the invoicing option at checkout.</div>
            </div>
            <div class="modal-footer mt-4">
                <div class="w-100">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary btn-round">Continue</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

 <div class="modal fade show aui-org-modal aui-new-org aui-modal aui-cc-number" id="midalId" tabIndex="-1" aria-labelledby="cc-title" aria-modal="true" role="dialog">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
    <div class="modal-header"><h4 class="h4" id="cc-title">Credit Card Details</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="aha-icon-cross"></span></button></div>
        <form>
        <div class="modal-body p-0">
        <div class="cc-detail-img mb-4 pb-3">
            <img src="..." class="img-fluid" role="presentation" alt="credit card image" />
        </div>
    <div class="form-group row">
        <div class="col-12 col-sm-12">
            <label for="cc-number">Credit Card Number<span class="cc-star"> *</span></label>
            <input type="text" class="form-control" id="cc-number" />
        </div> 
    </div>
    <div class="form-group row mt-4">
                    <label for="expirationDate" class="col-sm-12">Expiration Date<span class="cc-star"> *</span></label>
                    <div class="col-6 col-sm-4 col-lg-6">
                    <select class="form-control">
                        <option selected disabled>Month</option>
                        <option>January</option>
                        <option>February</option>
                        <option>July</option>
                        <option>November</option>
                        <option>December</option>
                    </select>
                    </div>
                    <div class="col-6 col-sm-4 col-lg-6">
                    <select class="form-control">
                        <option selected disabled>Year</option>
                        <option>2022</option>
                        <option>2023</option>
                        <option>2024</option>
                        <option>2025</option>
                        <option>2026</option>
                    </select>
                    </div>
                </div>
                <div class="form-group row mt-4">
            <label for="ccv-number" class="col-12 col-sm-12">Card Verification Number<span class="cc-star"> *</span></label>
            <div class="col-5 col-sm-3 col-lg-4">
            <input type="text" class="form-control" id="ccv-number" />
        </div>
        <div class="col-5 col-sm-5 pl-0 pl-sm-2">
        <img src="..." class="img-fluid cvv-img" role="presentation" alt="cvv help" />
        </div>
    </div>
    </div>
            <div class="modal-footer mt-4">
                <div class="w-100">
                    <div class="d-flex float-sm-right float-lg-none">
                        <button class="btn btn-primary btn-round btn-block">Submit Payment</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<div class="modal fade show aui-new-org aui-modal" id="midalId" tabIndex="-1" aria-labelledby="modalLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="h4" id="modalLabel">Log In To Checkout</h4>
        </div>
        <form>
            <div class="modal-body p-0">
                <div class="d-flex flex-wrap mb-4">Please Login or Register for a new account to continue with checkout</div>
            </div>
            <div class="modal-footer mt-4 border-0">
                <div class="w-100">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-link mr-5">Cancel</button>
                        <button class="btn btn-primary btn-round">Login or Register</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<div class="aui-search-section px-lg-2">
    <a class="icon-search search-item" href="#" tabIndex="0" role="search" aria-label="Search Product" data-toggle="modal" data-target="#searchModal">
        <div class="modal fade header-search-modal p-0" id="searchModal" aria-labelledby="searchModal" aria-hidden="true">
            <div class="w-100 mw-100 modal-dialog m-0">
                <div class="modal-content">
                    <div class="modal-header border-bottom-0">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body mb-5">
                        <div class="form-inline flex-nowrap search-field mx-auto">
                            <label class="mr-3" for="inlineFormCustomSelect">Search</label>
                            <div class="input-group flex-grow-1">
                                <input id="inlineFormCustomSelect" class="form-control" type="text" placeholder="Ex: Heart Attack Symptoms" />
                                <div class="input-group-append">
                                    <span class="input-group-text search-icon-bg" id="basic-text1"><i class="icon-search"
                                        aria-hidden="true"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
</div>